Merge branch 'feature/bookmark-new-tab'

README.md

@@ -71,6 +71,7 @@ $ yarn serve:production
 ```
 
 ### Manual install
+
 ```bash
 $ git clone https://github.com/phntxx/dashboard.git
 $ cd dashboard/
@@ -80,6 +81,7 @@ $ cp -R build/* .
 ```
 
 #### `/etc/nginx/conf.d/dashboard.conf`
+
 ```
 server {
         server_name localhost;
@@ -101,8 +103,6 @@ $ chown -R www-data:www-data
 $ systemctl nginx reload
 ```
 
-
-
 ## Configuration
 
 There's a couple of things you can / need to configure to get Dashboard to look and behave just as you want it to.
@@ -125,7 +125,8 @@ To show the apps you want to show, change `apps.json` to resemble the following:
           "name": "[Name of the app]",
           "displayURL": "[URL you want to show]",
           "url": "[URL to redirect to]",
-          "icon": "[Icon code]"
+          "icon": "[Icon code]",
+          "newTab": true
         },
         ...
       ]
@@ -137,7 +138,8 @@ To show the apps you want to show, change `apps.json` to resemble the following:
       "name": "[Name of the app]",
       "displayURL": "[URL you want to show]",
       "url": "[URL to redirect to]",
-      "icon": "[Icon code]"
+      "icon": "[Icon code]",
+      "newTab": false
     },
     ...
   ]
@@ -145,6 +147,7 @@ To show the apps you want to show, change `apps.json` to resemble the following:
 ```
 
 Wherein either `apps` or `categories` can be omitted as needed.
+`newTab` is optional and defaults to `false`.
 
 To find icons, simply go to the [Material Design Icon Library](https://material.io/icons/) and copy one of the codes for an icon there.
 
@@ -160,7 +163,8 @@ To show bookmarks, `bookmarks.json` needs to resemble the following:
       "items": [
         {
           "name": "[Bookmark Name]",
-          "url": "[Bookmark URL]"
+          "url": "[Bookmark URL]",
+          "newTab": true
         },
         ...
       ]
@@ -170,6 +174,8 @@ To show bookmarks, `bookmarks.json` needs to resemble the following:
 }
 ```
 
+`newTab` is optional and defaults to `false`.
+
 ### Themes
 
 In order to customize theming, `themes.json` needs to resemble this:

src/components/bookmarks.tsx

@@ -14,7 +14,7 @@ const GroupContainer = styled.div`
   padding: 1rem 0;
 `;
 
-const Bookmark = styled.a`
+const BookmarkElement = styled.a`
   font-weight: 400;
   text-decoration: none;
   color: ${(props) => props.theme.accentColor};
@@ -29,6 +29,7 @@ const Bookmark = styled.a`
 export interface IBookmarkProps {
   name: string;
   url: string;
+  newTab?: boolean;
 }
 
 export interface IBookmarkGroupProps {
@@ -40,6 +41,22 @@ export interface IBookmarkListProps {
   groups: Array<IBookmarkGroupProps>;
 }
 
+export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => {
+  const linkAttrs =
+    newTab !== undefined && newTab
+      ? {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        }
+      : {};
+
+  return (
+    <BookmarkElement href={url} {...linkAttrs}>
+      {name}
+    </BookmarkElement>
+  );
+};
+
 /**
  * Renders a given bookmark group
  * @param {IBookmarkGroupProps} props given props of the bookmark group
@@ -49,10 +66,13 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
   <Item>
     <GroupContainer>
       <SubHeadline>{name}</SubHeadline>
-      {items.map(({ name, url }, index) => (
+      {items.map(({ name, url, newTab }, index) => (
-        <Bookmark key={[name, index].join("")} href={url}>
+        <Bookmark
-          {name}
+          key={[name, index].join("")}
-        </Bookmark>
+          name={name}
+          url={url}
+          newTab={newTab}
+        />
       ))}
     </GroupContainer>
   </Item>

src/test/components/__snapshots__/bookmarks.spec.tsx.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BookmarkGroup snapshot test 1`] = `[Function]`;
+exports[`tests rendering of Bookmark with newTab=false 1`] = `[Function]`;
 
-exports[`BookmarkList snapshot test 1`] = `[Function]`;
+exports[`tests rendering of Bookmark with newTab=true 1`] = `[Function]`;
+
+exports[`tests rendering of Bookmark without newTab 1`] = `[Function]`;
+
+exports[`tests rendering of BookmarkGroup 1`] = `[Function]`;
+
+exports[`tests rendering of BookmarkList 1`] = `[Function]`;

src/test/components/bookmarks.spec.tsx

@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react";
 import BookmarkList, {
+  Bookmark,
   BookmarkGroup,
   IBookmarkGroupProps,
   IBookmarkListProps,
@@ -19,7 +20,32 @@ const bookmarkListProps: IBookmarkListProps = {
   groups: [bookmarkGroupProps, bookmarkGroupProps],
 };
 
-it("BookmarkGroup snapshot test", () => {
+it("tests rendering of Bookmark with newTab=true", () => {
+  let props = bookmarkGroupProps.items[0];
+  const { asFragment } = render(
+    <Bookmark name={props.name} url={props.url} newTab={true} />,
+  );
+
+  expect(asFragment).toMatchSnapshot();
+});
+
+it("tests rendering of Bookmark with newTab=false", () => {
+  let props = bookmarkGroupProps.items[0];
+  const { asFragment } = render(
+    <Bookmark name={props.name} url={props.url} newTab={false} />,
+  );
+
+  expect(asFragment).toMatchSnapshot();
+});
+
+it("tests rendering of Bookmark without newTab", () => {
+  let props = bookmarkGroupProps.items[0];
+  const { asFragment } = render(<Bookmark name={props.name} url={props.url} />);
+
+  expect(asFragment).toMatchSnapshot();
+});
+
+it("tests rendering of BookmarkGroup", () => {
   const { asFragment } = render(
     <BookmarkGroup
       name={bookmarkGroupProps.name}
@@ -30,7 +56,7 @@ it("BookmarkGroup snapshot test", () => {
   expect(asFragment).toMatchSnapshot();
 });
 
-it("BookmarkList snapshot test", () => {
+it("tests rendering of BookmarkList", () => {
   const { asFragment } = render(
     <BookmarkList groups={bookmarkListProps.groups} />,
   );