refactor(nomad): sync frontend with EE [EE-3353] (#7758)

app/react/sidebar/EnvironmentSidebar.tsx

@@ -13,6 +13,7 @@ import { getPlatformType } from '@/react/portainer/environments/utils';
 import { useEnvironment } from '@/react/portainer/environments/queries/useEnvironment';
 import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 import { EndpointProviderInterface } from '@/portainer/services/endpointProvider';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon';
 
@@ -22,6 +23,7 @@ import { DockerSidebar } from './DockerSidebar';
 import { KubernetesSidebar } from './KubernetesSidebar';
 import { SidebarSection, SidebarSectionTitle } from './SidebarSection';
 import { useSidebarState } from './useSidebarState';
+import { NomadSidebar } from './NomadSidebar';
 
 export function EnvironmentSidebar() {
   const { query: currentEnvironmentQuery, clearEnvironment } =
@@ -67,7 +69,9 @@ function Content({ environment, onClear }: ContentProps) {
       showTitleWhenOpen
     >
       <div className="mt-2">
-        <Sidebar environmentId={environment.Id} environment={environment} />
+        {Sidebar && (
+          <Sidebar environmentId={environment.Id} environment={environment} />
+        )}
       </div>
     </SidebarSection>
   );
@@ -77,11 +81,12 @@ function Content({ environment, onClear }: ContentProps) {
       [key in PlatformType]: React.ComponentType<{
         environmentId: EnvironmentId;
         environment: Environment;
-      }>;
+      }> | null;
     } = {
       [PlatformType.Azure]: AzureSidebar,
       [PlatformType.Docker]: DockerSidebar,
       [PlatformType.Kubernetes]: KubernetesSidebar,
+      [PlatformType.Nomad]: isBE ? NomadSidebar : null,
     };
 
     return sidebar[platform];

app/react/sidebar/NomadSidebar/NomadSidebar.test.tsx

@@ -0,0 +1,38 @@
+import { UserContext } from '@/react/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { render, within } from '@/react-tools/test-utils';
+
+import { TestSidebarProvider } from '../useSidebarState';
+
+import { NomadSidebar } from './NomadSidebar';
+
+test('dashboard items should render correctly', () => {
+  const { getByLabelText } = renderComponent();
+  const dashboardItem = getByLabelText(/Dashboard/i);
+  expect(dashboardItem).toBeVisible();
+  expect(dashboardItem).toHaveTextContent('Dashboard');
+
+  const dashboardItemElements = within(dashboardItem);
+  expect(
+    dashboardItemElements.getByRole('img', { hidden: true })
+  ).toBeVisible();
+
+  const jobsItem = getByLabelText('Nomad Jobs');
+  expect(jobsItem).toBeVisible();
+  expect(jobsItem).toHaveTextContent('Jobs');
+
+  const jobsItemElements = within(jobsItem);
+  expect(jobsItemElements.getByRole('img', { hidden: true })).toBeVisible();
+});
+
+function renderComponent() {
+  const user = new UserViewModel({ Username: 'user' });
+
+  return render(
+    <UserContext.Provider value={{ user }}>
+      <TestSidebarProvider>
+        <NomadSidebar environmentId={1} />
+      </TestSidebarProvider>
+    </UserContext.Provider>
+  );
+}

app/react/sidebar/NomadSidebar/NomadSidebar.tsx

@@ -0,0 +1,30 @@
+import { Clock } from 'react-feather';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { DashboardLink } from '../items/DashboardLink';
+import { SidebarItem } from '../SidebarItem';
+
+interface Props {
+  environmentId: EnvironmentId;
+}
+
+export function NomadSidebar({ environmentId }: Props) {
+  return (
+    <>
+      <DashboardLink
+        environmentId={environmentId}
+        platformPath="nomad"
+        data-cy="nomadSidebar-dashboard"
+      />
+
+      <SidebarItem
+        to="nomad.jobs"
+        params={{ endpointId: environmentId }}
+        icon={Clock}
+        label="Nomad Jobs"
+        data-cy="nomadSidebar-jobs"
+      />
+    </>
+  );
+}

app/react/sidebar/NomadSidebar/index.ts

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