co-author: rhamilto - Fixed label filter, column widths, dataLabel attribute, and integration-test-fix

Author: krishagarwal278

frontend/packages/console-app/src/components/data-view/ResourceDataView.tsx

@@ -144,7 +144,7 @@ export const ResourceDataView = <
       );
     }
 
-    if (!hideNameLabelFilters && !hideLabelFilter) {
+    if (!hideNameLabelFilters && !hideLabelFilter && loaded) {
       basicFilters.push(
         <DataViewLabelFilter key="label" filterId="label" title={t('public~Label')} data={data} />,
       );
@@ -156,7 +156,7 @@ export const ResourceDataView = <
 
     // Can't use data in the deps array as it will recompute the filters and will cause the selected category to reset
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [additionalFilterNodes, t]);
+  }, [additionalFilterNodes, t, loaded]);
 
   return mock ? (
     <EmptyBox label={label} />

frontend/packages/console-app/src/components/data-view/useResourceDataViewData.tsx

@@ -76,42 +76,35 @@ export const useResourceDataViewData = <
 
   const dataViewColumns = React.useMemo<ResourceDataViewColumn<TData>[]>(
     () =>
-      activeColumns.map(
-        (
-          { id, title, sort, props: { classes, isStickyColumn, stickyMinWidth, modifier } },
-          index,
-        ) => {
-          const headerProps: ThProps = {
-            className: classes,
-            isStickyColumn,
-            stickyMinWidth,
-            modifier,
+      activeColumns.map(({ id, title, sort, props }, index) => {
+        const headerProps: ThProps = {
+          ...props,
+          dataLabel: title,
+        };
+
+        if (sort) {
+          headerProps.sort = {
+            columnIndex: index,
+            sortBy: {
+              index: 0,
+              direction: SortByDirection.asc,
+              defaultDirection: SortByDirection.asc,
+            },
           };
-
-          if (sort) {
-            headerProps.sort = {
-              columnIndex: index,
-              sortBy: {
-                index: 0,
-                direction: SortByDirection.asc,
-                defaultDirection: SortByDirection.asc,
-              },
-            };
-          }
-
-          return {
-            id,
-            title,
-            sortFunction: sort,
-            props: headerProps,
-            cell: title ? (
-              <span>{title}</span>
-            ) : (
-              <span className="pf-v6-u-screen-reader">{t('public~Actions')}</span>
-            ),
-          };
-        },
-      ),
+        }
+
+        return {
+          id,
+          title,
+          sortFunction: sort,
+          props: headerProps,
+          cell: title ? (
+            <span>{title}</span>
+          ) : (
+            <span className="pf-v6-u-screen-reader">{t('public~Actions')}</span>
+          ),
+        };
+      }),
     [activeColumns, t],
   );
 

frontend/packages/integration-tests-cypress/tests/app/debug-pod.cy.ts

@@ -54,7 +54,7 @@ describe('Debug pod', () => {
 
   it('Opens debug terminal page from Logs subsection', () => {
     cy.visit(`/k8s/ns/${testName}/pods`);
-    listPage.dvRows.shouldExist(POD_NAME);
+    listPage.rows.shouldExist(POD_NAME);
     cy.visit(`/k8s/ns/${testName}/pods/${POD_NAME}`);
     detailsPage.isLoaded();
     detailsPage.selectTab('Logs');
@@ -79,8 +79,8 @@ describe('Debug pod', () => {
 
   it('Opens debug terminal page from Pods Page - Status tool tip', () => {
     cy.visit(`/k8s/ns/${testName}/pods`);
-    listPage.dvRows.shouldExist(POD_NAME);
-    listPage.dvRows.clickStatusButton(POD_NAME);
+    listPage.rows.shouldExist(POD_NAME);
+    listPage.rows.clickStatusButton(POD_NAME);
     // Click on first debug link
     cy.byTestID(`popup-debug-container-link-${CONTAINER_NAME}`).click();
     listPage.titleShouldHaveText(`Debug ${CONTAINER_NAME}`);

frontend/packages/integration-tests-cypress/tests/crud/resource-crud.cy.ts

@@ -107,12 +107,13 @@ describe('Kubernetes resource CRUD operations', () => {
   ]);
 
   const dataViewResources = new Set([
-    'HorizontalPodAutoscaler',
-    'Job',
-    'Pod',
-    'ReplicaSet',
-    'ReplicationController',
-    'StatefulSet',
+    'Deployment',
+    'DeploymentConfig',
+    'Secret',
+    'ConfigMap',
+    'CronJob',
+    'DaemonSet',
+    'PodDisruptionBudget',
   ]);
 
   testObjs.forEach((testObj, resource) => {

frontend/packages/integration-tests-cypress/views/list-page.ts

@@ -64,6 +64,14 @@ export const listPage = {
       cy.get('.pf-v6-c-menu__list-item').contains('Name').click();
       cy.get('[aria-label="Name filter"]').clear().type(name);
     },
+    by: (checkboxLabel: string) => {
+      cy.get('[data-ouia-component-id="DataViewCheckboxFilter"]').click();
+      cy.get(
+        `[data-ouia-component-id="DataViewCheckboxFilter-filter-item-${checkboxLabel}"]`,
+      ).click();
+      cy.url().should('include', 'status=Running');
+      cy.get('[data-ouia-component-id="DataViewCheckboxFilter"]').click();
+    },
   },
   rows: {
     getFirstElementName: () => cy.get('[data-test-rows="resource-row"] a').first(),
@@ -145,6 +153,9 @@ export const listPage = {
         .contains(resourceName)
         .should('exist');
     },
+    shouldNotExist: (resourceName: string) => {
+      cy.get(`[data-test="data-view-cell-${resourceName}-name"]`).should('not.exist');
+    },
     clickRowByName: (resourceName: string) =>
       cy.get(`[data-test="data-view-cell-${resourceName}-name"]`).find('a').click({ force: true }), // after applying row filter, resource rows detached from DOM according to cypress, need to force the click
   },

frontend/public/components/configmap.tsx

@@ -13,6 +13,7 @@ import {
   ResourceSummary,
 } from './utils';
 import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
+import { ConfigMapModel } from '../models/index';
 import { Grid, GridItem } from '@patternfly/react-core';
 import { ConfigMapKind, referenceForModel, TableColumn } from '../module/k8s';
 import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
@@ -29,7 +30,6 @@ import { sortResourceByValue } from './factory/Table/sort';
 import { sorts } from './factory/table';
 
 const menuActions = [...Kebab.factory.common];
-
 const kind = referenceForModel(ConfigMapModel);
 const tableColumnInfo = [
   { id: 'name' },

frontend/public/components/workload-table.tsx

@@ -215,6 +215,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
         props: {
           ...cellIsStickyProps,
           modifier: 'nowrap',
+          style: { width: 'auto' },
         },
       },
       {
@@ -223,6 +224,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
         sort: 'metadata.namespace',
         props: {
           modifier: 'nowrap',
+          style: { width: 'auto' },
         },
       },
       {
@@ -239,6 +241,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
         sort: 'metadata.labels',
         props: {
           modifier: 'nowrap',
+          width: 20,
         },
       },
       {
@@ -247,6 +250,7 @@ export const useWorkloadColumns = <T extends K8sResourceKind>(): TableColumn<T>[
         sort: 'spec.selector',
         props: {
           modifier: 'nowrap',
+          width: 20,
         },
       },
       {

frontend/public/locales/en/public.json

@@ -406,7 +406,6 @@
   "No": "No",
   "DaemonSet details": "DaemonSet details",
   "Volumes": "Volumes",
-  "Pod selector": "Pod selector",
   "View events": "View events",
   "Activity": "Activity",
   "Updating": "Updating",
@@ -938,6 +937,7 @@
   "{{description}} for": "{{description}} for",
   "Labels for": "Labels for",
   "Labels have been updated. Click Cancel and reapply your changes.": "Labels have been updated. Click Cancel and reapply your changes.",
+  "Pod selector": "Pod selector",
   "Determines the set of pods targeted by this {{kind}}.": "Determines the set of pods targeted by this {{kind}}.",
   "Remove identity provider from OAuth?": "Remove identity provider from OAuth?",
   "Are you sure you want to remove <1> {{name}}</1> identity provider from OAuth<3> {{type}}</3>?": "Are you sure you want to remove <1> {{name}}</1> identity provider from OAuth<3> {{type}}</3>?",