Add some more data-test ids

Author: Amoghrd

web/cypress/integration-tests/netflow_table.cy.ts

@@ -179,7 +179,9 @@ describe('(OCP-50532, OCP-50531, OCP-50530, OCP-59408 Network_Observability) Net
         cy.visit('/netflow-traffic')
 
         cy.get('#pageHeader').should('exist').then(() => {
-            const settings = JSON.parse(localStorage.getItem('netobserv-plugin-settings'))
+            const rawSettings = localStorage.getItem('netobserv-plugin-settings')
+            expect(rawSettings, 'netobserv-plugin-settings should exist').to.not.be.null
+            const settings = JSON.parse(rawSettings as string)
             expect(settings['netflow-traffic-refresh']).to.be.equal(15000)
             expect(settings['netflow-traffic-size-size']).to.be.equal('s')
             expect(settings['netflow-traffic-columns']).to.include('StartTime')

web/src/components/health/health-card.tsx

@@ -91,9 +91,13 @@ export const HealthCard: React.FC<HealthCardProps> = ({
   }
 
   return (
-    <Card className={classes.join(' ')} isClickable={onClick !== undefined} isClicked={isSelected}>
+    <Card
+      className={classes.join(' ')}
+      data-test={`health-card-${name || 'global'}`}
+      isClickable={onClick !== undefined}
+      isClicked={isSelected}
+    >
       <CardHeader
-        data-test={`health-card-${name || 'global'}`}
         className={hideTitle ? 'card-header-hidden' : 'card-header'}
         selectableActions={{
           selectableActionAriaLabelledby: `selectable-card-${name || 'global'}`,

web/src/components/health/health-drawer-container.tsx

@@ -61,7 +61,7 @@ export const HealthDrawerContainer: React.FC<HealthDrawerContainerProps> = ({ ti
                 </span>
               </DrawerHead>
               {selectedItem && (
-                <div className="health-gallery-drawer-content">
+                <div className="health-gallery-drawer-content" data-test="health-drawer-content">
                   <RuleDetails kind={kind} resourceHealth={selectedItem} />
                 </div>
               )}

web/src/components/health/rule-details.tsx

@@ -103,6 +103,7 @@ const RuleTableRow: React.FC<{
       <Td dataLabel={t('Description')}>{item.description}</Td>
       <Td noPadding>
         <ActionsColumn
+          data-test="rule-details-actions"
           isDisabled={links.length === 0}
           items={links.map(l => ({ title: <a href={l.url}>{l.name}</a> }))}
         />
@@ -124,7 +125,7 @@ const RuleCard: React.FC<{
   const direction = React.useMemo(() => getDirection(item.ruleName), [item]);
 
   return (
-    <div className="rule-details-row">
+    <div className="rule-details-row" data-test="rule-details-row">
       <Flex direction={{ default: 'column' }} gap={{ default: 'gapSm' }}>
         {/* Header with summary and actions */}
         <Flex
@@ -153,6 +154,7 @@ const RuleCard: React.FC<{
             </FlexItem>
             <FlexItem>
               <ActionsColumn
+                data-test="rule-details-actions"
                 isDisabled={links.length === 0}
                 items={links.map(l => ({ title: <a href={l.url}>{l.name}</a> }))}
               />

web/src/components/metrics/histogram.tsx

@@ -272,6 +272,7 @@ export const Histogram: React.FC<HistogramProps> = ({
             isVisible={tooltipsTrigger === 'manual' ? false : undefined}
           >
             <Button
+              data-test="histogram-double-left"
               icon={<AngleDoubleLeftIcon />}
               variant="plain"
               className={`metrics-content-button ${loading ? 'loading' : ''}`}
@@ -285,6 +286,7 @@ export const Histogram: React.FC<HistogramProps> = ({
             isVisible={tooltipsTrigger === 'manual' ? false : undefined}
           >
             <Button
+              data-test="histogram-single-left"
               icon={<AngleLeftIcon />}
               variant="plain"
               className={`metrics-content-button ${loading ? 'loading' : ''}`}
@@ -303,6 +305,7 @@ export const Histogram: React.FC<HistogramProps> = ({
             isVisible={tooltipsTrigger === 'manual' ? false : undefined}
           >
             <Button
+              data-test="histogram-single-right"
               icon={<AngleRightIcon />}
               variant="plain"
               className={`metrics-content-button ${loading ? 'loading' : ''}`}
@@ -315,6 +318,7 @@ export const Histogram: React.FC<HistogramProps> = ({
             isVisible={tooltipsTrigger === 'manual' ? false : undefined}
           >
             <Button
+              data-test="histogram-double-right"
               icon={<AngleDoubleRightIcon />}
               variant="plain"
               className={`metrics-content-button ${loading ? 'loading' : ''}`}
@@ -331,6 +335,7 @@ export const Histogram: React.FC<HistogramProps> = ({
                 isVisible={tooltipsTrigger === 'manual' ? false : undefined}
               >
                 <Button
+                  data-test="histogram-zoom-out"
                   icon={<SearchMinusIcon />}
                   variant="plain"
                   className={`metrics-content-button ${loading ? 'loading' : ''}`}
@@ -346,6 +351,7 @@ export const Histogram: React.FC<HistogramProps> = ({
                 isVisible={tooltipsTrigger === 'manual' ? false : undefined}
               >
                 <Button
+                  data-test="histogram-zoom-in"
                   icon={<SearchPlusIcon />}
                   variant="plain"
                   className={`metrics-content-button ${loading ? 'loading' : ''}`}