refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,3 @@
+.breadcrumb-links {
+  font-size: 10px;
+}

app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/react';
+import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
+
+import { Breadcrumbs } from './Breadcrumbs';
+
+const meta: Meta = {
+  title: 'Components/PageHeader/Breadcrumbs',
+  component: Breadcrumbs,
+};
+
+export default meta;
+
+export { Example };
+
+function Example() {
+  return (
+    <UIRouter plugins={[pushStateLocationPlugin]}>
+      <Breadcrumbs
+        breadcrumbs={[
+          { link: 'portainer.endpoints', label: 'Environments' },
+          {
+            label: 'endpointName',
+            link: 'portainer.endpoints.endpoint',
+            linkParams: { id: 5 },
+          },
+          { label: 'String item' },
+        ]}
+      />
+    </UIRouter>
+  );
+}

app/react/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/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+
+import { Link } from '@@/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/react/components/PageHeader/Breadcrumbs/index.ts

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

app/react/components/PageHeader/HeaderContainer.css

@@ -0,0 +1,103 @@
+.row.header .meta .page {
+  padding-top: 7px;
+}
+
+body.hamburg .row.header .meta {
+  margin-left: 70px;
+}
+
+.row.header {
+  min-height: 60px;
+  background: var(--bg-row-header-color);
+  margin-bottom: 15px;
+}
+.row.header > div:last-child {
+  padding-right: 0;
+}
+.row.header .meta .page {
+  font-size: 17px;
+  padding-top: 11px;
+}
+
+.row.header .meta div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.row.header .login a {
+  padding: 18px;
+  display: block;
+}
+.row.header .user {
+  min-width: 130px;
+}
+.row.header .user > .item {
+  width: 65px;
+  height: 60px;
+  float: right;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+}
+.row.header .user > .item a {
+  color: #919191;
+  display: block;
+}
+.row.header .user > .item i {
+  font-size: 20px;
+  line-height: 55px;
+}
+.row.header .user > .item img {
+  width: 40px;
+  height: 40px;
+  margin-top: 10px;
+  border-radius: 2px;
+}
+.row.header .user > .item ul.dropdown-menu {
+  border-radius: 2px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
+}
+.row.header .user > .item ul.dropdown-menu .dropdown-header {
+  text-align: center;
+}
+.row.header .user > .item ul.dropdown-menu li.link {
+  text-align: left;
+}
+.row.header .user > .item ul.dropdown-menu li.link a {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+.row.header .user > .item ul.dropdown-menu:before {
+  position: absolute;
+  top: -7px;
+  right: 23px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid rgba(0, 0, 0, 0.2);
+  border-left: 7px solid transparent;
+  content: '';
+}
+.row.header .user > .item ul.dropdown-menu:after {
+  position: absolute;
+  top: -6px;
+  right: 24px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+/*angular-loading-bar override*/
+#loadingbar-placeholder {
+  margin-bottom: 0;
+  height: 3px;
+}
+
+#loading-bar .bar {
+  position: relative;
+  height: 3px;
+  background: var(--blue-3);
+}
+/*!angular-loading-bar override*/

app/react/components/PageHeader/HeaderContainer.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, Story } from '@storybook/react';
+import { useMemo } from 'react';
+
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+
+import { HeaderContainer } from './HeaderContainer';
+import { Breadcrumbs } from './Breadcrumbs';
+import { HeaderTitle } from './HeaderTitle';
+import { HeaderContent } from './HeaderContent';
+
+export default {
+  component: HeaderContainer,
+  title: 'Components/PageHeader/HeaderContainer',
+} as Meta;
+
+interface StoryProps {
+  title: string;
+}
+
+function Template({ title }: StoryProps) {
+  const state = useMemo(
+    () => ({ user: new UserViewModel({ Username: 'test' }) }),
+    []
+  );
+
+  return (
+    <UserContext.Provider value={state}>
+      <HeaderContainer>
+        <HeaderTitle title={title} />
+        <HeaderContent>
+          <Breadcrumbs
+            breadcrumbs={[
+              { link: 'example', label: 'crumb1' },
+              { label: 'crumb2' },
+            ]}
+          />
+        </HeaderContent>
+      </HeaderContainer>
+    </UserContext.Provider>
+  );
+}
+
+export const Primary: Story<StoryProps> = Template.bind({});
+Primary.args = {
+  title: 'Container details',
+};

app/react/components/PageHeader/HeaderContainer.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, createContext, useContext } from 'react';
+
+import './HeaderContainer.css';
+
+const Context = createContext<null | boolean>(null);
+
+export function useHeaderContext() {
+  const context = useContext(Context);
+
+  if (context == null) {
+    throw new Error('Should be nested inside a HeaderContainer component');
+  }
+}
+
+export function HeaderContainer({ children }: PropsWithChildren<unknown>) {
+  return (
+    <Context.Provider value>
+      <div className="row header">
+        <div id="loadingbar-placeholder" />
+        <div className="col-xs-12">
+          <div className="meta">{children}</div>
+        </div>
+      </div>
+    </Context.Provider>
+  );
+}

app/react/components/PageHeader/HeaderContent.module.css

@@ -0,0 +1,19 @@
+.user-links {
+  margin-right: 25px;
+}
+
+.user-links > * + * {
+  margin-left: 5px;
+}
+
+.link {
+  cursor: pointer;
+}
+
+.link .link-text {
+  text-decoration: underline;
+}
+
+.link .link-icon {
+  margin-right: 2px;
+}

app/react/components/PageHeader/HeaderContent.test.tsx

@@ -0,0 +1,41 @@
+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 () => {
+  const consoleErrorFn = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => jest.fn());
+
+  function renderComponent() {
+    return render(<HeaderContent />);
+  }
+
+  expect(renderComponent).toThrowErrorMatchingSnapshot();
+
+  consoleErrorFn.mockRestore();
+});
+
+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/react/components/PageHeader/HeaderContent.tsx

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+import { useUser } from '@/portainer/hooks/useUser';
+
+import { Link } from '@@/Link';
+
+import styles from './HeaderContent.module.css';
+import { useHeaderContext } from './HeaderContainer';
+
+export function HeaderContent({ children }: PropsWithChildren<unknown>) {
+  useHeaderContext();
+  const { user } = useUser();
+
+  return (
+    <div className="breadcrumb-links">
+      <div className="pull-left">{children}</div>
+      {user && !window.ddExtension && (
+        <div className={clsx('pull-right', styles.userLinks)}>
+          <Link to="portainer.account" className={styles.link}>
+            <i
+              className={clsx('fa fa-wrench', styles.linkIcon)}
+              aria-hidden="true"
+            />
+            <span className={styles.linkText}>my account</span>
+          </Link>
+          <Link
+            to="portainer.logout"
+            params={{ performApiLogout: true }}
+            className={clsx('text-danger', styles.link)}
+            data-cy="template-logoutButton"
+          >
+            <i
+              className={clsx('fa fa-sign-out-alt', styles.linkIcon)}
+              aria-hidden="true"
+            />
+            <span className={styles.linkText}>log out</span>
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

app/react/components/PageHeader/HeaderTitle.test.tsx

@@ -0,0 +1,40 @@
+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 consoleErrorFn = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => jest.fn());
+
+  const title = 'title';
+  function renderComponent() {
+    return render(<HeaderTitle title={title} />);
+  }
+
+  expect(renderComponent).toThrowErrorMatchingSnapshot();
+
+  consoleErrorFn.mockRestore();
+});
+
+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/react/components/PageHeader/HeaderTitle.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+
+import { useUser } from '@/portainer/hooks/useUser';
+
+import { useHeaderContext } from './HeaderContainer';
+
+interface Props {
+  title: string;
+}
+
+export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
+  useHeaderContext();
+  const { user } = useUser();
+
+  return (
+    <div className="page white-space-normal">
+      {title}
+      <span className="header_title_content">{children}</span>
+      {user && !window.ddExtension && (
+        <span className="pull-right user-box">
+          <i className="fa fa-user-circle" aria-hidden="true" />
+          {user.Username}
+        </span>
+      )}
+    </div>
+  );
+}

app/react/components/PageHeader/PageHeader.module.css

@@ -0,0 +1,4 @@
+.reloadButton {
+  padding: 0;
+  margin: 0;
+}

app/react/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/react/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/react/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,39 @@
+import { useRouter } from '@uirouter/react';
+
+import { Button } from '../buttons';
+
+import { Breadcrumbs } from './Breadcrumbs';
+import { Crumb } from './Breadcrumbs/Breadcrumbs';
+import { HeaderContainer } from './HeaderContainer';
+import { HeaderContent } from './HeaderContent';
+import { HeaderTitle } from './HeaderTitle';
+import styles from './PageHeader.module.css';
+
+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"
+            size="medium"
+            onClick={() => router.stateService.reload()}
+            className={styles.reloadButton}
+          >
+            <i className="fa fa-sync" aria-hidden="true" />
+          </Button>
+        )}
+      </HeaderTitle>
+      <HeaderContent>
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+      </HeaderContent>
+    </HeaderContainer>
+  );
+}

app/react/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/react/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/react/components/PageHeader/index.ts

@@ -0,0 +1,7 @@
+import { Breadcrumbs } from './Breadcrumbs';
+import { PageHeader } from './PageHeader';
+import { HeaderContainer } from './HeaderContainer';
+import { HeaderContent } from './HeaderContent';
+import { HeaderTitle } from './HeaderTitle';
+
+export { PageHeader, Breadcrumbs, HeaderContainer, HeaderContent, HeaderTitle };