MGMT-16103: Remove FeatureGateContextProvider (#2428)

* Remove FeatureGateContextProvider * Replace old useFeature function with a new one to use useFeatureDetection hook * Change unit tests * New hook use-feature created --------- Co-authored-by: Jonathan Kilzi <[email protected]>
openshift-assisted · Nov 2, 2023 · f71a6dc · f71a6dc
1 parent 47f6584
commit f71a6dc
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 101 deletions.
diff --git a/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTab.tsx b/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTab.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { AssistedUILibVersion } from '../ui';
-import { AlertsContextProvider, FeatureGateContextProvider } from '../../../common';
+import { AlertsContextProvider } from '../../../common';
 import { HostsClusterDetailTabContent } from './HostsClusterDetailTabContent';
 import { HostsClusterDetailTabProps } from './types';
 import { storeDay1 } from '../../store';
 import { useFeatureDetection } from '../../hooks/use-feature-detection';
 
 const HostsClusterDetailTab = (props: HostsClusterDetailTabProps) => {
-  useFeatureDetection();
+  useFeatureDetection(props.allEnabledFeatures);
 
   return (
     <Provider store={storeDay1}>
       <AssistedUILibVersion />
-      <FeatureGateContextProvider features={props.allEnabledFeatures}>
-        <AlertsContextProvider>
-          <HostsClusterDetailTabContent {...props} />
-        </AlertsContextProvider>
-      </FeatureGateContextProvider>
+      <AlertsContextProvider>
+        <HostsClusterDetailTabContent {...props} />
+      </AlertsContextProvider>
     </Provider>
   );
 };

diff --git a/libs/ui-lib/lib/ocm/components/Routes.tsx b/libs/ui-lib/lib/ocm/components/Routes.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import { Clusters, ClusterPage, NewClusterPage } from './clusters';
-import { FeatureGateContextProvider } from '../../common';
 import type { FeatureListType } from '../../common/features/featureGate';
 import { routeBasePath } from '../config';
 import { AssistedUILibVersion } from './ui';
@@ -17,16 +16,14 @@ export const Routes: React.FC<{ allEnabledFeatures: FeatureListType }> = ({
 
   return (
     <Provider store={storeDay1}>
-      <FeatureGateContextProvider features={allEnabledFeatures}>
-        <AssistedUILibVersion />
-        <Switch>
-          <Route path={`${routeBasePath}/clusters/~new`} component={NewClusterPage} />
-          <Route path={`${routeBasePath}/clusters/:clusterId`} component={ClusterPage} />
-          <Route path={`${routeBasePath}/clusters`} component={Clusters} />
-          {children}
-          <Redirect to={`${routeBasePath}/clusters`} />
-        </Switch>
-      </FeatureGateContextProvider>
+      <AssistedUILibVersion />
+      <Switch>
+        <Route path={`${routeBasePath}/clusters/~new`} component={NewClusterPage} />
+        <Route path={`${routeBasePath}/clusters/:clusterId`} component={ClusterPage} />
+        <Route path={`${routeBasePath}/clusters`} component={Clusters} />
+        {children}
+        <Redirect to={`${routeBasePath}/clusters`} />
+      </Switch>
     </Provider>
   );
 };
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/HostInventory.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/HostInventory.tsx
@@ -13,7 +13,6 @@ import { useFormikContext } from 'formik';
 import {
   HostDiscoveryValues,
   PopoverIcon,
-  useFeature,
   ClusterWizardStepHeader,
   selectMastersMustRunWorkloads,
   selectSchedulableMasters,
@@ -24,6 +23,7 @@ import InformationAndAlerts from './InformationAndAlerts';
 import { OcmSwitchField } from '../ui/OcmFormFields';
 import { selectCurrentClusterPermissionsState } from '../../store/slices/current-cluster/selectors';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { useFeature } from '../../hooks/use-feature';
 
 const schedulableMastersTooltip =
   'Workloads must be run on control plane nodes when less than 5 hosts are discovered';

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx
@@ -12,7 +12,6 @@ import {
   uniqueOcmClusterNameValidationMessages,
   CLUSTER_NAME_MAX_LENGTH,
   StaticTextField,
-  useFeature,
   getSupportedCpuArchitectures,
   SupportedCpuArchitecture,
 } from '../../../common';
@@ -36,6 +35,7 @@ import { useNewFeatureSupportLevel } from '../../../common/components/newFeature
 import { ExternalPlatformLabels } from './platformIntegration/constants';
 import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
+import { useFeature } from '../../hooks/use-feature';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;

diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
@@ -8,7 +8,6 @@ import {
   AssistedInstallerOCMPermissionTypesListType,
   CpuArchitecture,
   ErrorState,
-  FeatureGateContextProvider,
   FeatureListType,
   LoadingState,
   ResourceUIState,
@@ -29,6 +28,7 @@ import { BackButton } from '../ui/Buttons/BackButton';
 import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { usePullSecret } from '../../hooks';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { useFeatureDetection } from '../../hooks/use-feature-detection';
 
 type AssistedInstallerDetailCardProps = {
   aiClusterId: string;
@@ -91,6 +91,7 @@ const AssistedInstallerDetailCard = ({
   allEnabledFeatures,
   permissions,
 }: AssistedInstallerDetailCardProps) => {
+  useFeatureDetection(allEnabledFeatures);
   const { cluster, uiState } = useClusterPolling(aiClusterId);
   const pullSecret = usePullSecret();
   const {
@@ -131,32 +132,30 @@ const AssistedInstallerDetailCard = ({
 
   const isOutdatedClusterData = uiState === ResourceUIState.POLLING_ERROR;
   return (
-    <FeatureGateContextProvider features={allEnabledFeatures}>
-      <AlertsContextProvider>
-        <SentryErrorMonitorContextProvider>
-          <ModalDialogsContextProvider>
-            <ClusterDefaultConfigurationProvider
-              loadingUI={<LoadingCard />}
-              errorUI={<LoadingDefaultConfigFailedCard />}
+    <AlertsContextProvider>
+      <SentryErrorMonitorContextProvider>
+        <ModalDialogsContextProvider>
+          <ClusterDefaultConfigurationProvider
+            loadingUI={<LoadingCard />}
+            errorUI={<LoadingDefaultConfigFailedCard />}
+          >
+            <NewFeatureSupportLevelProvider
+              loadingUi={<LoadingCard />}
+              cluster={cluster}
+              cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
+              openshiftVersion={cluster.openshiftVersion}
+              platformType={cluster.platform?.type}
             >
-              <NewFeatureSupportLevelProvider
-                loadingUi={<LoadingCard />}
-                cluster={cluster}
-                cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
-                openshiftVersion={cluster.openshiftVersion}
-                platformType={cluster.platform?.type}
-              >
-                {content}
-              </NewFeatureSupportLevelProvider>
-              {isOutdatedClusterData && <ClusterPollingErrorModal />}
-              <CancelInstallationModal />
-              <ResetClusterModal />
-              <DiscoveryImageModal />
-            </ClusterDefaultConfigurationProvider>
-          </ModalDialogsContextProvider>
-        </SentryErrorMonitorContextProvider>
-      </AlertsContextProvider>
-    </FeatureGateContextProvider>
+              {content}
+            </NewFeatureSupportLevelProvider>
+            {isOutdatedClusterData && <ClusterPollingErrorModal />}
+            <CancelInstallationModal />
+            <ResetClusterModal />
+            <DiscoveryImageModal />
+          </ClusterDefaultConfigurationProvider>
+        </ModalDialogsContextProvider>
+      </SentryErrorMonitorContextProvider>
+    </AlertsContextProvider>
   );
 };
 

diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx
@@ -3,18 +3,14 @@ import { Provider } from 'react-redux';
 import { storeDay1 } from '../../store';
 import { useSelector } from 'react-redux';
 
-import {
-  AlertsContextProvider,
-  CpuArchitecture,
-  FeatureGateContextProvider,
-  FeatureListType,
-} from '../../../common';
+import { AlertsContextProvider, CpuArchitecture, FeatureListType } from '../../../common';
 import ClusterProperties from './ClusterProperties';
 import { Grid } from '@patternfly/react-core';
 import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import useInfraEnv from '../../hooks/useInfraEnv';
 import { usePullSecret } from '../../hooks';
 import { selectCurrentClusterState } from '../../store/slices/current-cluster/selectors';
+import { useFeatureDetection } from '../../hooks/use-feature-detection';
 
 type AssistedInstallerExtraDetailCardProps = {
   allEnabledFeatures: FeatureListType;
@@ -23,6 +19,7 @@ type AssistedInstallerExtraDetailCardProps = {
 const AssistedInstallerExtraDetailCard: React.FC<AssistedInstallerExtraDetailCardProps> = ({
   allEnabledFeatures,
 }) => {
+  useFeatureDetection(allEnabledFeatures);
   const { data: cluster } = useSelector(selectCurrentClusterState);
   const pullSecret = usePullSecret();
   const { infraEnv } = useInfraEnv(
@@ -40,21 +37,19 @@ const AssistedInstallerExtraDetailCard: React.FC<AssistedInstallerExtraDetailCar
   }
 
   return (
-    <FeatureGateContextProvider features={allEnabledFeatures}>
-      <AlertsContextProvider>
-        <NewFeatureSupportLevelProvider
-          loadingUi={<div />}
-          cluster={cluster}
-          cpuArchitecture={infraEnv?.cpuArchitecture as CpuArchitecture}
-          openshiftVersion={cluster.openshiftVersion}
-          platformType={cluster.platform?.type}
-        >
-          <Grid className="pf-u-mt-md">
-            <ClusterProperties cluster={cluster} externalMode />
-          </Grid>
-        </NewFeatureSupportLevelProvider>
-      </AlertsContextProvider>
-    </FeatureGateContextProvider>
+    <AlertsContextProvider>
+      <NewFeatureSupportLevelProvider
+        loadingUi={<div />}
+        cluster={cluster}
+        cpuArchitecture={infraEnv?.cpuArchitecture as CpuArchitecture}
+        openshiftVersion={cluster.openshiftVersion}
+        platformType={cluster.platform?.type}
+      >
+        <Grid className="pf-u-mt-md">
+          <ClusterProperties cluster={cluster} externalMode />
+        </Grid>
+      </NewFeatureSupportLevelProvider>
+    </AlertsContextProvider>
   );
 };
 

diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx
@@ -9,14 +9,7 @@ import {
   GridItem,
   Grid,
 } from '@patternfly/react-core';
-import {
-  ToolbarButton,
-  Alerts,
-  getEnabledHosts,
-  selectOlmOperators,
-  isSNO,
-  useFeature,
-} from '../../../common';
+import { ToolbarButton, Alerts, getEnabledHosts, selectOlmOperators, isSNO } from '../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import ClusterToolbar from '../clusters/ClusterToolbar';
 import { getClusterDetailId } from './utils';
@@ -35,6 +28,7 @@ import OcmClusterProgressItems from '../clusterConfiguration/OcmClusterProgressI
 import ClusterDetailsButtonGroup from './ClusterDetailsButtonGroup';
 import ClusterSummaryExpandable from './ClusterSummaryExpandable';
 import HostInventoryExpandable from './HostInventoryExpandable';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailProps = {
   cluster: Cluster;

diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx
@@ -12,15 +12,12 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { defaultWizardSteps, staticIpFormViewSubSteps } from './constants';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { getStaticIpInfo } from '../clusterConfiguration/staticIp/data/fromInfraEnv';
-import {
-  AssistedInstallerOCMPermissionTypesListType,
-  useFeature,
-  useAlerts,
-} from '../../../common';
+import { AssistedInstallerOCMPermissionTypesListType, useAlerts } from '../../../common';
 import useSetClusterPermissions from '../../hooks/useSetClusterPermissions';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { useUISettings } from '../../hooks';
 import { AlertVariant } from '@patternfly/react-core';
+import { useFeature } from '../../hooks/use-feature';
 
 const addStepToClusterWizard = (
   wizardStepIds: ClusterWizardStepsType[],

diff --git a/libs/ui-lib/lib/ocm/hooks/_use-feature-detection.test.tsx b/libs/ui-lib/lib/ocm/hooks/_use-feature-detection.test.tsx
@@ -4,13 +4,13 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import { render } from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import { featureFlagsActions, FeatureFlagsState } from '../store/slices/feature-flags/slice';
-import { isFeatureEnabled } from '../store/slices/feature-flags/selectors';
-import { RootStateDay1, storeDay1 } from '../store/store-day1';
+import { featureFlagsActions } from '../store/slices/feature-flags/slice';
+import { storeDay1 } from '../store/store-day1';
 import { useFeatureDetection } from './use-feature-detection';
 import { CurrentAccountApi } from '../../common/api/accounts-management-service/current-account-api';
 import { OrganizationsApi } from '../../common/api/accounts-management-service/organizations-api';
 import { getMockContainer } from '../../_test-helpers/mock-container';
+import { isFeatureEnabled } from '../store/slices/feature-flags/selectors';
 
 vi.spyOn(featureFlagsActions, 'setFeatureFlag');
 vi.spyOn(CurrentAccountApi, 'getCurrentAccount').mockImplementation(() => {
@@ -51,12 +51,7 @@ describe('use-feature-detection.ts', () => {
       ),
     );
 
-    expect(
-      isFeatureEnabled(
-        storeDay1.getState() as RootStateDay1 & FeatureFlagsState,
-        'ASSISTED_INSTALLER_PLATFORM_OCI',
-      ),
-    ).toBe(true);
+    expect(isFeatureEnabled('ASSISTED_INSTALLER_PLATFORM_OCI')(storeDay1.getState())).toBe(true);
   });
 
   it('Internal features override external features', async () => {
@@ -86,12 +81,9 @@ describe('use-feature-detection.ts', () => {
       ),
     );
 
-    expect(
-      isFeatureEnabled(
-        storeDay1.getState() as RootStateDay1 & FeatureFlagsState,
-        'ASSISTED_INSTALLER_PLATFORM_OCI',
-      ),
-    ).toBe(featuresOverride.ASSISTED_INSTALLER_PLATFORM_OCI);
+    expect(isFeatureEnabled('ASSISTED_INSTALLER_PLATFORM_OCI')(storeDay1.getState())).toBe(
+      featuresOverride.ASSISTED_INSTALLER_PLATFORM_OCI,
+    );
   });
 
   it('Processes only features prefixed with ASSISTED_INSTALLER', async () => {

diff --git a/libs/ui-lib/lib/ocm/hooks/use-feature.ts b/libs/ui-lib/lib/ocm/hooks/use-feature.ts
@@ -0,0 +1,7 @@
+import { AssistedInstallerFeatureType } from '../../common';
+import { useSelectorDay1 } from '../store';
+import { isFeatureEnabled } from '../store/slices/feature-flags/selectors';
+
+export const useFeature = (feature: AssistedInstallerFeatureType): boolean => {
+  return useSelectorDay1(isFeatureEnabled(feature));
+};
diff --git a/libs/ui-lib/lib/ocm/store/slices/feature-flags/selectors.ts b/libs/ui-lib/lib/ocm/store/slices/feature-flags/selectors.ts
@@ -4,9 +4,9 @@ import { createSelector } from '@reduxjs/toolkit';
 
 export const selectFeatureFlagsSlice = (state: RootStateDay1) => state.featureFlags;
 
-export const isFeatureEnabled = createSelector(
-  selectFeatureFlagsSlice,
-  (_featureFlags: ReturnType<typeof selectFeatureFlagsSlice>, featureId: keyof FeatureListType) =>
-    featureId,
-  (featureFlags, featureId) => featureFlags.data[featureId],
-);
+export const isFeatureEnabled = (featureId: keyof FeatureListType) =>
+  createSelector(
+    selectFeatureFlagsSlice,
+    (featureFlags: ReturnType<typeof selectFeatureFlagsSlice>) =>
+      featureFlags.data[featureId] ?? false,
+  );