OU-1064: including data-test into perses components for automation

web/src/components/dashboards/perses/dashboard-list.tsx

@@ -27,6 +27,7 @@ import { Link, useSearchParams } from 'react-router-dom-v5-compat';
 
 import { getDashboardUrl, usePerspective } from '../../hooks/usePerspective';
 import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { listPersesDashboardsDataTestIDs } from 'src/components/data-test';
 const perPageOptions = [
   { title: '10', value: 10 },
   { title: '20', value: 20 },
@@ -230,11 +231,13 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
               filterId="name"
               title={t('Name')}
               placeholder={t('Filter by name')}
+              data-test={listPersesDashboardsDataTestIDs.NameFilter}
             />
             <DataViewTextFilter
               filterId="project-filter"
               title={t('Project')}
               placeholder={t('Filter by project')}
+              data-test={listPersesDashboardsDataTestIDs.ProjectFilter}
             />
           </DataViewFilters>
         }
@@ -248,16 +251,24 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
         />
       ) : (
         <EmptyState variant={EmptyStateVariant.sm}>
-          <Title headingLevel="h4" size="lg">
+          <Title
+            headingLevel="h4"
+            size="lg"
+            data-test={listPersesDashboardsDataTestIDs.EmptyStateTitle}
+          >
             {hasFiltersApplied ? t('No results found') : t('No dashboards found')}
           </Title>
-          <EmptyStateBody>
+          <EmptyStateBody data-test={listPersesDashboardsDataTestIDs.EmptyStateBody}>
             {hasFiltersApplied
               ? t('No results match the filter criteria. Clear filters to show results.')
               : t('No Perses dashboards are currently available in this project.')}
           </EmptyStateBody>
           {hasFiltersApplied && (
-            <Button onClick={clearAllFilters} className="pf-c-button pf-m-link">
+            <Button
+              onClick={clearAllFilters}
+              className="pf-c-button pf-m-link"
+              data-test={listPersesDashboardsDataTestIDs.ClearAllFiltersButton}
+            >
               {t('Clear all filters')}
             </Button>
           )}

web/src/components/dashboards/perses/dashboard-skeleton.tsx

@@ -15,6 +15,7 @@ import { useNavigate } from 'react-router-dom-v5-compat';
 import { chart_color_blue_100, chart_color_blue_300 } from '@patternfly/react-tokens';
 import { usePatternFlyTheme } from '../../hooks/usePatternflyTheme';
 import { ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
+import { listPersesDashboardsDataTestIDs } from '../../data-test';
 
 const DashboardBreadCrumb: React.FunctionComponent = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -43,10 +44,18 @@ const DashboardBreadCrumb: React.FunctionComponent = () => {
           color: linkColor,
           textDecoration: 'underline',
         }}
+        data-test={listPersesDashboardsDataTestIDs.PersesBreadcrumbDashboardItem}
       >
         {t('Dashboards')}
       </BreadcrumbItem>
-      {dashboardName && <BreadcrumbItem isActive>{dashboardName}</BreadcrumbItem>}
+      {dashboardName && (
+        <BreadcrumbItem
+          isActive
+          data-test={listPersesDashboardsDataTestIDs.PersesBreadcrumbDashboardNameItem}
+        >
+          {dashboardName}
+        </BreadcrumbItem>
+      )}
     </Breadcrumb>
   );
 };

web/src/components/dashboards/perses/dashboard-toolbar.tsx

@@ -20,6 +20,8 @@ import { useDashboardsData } from './hooks/useDashboardsData';
 import { useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
 
+import { persesDashboardDataTestIDs } from '../../data-test';
+
 export interface DashboardToolbarProps {
   dashboardName: string;
   dashboardTitleComponent?: ReactNode;
@@ -72,6 +74,7 @@ export const EditButton = ({ onClick }: EditButtonProps): ReactElement => {
       color="secondary"
       disabled={disabled || loading}
       sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}
+      data-test={persesDashboardDataTestIDs.editDashboardButtonToolbar}
     >
       {loading ? t('Loading...') : t('Edit')}
     </Button>
@@ -199,7 +202,11 @@ export const OCPDashboardToolbar = (props: DashboardToolbarProps): ReactElement
                 <AddGroupButton />
               </Stack>
               <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />
-              <Button variant="outlined" onClick={onCancelButtonClick}>
+              <Button
+                variant="outlined"
+                onClick={onCancelButtonClick}
+                data-test={persesDashboardDataTestIDs.cancelButtonToolbar}
+              >
                 Cancel
               </Button>
             </Stack>

web/src/components/data-test.ts

@@ -164,6 +164,8 @@ export const LegacyTestIDs = {
 export const IDs = {
   ChartAxis0ChartLabel: 'chart-axis-0-ChartLabel', //id^=IDs.ChartAxis0ChartLabel AxisX
   ChartAxis1ChartLabel: 'chart-axis-1-ChartLabel', //id^=IDs.ChartAxis1ChartLabel AxisY
+  persesDashboardCount: 'options-menu-top-pagination',
+  persesDashboardDownloadButton: 'download-dashboard-button',
 };
 
 export const Classes = {
@@ -203,3 +205,41 @@ export const Classes = {
   SilenceLabelRow: '.pf-v6-l-grid.pf-m-all-12-col-on-sm.pf-m-all-4-col-on-md.pf-m-gutter, .row',
   SilenceState: '.pf-v6-l-stack__item, .co-break-word',
 };
+
+export const persesAriaLabels = {
+  TimeRangeDropdown: 'Select time range. Currently set to [object Object]',
+  RefreshButton: 'Refresh',
+  RefreshIntervalDropdown: 'Select refresh interval. Currently set to 0s',
+  ZoomInButton: 'Zoom in',
+  ZoomOutButton: 'Zoom out',
+  ViewJSONButton: 'View JSON',
+};
+
+//data-testid
+export const persesMUIDataTestIDs = {
+  variableDropdown: 'variable',
+  panelGroupHeader: 'panel-group-header',
+  panelHeader: 'panel',
+};
+
+export const persesDashboardDataTestIDs = {
+  editDashboardButtonToolbar: 'edit-dashboard-button-toolbar',
+  cancelButtonToolbar: 'cancel-button-toolbar',
+};
+
+export const listPersesDashboardsDataTestIDs = {
+  PersesBreadcrumbDashboardItem: 'perses-dashboards-breadcrumb-dashboard-item',
+  PersesBreadcrumbDashboardNameItem: 'perses-dashboards-breadcrumb-dashboard-name-item',
+  NameFilter: 'name-filter',
+  ProjectFilter: 'project-filter',
+  EmptyStateTitle: 'empty-state-title',
+  EmptyStateBody: 'empty-state-body',
+  ClearAllFiltersButton: 'clear-all-filters-button',
+  DashboardLinkPrefix: 'perseslistpage-',
+};
+
+export const listPersesDashboardsOUIAIDs = {
+  PageHeaderSubtitle: 'PageHeader-subtitle',
+  PersesBreadcrumb: 'perses-dashboards-breadcrumb',
+  PersesDashListDataViewTable: 'PersesDashList-DataViewTable',
+};