chore(sidebar): add data-cys [EE-3605] (#7143)

* chore(sidebar): add data-cys [EE-3605] fix [EE-3605]
2022-06-28 19:36:40 +03:00 · 2022-06-28 19:36:40 +03:00 · 882051cc30
parent ed8f9b5931
commit 882051cc30
10 changed files with 158 additions and 25 deletions
--- a/app/react/sidebar/AzureSidebar/AzureSidebar.tsx
+++ b/app/react/sidebar/AzureSidebar/AzureSidebar.tsx
@ -12,12 +12,17 @@ interface Props {
 export function AzureSidebar({ environmentId }: Props) {
  return (
    <>
-      <DashboardLink environmentId={environmentId} platformPath="azure" />
+      <DashboardLink
+        environmentId={environmentId}
+        platformPath="azure"
+        data-cy="azureSidebar-dashboard"
+      />
      <SidebarItem
        to="azure.containerinstances"
        params={{ endpointId: environmentId }}
        icon={Box}
        label="Container instances"
+        data-cy="azureSidebar-containerInstances"
      />
    </>
  );
--- a/app/react/sidebar/DockerSidebar.tsx
+++ b/app/react/sidebar/DockerSidebar.tsx
@ -58,27 +58,35 @@ export function DockerSidebar({ environmentId, environment }: Props) {
        label: 'Swarm',
        icon: Trello,
        to: 'docker.swarm',
+        dataCy: 'portainerSidebar-swarm',
      }
    : {
        label: 'Host',
        icon: Trello,
        to: 'docker.host',
+        dataCy: 'portainerSidebar-host',
      };

  return (
    <>
-      <DashboardLink environmentId={environmentId} platformPath="docker" />
+      <DashboardLink
+        environmentId={environmentId}
+        platformPath="docker"
+        data-cy="dockerSidebar-dashboard"
+      />

      <SidebarItem
        label="App Templates"
        icon={Edit}
        to="docker.templates"
        params={{ endpointId: environmentId }}
+        data-cy="portainerSidebar-appTemplates"
      >
        <SidebarItem
          label="Custom Templates"
          to="docker.templates.custom"
          params={{ endpointId: environmentId }}
+          data-cy="dockerSidebar-customTemplates"
        />
      </SidebarItem>

@ -88,6 +96,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
          params={{ endpointId: environmentId }}
          icon={Layers}
          label="Stacks"
+          data-cy="dockerSidebar-stacks"
        />
      )}

@ -97,6 +106,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
          params={{ endpointId: environmentId }}
          icon={Shuffle}
          label="Services"
+          data-cy="dockerSidebar-services"
        />
      )}

@ -105,6 +115,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
        params={{ endpointId: environmentId }}
        icon={Box}
        label="Containers"
+        data-cy="dockerSidebar-containers"
      />

      <SidebarItem
@ -112,6 +123,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
        params={{ endpointId: environmentId }}
        icon={List}
        label="Images"
+        data-cy="dockerSidebar-images"
      />

      <SidebarItem
@ -119,9 +131,14 @@ export function DockerSidebar({ environmentId, environment }: Props) {
        params={{ endpointId: environmentId }}
        icon={Share2}
        label="Networks"
+        data-cy="dockerSidebar-networks"
      />

-      <VolumesLink environmentId={environmentId} platformPath="docker" />
+      <VolumesLink
+        environmentId={environmentId}
+        platformPath="docker"
+        data-cy="dockerSidebar-volumes"
+      />

      {apiVersion >= 1.3 && isSwarmManager && (
        <SidebarItem
@ -129,6 +146,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
          params={{ endpointId: environmentId }}
          icon={Clipboard}
          label="Configs"
+          data-cy="dockerSidebar-configs"
        />
      )}

@ -138,6 +156,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
          params={{ endpointId: environmentId }}
          icon={Lock}
          label="Secrets"
+          data-cy="dockerSidebar-secrets"
        />
      )}

@ -147,6 +166,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
          params={{ endpointId: environmentId }}
          icon={Clock}
          label="Events"
+          data-cy="dockerSidebar-events"
        />
      )}

@ -155,6 +175,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
        icon={setupSubMenuProps.icon}
        to={setupSubMenuProps.to}
        params={{ endpointId: environmentId }}
+        data-cy={setupSubMenuProps.dataCy}
      >
        <Authorized
          authorizations="PortainerEndpointUpdateSettings"
--- a/app/react/sidebar/EdgeComputeSidebar.tsx
+++ b/app/react/sidebar/EdgeComputeSidebar.tsx
@ -6,10 +6,30 @@ import { SidebarSection } from './SidebarSection';
 export function EdgeComputeSidebar() {
  return (
    <SidebarSection title="Edge compute">
-      <SidebarItem to="edge.devices" label="Edge Devices" icon={Box} />
-      <SidebarItem to="edge.groups" label="Edge Groups" icon={Grid} />
-      <SidebarItem to="edge.stacks" label="Edge Stacks" icon={Layers} />
-      <SidebarItem to="edge.jobs" label="Edge Jobs" icon={Clock} />
+      <SidebarItem
+        to="edge.devices"
+        label="Edge Devices"
+        icon={Box}
+        data-cy="portainerSidebar-edgeDevices"
+      />
+      <SidebarItem
+        to="edge.groups"
+        label="Edge Groups"
+        icon={Grid}
+        data-cy="portainerSidebar-edgeGroups"
+      />
+      <SidebarItem
+        to="edge.stacks"
+        label="Edge Stacks"
+        icon={Layers}
+        data-cy="portainerSidebar-edgeStacks"
+      />
+      <SidebarItem
+        to="edge.jobs"
+        label="Edge Jobs"
+        icon={Clock}
+        data-cy="portainerSidebar-edgeJobs"
+      />
    </SidebarSection>
  );
 }
--- a/app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx
+++ b/app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx
@ -21,13 +21,18 @@ export function KubernetesSidebar({ environmentId }: Props) {
    <>
      {isOpen && <KubectlShellButton environmentId={environmentId} />}

-      <DashboardLink environmentId={environmentId} platformPath="kubernetes" />
+      <DashboardLink
+        environmentId={environmentId}
+        platformPath="kubernetes"
+        data-cy="k8sSidebar-dashboard"
+      />

      <SidebarItem
        to="kubernetes.templates.custom"
        params={{ endpointId: environmentId }}
        icon={Edit}
        label="Custom Templates"
+        data-cy="k8sSidebar-customTemplates"
      />

      <SidebarItem
@ -35,6 +40,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
        params={{ endpointId: environmentId }}
        icon={Layers}
        label="Namespaces"
+        data-cy="k8sSidebar-namespaces"
      />

      <Authorized authorizations="HelmInstallChart">
@ -43,6 +49,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
          params={{ endpointId: environmentId }}
          icon={Loader}
          label="Helm"
+          data-cy="k8sSidebar-helm"
        />
      </Authorized>

@ -51,6 +58,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
        params={{ endpointId: environmentId }}
        icon={Box}
        label="Applications"
+        data-cy="k8sSidebar-applications"
      />

      <SidebarItem
@ -58,21 +66,28 @@ export function KubernetesSidebar({ environmentId }: Props) {
        params={{ endpointId: environmentId }}
        icon={Lock}
        label="ConfigMaps & Secrets"
+        data-cy="k8sSidebar-configurations"
      />

-      <VolumesLink environmentId={environmentId} platformPath="kubernetes" />
+      <VolumesLink
+        environmentId={environmentId}
+        platformPath="kubernetes"
+        data-cy="k8sSidebar-volumes"
+      />

      <SidebarItem
        label="Cluster"
        to="kubernetes.cluster"
        icon={Server}
        params={{ endpointId: environmentId }}
+        data-cy="k8sSidebar-cluster"
      >
        <Authorized authorizations="K8sClusterSetupRW" adminOnlyCE>
          <SidebarItem
            to="portainer.k8sendpoint.kubernetesConfig"
            params={{ id: environmentId }}
            label="Setup"
+            data-cy="k8sSidebar-setup"
          />
        </Authorized>

@ -81,6 +96,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
            to="portainer.k8sendpoint.securityConstraint"
            params={{ id: environmentId }}
            label="Security constraints"
+            data-cy="k8sSidebar-securityConstraints"
          />
        </Authorized>

@ -88,6 +104,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
          to="kubernetes.registries"
          params={{ endpointId: environmentId }}
          label="Registries"
+          data-cy="k8sSidebar-registries"
        />
      </SidebarItem>
    </>
--- a/app/react/sidebar/SettingsSidebar.tsx
+++ b/app/react/sidebar/SettingsSidebar.tsx
@ -27,10 +27,25 @@ export function SettingsSidebar({ isAdmin }: Props) {
  return (
    <SidebarSection title="Settings">
      {showUsersSection && (
-        <SidebarItem to="portainer.users" label="Users" icon={Users}>
-          <SidebarItem to="portainer.teams" label="Teams" />
+        <SidebarItem
+          to="portainer.users"
+          label="Users"
+          icon={Users}
+          data-cy="portainerSidebar-users"
+        >
+          <SidebarItem
+            to="portainer.teams"
+            label="Teams"
+            data-cy="portainerSidebar-teams"
+          />

-          {isAdmin && <SidebarItem to="portainer.roles" label="Roles" />}
+          {isAdmin && (
+            <SidebarItem
+              to="portainer.roles"
+              label="Roles"
+              data-cy="portainerSidebar-roles"
+            />
+          )}
        </SidebarItem>
      )}
      {isAdmin && (
@ -40,15 +55,25 @@ export function SettingsSidebar({ isAdmin }: Props) {
            to="portainer.endpoints"
            icon={HardDrive}
            openOnPaths={['portainer.wizard.endpoints']}
+            data-cy="portainerSidebar-environments"
          >
-            <SidebarItem to="portainer.groups" label="Groups" />
-            <SidebarItem to="portainer.tags" label="Tags" />
+            <SidebarItem
+              to="portainer.groups"
+              label="Groups"
+              data-cy="portainerSidebar-environmentGroups"
+            />
+            <SidebarItem
+              to="portainer.tags"
+              label="Tags"
+              data-cy="portainerSidebar-environmentTags"
+            />
          </SidebarItem>

          <SidebarItem
            label="Registries"
            to="portainer.registries"
            icon={Radio}
+            data-cy="portainerSidebar-registries"
          />

          {process.env.PORTAINER_EDITION !== 'CE' && (
@ -56,6 +81,7 @@ export function SettingsSidebar({ isAdmin }: Props) {
              to="portainer.licenses"
              label="Licenses"
              icon={Award}
+              data-cy="portainerSidebar-licenses"
            />
          )}

@ -63,22 +89,38 @@ export function SettingsSidebar({ isAdmin }: Props) {
            label="Authentication logs"
            to="portainer.authLogs"
            icon={FileText}
+            data-cy="portainerSidebar-authLogs"
          >
-            <SidebarItem to="portainer.activityLogs" label="Activity Logs" />
+            <SidebarItem
+              to="portainer.activityLogs"
+              label="Activity Logs"
+              data-cy="portainerSidebar-activityLogs"
+            />
          </SidebarItem>

-          <SidebarItem to="portainer.settings" label="Settings" icon={Settings}>
+          <SidebarItem
+            to="portainer.settings"
+            label="Settings"
+            icon={Settings}
+            data-cy="portainerSidebar-settings"
+          >
            {!window.ddExtension && (
              <SidebarItem
                to="portainer.settings.authentication"
                label="Authentication"
+                data-cy="portainerSidebar-authentication"
              />
            )}
-            <SidebarItem to="portainer.settings.cloud" label="Cloud" />
+            <SidebarItem
+              to="portainer.settings.cloud"
+              label="Cloud"
+              data-cy="portainerSidebar-cloud"
+            />

            <SidebarItem
              to="portainer.settings.edgeCompute"
              label="Edge Compute"
+              data-cy="portainerSidebar-edgeCompute"
            />

            <SidebarItem.Wrapper label="Help / About">
@ -90,7 +132,7 @@ export function SettingsSidebar({ isAdmin }: Props) {
                }
                target="_blank"
                rel="noreferrer"
-                className="px-3 rounded flex h-full items-center"
+                className="px-3 rounded flex h-8 items-center"
              >
                Help / About
              </a>
--- a/app/react/sidebar/Sidebar.tsx
+++ b/app/react/sidebar/Sidebar.tsx
@ -41,7 +41,12 @@ export function Sidebar() {
        {/* negative margin + padding -> scrollbar won't hide the content */}
        <div className="mt-6 overflow-y-auto flex-1 -mr-4 pr-4">
          <ul className="space-y-9">
-            <SidebarItem to="portainer.home" icon={Home} label="Home" />
+            <SidebarItem
+              to="portainer.home"
+              icon={Home}
+              label="Home"
+              data-cy="portainerSidebar-home"
+            />

            <EnvironmentSidebar />

--- a/app/react/sidebar/SidebarItem/Head.tsx
+++ b/app/react/sidebar/SidebarItem/Head.tsx
@ -6,12 +6,17 @@ import {
 import clsx from 'clsx';
 import { ComponentProps } from 'react';

+import { AutomationTestingProps } from '@/types';
+
 import { Link } from '@@/Link';
 import { IconProps, Icon } from '@@/Icon';

 import { useSidebarState } from '../useSidebarState';

-interface Props extends IconProps, ComponentProps<typeof Link> {
+interface Props
+  extends IconProps,
+    ComponentProps<typeof Link>,
+    AutomationTestingProps {
  label: string;
  ignorePaths?: string[];
 }
@ -23,6 +28,7 @@ export function Head({
  label,
  icon,
  ignorePaths = [],
+  'data-cy': dataCy,
 }: Props) {
  const { isOpen } = useSidebarState();
  const anchorProps = useSrefActive(
@ -43,6 +49,7 @@ export function Head({
        'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit w-full flex-1 rounded-md',
        { 'px-3': isOpen }
      )}
+      data-cy={dataCy}
    >
      <div
        className={clsx('flex items-center h-8 space-x-4 text-sm', {
--- a/app/react/sidebar/SidebarItem/SidebarItem.tsx
+++ b/app/react/sidebar/SidebarItem/SidebarItem.tsx
@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 import { Icon } from 'react-feather';

+import { AutomationTestingProps } from '@/types';
+
 import { Wrapper } from './Wrapper';
 import { Menu } from './Menu';
 import { Head } from './Head';
 import { getPathsForChildren } from './utils';

-interface Props {
+interface Props extends AutomationTestingProps {
  icon?: Icon;
  to: string;
  params?: object;
@ -22,6 +24,7 @@ export function SidebarItem({
  params,
  label,
  openOnPaths = [],
+  'data-cy': dataCy,
 }: Props) {
  const childrenPath = getPathsForChildren(children);
  const head = (
@ -31,6 +34,7 @@ export function SidebarItem({
      params={params}
      label={label}
      ignorePaths={childrenPath}
+      data-cy={dataCy}
    />
  );

--- a/app/react/sidebar/items/DashboardLink.tsx
+++ b/app/react/sidebar/items/DashboardLink.tsx
@ -1,21 +1,27 @@
 import { Layout } from 'react-feather';

 import { EnvironmentId } from '@/portainer/environments/types';
+import { AutomationTestingProps } from '@/types';

 import { SidebarItem } from '../SidebarItem';

-interface Props {
+interface Props extends AutomationTestingProps {
  environmentId: EnvironmentId;
  platformPath: string;
 }

-export function DashboardLink({ environmentId, platformPath }: Props) {
+export function DashboardLink({
+  environmentId,
+  platformPath,
+  'data-cy': dataCy,
+}: Props) {
  return (
    <SidebarItem
      to={`${platformPath}.dashboard`}
      params={{ endpointId: environmentId }}
      icon={Layout}
      label="Dashboard"
+      data-cy={dataCy}
    />
  );
 }
--- a/app/react/sidebar/items/VolumesLink.tsx
+++ b/app/react/sidebar/items/VolumesLink.tsx
@ -1,21 +1,27 @@
 import { Database } from 'react-feather';

 import { EnvironmentId } from '@/portainer/environments/types';
+import { AutomationTestingProps } from '@/types';

 import { SidebarItem } from '../SidebarItem';

-interface Props {
+interface Props extends AutomationTestingProps {
  environmentId: EnvironmentId;
  platformPath: string;
 }

-export function VolumesLink({ environmentId, platformPath }: Props) {
+export function VolumesLink({
+  environmentId,
+  platformPath,
+  'data-cy': dataCy,
+}: Props) {
  return (
    <SidebarItem
      to={`${platformPath}.volumes`}
      params={{ endpointId: environmentId }}
      icon={Database}
      label="Volumes"
+      data-cy={dataCy}
    />
  );
 }