chore(data-cy): require data-cy attributes [EE-6880] (#11453)

app/react/edge/components/AssociatedEdgeEnvironmentsSelector.tsx

@@ -54,6 +54,7 @@ export function AssociatedEdgeEnvironmentsSelector({
                   );
                 }
               }}
+              data-cy="edgeGroupCreate-associatedEndpointsTable"
             />
           </div>
         </div>

app/react/edge/components/EdgeAsyncIntervalsForm.tsx

@@ -96,6 +96,7 @@ export function EdgeAsyncIntervalsForm({
       >
         <Select
           value={values.PingInterval}
+          data-cy="edge-checkin-ping-interval-select"
           name="PingInterval"
           onChange={handleChange}
           options={pingIntervalOptions}
@@ -110,6 +111,7 @@ export function EdgeAsyncIntervalsForm({
       >
         <Select
           value={values.SnapshotInterval}
+          data-cy="edge-checkin-snapshot-interval-select"
           name="SnapshotInterval"
           onChange={handleChange}
           options={snapshotIntervalOptions}
@@ -124,6 +126,7 @@ export function EdgeAsyncIntervalsForm({
       >
         <Select
           value={values.CommandInterval}
+          data-cy="edge-checkin-command-interval-select"
           name="CommandInterval"
           onChange={handleChange}
           options={commandIntervalOptions}

app/react/edge/components/EdgeCheckInIntervalField.tsx

@@ -56,6 +56,7 @@ export function EdgeCheckinIntervalField({
     >
       <Select
         value={value}
+        data-cy="edge-checkin-interval-select"
         onChange={(e) => {
           onChange(parseInt(e.currentTarget.value, 10));
         }}

app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx

@@ -55,10 +55,11 @@ export function EdgeScriptSettingsFieldset({
           >
             <Input
               type="text"
-              name="edgeIdGenerator"
               value={values.edgeIdGenerator}
+              name="edgeIdGenerator"
               id="edge-id-generator-input"
               onChange={(e) => setFieldValue(e.target.name, e.target.value)}
+              data-cy="edge-id-generator-input"
             />
           </FormControl>
           <div className="form-group">
@@ -89,6 +90,7 @@ export function EdgeScriptSettingsFieldset({
         <div className="col-sm-12">
           <SwitchField
             checked={values.allowSelfSignedCertificates}
+            data-cy="allow-self-signed-certs-switch"
             onChange={(value) =>
               setFieldValue('allowSelfSignedCertificates', value)
             }

app/react/edge/components/EdgeScriptForm/ScriptTabs.tsx

@@ -60,7 +60,9 @@ export function ScriptTabs({
         <>
           <Code>{cmd}</Code>
           <div className="mt-2">
-            <CopyButton copyText={cmd}>Copy</CopyButton>
+            <CopyButton copyText={cmd} data-cy="copy-edge-script-button">
+              Copy
+            </CopyButton>
           </div>
         </>
       ),

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/AssignmentDialog.tsx

@@ -71,6 +71,7 @@ export function AssignmentDialog({
                     <div className="mt-2">
                       <Checkbox
                         label="Override pre-assigned group"
+                        data-cy="override-group-checkbox"
                         id="overrideGroup"
                         bold={false}
                         checked={values.overrideGroup}
@@ -94,6 +95,7 @@ export function AssignmentDialog({
                     <div className="mt-2">
                       <Checkbox
                         label="Override pre-assigned edge groups"
+                        data-cy="override-edge-groups-checkbox"
                         bold={false}
                         id="overrideEdgeGroups"
                         checked={values.overrideEdgeGroups}
@@ -124,6 +126,7 @@ export function AssignmentDialog({
                     <div className="mt-2">
                       <Checkbox
                         label="Override pre-assigned tags"
+                        data-cy="override-tags-checkbox"
                         bold={false}
                         id="overrideTags"
                         checked={values.overrideTags}
@@ -137,11 +140,16 @@ export function AssignmentDialog({
               </div>
             </Modal.Body>
             <Modal.Footer>
-              <Button onClick={() => onSubmit()} color="default">
+              <Button
+                onClick={() => onSubmit()}
+                color="default"
+                data-cy="waiting-room-cancel-assignment-button"
+              >
                 Cancel
               </Button>
               <LoadingButton
                 isLoading={assignRelationsMutation.isLoading}
+                data-cy="waiting-room-associate-button"
                 loadingText="Associating..."
               >
                 Associate

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx

@@ -42,6 +42,7 @@ export function CreatableSelector({
       isLoading={isLoading}
       isDisabled={isLoading}
       closeMenuOnSelect={false}
+      data-cy="edge-devices-assignment-selector"
     />
   );
 

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx

@@ -53,6 +53,7 @@ export function GroupSelector() {
       isDisabled={createMutation.isLoading}
       placeholder="Select a group"
       isClearable
+      data-cy="edge-devices-assignment-selector"
     />
   );
 

app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx

@@ -2,6 +2,8 @@ import { Datatable as GenericDatatable } from '@@/datatables';
 import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
 
+import { WaitingRoomEnvironment } from '../types';
+
 import { columns } from './columns';
 import { Filter } from './Filter';
 import { TableActions } from './TableActions';
@@ -26,7 +28,7 @@ export function Datatable() {
   });
 
   return (
-    <GenericDatatable
+    <GenericDatatable<WaitingRoomEnvironment>
       settingsManager={tableState}
       columns={columns}
       dataset={environments}
@@ -41,6 +43,7 @@ export function Datatable() {
       onPageChange={setPage}
       totalCount={totalCount}
       description={<Filter />}
+      data-cy="edge-devices-waiting-room-datatable"
     />
   );
 }

app/react/edge/edge-devices/WaitingRoomView/Datatable/Filter.tsx

@@ -62,6 +62,7 @@ export function Filter() {
         value={filterStore.checkIn}
         options={checkInOptions}
         bindToBody
+        data-cy="edge-devices-check-in-filter"
       />
     </div>
   );

app/react/edge/edge-devices/WaitingRoomView/Datatable/TableActions.tsx

@@ -38,6 +38,7 @@ export function TableActions({
       <DeleteButton
         onConfirmed={() => handleRemoveDevice(selectedRows)}
         disabled={selectedRows.length === 0}
+        data-cy="remove-device-button"
         confirmMessage="You're about to remove edge device(s) from waiting room, which will not be shown until next agent startup."
       >
         Remove Device
@@ -58,6 +59,7 @@ export function TableActions({
         <span>
           <Button
             onClick={() => handleAssociateAndAssign(selectedRows)}
+            data-cy="associate-and-assign-button"
             disabled={
               selectedRows.length === 0 || licenseOverused || !isPureAdmin
             }
@@ -84,6 +86,7 @@ export function TableActions({
         <span>
           <Button
             onClick={() => handleAssociateDevice(selectedRows)}
+            data-cy="associate-device-button"
             disabled={selectedRows.length === 0 || licenseOverused}
             icon={Check}
           >

app/react/edge/edge-devices/WaitingRoomView/WaitingRoomView.tsx

@@ -36,8 +36,13 @@ function WaitingRoomView() {
             <Alert color="warn">
               Associating all nodes in waiting room will exceed the node limit
               of your current license. Go to{' '}
-              <Link to="portainer.licenses">Licenses</Link> page to view the
-              current usage.
+              <Link
+                to="portainer.licenses"
+                data-cy="waitingRoom-portainerLicensesLink"
+              >
+                Licenses
+              </Link>{' '}
+              page to view the current usage.
             </Alert>
           </div>
         </div>

app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx

@@ -32,6 +32,7 @@ export function EdgeGroupsDatatable() {
       isRowSelectable={({ original: item }) =>
         !(item.HasEdgeStack || item.HasEdgeJob || item.HasEdgeConfig)
       }
+      data-cy="edge-groups-datatable"
     />
   );
 }

app/react/edge/edge-groups/ListView/TableActions.tsx

@@ -20,9 +20,10 @@ export function TableActions({
         confirmMessage="Do you want to remove the selected Edge Group(s)?"
         disabled={selectedItems.length === 0}
         onConfirmed={() => handleRemove(selectedItems)}
+        data-cy="remove-edge-group-button"
       />
 
-      <AddButton>Add Edge group</AddButton>
+      <AddButton data-cy="add-edge-group-button">Add Edge group</AddButton>
     </div>
   );
 

app/react/edge/edge-groups/ListView/columns/name.tsx

@@ -23,7 +23,12 @@ function NameCell({
 
   return (
     <>
-      <Link to=".edit" params={{ groupId: item.Id }} title={name}>
+      <Link
+        to=".edit"
+        params={{ groupId: item.Id }}
+        title={name}
+        data-cy={`edge-group-link-${name}`}
+      >
         {name}
       </Link>
       {(item.HasEdgeJob || item.HasEdgeStack) && (

app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx

@@ -57,6 +57,7 @@ export function ResultsDatatable({
         downloadLogs: onDownloadLogs,
         clearLogs: onClearLogs,
       })}
+      data-cy="edge-job-results-datatable"
     />
   );
 

app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx

@@ -41,10 +41,16 @@ function ActionsCell({
     case LogsStatus.Collected:
       return (
         <>
-          <Button onClick={() => tableMeta.downloadLogs(item.EndpointId)}>
+          <Button
+            onClick={() => tableMeta.downloadLogs(item.EndpointId)}
+            data-cy={`edge-job-download-logs-${item.Endpoint.Name}`}
+          >
             Download logs
           </Button>
-          <Button onClick={() => tableMeta.clearLogs(item.EndpointId)}>
+          <Button
+            onClick={() => tableMeta.clearLogs(item.EndpointId)}
+            data-cy={`edge-job-clear-logs-${item.Endpoint.Name}`}
+          >
             Clear logs
           </Button>
         </>
@@ -52,7 +58,10 @@ function ActionsCell({
     case LogsStatus.Idle:
     default:
       return (
-        <Button onClick={() => tableMeta.collectLogs(item.EndpointId)}>
+        <Button
+          onClick={() => tableMeta.collectLogs(item.EndpointId)}
+          data-cy={`edge-job-retrieve-logs-${item.Endpoint.Name}`}
+        >
           Retrieve logs
         </Button>
       );

app/react/edge/edge-jobs/ListView/EdgeJobsDatatable.tsx

@@ -29,6 +29,7 @@ export function EdgeJobsDatatable() {
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} />
       )}
+      data-cy="edge-jobs-datatable"
     />
   );
 }

app/react/edge/edge-jobs/ListView/TableActions.tsx

@@ -20,9 +20,10 @@ export function TableActions({
         confirmMessage="Do you want to remove the selected Edge Job(s)?"
         disabled={selectedItems.length === 0}
         onConfirmed={() => handleRemove(selectedItems)}
+        data-cy="remove-edge-jobs-button"
       />
 
-      <AddButton>Add Edge job</AddButton>
+      <AddButton data-cy="add-edge-job-button">Add Edge job</AddButton>
     </div>
   );
 

app/react/edge/edge-jobs/ListView/columns.ts

@@ -9,7 +9,7 @@ import { EdgeJob } from '../types';
 const columnHelper = createColumnHelper<EdgeJob>();
 
 export const columns = [
-  buildNameColumn<EdgeJob>('Name', '.job'),
+  buildNameColumn<EdgeJob>('Name', '.job', 'edge-job-name'),
   columnHelper.accessor('CronExpression', {
     header: 'Cron Expression',
   }),

app/react/edge/edge-stacks/CreateView/NameField.tsx

@@ -24,6 +24,7 @@ export function NameField({
         onChange={(e) => onChange(e.target.value)}
         value={value}
         required
+        data-cy="edge-stack-create-name-input"
       />
     </FormControl>
   );

app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.tsx

@@ -60,6 +60,7 @@ function Item({
       {option.select ? (
         <Select
           value={value}
+          data-cy={`env-var-select-${option.name}`}
           onChange={(e) => onChange(e.target.value)}
           options={option.select.map((o) => ({
             label: o.text,
@@ -74,6 +75,7 @@ function Item({
           onChange={(e) => onChange(e.target.value)}
           disabled={option.preset}
           id={inputId}
+          data-cy="env-var-input"
         />
       )}
     </FormControl>

app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx

@@ -50,6 +50,7 @@ export function TemplateSelector({
           onChange({ template, type } as SelectedTemplateValue);
         }}
         options={options}
+        data-cy="edge-stacks-create-template-selector"
       />
     </FormControl>
   );

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx

@@ -54,6 +54,7 @@ export function ComposeForm({
       )}
 
       <WebEditorForm
+        data-cy="compose-editor"
         value={values.content}
         yaml
         id="compose-editor"

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx

@@ -159,6 +159,7 @@ function InnerForm({
               <div className="col-sm-12">
                 <SwitchField
                   label="Create an Edge stack webhook"
+                  data-cy="edge-stack-enable-webhook-switch"
                   checked={values.webhookEnabled}
                   labelClass="col-sm-3 col-lg-2"
                   onChange={(value) => setFieldValue('webhookEnabled', value)}
@@ -212,6 +213,7 @@ function InnerForm({
           <div className="col-sm-12">
             <LoadingButton
               className="!ml-0"
+              data-cy="update-stack-button"
               size="small"
               disabled={!isValid}
               isLoading={isSubmitting}

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx

@@ -273,6 +273,7 @@ function InnerForm({
       <FormSection title="Actions">
         <LoadingButton
           disabled={dirty || !isValid || isLoading}
+          data-cy="pull-and-update-stack-button"
           isLoading={isUpdateVersion && isLoading}
           loadingText="updating stack..."
         >
@@ -285,6 +286,7 @@ function InnerForm({
           isLoading={!isUpdateVersion && isLoading}
           loadingText="updating settings..."
           onClick={onUpdateSettingsClick}
+          data-cy="edge-stack-update-settings-button"
         >
           Update settings
         </LoadingButton>

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx

@@ -20,6 +20,7 @@ export function KubernetesForm({
         <div className="col-sm-12">
           <SwitchField
             label="Use namespace(s) specified from manifest"
+            data-cy="use-manifest-namespaces-switch"
             tooltip="If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment"
             checked={values.useManifestNamespaces}
             onChange={(value) => setFieldValue('useManifestNamespaces', value)}
@@ -28,6 +29,7 @@ export function KubernetesForm({
       </div>
 
       <WebEditorForm
+        data-cy="kube-manifest-editor"
         value={values.content}
         yaml
         id="kube-manifest-editor"

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx

@@ -25,8 +25,13 @@ export function EnvironmentActions({ environment }: Props) {
           to="edge.browse.containers"
           params={{ environmentId: environment.Id, edgeStackId }}
           className="!text-inherit hover:!no-underline"
+          data-cy="browse-snapshot-link"
         >
-          <Button color="none" title="Browse Snapshot">
+          <Button
+            color="none"
+            title="Browse Snapshot"
+            data-cy="browse-snapshot-button"
+          >
             <Icon icon={Search} className="searchIcon" />
           </Button>
         </Link>

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx

@@ -116,9 +116,11 @@ export function EnvironmentsDatatable() {
             value={statusFilter}
             onChange={(e) => setStatusFilter(e ?? undefined)}
             options={envStatusSelectOptions}
+            data-cy="edge-stacks-environments-status-filter"
           />
         </div>
       }
+      data-cy="edge-stacks-environments-datatable"
     />
   );
 }

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx

@@ -34,7 +34,12 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
 
   return (
     <>
-      <Button color="none" title="Retrieve logs" onClick={handleCollectLogs}>
+      <Button
+        color="none"
+        title="Retrieve logs"
+        onClick={handleCollectLogs}
+        data-cy="edge-stack-logs-collect-button"
+      >
         <Icon
           icon={clsx({
             'file-text': !collecting,
@@ -44,6 +49,7 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
       </Button>
       <Button
         color="none"
+        data-cy="edge-stack-logs-download-button"
         title="Download logs"
         disabled={status !== 'collected'}
         onClick={handleDownloadLogs}
@@ -60,6 +66,7 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         title="Delete logs"
         disabled={status !== 'collected'}
         onClick={handleDeleteLogs}
+        data-cy="edge-stack-logs-delete-button"
       >
         <Icon
           icon={clsx({

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx

@@ -30,7 +30,11 @@ export const columns = _.compact([
     cell({ row: { original: env } }) {
       const { to, params } = getDashboardRoute(env);
       return (
-        <Link to={to} params={params}>
+        <Link
+          to={to}
+          params={params}
+          data-cy={`edge-stack-environment-link-${env.Name}`}
+        >
           {env.Name}
         </Link>
       );
@@ -112,7 +116,10 @@ export const columns = _.compact([
     : []),
 ]);
 
-function ErrorCell({ getValue }: CellContext<EdgeStackEnvironment, string>) {
+function ErrorCell({
+  getValue,
+  row,
+}: CellContext<EdgeStackEnvironment, string>) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const value = getValue();
@@ -125,6 +132,7 @@ function ErrorCell({ getValue }: CellContext<EdgeStackEnvironment, string>) {
       color="none"
       className="flex cursor-pointer"
       onClick={() => setIsExpanded(!isExpanded)}
+      data-cy={`edge-stack-environment-error-${row.index}`}
     >
       <div className="pr-1 pt-0.5">
         <Icon icon={isExpanded ? ChevronDown : ChevronRight} />

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx

@@ -23,6 +23,7 @@ export function DeploymentCounterLink({
         className="hover:no-underline"
         to="edge.stacks.edit"
         params={{ stackId, tab: 1, status: type }}
+        data-cy="deployment-counter-link"
       >
         <DeploymentCounter count={count} type={type} total={total} />
       </Link>

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx

@@ -47,6 +47,7 @@ export function EdgeStacksDatatable() {
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} />
       )}
+      data-cy="edge-stacks-datatable"
     />
   );
 }

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableActions.tsx

@@ -19,6 +19,7 @@ export function TableActions({
         disabled={selectedItems.length === 0}
         onConfirmed={() => handleRemove(selectedItems)}
         confirmMessage="Are you sure you want to remove the selected Edge stack(s)?"
+        data-cy="edgeStack-removeStackButton"
       />
 
       <AddButton data-cy="edgeStack-addStackButton">Add stack</AddButton>

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx

@@ -17,7 +17,12 @@ import { DeploymentCounter } from './DeploymentCounter';
 const columnHelper = createColumnHelper<DecoratedEdgeStack>();
 
 export const columns = _.compact([
-  buildNameColumn<DecoratedEdgeStack>('Name', 'edge.stacks.edit', 'stackId'),
+  buildNameColumn<DecoratedEdgeStack>(
+    'Name',
+    'edge.stacks.edit',
+    'edge-stacks-name',
+    'stackId'
+  ),
   columnHelper.accessor(
     (item) => item.aggregatedStatus[StatusType.Acknowledged] || 0,
     {
@@ -102,6 +107,7 @@ export const columns = _.compact([
                   tab: 1,
                   status: StatusType.Error,
                 }}
+                data-cy={`edge-stacks-error-${row.original.Id}`}
               >
                 ({count}/{row.original.NumDeployments})
               </Link>

app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx

@@ -85,11 +85,15 @@ function InnerSelector({
       }}
       placeholder="Select one or multiple group(s)"
       closeMenuOnSelect={false}
+      data-cy="edge-stacks-groups-selector"
     />
   ) : (
     <div className="small text-muted">
       No Edge groups are available. Head over to the{' '}
-      <Link to="edge.groups">Edge groups view</Link> to create one.
+      <Link to="edge.groups" data-cy="edge-stacks-groups-view-link">
+        Edge groups view
+      </Link>{' '}
+      to create one.
     </div>
   );
 }

app/react/edge/edge-stacks/components/PrePullToggle.tsx

@@ -12,6 +12,7 @@ export function PrePullToggle({
       <div className="col-sm-12">
         <SwitchField
           checked={value}
+          data-cy="kube-edge-stack-pre-pull-switch"
           name="prePullImage"
           label="Pre-pull images"
           tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"

app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx

@@ -75,6 +75,7 @@ export function PrivateRegistryFieldset({
             label="Use Credentials"
             labelClass="col-sm-3 col-lg-2"
             disabled={formInvalid}
+            data-cy="private-registry-use-credentials-switch"
           />
         </div>
       </div>
@@ -100,6 +101,7 @@ export function PrivateRegistryFieldset({
                   getOptionValue={(registry) => registry.Id.toString()}
                   onChange={(value) => onSelect(value?.Id)}
                   className="w-full"
+                  data-cy="private-registry-selector"
                 />
                 {method !== 'repository' && (
                   <Button
@@ -107,6 +109,7 @@ export function PrivateRegistryFieldset({
                     title="Reload"
                     icon={RefreshCw}
                     color="light"
+                    data-cy="private-registry-reload-button"
                   />
                 )}
               </div>

app/react/edge/edge-stacks/components/RetryDeployToggle.tsx

@@ -12,6 +12,7 @@ export function RetryDeployToggle({
       <div className="col-sm-12">
         <SwitchField
           checked={value}
+          data-cy="edge-stack-retry-deploy-toggle"
           name="retryDeploy"
           label="Retry deployment"
           tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"