From d33ac8c588eafb5514f388637e47b31172f644e5 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 30 Dec 2021 17:46:12 +0200
Subject: [PATCH] refactor(app): create a composed header component [EE-2329]
 (#6326)

* refactor(app): create a composed header component

refactor(app): support single child breadcrumbs

fix(app): fix breadcrumbs warning

* refactor(app): import breadcrumbs

* refactor(app): support object breadcrumbs

* chore(app): write tests for header components
---
 .eslintrc.yml                                 |  2 +
 .../Header/Breadcrumbs/Breadcrumbs.tsx        | 20 ---------
 .../Breadcrumbs/Breadcrumbs.css               |  0
 .../Breadcrumbs/Breadcrumbs.stories.tsx       | 22 +++++-----
 .../Breadcrumbs/Breadcrumbs.test.tsx          | 15 +++++++
 .../PageHeader/Breadcrumbs/Breadcrumbs.tsx    | 39 +++++++++++++++++
 .../PageHeader/Breadcrumbs/index.tsx          |  1 +
 .../HeaderContainer.css}                      |  0
 .../HeaderContainer.html}                     |  0
 .../HeaderContainer.stories.tsx}              | 27 ++++++------
 .../HeaderContainer.tsx}                      |  8 ++--
 .../HeaderContent.controller.js               |  0
 .../{Header => PageHeader}/HeaderContent.html |  4 +-
 .../HeaderContent.module.css                  |  0
 .../PageHeader/HeaderContent.test.tsx         | 35 ++++++++++++++++
 .../{Header => PageHeader}/HeaderContent.tsx  |  2 +-
 .../HeaderTitle.controller.js                 |  0
 .../{Header => PageHeader}/HeaderTitle.html   |  0
 .../PageHeader/HeaderTitle.test.tsx           | 34 +++++++++++++++
 .../{Header => PageHeader}/HeaderTitle.tsx    |  2 +-
 .../PageHeader/PageHeader.stories.tsx         | 42 +++++++++++++++++++
 .../components/PageHeader/PageHeader.test.tsx | 22 ++++++++++
 .../components/PageHeader/PageHeader.tsx      | 33 +++++++++++++++
 .../__snapshots__/HeaderContent.test.tsx.snap |  3 ++
 .../__snapshots__/HeaderTitle.test.tsx.snap   |  3 ++
 .../{Header => PageHeader}/index.ts           |  6 ++-
 app/portainer/components/index.js             |  2 +-
 package.json                                  |  4 +-
 28 files changed, 270 insertions(+), 56 deletions(-)
 delete mode 100644 app/portainer/components/Header/Breadcrumbs/Breadcrumbs.tsx
 rename app/portainer/components/{Header => PageHeader}/Breadcrumbs/Breadcrumbs.css (100%)
 rename app/portainer/components/{Header => PageHeader}/Breadcrumbs/Breadcrumbs.stories.tsx (50%)
 create mode 100644 app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx
 create mode 100644 app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
 create mode 100644 app/portainer/components/PageHeader/Breadcrumbs/index.tsx
 rename app/portainer/components/{Header/Header.css => PageHeader/HeaderContainer.css} (100%)
 rename app/portainer/components/{Header/Header.html => PageHeader/HeaderContainer.html} (100%)
 rename app/portainer/components/{Header/Header.stories.tsx => PageHeader/HeaderContainer.stories.tsx} (59%)
 rename app/portainer/components/{Header/Header.tsx => PageHeader/HeaderContainer.tsx} (71%)
 rename app/portainer/components/{Header => PageHeader}/HeaderContent.controller.js (100%)
 rename app/portainer/components/{Header => PageHeader}/HeaderContent.html (72%)
 rename app/portainer/components/{Header => PageHeader}/HeaderContent.module.css (100%)
 create mode 100644 app/portainer/components/PageHeader/HeaderContent.test.tsx
 rename app/portainer/components/{Header => PageHeader}/HeaderContent.tsx (96%)
 rename app/portainer/components/{Header => PageHeader}/HeaderTitle.controller.js (100%)
 rename app/portainer/components/{Header => PageHeader}/HeaderTitle.html (100%)
 create mode 100644 app/portainer/components/PageHeader/HeaderTitle.test.tsx
 rename app/portainer/components/{Header => PageHeader}/HeaderTitle.tsx (93%)
 create mode 100644 app/portainer/components/PageHeader/PageHeader.stories.tsx
 create mode 100644 app/portainer/components/PageHeader/PageHeader.test.tsx
 create mode 100644 app/portainer/components/PageHeader/PageHeader.tsx
 create mode 100644 app/portainer/components/PageHeader/__snapshots__/HeaderContent.test.tsx.snap
 create mode 100644 app/portainer/components/PageHeader/__snapshots__/HeaderTitle.test.tsx.snap
 rename app/portainer/components/{Header => PageHeader}/index.ts (62%)

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 9e8fc7528..80295fbb1 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -94,3 +94,5 @@ overrides:
       - 'plugin:jest/style'
     env:
       'jest/globals': true
+    rules:
+      'react/jsx-no-constructed-context-values': off
diff --git a/app/portainer/components/Header/Breadcrumbs/Breadcrumbs.tsx b/app/portainer/components/Header/Breadcrumbs/Breadcrumbs.tsx
deleted file mode 100644
index 54a6e2566..000000000
--- a/app/portainer/components/Header/Breadcrumbs/Breadcrumbs.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-
-import './Breadcrumbs.css';
-
-interface Props {
-  children: ReactNode[];
-}
-
-export function Breadcrumbs({ children }: Props) {
-  return (
-    <div className="breadcrumb-links">
-      {children.map((child, index) => (
-        <>
-          {child}
-          {index !== children.length - 1 ? ' > ' : ''}
-        </>
-      ))}
-    </div>
-  );
-}
diff --git a/app/portainer/components/Header/Breadcrumbs/Breadcrumbs.css b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.css
similarity index 100%
rename from app/portainer/components/Header/Breadcrumbs/Breadcrumbs.css
rename to app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.css
diff --git a/app/portainer/components/Header/Breadcrumbs/Breadcrumbs.stories.tsx b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.stories.tsx
similarity index 50%
rename from app/portainer/components/Header/Breadcrumbs/Breadcrumbs.stories.tsx
rename to app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.stories.tsx
index b934a442f..b018b9b26 100644
--- a/app/portainer/components/Header/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -1,12 +1,10 @@
 import { Meta } from '@storybook/react';
 import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
 
-import { Link } from '@/portainer/components/Link';
-
 import { Breadcrumbs } from './Breadcrumbs';
 
 const meta: Meta = {
-  title: 'Components/Header/Breadcrumbs',
+  title: 'Components/PageHeader/Breadcrumbs',
   component: Breadcrumbs,
 };
 
@@ -17,13 +15,17 @@ export { Example };
 function Example() {
   return (
     <UIRouter plugins={[pushStateLocationPlugin]}>
-      <Breadcrumbs>
-        <Link to="portainer.endpoints">Environments</Link>
-        <Link to="portainer.endpoints.endpoint({id: endpoint.Id})">
-          endpointName
-        </Link>
-        String item
-      </Breadcrumbs>
+      <Breadcrumbs
+        breadcrumbs={[
+          { link: 'portainer.endpoints', label: 'Environments' },
+          {
+            label: 'endpointName',
+            link: 'portainer.endpoints.endpoint',
+            linkParams: { id: 5 },
+          },
+          { label: 'String item' },
+        ]}
+      />
     </UIRouter>
   );
 }
diff --git a/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx
new file mode 100644
index 000000000..cb128b903
--- /dev/null
+++ b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@/react-tools/test-utils';
+
+import { Breadcrumbs } from './Breadcrumbs';
+
+test('should display a Breadcrumbs, breadcrumbs should be separated by >', async () => {
+  const breadcrumbs = [
+    { label: 'bread1' },
+    { label: 'bread2' },
+    { label: 'bread3' },
+  ];
+  const { queryByText } = render(<Breadcrumbs breadcrumbs={breadcrumbs} />);
+
+  const heading = queryByText(breadcrumbs.map((b) => b.label).join(' > '));
+  expect(heading).toBeVisible();
+});
diff --git a/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 000000000..197023a6b
--- /dev/null
+++ b/app/portainer/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+
+import { Link } from '@/portainer/components/Link';
+
+import './Breadcrumbs.css';
+
+export interface Crumb {
+  label: string;
+  link?: string;
+  linkParams?: Record<string, unknown>;
+}
+interface Props {
+  breadcrumbs: Crumb[];
+}
+
+export function Breadcrumbs({ breadcrumbs }: Props) {
+  return (
+    <div className="breadcrumb-links">
+      {breadcrumbs.map((crumb, index) => (
+        <Fragment key={index}>
+          {renderCrumb(crumb)}
+          {index !== breadcrumbs.length - 1 ? ' > ' : ''}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+function renderCrumb(crumb: Crumb) {
+  if (crumb.link) {
+    return (
+      <Link to={crumb.link} params={crumb.linkParams}>
+        {crumb.label}
+      </Link>
+    );
+  }
+
+  return crumb.label;
+}
diff --git a/app/portainer/components/PageHeader/Breadcrumbs/index.tsx b/app/portainer/components/PageHeader/Breadcrumbs/index.tsx
new file mode 100644
index 000000000..28140a257
--- /dev/null
+++ b/app/portainer/components/PageHeader/Breadcrumbs/index.tsx
@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';
diff --git a/app/portainer/components/Header/Header.css b/app/portainer/components/PageHeader/HeaderContainer.css
similarity index 100%
rename from app/portainer/components/Header/Header.css
rename to app/portainer/components/PageHeader/HeaderContainer.css
diff --git a/app/portainer/components/Header/Header.html b/app/portainer/components/PageHeader/HeaderContainer.html
similarity index 100%
rename from app/portainer/components/Header/Header.html
rename to app/portainer/components/PageHeader/HeaderContainer.html
diff --git a/app/portainer/components/Header/Header.stories.tsx b/app/portainer/components/PageHeader/HeaderContainer.stories.tsx
similarity index 59%
rename from app/portainer/components/Header/Header.stories.tsx
rename to app/portainer/components/PageHeader/HeaderContainer.stories.tsx
index 45b662bf1..8b3bc7faf 100644
--- a/app/portainer/components/Header/Header.stories.tsx
+++ b/app/portainer/components/PageHeader/HeaderContainer.stories.tsx
@@ -1,18 +1,17 @@
 import { Meta, Story } from '@storybook/react';
 import { useMemo } from 'react';
 
-import { Link } from '@/portainer/components/Link';
 import { UserContext } from '@/portainer/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
 
-import { Header } from './Header';
-import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
-
-import { HeaderContent, HeaderTitle } from '.';
+import { HeaderContainer } from './HeaderContainer';
+import { Breadcrumbs } from './Breadcrumbs';
+import { HeaderTitle } from './HeaderTitle';
+import { HeaderContent } from './HeaderContent';
 
 export default {
-  component: Header,
-  title: 'Components/Header',
+  component: HeaderContainer,
+  title: 'Components/PageHeader/HeaderContainer',
 } as Meta;
 
 interface StoryProps {
@@ -27,15 +26,17 @@ function Template({ title }: StoryProps) {
 
   return (
     <UserContext.Provider value={state}>
-      <Header>
+      <HeaderContainer>
         <HeaderTitle title={title} />
         <HeaderContent>
-          <Breadcrumbs>
-            <Link to="example">Container instances</Link>
-            Add container
-          </Breadcrumbs>
+          <Breadcrumbs
+            breadcrumbs={[
+              { link: 'example', label: 'crumb1' },
+              { label: 'crumb2' },
+            ]}
+          />
         </HeaderContent>
-      </Header>
+      </HeaderContainer>
     </UserContext.Provider>
   );
 }
diff --git a/app/portainer/components/Header/Header.tsx b/app/portainer/components/PageHeader/HeaderContainer.tsx
similarity index 71%
rename from app/portainer/components/Header/Header.tsx
rename to app/portainer/components/PageHeader/HeaderContainer.tsx
index 65e08e833..5cb7ae55b 100644
--- a/app/portainer/components/Header/Header.tsx
+++ b/app/portainer/components/PageHeader/HeaderContainer.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, createContext, useContext } from 'react';
 
-import './Header.css';
+import './HeaderContainer.css';
 
 const Context = createContext<null | boolean>(null);
 
@@ -8,11 +8,11 @@ export function useHeaderContext() {
   const context = useContext(Context);
 
   if (context == null) {
-    throw new Error('Should be nested inside a Header component');
+    throw new Error('Should be nested inside a HeaderContainer component');
   }
 }
 
-export function Header({ children }: PropsWithChildren<unknown>) {
+export function HeaderContainer({ children }: PropsWithChildren<unknown>) {
   return (
     <Context.Provider value>
       <div className="row header">
@@ -27,5 +27,5 @@ export function Header({ children }: PropsWithChildren<unknown>) {
 
 export const HeaderAngular = {
   transclude: true,
-  templateUrl: './Header.html',
+  templateUrl: './HeaderContainer.html',
 };
diff --git a/app/portainer/components/Header/HeaderContent.controller.js b/app/portainer/components/PageHeader/HeaderContent.controller.js
similarity index 100%
rename from app/portainer/components/Header/HeaderContent.controller.js
rename to app/portainer/components/PageHeader/HeaderContent.controller.js
diff --git a/app/portainer/components/Header/HeaderContent.html b/app/portainer/components/PageHeader/HeaderContent.html
similarity index 72%
rename from app/portainer/components/Header/HeaderContent.html
rename to app/portainer/components/PageHeader/HeaderContent.html
index b7eb182c9..2b5d569e5 100644
--- a/app/portainer/components/Header/HeaderContent.html
+++ b/app/portainer/components/PageHeader/HeaderContent.html
@@ -1,10 +1,10 @@
 <div class="breadcrumb-links">
   <div class="pull-left" ng-transclude></div>
   <div class="pull-right" ng-if="$ctrl.username">
-    <a ui-sref="portainer.account" style="margin-right: 5px;">
+    <a ui-sref="portainer.account" style="margin-right: 5px">
       <u><i class="fa fa-wrench" aria-hidden="true"></i> my account </u>
     </a>
-    <a ui-sref="portainer.logout({performApiLogout: true})" class="text-danger" style="margin-right: 25px;" data-cy="template-logoutButton">
+    <a ui-sref="portainer.logout({performApiLogout: true})" class="text-danger" style="margin-right: 25px" data-cy="template-logoutButton">
       <u><i class="fa fa-sign-out-alt" aria-hidden="true"></i> log out</u>
     </a>
   </div>
diff --git a/app/portainer/components/Header/HeaderContent.module.css b/app/portainer/components/PageHeader/HeaderContent.module.css
similarity index 100%
rename from app/portainer/components/Header/HeaderContent.module.css
rename to app/portainer/components/PageHeader/HeaderContent.module.css
diff --git a/app/portainer/components/PageHeader/HeaderContent.test.tsx b/app/portainer/components/PageHeader/HeaderContent.test.tsx
new file mode 100644
index 000000000..c1bf7fab1
--- /dev/null
+++ b/app/portainer/components/PageHeader/HeaderContent.test.tsx
@@ -0,0 +1,35 @@
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { render } from '@/react-tools/test-utils';
+
+import { HeaderContainer } from './HeaderContainer';
+import { HeaderContent } from './HeaderContent';
+
+test('should not render without a wrapping HeaderContainer', async () => {
+  function renderComponent() {
+    return render(<HeaderContent />);
+  }
+
+  expect(renderComponent).toThrowErrorMatchingSnapshot();
+});
+
+test('should display a HeaderContent', async () => {
+  const username = 'username';
+  const user = new UserViewModel({ Username: username });
+  const userProviderState = { user };
+  const content = 'content';
+
+  const { queryByText } = render(
+    <UserContext.Provider value={userProviderState}>
+      <HeaderContainer>
+        <HeaderContent>{content}</HeaderContent>
+      </HeaderContainer>
+    </UserContext.Provider>
+  );
+
+  const contentElement = queryByText(content);
+  expect(contentElement).toBeVisible();
+
+  expect(queryByText('my account')).toBeVisible();
+  expect(queryByText('log out')).toBeVisible();
+});
diff --git a/app/portainer/components/Header/HeaderContent.tsx b/app/portainer/components/PageHeader/HeaderContent.tsx
similarity index 96%
rename from app/portainer/components/Header/HeaderContent.tsx
rename to app/portainer/components/PageHeader/HeaderContent.tsx
index c8cc535d3..18b6d9142 100644
--- a/app/portainer/components/Header/HeaderContent.tsx
+++ b/app/portainer/components/PageHeader/HeaderContent.tsx
@@ -6,7 +6,7 @@ import { useUser } from '@/portainer/hooks/useUser';
 
 import controller from './HeaderContent.controller';
 import styles from './HeaderContent.module.css';
-import { useHeaderContext } from './Header';
+import { useHeaderContext } from './HeaderContainer';
 
 export function HeaderContent({ children }: PropsWithChildren<unknown>) {
   useHeaderContext();
diff --git a/app/portainer/components/Header/HeaderTitle.controller.js b/app/portainer/components/PageHeader/HeaderTitle.controller.js
similarity index 100%
rename from app/portainer/components/Header/HeaderTitle.controller.js
rename to app/portainer/components/PageHeader/HeaderTitle.controller.js
diff --git a/app/portainer/components/Header/HeaderTitle.html b/app/portainer/components/PageHeader/HeaderTitle.html
similarity index 100%
rename from app/portainer/components/Header/HeaderTitle.html
rename to app/portainer/components/PageHeader/HeaderTitle.html
diff --git a/app/portainer/components/PageHeader/HeaderTitle.test.tsx b/app/portainer/components/PageHeader/HeaderTitle.test.tsx
new file mode 100644
index 000000000..e021f1f44
--- /dev/null
+++ b/app/portainer/components/PageHeader/HeaderTitle.test.tsx
@@ -0,0 +1,34 @@
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { render } from '@/react-tools/test-utils';
+
+import { HeaderContainer } from './HeaderContainer';
+import { HeaderTitle } from './HeaderTitle';
+
+test('should not render without a wrapping HeaderContainer', async () => {
+  const title = 'title';
+  function renderComponent() {
+    return render(<HeaderTitle title={title} />);
+  }
+
+  expect(renderComponent).toThrowErrorMatchingSnapshot();
+});
+
+test('should display a HeaderTitle', async () => {
+  const username = 'username';
+  const user = new UserViewModel({ Username: username });
+
+  const title = 'title';
+  const { queryByText } = render(
+    <UserContext.Provider value={{ user }}>
+      <HeaderContainer>
+        <HeaderTitle title={title} />
+      </HeaderContainer>
+    </UserContext.Provider>
+  );
+
+  const heading = queryByText(title);
+  expect(heading).toBeVisible();
+
+  expect(queryByText(username)).toBeVisible();
+});
diff --git a/app/portainer/components/Header/HeaderTitle.tsx b/app/portainer/components/PageHeader/HeaderTitle.tsx
similarity index 93%
rename from app/portainer/components/Header/HeaderTitle.tsx
rename to app/portainer/components/PageHeader/HeaderTitle.tsx
index 8ece359fa..8a99f8820 100644
--- a/app/portainer/components/Header/HeaderTitle.tsx
+++ b/app/portainer/components/PageHeader/HeaderTitle.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 
 import { useUser } from '@/portainer/hooks/useUser';
 
-import { useHeaderContext } from './Header';
+import { useHeaderContext } from './HeaderContainer';
 import controller from './HeaderTitle.controller';
 
 interface Props {
diff --git a/app/portainer/components/PageHeader/PageHeader.stories.tsx b/app/portainer/components/PageHeader/PageHeader.stories.tsx
new file mode 100644
index 000000000..b36e448e9
--- /dev/null
+++ b/app/portainer/components/PageHeader/PageHeader.stories.tsx
@@ -0,0 +1,42 @@
+import { Meta, Story } from '@storybook/react';
+import { useMemo } from 'react';
+
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+
+import { PageHeader } from './PageHeader';
+
+export default {
+  component: PageHeader,
+  title: 'Components/PageHeader',
+} as Meta;
+
+interface StoryProps {
+  title: string;
+}
+
+function Template({ title }: StoryProps) {
+  const state = useMemo(
+    () => ({ user: new UserViewModel({ Username: 'test' }) }),
+    []
+  );
+
+  return (
+    <UserContext.Provider value={state}>
+      <PageHeader
+        title={title}
+        breadcrumbs={[
+          { link: 'example', label: 'bread1' },
+          { link: 'example2', label: 'bread2' },
+          { label: 'bread3' },
+          { label: 'bread4' },
+        ]}
+      />
+    </UserContext.Provider>
+  );
+}
+
+export const Primary: Story<StoryProps> = Template.bind({});
+Primary.args = {
+  title: 'Container details',
+};
diff --git a/app/portainer/components/PageHeader/PageHeader.test.tsx b/app/portainer/components/PageHeader/PageHeader.test.tsx
new file mode 100644
index 000000000..65674006a
--- /dev/null
+++ b/app/portainer/components/PageHeader/PageHeader.test.tsx
@@ -0,0 +1,22 @@
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { render } from '@/react-tools/test-utils';
+
+import { PageHeader } from './PageHeader';
+
+test('should display a PageHeader', async () => {
+  const username = 'username';
+  const user = new UserViewModel({ Username: username });
+
+  const title = 'title';
+  const { queryByText } = render(
+    <UserContext.Provider value={{ user }}>
+      <PageHeader title={title} />
+    </UserContext.Provider>
+  );
+
+  const heading = queryByText(title);
+  expect(heading).toBeVisible();
+
+  expect(queryByText(username)).toBeVisible();
+});
diff --git a/app/portainer/components/PageHeader/PageHeader.tsx b/app/portainer/components/PageHeader/PageHeader.tsx
new file mode 100644
index 000000000..8818a5e3d
--- /dev/null
+++ b/app/portainer/components/PageHeader/PageHeader.tsx
@@ -0,0 +1,33 @@
+import { useRouter } from '@uirouter/react';
+
+import { Button } from '../Button';
+
+import { Breadcrumbs } from './Breadcrumbs';
+import { Crumb } from './Breadcrumbs/Breadcrumbs';
+import { HeaderContainer } from './HeaderContainer';
+import { HeaderContent } from './HeaderContent';
+import { HeaderTitle } from './HeaderTitle';
+
+interface Props {
+  reload?: boolean;
+  breadcrumbs?: Crumb[];
+  title: string;
+}
+
+export function PageHeader({ title, breadcrumbs = [], reload }: Props) {
+  const router = useRouter();
+  return (
+    <HeaderContainer>
+      <HeaderTitle title={title}>
+        {reload && (
+          <Button color="link" onClick={() => router.stateService.reload()}>
+            <i className="fa fa-sync" aria-hidden="true" />
+          </Button>
+        )}
+      </HeaderTitle>
+      <HeaderContent>
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+      </HeaderContent>
+    </HeaderContainer>
+  );
+}
diff --git a/app/portainer/components/PageHeader/__snapshots__/HeaderContent.test.tsx.snap b/app/portainer/components/PageHeader/__snapshots__/HeaderContent.test.tsx.snap
new file mode 100644
index 000000000..db9beee67
--- /dev/null
+++ b/app/portainer/components/PageHeader/__snapshots__/HeaderContent.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render without a wrapping HeaderContainer 1`] = `"Should be nested inside a HeaderContainer component"`;
diff --git a/app/portainer/components/PageHeader/__snapshots__/HeaderTitle.test.tsx.snap b/app/portainer/components/PageHeader/__snapshots__/HeaderTitle.test.tsx.snap
new file mode 100644
index 000000000..db9beee67
--- /dev/null
+++ b/app/portainer/components/PageHeader/__snapshots__/HeaderTitle.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render without a wrapping HeaderContainer 1`] = `"Should be nested inside a HeaderContainer component"`;
diff --git a/app/portainer/components/Header/index.ts b/app/portainer/components/PageHeader/index.ts
similarity index 62%
rename from app/portainer/components/Header/index.ts
rename to app/portainer/components/PageHeader/index.ts
index 3dc1997ee..73071d4f9 100644
--- a/app/portainer/components/Header/index.ts
+++ b/app/portainer/components/PageHeader/index.ts
@@ -1,10 +1,12 @@
 import angular from 'angular';
 
-import { Header, HeaderAngular } from './Header';
+import { Breadcrumbs } from './Breadcrumbs';
+import { PageHeader } from './PageHeader';
+import { HeaderContainer, HeaderAngular } from './HeaderContainer';
 import { HeaderContent, HeaderContentAngular } from './HeaderContent';
 import { HeaderTitle, HeaderTitleAngular } from './HeaderTitle';
 
-export { Header, HeaderTitle, HeaderContent };
+export { PageHeader, Breadcrumbs, HeaderContainer, HeaderContent, HeaderTitle };
 
 export default angular
   .module('portainer.app.components.header', [])
diff --git a/app/portainer/components/index.js b/app/portainer/components/index.js
index e4882a8d7..3f9889f8c 100644
--- a/app/portainer/components/index.js
+++ b/app/portainer/components/index.js
@@ -8,7 +8,7 @@ import porAccessManagementModule from './accessManagement';
 import formComponentsModule from './form-components';
 import widgetModule from './widget';
 import boxSelectorModule from './BoxSelector';
-import headerModule from './Header';
+import headerModule from './PageHeader';
 
 import { ReactExampleAngular } from './ReactExample';
 import { TooltipAngular } from './Tip/Tooltip';
diff --git a/package.json b/package.json
index b49d4aeb2..41be9df38 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "lint:pr": "make lint-pr",
     "test": "yarn test:client; yarn test:server",
     "test:server": "cd api && go test ./...",
-    "test:client": "jest",
+    "test:client": "jest --silent",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o ./dist/storybook",
     "analyze-webpack": "webpack --config ./webpack/webpack.analyze.js"
@@ -239,4 +239,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}
\ No newline at end of file