chore(data-cy): add test attributes for test automation [XT-1188]

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">

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

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>

app/react/components/ImageConfigFieldset/InputSearch.tsx

@@ -34,6 +34,7 @@ export function InputSearch({
       onChange={onChange}
       placeholder={placeholder}
       inputId={inputId}
+      data-cy="component-imageConfigInputSearch"
     />
   );
 }

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}

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>
   );

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 && (

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>

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>

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}
     />
   );
 }

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>
   );

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>

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"
         />

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>

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>

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}