Address review comments

Author: vojtechszocs

frontend/packages/console-app/locales/en/console-app.json

@@ -582,6 +582,8 @@
   "Source": "Source",
   "VolumeSnapshotContent": "VolumeSnapshotContent",
   "Snapshot content": "Snapshot content",
+  "Pending": "Pending",
+  "Error": "Error",
   "Recommended": "Recommended",
   "Container name": "Container name",
   "VerticalPodAutoscalers": "VerticalPodAutoscalers",

frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import {
   actionsCellProps,
@@ -38,7 +39,10 @@ export const isDefaultSnapshotClass = (volumeSnapshotClass: VolumeSnapshotClassK
     defaultSnapshotClassAnnotation
   ] === 'true';
 
-const getDataViewRows: GetDataViewRows<VolumeSnapshotClassKind> = (data, columns) => {
+const getDataViewRowsCreator: (t: TFunction) => GetDataViewRows<VolumeSnapshotClassKind> = (t) => (
+  data,
+  columns,
+) => {
   return data.map(({ obj }) => {
     const name = obj.metadata?.name || '';
     const { deletionPolicy, driver } = obj;
@@ -50,7 +54,7 @@ const getDataViewRows: GetDataViewRows<VolumeSnapshotClassKind> = (data, columns
           <ResourceLink name={name} kind={kind}>
             {isDefaultSnapshotClass(obj) && (
               <span className="pf-v6-u-font-size-xs pf-v6-u-text-color-subtle co-resource-item__help-text">
-                &ndash; Default
+                &ndash; {t('console-app~Default')}
               </span>
             )}
           </ResourceLink>
@@ -123,7 +127,9 @@ const VolumeSnapshotClassTable: React.FCC<VolumeSnapshotClassTableProps> = ({
   loaded,
   ...props
 }) => {
+  const { t } = useTranslation();
   const columns = useVolumeSnapshotClassColumns();
+  const getDataViewRows = React.useMemo(() => getDataViewRowsCreator(t), [t]);
 
   return (
     <React.Suspense fallback={<LoadingBox />}>

frontend/packages/container-security/src/components/image-manifest-vuln.tsx

@@ -442,8 +442,6 @@ export type ImageManifestVulnDetailsProps = {
   obj: ImageManifestVuln;
 };
 
-export type ImageManifestVulnListTableHeaderProps = {};
-
 export type AffectedPodsProps = {
   obj: ImageManifestVuln;
 };

frontend/public/components/custom-resource-definition.tsx

@@ -355,9 +355,7 @@ export const CustomResourceDefinitionsList: React.FCC<CustomResourceDefinitionsL
   );
 };
 
-export const CustomResourceDefinitionsPage: React.FC<CustomResourceDefinitionsPageProps> = (
-  props,
-) => (
+export const CustomResourceDefinitionsPage: React.FC = (props) => (
   <ListPage
     {...props}
     ListComponent={CustomResourceDefinitionsList}
@@ -397,8 +395,6 @@ export type CustomResourceDefinitionsListProps = {
   loaded: boolean;
 };
 
-export type CustomResourceDefinitionsPageProps = {};
-
 type InstancesProps = {
   obj: CustomResourceDefinitionKind;
   namespace: string;

frontend/public/components/masthead/masthead-toolbar.tsx

@@ -139,6 +139,11 @@ interface MastheadToolbarContentsProps {
   isMastheadStacked: boolean;
 }
 
+// TODO remove this code, the plugin should use an appropriate extension
+const isTroubleshootingPanelPluginActive =
+  Array.isArray(window.SERVER_FLAGS.consolePlugins) &&
+  window.SERVER_FLAGS.consolePlugins.includes('troubleshooting-panel-console-plugin');
+
 // TODO break this down into smaller components and hooks
 const MastheadToolbarContents: React.FCC<MastheadToolbarContentsProps> = ({
   consoleLinks,
@@ -243,9 +248,6 @@ const MastheadToolbarContents: React.FCC<MastheadToolbarContentsProps> = ({
   };
 
   const getLaunchActions = () => {
-    const isTroubleshootingPanelEnabled = Array.isArray(window.SERVER_FLAGS.consolePlugins)
-      ? window.SERVER_FLAGS.consolePlugins.includes('troubleshooting-panel-console-plugin')
-      : false;
     const launcherItems = getAdditionalLinks(consoleLinks, 'ApplicationMenu');
 
     const sections: MastheadSection[] = [];
@@ -287,7 +289,7 @@ const MastheadToolbarContents: React.FCC<MastheadToolbarContentsProps> = ({
     }
 
     // This should be removed when the extension to add items to the masthead is implemented: https://issues.redhat.com/browse/OU-488
-    if (isTroubleshootingPanelEnabled && activePerspective === 'admin') {
+    if (isTroubleshootingPanelPluginActive && activePerspective === 'admin') {
       sections.push({
         name: t('public~Troubleshooting'),
         isSection: true,

frontend/public/components/persistent-volume-claim.tsx

@@ -1,6 +1,6 @@
-import * as _ from 'lodash-es';
 import * as React from 'react';
-import i18next from 'i18next';
+import * as _ from 'lodash-es';
+import i18next, { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -48,7 +48,7 @@ import { useFlag } from '@console/shared/src/hooks/flag';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DASH } from '@console/shared/src/constants/ui';
 import { Conditions } from './conditions';
-import { DetailsPage } from './factory/details';
+import { DetailsPage, DetailsPageProps } from './factory/details';
 import { ListPage } from './factory/list-page';
 import { navFactory } from './utils/horizontal-nav';
 import { SectionHeading } from './utils/headings';
@@ -102,12 +102,10 @@ export const PVCStatusComponent: React.FCC<PVCStatusProps> = ({ pvc }) => {
   );
 };
 
-const getDataViewRows: GetDataViewRows<PersistentVolumeClaimKind> = (data, columns) => {
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const { t } = useTranslation();
-  const pvcMetrics = useSelector<RootState, PVCMetrics>(({ UI }) => UI.getIn(['metrics', 'pvc']));
-  /* eslint-enable react-hooks/rules-of-hooks */
-
+const getDataViewRowsCreator: (
+  t: TFunction,
+  pvcMetrics: PVCMetrics,
+) => GetDataViewRows<PersistentVolumeClaimKind> = (t, pvcMetrics) => (data, columns) => {
   return data.map(({ obj }) => {
     const metrics = pvcMetrics?.usedCapacity?.[getNamespace(obj)]?.[getName(obj)];
     const [name, namespace] = [getName(obj), getNamespace(obj)];
@@ -424,6 +422,12 @@ export const PersistentVolumeClaimList: React.FCC<PersistentVolumeClaimListProps
 }) => {
   const { t } = useTranslation();
   const columns = usePersistentVolumeClaimColumns();
+  const pvcMetrics = useSelector<RootState, PVCMetrics>(({ UI }) => UI.getIn(['metrics', 'pvc']));
+
+  const getDataViewRows = React.useMemo(() => getDataViewRowsCreator(t, pvcMetrics), [
+    t,
+    pvcMetrics,
+  ]);
 
   const pvcStatusFilterOptions = React.useMemo<DataViewFilterOption[]>(
     () => [
@@ -561,8 +565,9 @@ export const PersistentVolumeClaimsPage: React.FCC<PersistentVolumeClaimsPagePro
   );
 };
 
-export const PersistentVolumeClaimsDetailsPage = (props) => {
+export const PersistentVolumeClaimsDetailsPage: React.FCC<DetailsPageProps> = (props) => {
   const { t } = useTranslation();
+
   const customActionMenu = (kindObj, obj) => {
     const resourceKind = referenceFor(kindObj);
     const context = { [resourceKind]: obj };

frontend/public/components/persistent-volume.tsx

@@ -1,5 +1,6 @@
-import * as _ from 'lodash-es';
 import * as React from 'react';
+import * as _ from 'lodash-es';
+import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import {
   DescriptionList,
@@ -52,11 +53,10 @@ const PVStatus = ({ pv }: { pv: PersistentVolumeKind }) => (
   <Status status={pv.metadata.deletionTimestamp ? 'Terminating' : pv.status.phase} />
 );
 
-const getDataViewRows: GetDataViewRows<PersistentVolumeKind> = (data, columns) => {
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const { t } = useTranslation();
-  /* eslint-enable react-hooks/rules-of-hooks */
-
+const getDataViewRowsCreator: (t: TFunction) => GetDataViewRows<PersistentVolumeKind> = (t) => (
+  data,
+  columns,
+) => {
   return data.map(({ obj }) => {
     const name = obj.metadata?.name || '';
     const namespace = obj.metadata?.namespace || '';
@@ -250,7 +250,9 @@ export const PersistentVolumeList: React.FCC<PersistentVolumeListProps> = ({
   loaded,
   ...props
 }) => {
+  const { t } = useTranslation();
   const columns = usePersistentVolumeColumns();
+  const getDataViewRows = React.useMemo(() => getDataViewRowsCreator(t), [t]);
 
   return (
     <React.Suspense fallback={<LoadingBox />}>
@@ -282,7 +284,7 @@ export const PersistentVolumesPage = (props: ListPageProps) => {
   );
 };
 
-export const PersistentVolumesDetailsPage = (props: DetailsPageProps) => (
+export const PersistentVolumesDetailsPage: React.FCC<DetailsPageProps> = (props) => (
   <DetailsPage
     {...props}
     kind={persistentVolumeReference}

frontend/public/components/storage-class.tsx

@@ -1,5 +1,6 @@
-import * as _ from 'lodash-es';
 import * as React from 'react';
+import * as _ from 'lodash-es';
+import { TFunction } from 'i18next';
 import {
   DescriptionList,
   DescriptionListDescription,
@@ -25,7 +26,7 @@ import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMen
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { LoadingBox } from '@console/shared/src/components/loading/LoadingBox';
 import { DASH } from '@console/shared/src/constants/ui';
-import { DetailsPage } from './factory/details';
+import { DetailsPage, DetailsPageProps } from './factory/details';
 import { ListPage } from './factory/list-page';
 import { DetailsItem } from './utils/details-item';
 import { ResourceLink } from './utils/resource-link';
@@ -65,15 +66,15 @@ const isDefaultVirtClass = (storageClass: K8sResourceKind) => {
   return annotations[defaultVirtClassAnnotation] === 'true';
 };
 
-const getDataViewRows: GetDataViewRows<StorageClassResourceKind> = (data, columns) => {
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const { t } = useTranslation();
-  /* eslint-enable react-hooks/rules-of-hooks */
-
-  const isKubevirtPluginActive =
-    Array.isArray(window.SERVER_FLAGS.consolePlugins) &&
-    window.SERVER_FLAGS.consolePlugins.includes('kubevirt-plugin');
+// TODO remove this code, the plugin should use an appropriate extension
+const isKubevirtPluginActive =
+  Array.isArray(window.SERVER_FLAGS.consolePlugins) &&
+  window.SERVER_FLAGS.consolePlugins.includes('kubevirt-plugin');
 
+const getDataViewRowsCreator: (t: TFunction) => GetDataViewRows<StorageClassResourceKind> = (t) => (
+  data,
+  columns,
+) => {
   return data.map(({ obj }) => {
     const name = obj.metadata?.name || '';
     const context = { [referenceFor(obj)]: obj };
@@ -158,7 +159,9 @@ const useStorageClassColumns = (): TableColumn<StorageClassResourceKind>[] => {
 };
 
 export const StorageClassList: React.FCC<StorageClassListProps> = ({ data, loaded, ...props }) => {
+  const { t } = useTranslation();
   const columns = useStorageClassColumns();
+  const getDataViewRows = React.useMemo(() => getDataViewRowsCreator(t), [t]);
 
   return (
     <React.Suspense fallback={<LoadingBox />}>
@@ -208,7 +211,7 @@ const StorageClassDetails: React.FCC<StorageClassDetailsProps> = ({ obj }) => {
   );
 };
 
-export const StorageClassPage: React.FCC<StorageClassPageProps> = ({ ...props }) => {
+export const StorageClassPage: React.FCC = ({ ...props }) => {
   const { t } = useTranslation();
 
   const createProps = {
@@ -229,7 +232,7 @@ export const StorageClassPage: React.FCC<StorageClassPageProps> = ({ ...props })
   );
 };
 
-export const StorageClassDetailsPage: React.FCC = (props) => {
+export const StorageClassDetailsPage: React.FCC<DetailsPageProps> = (props) => {
   const pages = [navFactory.details(detailsPage(StorageClassDetails)), navFactory.editYaml()];
 
   const customActionMenu = (kindObj, obj) => {
@@ -255,8 +258,6 @@ type StorageClassListProps = {
   loadError: unknown;
 };
 
-export type StorageClassDetailsProps = {
-  obj: any;
+type StorageClassDetailsProps = {
+  obj: StorageClassResourceKind;
 };
-
-export type StorageClassPageProps = {};

frontend/public/locales/en/public.json

@@ -1106,27 +1106,30 @@
   "Recommendations": "Recommendations",
   "Notifications in the recommendations group": "Notifications in the recommendations group",
   "No PersistentVolume": "No PersistentVolume",
+  "PersistentVolume": "PersistentVolume",
+  "Capacity": "Capacity",
   "Used": "Used",
+  "StorageClass": "StorageClass",
   "Total": "Total",
   "PersistentVolumeClaim details": "PersistentVolumeClaim details",
   "Available versus used capacity": "Available versus used capacity",
   "Total capacity": "Total capacity",
   "Label selector": "Label selector",
   "Requested capacity": "Requested capacity",
-  "Capacity": "Capacity",
   "Access modes": "Access modes",
   "Volume mode": "Volume mode",
   "StorageClasses": "StorageClasses",
   "VolumeAttributesClass": "VolumeAttributesClass",
   "PersistentVolumes": "PersistentVolumes",
-  "StorageClass": "StorageClass",
+  "Bound": "Bound",
+  "Lost": "Lost",
   "PersistentVolumeClaims": "PersistentVolumeClaims",
   "No claim": "No claim",
+  "Claim": "Claim",
   "PersistentVolume details": "PersistentVolume details",
   "Reclaim policy": "Reclaim policy",
   "PersistentVolumeClaim": "PersistentVolumeClaim",
   "NFS-export": "NFS-export",
-  "Claim": "Claim",
   "The terminal connection has closed.": "The terminal connection has closed.",
   "Reconnect": "Reconnect",
   "Connecting to": "Connecting to",
@@ -1351,9 +1354,9 @@
   "Select Provisioner": "Select Provisioner",
   "Determines what volume plugin is used for provisioning PersistentVolumes.": "Determines what volume plugin is used for provisioning PersistentVolumes.",
   "Allow PersistentVolumeClaims to be expanded": "Allow PersistentVolumeClaims to be expanded",
+  "Default for VirtualMachines": "Default for VirtualMachines",
   "StorageClass details": "StorageClass details",
   "Default class": "Default class",
-  "Default for VirtualMachines": "Default for VirtualMachines",
   "Create StorageClass": "Create StorageClass",
   "Device path is already in use.": "Device path is already in use.",
   "Use existing claim": "Use existing claim",
@@ -1602,7 +1605,6 @@
   "ResourceAccessReviews": "ResourceAccessReviews",
   "LocalResourceAccessReview": "LocalResourceAccessReview",
   "LocalResourceAccessReviews": "LocalResourceAccessReviews",
-  "PersistentVolume": "PersistentVolume",
   "StatefulSet": "StatefulSet",
   "StatefulSets": "StatefulSets",
   "ResourceQuota": "ResourceQuota",