From eea5543c61d670e624e645b544e6f00e2fcd1387 Mon Sep 17 00:00:00 2001
From: testa113 <testa113>
Date: Tue, 19 Mar 2024 09:03:36 +1300
Subject: [PATCH] chore(data-cy): add test attributes for test automation
 [XT-1188]

---
 .../resourcePoolsDatatable.html                        |  2 +-
 app/kubernetes/views/deploy/deploy.html                |  1 +
 app/kubernetes/views/resource-pools/resourcePools.html |  1 -
 .../components/ImageConfigFieldset/InputSearch.tsx     |  1 +
 app/react/components/datatables/Datatable.tsx          |  1 +
 app/react/components/datatables/DatatableHeader.tsx    | 10 +++++++++-
 .../AutocompleteSelect/AutocompleteSelect.tsx          |  3 +++
 .../kubernetes/DeployView/StackName/StackName.tsx      |  1 +
 .../gitops/ComposePathField/ComposePathField.tsx       |  2 ++
 .../portainer/gitops/ComposePathField/PathSelector.tsx |  3 +++
 app/react/portainer/gitops/RefField/RefField.tsx       |  1 +
 .../RelativePathFieldset/RelativePathFieldset.tsx      |  1 +
 .../SettingsView/KubeSettingsPanel/HelmSection.tsx     |  1 +
 .../KubeSettingsPanel/KubeConfigSection.tsx            |  1 +
 .../KubeSettingsPanel/KubeSettingsPanel.tsx            |  1 +
 .../TeamMembersList/TeamMembersList.tsx                |  1 +
 16 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
index 69788628d..a7fd02a61 100644
--- a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
+++ b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
@@ -97,7 +97,7 @@
       </div>
 
       <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
+        <table class="table-hover nowrap-cells table" data-cy="k8sNamespace-namespaceTable">
           <thead>
             <tr>
               <th class="dropdown">
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index 27ec85ee2..94f91238b 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -49,6 +49,7 @@
                       ng-model="ctrl.formValues.Namespace"
                       ng-change="ctrl.onChangeNamespace()"
                       ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"
+                      data-cy="k8sAppCreate-nsSelect"
                     ></select>
                     <span ng-if="ctrl.formValues.namespace_toggle && ctrl.state.BuildMethod !== ctrl.BuildMethods.HELM" class="small text-muted pt-[7px]"
                       >Namespaces specified in the manifest will be used</span
diff --git a/app/kubernetes/views/resource-pools/resourcePools.html b/app/kubernetes/views/resource-pools/resourcePools.html
index 9b8b56230..cd3b67628 100644
--- a/app/kubernetes/views/resource-pools/resourcePools.html
+++ b/app/kubernetes/views/resource-pools/resourcePools.html
@@ -13,7 +13,6 @@
         remove-action="ctrl.removeAction"
         refresh-callback="ctrl.getResourcePools"
         endpoint="ctrl.endpoint"
-        data-cy="k8sNamespace-namespaceTable"
       ></kubernetes-resource-pools-datatable>
     </div>
   </div>
diff --git a/app/react/components/ImageConfigFieldset/InputSearch.tsx b/app/react/components/ImageConfigFieldset/InputSearch.tsx
index 3c3117d2d..721371aac 100644
--- a/app/react/components/ImageConfigFieldset/InputSearch.tsx
+++ b/app/react/components/ImageConfigFieldset/InputSearch.tsx
@@ -34,6 +34,7 @@ export function InputSearch({
       onChange={onChange}
       placeholder={placeholder}
       inputId={inputId}
+      data-cy="component-imageConfigInputSearch"
     />
   );
 }
diff --git a/app/react/components/datatables/Datatable.tsx b/app/react/components/datatables/Datatable.tsx
index e4e277b55..15ee2fb1d 100644
--- a/app/react/components/datatables/Datatable.tsx
+++ b/app/react/components/datatables/Datatable.tsx
@@ -171,6 +171,7 @@ export function Datatable<D extends DefaultType>({
   return (
     <Table.Container noWidget={noWidget} aria-label={title}>
       <DatatableHeader
+        data-cy={dataCy}
         onSearchChange={handleSearchBarChange}
         searchValue={settings.search}
         title={title}
diff --git a/app/react/components/datatables/DatatableHeader.tsx b/app/react/components/datatables/DatatableHeader.tsx
index 1edd8e43c..42e0daabf 100644
--- a/app/react/components/datatables/DatatableHeader.tsx
+++ b/app/react/components/datatables/DatatableHeader.tsx
@@ -14,6 +14,7 @@ type Props = {
   renderTableActions?(): ReactNode;
   description?: ReactNode;
   titleId?: string;
+  'data-cy'?: string;
 };
 
 export function DatatableHeader({
@@ -25,12 +26,19 @@ export function DatatableHeader({
   titleIcon,
   description,
   titleId,
+  'data-cy': dataCy,
 }: Props) {
   if (!title) {
     return null;
   }
 
-  const searchBar = <SearchBar value={searchValue} onChange={onSearchChange} />;
+  const searchBar = (
+    <SearchBar
+      value={searchValue}
+      onChange={onSearchChange}
+      data-cy={`${dataCy}-searchInput`}
+    />
+  );
   const tableActions = !!renderTableActions && (
     <Table.Actions>{renderTableActions()}</Table.Actions>
   );
diff --git a/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx b/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
index c44e88efa..c04b82c05 100644
--- a/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
+++ b/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
@@ -23,6 +23,7 @@ export function AutocompleteSelect({
   searchResults,
   readOnly,
   inputId,
+  'data-cy': dataCy,
 }: {
   value: string;
   /**
@@ -35,6 +36,7 @@ export function AutocompleteSelect({
   searchResults?: Option<string>[];
   readOnly?: boolean;
   inputId: string;
+  'data-cy': string;
 }) {
   const [searchTerm, setSearchTerm] = useDebounce(value, onChange);
   const [selected, setSelected] = useState(false);
@@ -53,6 +55,7 @@ export function AutocompleteSelect({
         placeholder={placeholder}
         readOnly={readOnly}
         id={inputId}
+        data-cy={dataCy}
         autoComplete="off"
       />
       {!selected && searchResults && searchResults.length > 0 && (
diff --git a/app/react/kubernetes/DeployView/StackName/StackName.tsx b/app/react/kubernetes/DeployView/StackName/StackName.tsx
index bf1e20f29..01767116d 100644
--- a/app/react/kubernetes/DeployView/StackName/StackName.tsx
+++ b/app/react/kubernetes/DeployView/StackName/StackName.tsx
@@ -71,6 +71,7 @@ export function StackName({
             onChange={setStackName}
             placeholder="e.g. myStack"
             inputId="stack_name"
+            data-cy="component-stackNameInput"
           />
         </div>
       </div>
diff --git a/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx b/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
index 85c41689f..21013d2d3 100644
--- a/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
+++ b/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
@@ -66,6 +66,7 @@ export function ComposePathField({
               placeholder={isCompose ? 'docker-compose.yml' : 'manifest.yml'}
               model={model}
               inputId="stack_repository_path"
+              data-cy="component-gitPathInput"
               createdFromCustomTemplateId={createdFromCustomTemplateId}
             />
           ) : (
@@ -76,6 +77,7 @@ export function ComposePathField({
               }}
               placeholder={isCompose ? 'docker-compose.yml' : 'manifest.yml'}
               id="stack_repository_path"
+              data-cy="component-gitPathInput"
             />
           )}
         </FormControl>
diff --git a/app/react/portainer/gitops/ComposePathField/PathSelector.tsx b/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
index da6650b3b..db92c80d7 100644
--- a/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
+++ b/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
@@ -13,6 +13,7 @@ export function PathSelector({
   dirOnly,
   readOnly,
   inputId,
+  'data-cy': dataCy,
   createdFromCustomTemplateId,
 }: {
   value: string;
@@ -22,6 +23,7 @@ export function PathSelector({
   dirOnly?: boolean;
   readOnly?: boolean;
   inputId: string;
+  'data-cy': string;
   createdFromCustomTemplateId?: number;
 }) {
   const creds = getAuthentication(model);
@@ -50,6 +52,7 @@ export function PathSelector({
       placeholder={placeholder}
       readOnly={readOnly}
       inputId={inputId}
+      data-cy={dataCy}
     />
   );
 }
diff --git a/app/react/portainer/gitops/RefField/RefField.tsx b/app/react/portainer/gitops/RefField/RefField.tsx
index 3261574ef..eba2035a5 100644
--- a/app/react/portainer/gitops/RefField/RefField.tsx
+++ b/app/react/portainer/gitops/RefField/RefField.tsx
@@ -75,6 +75,7 @@ export function RefField({
         value={inputValue}
         onChange={(e) => updateInputValue(e.target.value)}
         placeholder="refs/heads/main"
+        data-cy="component-gitRefInput"
       />
     </Wrapper>
   );
diff --git a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
index 516b6d4bc..118937f48 100644
--- a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
+++ b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
@@ -187,6 +187,7 @@ export function RelativePathFieldset({
                       readOnly={isEditing}
                       dirOnly
                       inputId="per_device_configs_path_input"
+                      data-cy="component-perDeviceConfigsPathInput"
                     />
                   </FormControl>
                 </div>
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
index 96eaf9d75..480b18f25 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
@@ -28,6 +28,7 @@ export function HelmSection() {
         <Field
           as={Input}
           id="helm-repo-url"
+          data-cy="helm-repo-url"
           name={name}
           placeholder="https://charts.bitnami.com/bitnami"
         />
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
index 42a7bb569..5287ef013 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
@@ -38,6 +38,7 @@ export function KubeConfigSection() {
           value={value}
           options={options}
           onChange={(value) => value && setValue(value)}
+          inputId="kubeconfig-expiry-select"
         />
       </FormControl>
     </FormSection>
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
index 6af5f1680..05e72e887 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
@@ -61,6 +61,7 @@ export function KubeSettingsPanel({ settings }: { settings: Settings }) {
                     isLoading={mutation.isLoading}
                     loadingText="Saving"
                     className="!ml-0"
+                    data-cy="save-kubernetes-settings-button"
                   >
                     Save Kubernetes settings
                   </LoadingButton>
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
index 3724ed2a5..14f03dcb5 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
@@ -52,6 +52,7 @@ export function TeamMembersList({ users, roles, disabled, teamId }: Props) {
   return (
     <RowProvider context={rowContext}>
       <Datatable<User>
+        data-cy="team-members-table"
         dataset={users}
         columns={columns}
         titleIcon={Users}