Merge pull request #1663 from alfonsomthd/no-unstable-nested

TSLint: enable rule 'react/no-unstable-nested-components'

.eslintrc.js

@@ -67,7 +67,6 @@ module.exports = {
     'react/jsx-indent': 'off',
     'react/jsx-no-constructed-context-values': 'off',
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
-    'react/no-unstable-nested-components': 'off',
     'react/no-unused-prop-types': 'off',
     'consistent-return': 'off',
     'default-case': 'off',

locales/en/plugin__odf-console.json

@@ -105,13 +105,6 @@
   "PVC label selectors": "PVC label selectors",
   "Protect all your volumes that match the selected PVC labels": "Protect all your volumes that match the selected PVC labels",
   "Add PVC label selector": "Add PVC label selector",
-  "{{count}} results found for {{clusterName}}_one": "{{count}} results found for {{clusterName}}",
-  "{{count}} results found for {{clusterName}}_other": "{{count}} results found for {{clusterName}}",
-  "0 results found": "0 results found",
-  "Select a namespace": "Select a namespace",
-  "There are no namespaces to display. Select a cluster first to view namespaces.": "There are no namespaces to display. Select a cluster first to view namespaces.",
-  "There are no namespaces to display.": "There are no namespaces to display.",
-  "This list does not include namespaces where applications are enrolled separately under disaster recovery protection.": "This list does not include namespaces where applications are enrolled separately under disaster recovery protection.",
   "Name requirements": "Name requirements",
   "Example": "Example",
   "Enter a unique name": "Enter a unique name",
@@ -126,6 +119,13 @@
   "Namespace": "Namespace",
   "Select namespaces that belongs to your ACM discovered applications.": "Select namespaces that belongs to your ACM discovered applications.",
   "Once you select namespaces, applications regardless of their type, within those namespaces cannot be subsequently enrolled separately under disaster recovery protection.": "Once you select namespaces, applications regardless of their type, within those namespaces cannot be subsequently enrolled separately under disaster recovery protection.",
+  "There are no namespaces to display.": "There are no namespaces to display.",
+  "There are no namespaces to display. Select a cluster first to view namespaces.": "There are no namespaces to display. Select a cluster first to view namespaces.",
+  "{{count}} results found for {{clusterName}}_one": "{{count}} results found for {{clusterName}}",
+  "{{count}} results found for {{clusterName}}_other": "{{count}} results found for {{clusterName}}",
+  "0 results found": "0 results found",
+  "Select a namespace": "Select a namespace",
+  "This list does not include namespaces where applications are enrolled separately under disaster recovery protection.": "This list does not include namespaces where applications are enrolled separately under disaster recovery protection.",
   "Replication type: {{type}}, Interval: {{interval}}, Clusters: {{clusters}}": "Replication type: {{type}}, Interval: {{interval}}, Clusters: {{clusters}}",
   "Replication type: {{type}}, Clusters: {{clusters}}": "Replication type: {{type}}, Clusters: {{clusters}}",
   "Status: {{status}}": "Status: {{status}}",

packages/mco/components/create-dr-policy/utils/k8s-utils.ts

@@ -20,12 +20,12 @@ const getODFPeers = (cluster: ManagedClusterInfoType) => {
 
 const getPeerClustersRef = (clusters: ManagedClusterInfoType[]) =>
   clusters.map((cluster) => {
-    const [storageClusterName, storageClusterNamesapce] = getODFPeers(cluster);
+    const [storageClusterName, storageClusterNamespace] = getODFPeers(cluster);
     return {
       clusterName: getName(cluster),
       storageClusterRef: {
         name: storageClusterName,
-        namespace: storageClusterNamesapce,
+        namespace: storageClusterNamespace,
       },
     };
   });

packages/mco/components/discovered-application-wizard/wizard-steps/namespace-step/namespace-step.tsx

@@ -38,7 +38,7 @@ import {
   EnrollDiscoveredApplicationState,
   EnrollDiscoveredApplicationStateType,
 } from '../../utils/reducer';
-import { NamespaceSelectionTable } from './namesapce-table';
+import { NamespaceSelectionTable } from './namespace-table';
 import './namespace-step.scss';
 
 const getDRClusterFromPolicies = (drPolicies: DRPolicyKind[]): string[] => {

packages/mco/components/discovered-application-wizard/wizard-steps/namespace-step/namesapce-table.tsx → packages/mco/components/discovered-application-wizard/wizard-steps/namespace-step/namespace-table.tsx

@@ -91,6 +91,36 @@ const TableRow: React.FC<RowComponentType<K8sResourceCommon>> = ({
   );
 };
 
+const EmptyRowMessageWrapper: React.FC = ({ children }) => {
+  return (
+    <Bullseye className="mco-namespace-selection__border pf-v5-u-mt-md pf-v5-u-mb-sm pf-v5-u-h-33vh">
+      {children}
+    </Bullseye>
+  );
+};
+
+const EmptyRowMessage: React.FC = () => {
+  const { t } = useCustomTranslation();
+
+  return (
+    <EmptyRowMessageWrapper>
+      {t('There are no namespaces to display.')}
+    </EmptyRowMessageWrapper>
+  );
+};
+
+const NoClusterEmptyRowMessage: React.FC = () => {
+  const { t } = useCustomTranslation();
+
+  return (
+    <EmptyRowMessageWrapper>
+      {t(
+        'There are no namespaces to display. Select a cluster first to view namespaces.'
+      )}
+    </EmptyRowMessageWrapper>
+  );
+};
+
 export const NamespaceSelectionTable: React.FC<NamespaceSelectionTableProps> =
   ({
     namespaces,
@@ -178,16 +208,13 @@ export const NamespaceSelectionTable: React.FC<NamespaceSelectionTableProps> =
             setSelectedRows={setSelectedNamespaces}
             loaded={searchLoaded}
             borders={false}
-            emptyRowMessage={() => (
-              <Bullseye className="mco-namespace-selection__border pf-v5-u-mt-md pf-v5-u-mb-sm pf-v5-u-h-33vh">
-                {!!searchError ||
-                  (!clusterName
-                    ? t(
-                        'There are no namespaces to display. Select a cluster first to view namespaces.'
-                      )
-                    : t('There are no namespaces to display.'))}
-              </Bullseye>
-            )}
+            emptyRowMessage={
+              searchError
+                ? searchError
+                : clusterName
+                ? EmptyRowMessage
+                : NoClusterEmptyRowMessage
+            }
           />
           <Text>
             {t(

packages/mco/components/discovered-application-wizard/wizard-steps/replication-step/replication-step.tsx

@@ -39,7 +39,7 @@ import {
   EnrollDiscoveredApplicationState,
   EnrollDiscoveredApplicationStateType,
 } from '../../utils/reducer';
-import { findAllEligiblePolicies } from '../namespace-step/namesapce-table';
+import { findAllEligiblePolicies } from '../namespace-step/namespace-table';
 import '../../enroll-discovered-application.scss';
 
 const getPolicyOptions = (dataPolicies: DRPolicyKind[], t: TFunction) =>

packages/mco/components/mco-dashboard/storage-system/status-card/status-card.spec.tsx

@@ -228,7 +228,7 @@ jest.mock('@openshift-console/dynamic-plugin-sdk-internal', () => ({
   HealthBody: (props) => <MockHealthBody {...props} />,
 }));
 
-describe('Test ODF cluster status from different clusters and namesapces', () => {
+describe('Test ODF cluster status from different clusters and namespaces', () => {
   test('All healthy case testing', async () => {
     testCaseId = 1;
     render(<StatusCard />);

packages/mco/components/modals/app-data-policies-status/subscriptions/data-policies-status-popover.tsx

@@ -74,6 +74,7 @@ const DataPoliciesStatusModal = React.lazy(
 export const DataPoliciesStatusPopover: React.FC<DataPoliciesStatusPopoverProps> =
   ({ application }) => {
     const { t } = useCustomTranslation();
+    const [isVisible, setIsVisible] = React.useState(false);
     const launcher = useModal();
     const response = useK8sWatchResources<DataPoliciesResourceType>(
       drResources(getNamespace(application))
@@ -187,9 +188,9 @@ export const DataPoliciesStatusPopover: React.FC<DataPoliciesStatusPopoverProps>
       [launcher, dataPoliciesStatus]
     );
 
-    const onClick = (hide: any) => {
+    const onClick = () => {
       launchModal();
-      hide();
+      setIsVisible(false);
     };
 
     const headerText = pluralize(
@@ -220,19 +221,22 @@ export const DataPoliciesStatusPopover: React.FC<DataPoliciesStatusPopoverProps>
             <DRStatusCard drPolicies={dataPoliciesStatus?.drPolicies} />
           </Flex>
         }
-        footerContent={(hide) => (
+        isVisible={isVisible}
+        shouldClose={() => setIsVisible(false)}
+        shouldOpen={() => setIsVisible(true)}
+        footerContent={
           <Flex>
             <FlexItem align={{ default: 'alignRight' }}>
               <Button
                 data-test="status-modal-link"
                 variant={ButtonVariant.link}
-                onClick={() => onClick(hide)}
+                onClick={onClick}
               >
                 {t('View more details')}
               </Button>
             </FlexItem>
           </Flex>
-        )}
+        }
       >
         {!!count && <a data-test="subs-popover-link">{linkText}</a>}
       </Popover>

packages/mco/components/modals/app-manage-policies/helper/pvc-details-wizard-content.tsx

@@ -34,7 +34,7 @@ import {
   ButtonVariant,
 } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons';
-import { queryAppWorkloadPVCs } from '../../../../utils/acm-search-quries';
+import { queryAppWorkloadPVCs } from '../../../../utils/acm-search-queries';
 import { getClusterNamesFromPlacements } from '../utils/parser-utils';
 import {
   ManagePolicyStateAction,

packages/mco/utils/acm-search-quries.ts → packages/mco/utils/acm-search-queries.ts

@@ -130,7 +130,7 @@ export const queryRecipesFromCluster = (
   query: searchFilterQuery,
 });
 
-// ACM seach query to fetch all releated resources of this namesapces from the managed cluster.
+// ACM seach query to fetch all releated resources of this namespaces from the managed cluster.
 export const queryK8sResourceFromCluster = (
   clusterName: string,
   namespaces: string[]

packages/mco/utils/index.ts

@@ -1,3 +1,3 @@
 export * from './disaster-recovery';
 export * from './common';
-export * from './acm-search-quries';
+export * from './acm-search-queries';

packages/ocs/dashboards/object-service/buckets-card/buckets-card-item.tsx

@@ -43,6 +43,6 @@ export const BucketsTitle: React.FC<BucketsTitleProps> = ({
 
 export type BucketsTitleProps = {
   objects: PrometheusResponse;
-  link: string;
+  link?: string;
   error: boolean;
 };

packages/ocs/dashboards/object-service/buckets-card/buckets-card.tsx

@@ -20,6 +20,7 @@ import {
   InventoryItem,
   InventoryItemLoading,
   InventoryItemBody,
+  PrometheusResponse,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { ResourceInventoryItem } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { useParams } from 'react-router-dom-v5-compat';
@@ -54,8 +55,8 @@ type ObjectInventoryItemProps = {
   count: number;
   children?: React.ReactNode;
   error?: boolean;
-  TitleComponent?: React.ComponentType<{}>;
-  dataTest?: string;
+  objectCount?: PrometheusResponse;
+  objectCountError?: boolean;
 };
 
 const ObjectInventoryItem: React.FC<ObjectInventoryItemProps> = ({
@@ -65,8 +66,8 @@ const ObjectInventoryItem: React.FC<ObjectInventoryItemProps> = ({
   count,
   children,
   error = false,
-  TitleComponent,
-  dataTest,
+  objectCount,
+  objectCountError,
 }) => {
   const titleMessage = pluralize(
     count,
@@ -76,16 +77,11 @@ const ObjectInventoryItem: React.FC<ObjectInventoryItemProps> = ({
   );
   return (
     <InventoryItem>
-      <div
-        className="co-inventory-card__item-title"
-        data-test={!TitleComponent ? dataTest : null}
-      >
+      <div className="co-inventory-card__item-title">
         {isLoading && !error && <InventoryItemLoading />}
-        {TitleComponent ? (
-          <TitleComponent>{titleMessage}</TitleComponent>
-        ) : (
-          titleMessage
-        )}
+        <BucketsTitle objects={objectCount} error={objectCountError}>
+          {titleMessage}
+        </BucketsTitle>
       </div>
       <InventoryItemBody error={error}>{children}</InventoryItemBody>
     </InventoryItem>
@@ -124,16 +120,8 @@ const ObjectInventoryItem_: React.FC = () => {
       error={!!(noobaaCountError || unhealthyNoobaaBucketsError)}
       title={t('NooBaa Bucket')}
       count={Number(getGaugeValue(noobaaCount))}
-      TitleComponent={React.useCallback(
-        (props) => (
-          <BucketsTitle
-            objects={noobaaObjectsCount}
-            error={!!noobaaObjectsCountError}
-            {...props}
-          />
-        ),
-        [noobaaObjectsCount, noobaaObjectsCountError]
-      )}
+      objectCount={noobaaObjectsCount}
+      objectCountError={!!noobaaObjectsCountError}
     >
       {unhealthyNoobaaBucketsCount > 0 && (
         <>

packages/odf/components/s3-browser/object-details/ObjectDetailsSidebar.tsx

@@ -37,7 +37,6 @@ import {
   Level,
   LevelItem,
   MenuToggle,
-  MenuToggleElement,
   Title,
 } from '@patternfly/react-core';
 import { TagIcon } from '@patternfly/react-icons';
@@ -54,6 +53,7 @@ const ObjectDetailsSidebarContent: React.FC<ObjectDetailsSidebarContentProps> =
   ({ closeSidebar, object, objectActions }) => {
     const { t } = useCustomTranslation();
     const [isOpen, setIsOpen] = React.useState(false);
+    const dropdownToggleRef = React.useRef();
     const onToggleClick = () => {
       setIsOpen(!isOpen);
     };
@@ -127,15 +127,18 @@ const ObjectDetailsSidebarContent: React.FC<ObjectDetailsSidebarContentProps> =
           <Dropdown
             isOpen={isOpen}
             onSelect={onSelect}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                className="odf-object-sidebar__dropdown"
-                ref={toggleRef}
-                onClick={onToggleClick}
-              >
-                {t('Actions')}
-              </MenuToggle>
-            )}
+            toggle={{
+              toggleNode: (
+                <MenuToggle
+                  className="odf-object-sidebar__dropdown"
+                  ref={dropdownToggleRef}
+                  onClick={onToggleClick}
+                >
+                  {t('Actions')}
+                </MenuToggle>
+              ),
+              toggleRef: dropdownToggleRef,
+            }}
           >
             <DropdownList>{dropdownItems}</DropdownList>
           </Dropdown>

packages/odf/components/s3-browser/upload-objects/upload-status/UploadStatusList.tsx

@@ -24,35 +24,36 @@ const getProgressVariant = (
   }
 };
 
+const UploadStatusListRow = ({ data, index, style }) => {
+  const item = data[index];
+  return (
+    <div style={style} key={item.name}>
+      <UploadStatusItem
+        variant={getProgressVariant(item.uploadState)}
+        progress={(item.loaded / item.total) * 100}
+        fileName={item.name}
+        fileSize={humanizeBinaryBytes(item.total).string}
+        onAbort={item.abort}
+        failed={item.uploadState === UploadStatus.UPLOAD_FAILED}
+      />
+    </div>
+  );
+};
+
 export const UploadStatusList: React.FC<UploadStatusListProps> = ({
   progress,
 }) => {
-  const Row = ({ index, style }) => {
-    const item = progress[index];
-    return (
-      <div style={style} key={item.name}>
-        <UploadStatusItem
-          variant={getProgressVariant(item.uploadState)}
-          progress={(item.loaded / item.total) * 100}
-          fileName={item.name}
-          fileSize={humanizeBinaryBytes(item.total).string}
-          onAbort={item.abort}
-          failed={item.uploadState === UploadStatus.UPLOAD_FAILED}
-        />
-      </div>
-    );
-  };
-
   return (
     <AutoSizer>
       {({ height, width }) => (
         <List
           height={height}
           itemCount={progress.length}
+          itemData={progress}
           itemSize={100}
           width={width}
         >
-          {Row}
+          {UploadStatusListRow}
         </List>
       )}
     </AutoSizer>