Update feature guards

Refactor loading of CSV and Infrastruture in Install Page

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/configure-step.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { Form } from '@patternfly/react-core';
+import { useFlag } from '@console/shared';
 import { State, Action } from '../state';
 import { EncryptionFormGroup, NetworkFormGroup } from '../../../install-wizard/configure';
 import { NetworkType } from '../../../types';
+import { OCS_SUPPORT_FLAGS } from '../../../../../features';
 
 export const Configure: React.FC<ConfigureProps> = ({ state, dispatch, mode }) => {
   const { networkType: nwType, clusterNetwork, publicNetwork } = state;
+  const isMultusSupported = useFlag(OCS_SUPPORT_FLAGS.MULTUS);
 
   const setNetworkType = (networkType: NetworkType) => {
     dispatch({ type: 'setNetworkType', value: networkType });
@@ -24,13 +27,15 @@ export const Configure: React.FC<ConfigureProps> = ({ state, dispatch, mode }) =
   return (
     <Form noValidate={false}>
       <EncryptionFormGroup state={state} dispatch={dispatch} mode={mode} />
-      <NetworkFormGroup
-        networkType={nwType}
-        setNetworkType={setNetworkType}
-        setNetwork={setNetwork}
-        publicNetwork={publicNetwork}
-        clusterNetwork={clusterNetwork}
-      />
+      {isMultusSupported && (
+        <NetworkFormGroup
+          networkType={nwType}
+          setNetworkType={setNetworkType}
+          setNetwork={setNetwork}
+          publicNetwork={publicNetwork}
+          clusterNetwork={clusterNetwork}
+        />
+      )}
     </Form>
   );
 };

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/review-and-create-step.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 import { humanizeBinaryBytes } from '@console/internal/components/utils';
-import { getName } from '@console/shared';
+import { getName, useFlag } from '@console/shared';
 import {
   ValidationMessage,
   getEncryptionLevel,
@@ -18,6 +18,7 @@ import {
   RequestErrors,
 } from '../../../install-wizard/review-and-create';
 import { NetworkType } from '../../../types';
+import { OCS_SUPPORT_FLAGS } from '../../../../../features';
 
 export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
   state,
@@ -41,6 +42,7 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
   const { cpu, memory, zones } = getNodeInfo(state.nodes);
   const scName = getName(storageClass);
   const emptyRequiredField = nodes.length < MINIMUM_NODES && !scName && !memory && !cpu;
+  const isMultusSupported = useFlag(OCS_SUPPORT_FLAGS.MULTUS);
 
   return (
     <>
@@ -116,17 +118,19 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
             </ReviewListBody>
           </>
         )}
-        <ReviewListBody
-          validation={
-            networkType === NetworkType.MULTUS && !publicNetwork && ValidationType.NETWORK
-          }
-        >
-          <p>
-            {t('ceph-storage-plugin~Using {{networkLabel}}', {
-              networkLabel: NetworkTypeLabels[networkType],
-            })}
-          </p>
-        </ReviewListBody>
+        {isMultusSupported && (
+          <ReviewListBody
+            validation={
+              networkType === NetworkType.MULTUS && !publicNetwork && ValidationType.NETWORK
+            }
+          >
+            <p>
+              {t('ceph-storage-plugin~Using {{networkLabel}}', {
+                networkLabel: NetworkTypeLabels[networkType],
+              })}
+            </p>
+          </ReviewListBody>
+        )}
       </dl>
       {emptyRequiredField && (
         <ValidationMessage

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/install.tsx

@@ -16,11 +16,10 @@ import { filterSCWithNoProv } from '../../../utils/install';
 import CreateSC from './create-sc/create-sc';
 import './attached-devices.scss';
 
-const goToLSOInstallationPage = () => {
+const goToLSOInstallationPage = () =>
   history.push(
     '/operatorhub/all-namespaces?details-item=local-storage-operator-redhat-operators-openshift-marketplace',
   );
-};
 
 export const CreateAttachedDevicesCluster: React.FC<CreateAttachedDevicesClusterProps> = ({
   match,

frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-page.tsx

@@ -1,16 +1,25 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { match as RouteMatch } from 'react-router';
-import { k8sGet } from '@console/internal/module/k8s';
-import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager';
+import { referenceForModel } from '@console/internal/module/k8s';
+import {
+  ClusterServiceVersionModel,
+  ClusterServiceVersionKind,
+} from '@console/operator-lifecycle-manager';
 import { BreadCrumbs } from '@console/internal/components/utils';
 import { getAnnotations } from '@console/shared/src/selectors/common';
 import { RadioGroup } from '@console/internal/components/radio';
 import { InfrastructureModel } from '@console/internal/models';
+import {
+  useK8sWatchResource,
+  WatchK8sResource,
+} from '@console/internal/components/utils/k8s-watch-hook';
+import { useDeepCompareMemoize } from '@console/shared';
+import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { getRequiredKeys, createDownloadFile } from '../independent-mode/utils';
 import CreateExternalCluster from '../independent-mode/install';
 import { CreateInternalCluster } from './internal-mode/install-wizard';
-import { OCS_SUPPORT_ANNOTATION, MODES } from '../../constants';
+import { MODES } from '../../constants';
 import { CreateAttachedDevicesCluster } from './attached-devices/install';
 import './install-page.scss';
 
@@ -22,7 +31,6 @@ const InstallCluster: React.FC<InstallClusterProps> = ({ match }) => {
     url,
   } = match;
   const { t } = useTranslation();
-  const [isIndependent, setIndependent] = React.useState(false);
   const [isIndepModeSupportedPlatform, setIndepModeSupportedPlatform] = React.useState(false);
   const [independentReqdKeys, setIndependentReqdKeys] = React.useState<{ [key: string]: string[] }>(
     null,
@@ -36,47 +44,40 @@ const InstallCluster: React.FC<InstallClusterProps> = ({ match }) => {
     setMode(value as MODES);
   };
 
-  React.useEffect(() => {
-    k8sGet(ClusterServiceVersionModel, appName, ns)
-      .then((clusterServiceVersionObj) => {
-        // Todo(bipuladh): Remove this check in 4.7
-        const isIndependentSupported = getAnnotations(clusterServiceVersionObj)[
-          OCS_SUPPORT_ANNOTATION
-        ].includes('external');
-        if (isIndependentSupported) {
-          setIndependent(true);
-          const { configMaps = [], secrets = [], storageClasses = [] } = getRequiredKeys(
-            clusterServiceVersionObj,
-          );
-          setIndependentReqdKeys({ configMaps, secrets, storageClasses });
-          setDownloadFile(
-            createDownloadFile(
-              getAnnotations(clusterServiceVersionObj)?.[
-                'external.features.ocs.openshift.io/export-script'
-              ],
-            ),
-          );
-        }
+  const csvResource = useDeepCompareMemoize<WatchK8sResource>(
+    {
+      kind: referenceForModel(ClusterServiceVersionModel),
+      name: appName,
+      namespace: ns,
+      isList: false,
+    },
+    true,
+  );
+
+  const [csv, csvLoaded, csvError] = useK8sWatchResource<ClusterServiceVersionKind>(csvResource);
+  const [infra, infraLoaded, infraError] = useK8sGet<any>(InfrastructureModel, 'cluster');
 
-        try {
-          setClusterServiceVersion(clusterServiceVersionObj);
-        } catch (e) {
-          setClusterServiceVersion(null);
-        }
-      })
-      .catch(() => setClusterServiceVersion(null));
-  }, [appName, ns]);
+  const memoizedCSV = useDeepCompareMemoize(csv, true);
 
   React.useEffect(() => {
-    // eslint-disable-next-line promise/catch-or-return
-    k8sGet(InfrastructureModel, 'cluster')
-      // Todo(bipuladh): Add type for InfraObject
-      .then((infraObj) => {
-        if (INDEP_MODE_SUPPORTED_PLATFORMS.includes(infraObj?.spec?.platformSpec?.type)) {
-          setIndepModeSupportedPlatform(true);
-        }
-      });
-  }, []);
+    if (csvLoaded && !csvError) {
+      const { configMaps = [], secrets = [], storageClasses = [] } = getRequiredKeys(memoizedCSV);
+      setIndependentReqdKeys({ configMaps, secrets, storageClasses });
+      const file = createDownloadFile(
+        getAnnotations(memoizedCSV)?.['external.features.ocs.openshift.io/export-script'],
+      );
+      setDownloadFile(file);
+      setClusterServiceVersion(memoizedCSV);
+    }
+  }, [memoizedCSV, csvLoaded, csvError]);
+
+  React.useEffect(() => {
+    if (infraLoaded && !infraError) {
+      const infraType = infra?.spec?.platformSpec?.type;
+      const supportsExternal = INDEP_MODE_SUPPORTED_PLATFORMS.includes(infraType);
+      setIndepModeSupportedPlatform(supportsExternal);
+    }
+  }, [infra, infraLoaded, infraError]);
 
   return (
     <>
@@ -106,6 +107,7 @@ const InstallCluster: React.FC<InstallClusterProps> = ({ match }) => {
           )}
         </p>
       </div>
+
       <div className="ceph-install__mode-toggle">
         <RadioGroup
           label="Select Mode:"
@@ -123,7 +125,7 @@ const InstallCluster: React.FC<InstallClusterProps> = ({ match }) => {
             {
               value: MODES.EXTERNAL,
               title: MODES.EXTERNAL,
-              disabled: !isIndependent || !isIndepModeSupportedPlatform,
+              disabled: !isIndepModeSupportedPlatform,
             },
           ]}
           onChange={handleModeChange}

frontend/packages/ceph-storage-plugin/src/components/ocs-install/internal-mode/install-wizard-steps/configure.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { Form } from '@patternfly/react-core';
+import { useFlag } from '@console/shared';
 import { InternalClusterAction, InternalClusterState, ActionType } from '../reducer';
 import { EncryptionFormGroup, NetworkFormGroup } from '../../install-wizard/configure';
 import { NetworkType } from '../../types';
+import { OCS_SUPPORT_FLAGS } from '../../../../features';
 
 export const Configure: React.FC<ConfigureProps> = ({ state, dispatch, mode }) => {
   const { networkType: nwType, publicNetwork, clusterNetwork } = state;
+  const isMultusSupported = useFlag(OCS_SUPPORT_FLAGS.MULTUS);
 
   const setNetworkType = (networkType: NetworkType) =>
     dispatch({ type: ActionType.SET_NETWORK_TYPE, payload: networkType });
@@ -18,13 +21,15 @@ export const Configure: React.FC<ConfigureProps> = ({ state, dispatch, mode }) =
   return (
     <Form noValidate={false}>
       <EncryptionFormGroup state={state} dispatch={dispatch} mode={mode} />
-      <NetworkFormGroup
-        setNetworkType={setNetworkType}
-        setNetwork={setNetwork}
-        networkType={nwType}
-        publicNetwork={publicNetwork}
-        clusterNetwork={clusterNetwork}
-      />
+      {isMultusSupported && (
+        <NetworkFormGroup
+          setNetworkType={setNetworkType}
+          setNetwork={setNetwork}
+          networkType={nwType}
+          publicNetwork={publicNetwork}
+          clusterNetwork={clusterNetwork}
+        />
+      )}
     </Form>
   );
 };

frontend/packages/ceph-storage-plugin/src/components/ocs-install/internal-mode/install-wizard-steps/review-and-create.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 import { humanizeBinaryBytes } from '@console/internal/components/utils';
-import { getName } from '@console/shared';
+import { getName, useFlag } from '@console/shared';
 import { TotalCapacityText, OSD_CAPACITY_SIZES } from '../../../../utils/osd-size-dropdown';
 import {
   ValidationType,
@@ -19,6 +19,7 @@ import {
   RequestErrors,
 } from '../../install-wizard/review-and-create';
 import { NetworkType } from '../../types';
+import { OCS_SUPPORT_FLAGS } from '../../../../features';
 
 export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
   state,
@@ -43,6 +44,7 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
   const emptyRequiredField =
     nodes.length < MINIMUM_NODES && !zones.size && !scName && !memory && !cpu;
   const osdSize = OSD_CAPACITY_SIZES[capacity];
+  const isMultusSupported = useFlag(OCS_SUPPORT_FLAGS.MULTUS);
 
   return (
     <>
@@ -100,9 +102,10 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
             })}
           </p>
         </ReviewListBody>
-        <ReviewListTitle text={t('ceph-storage-plugin~Configure')} />
+        {/* @TODO: Update the check from Configure when adding more items */}
         {(encryption.clusterWide || encryption.storageClass) && (
           <>
+            <ReviewListTitle text={t('ceph-storage-plugin~Configure')} />
             <ReviewListBody noValue={!kms.hasHandled}>
               <p className="ocs-install-wizard__review-encryption">
                 {t('ceph-storage-plugin~Enable Encryption')}
@@ -122,17 +125,19 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
             </ReviewListBody>
           </>
         )}
-        <ReviewListBody
-          validation={
-            networkType === NetworkType.MULTUS && !publicNetwork && ValidationType.NETWORK
-          }
-        >
-          <p>
-            {t('ceph-storage-plugin~Using {{networkLabel}}', {
-              networkLabel: NetworkTypeLabels[networkType],
-            })}
-          </p>
-        </ReviewListBody>
+        {isMultusSupported && (
+          <ReviewListBody
+            validation={
+              networkType === NetworkType.MULTUS && !publicNetwork && ValidationType.NETWORK
+            }
+          >
+            <p>
+              {t('ceph-storage-plugin~Using {{networkLabel}}', {
+                networkLabel: NetworkTypeLabels[networkType],
+              })}
+            </p>
+          </ReviewListBody>
+        )}
       </dl>
       {emptyRequiredField && (
         <ValidationMessage

frontend/packages/ceph-storage-plugin/src/components/ocs-install/internal-mode/install-wizard.tsx

@@ -23,9 +23,9 @@ import { StorageClusterKind } from '../../../types';
 import { labelNodes, getOCSRequestData } from '../ocs-request-data';
 import { SelectCapacityAndNodes, Configure, ReviewAndCreate } from './install-wizard-steps';
 import { initialState, reducer, InternalClusterState } from './reducer';
-import '../install-wizard/install-wizard.scss';
 import { createKmsResources } from '../../kms-config/utils';
 import { NetworkType } from '../types';
+import '../install-wizard/install-wizard.scss';
 
 const makeOCSRequest = (state: InternalClusterState): Promise<StorageClusterKind> => {
   const {

frontend/packages/ceph-storage-plugin/src/features.ts

@@ -32,11 +32,10 @@ export const LSO_FLAG = 'LSO';
 
 export const RGW_FLAG = 'RGW';
 
-/* Key and Value should be same value received in CSV  */
+/* Key should be same as values received from the CSV 
+  Values should be formatted as OCS_<Console-Flag-Name> */
 export const OCS_SUPPORT_FLAGS = {
-  EXTERNAL: 'EXTERNAL',
-  MINIMAL_DEPLOYMENT: 'MINIMAL_DEPLOYMENT',
-  ENCRYPTION: 'ENCRYPTION',
+  MULTUS: 'OCS_MULTUS',
 };
 
 const handleError = (res: any, flags: string[], dispatch: Dispatch, cb: FeatureDetector) => {
@@ -99,14 +98,14 @@ export const detectOCSSupportedFeatures: FeatureDetector = async (dispatch) => {
     );
     const ocsCSV = csvList.items.find((obj) => _.startsWith(getName(obj), OCS_OPERATOR));
 
-    const support = getAnnotations(ocsCSV)[OCS_SUPPORT_ANNOTATION];
+    const support = JSON.parse(getAnnotations(ocsCSV)[OCS_SUPPORT_ANNOTATION]);
     _.keys(OCS_SUPPORT_FLAGS).forEach((feature) => {
-      dispatch(setFlag(feature, support.includes(feature.toLowerCase())));
+      dispatch(setFlag(OCS_SUPPORT_FLAGS[feature], support.includes(feature.toLowerCase())));
     });
   } catch (error) {
     error?.response?.status === 404
       ? _.keys(OCS_SUPPORT_FLAGS).forEach((feature) => {
-          dispatch(setFlag(feature, false));
+          dispatch(setFlag(OCS_SUPPORT_FLAGS[feature], false));
         })
       : handleError(error, _.keys(OCS_SUPPORT_FLAGS), dispatch, detectOCSSupportedFeatures);
   }