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

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"