Extracted breadcrumbs into a shared component, added it to project settings page

client/src/Project/Board/Header/Styles.js

@@ -1,18 +1,6 @@
 import styled from 'styled-components';
 
-import { color, font } from 'shared/utils/styles';
-
-export const Breadcrumbs = styled.div`
-  color: ${color.textMedium};
-  ${font.size(15)};
-`;
-
-export const Divider = styled.span`
-  position: relative;
-  top: 2px;
-  margin: 0 10px;
-  ${font.size(18)};
-`;
+import { font } from 'shared/utils/styles';
 
 export const Header = styled.div`
   margin-top: 6px;

client/src/Project/Board/Header/index.jsx

@@ -1,31 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { CopyLinkButton } from 'shared/components';
 
-import { Breadcrumbs, Divider, Header, BoardName } from './Styles';
+import { Header, BoardName } from './Styles';
 
-const propTypes = {
-  projectName: PropTypes.string.isRequired,
-};
-
-const ProjectBoardHeader = ({ projectName }) => (
-  <>
-    <Breadcrumbs>
-      Projects
-      <Divider>/</Divider>
-      {projectName}
-      <Divider>/</Divider>
-      Kanban Board
-    </Breadcrumbs>
-
-    <Header>
-      <BoardName>Kanban board</BoardName>
-      <CopyLinkButton />
-    </Header>
-  </>
+const ProjectBoardHeader = () => (
+  <Header>
+    <BoardName>Kanban board</BoardName>
+    <CopyLinkButton />
+  </Header>
 );
 
-ProjectBoardHeader.propTypes = propTypes;
-
 export default ProjectBoardHeader;

client/src/Project/Board/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import useMergeState from 'shared/hooks/mergeState';
+import { Breadcrumbs } from 'shared/components';
 
 import Header from './Header';
 import Filters from './Filters';
@@ -24,7 +25,8 @@ const ProjectBoard = ({ project, updateLocalProjectIssues }) => {
 
   return (
     <>
-      <Header projectName={project.name} />
+      <Breadcrumbs items={['Projects', project.name, 'Kanban Board']} />
+      <Header />
       <Filters
         projectUsers={project.users}
         defaultFilters={defaultFilters}

client/src/Project/ProjectSettings/Styles.js

@@ -10,11 +10,10 @@ export const FormCont = styled.div`
 
 export const FormElement = styled(Form.Element)`
   max-width: 640px;
-  padding: 20px 0;
 `;
 
 export const FormHeading = styled.div`
-  padding-bottom: 15px;
+  padding: 6px 0 15px;
   ${font.size(24)}
   ${font.medium}
 `;

client/src/Project/ProjectSettings/index.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { ProjectCategory, ProjectCategoryCopy } from 'shared/constants/projects';
 import toast from 'shared/utils/toast';
 import useApi from 'shared/hooks/api';
-import { Form } from 'shared/components';
+import { Form, Breadcrumbs } from 'shared/components';
 
 import { FormCont, FormHeading, FormElement, ActionButton } from './Styles';
 
@@ -46,6 +46,7 @@ const ProjectSettings = ({ project, fetchProject }) => {
     >
       <FormCont>
         <FormElement>
+          <Breadcrumbs items={['Projects', project.name, 'Project Details']} />
           <FormHeading>Project Details</FormHeading>
           <Form.Field.Input name="name" label="Name" />
           <Form.Field.Input name="url" label="URL" />

client/src/Project/Sidebar/index.jsx

@@ -25,7 +25,9 @@ const ProjectSidebar = ({ project }) => {
   const match = useRouteMatch();
 
   const renderLinkItem = (text, iconType, path) => {
-    const linkItemProps = path
+    const isImplemented = !!path;
+
+    const linkItemProps = isImplemented
       ? { as: NavLink, exact: true, to: `${match.path}${path}` }
       : { as: 'div' };
 
@@ -33,7 +35,7 @@ const ProjectSidebar = ({ project }) => {
       <LinkItem {...linkItemProps}>
         <Icon type={iconType} />
         <LinkText>{text}</LinkText>
-        {!path && <NotImplemented>Not implemented</NotImplemented>}
+        {!isImplemented && <NotImplemented>Not implemented</NotImplemented>}
       </LinkItem>
     );
   };

client/src/shared/components/Breadcrumbs/Styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export const Container = styled.div`
+  color: ${color.textMedium};
+  ${font.size(15)};
+`;
+
+export const Divider = styled.span`
+  position: relative;
+  top: 2px;
+  margin: 0 10px;
+  ${font.size(18)};
+`;

client/src/shared/components/Breadcrumbs/index.jsx

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { Container, Divider } from './Styles';
+
+const propTypes = {
+  items: PropTypes.array.isRequired,
+};
+
+const Breadcrumbs = ({ items }) => (
+  <Container>
+    {items.map((item, index) => (
+      <Fragment key={item}>
+        {index !== 0 && <Divider>/</Divider>}
+        {item}
+      </Fragment>
+    ))}
+  </Container>
+);
+
+Breadcrumbs.propTypes = propTypes;
+
+export default Breadcrumbs;

client/src/shared/components/index.js

@@ -1,6 +1,7 @@
 export { default as AboutTooltip } from './AboutTooltip';
 export { default as Avatar } from './Avatar';
 export { default as Button } from './Button';
+export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as ConfirmModal } from './ConfirmModal';
 export { default as CopyLinkButton } from './CopyLinkButton';
 export { default as DatePicker } from './DatePicker';