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