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

@@ -94,3 +94,5 @@ overrides:
       - 'plugin:jest/style'
     env:
       'jest/globals': true
+    rules:
+      'react/jsx-no-constructed-context-values': off

app/portainer/components/Header/Breadcrumbs/Breadcrumbs.tsx

@@ -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>
-  );
-}

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>
   );
 }

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();
+});

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;
+}

app/portainer/components/PageHeader/Breadcrumbs/index.tsx

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';

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>
   );
 }

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',
 };

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>

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();
+});

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();

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();
+});

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 {

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',
+};

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();
+});

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>
+  );
+}

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"`;

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"`;

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', [])

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';

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"