diff --git a/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTab.tsx b/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTab.tsx index e2555f0c39..bfd412cd4e 100644 --- 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 ( - - - - - + + + ); }; diff --git a/libs/ui-lib/lib/ocm/components/Routes.tsx b/libs/ui-lib/lib/ocm/components/Routes.tsx index b980994d80..c5224d9ac4 100644 --- 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 ( - - - - - - - {children} - - - + + + + + + {children} + + ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/HostInventory.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/HostInventory.tsx index 89f1c3d3f8..b7ad26a0a8 100644 --- 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 index af8e8eea67..6be3932d35 100644 --- 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 index 4dc594fc30..ae3704131a 100644 --- 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 ( - - - - - } - errorUI={} + + + + } + errorUI={} + > + } + cluster={cluster} + cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture} + openshiftVersion={cluster.openshiftVersion} + platformType={cluster.platform?.type} > - } - cluster={cluster} - cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture} - openshiftVersion={cluster.openshiftVersion} - platformType={cluster.platform?.type} - > - {content} - - {isOutdatedClusterData && } - - - - - - - - + {content} + + {isOutdatedClusterData && } + + + + + + + ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx index 5c07da1c0e..c01fd84392 100644 --- 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 = ({ allEnabledFeatures, }) => { + useFeatureDetection(allEnabledFeatures); const { data: cluster } = useSelector(selectCurrentClusterState); const pullSecret = usePullSecret(); const { infraEnv } = useInfraEnv( @@ -40,21 +37,19 @@ const AssistedInstallerExtraDetailCard: React.FC - - } - cluster={cluster} - cpuArchitecture={infraEnv?.cpuArchitecture as CpuArchitecture} - openshiftVersion={cluster.openshiftVersion} - platformType={cluster.platform?.type} - > - - - - - - + + } + cluster={cluster} + cpuArchitecture={infraEnv?.cpuArchitecture as CpuArchitecture} + openshiftVersion={cluster.openshiftVersion} + platformType={cluster.platform?.type} + > + + + + + ); }; diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx index 8982aebf96..3633bdfd10 100644 --- 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 index 69275b6be0..514e2f5ce5 100644 --- 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 index 250cd107d9..15fa0753ec 100644 --- 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 new file mode 100644 index 0000000000..f6d342ac1c --- /dev/null +++ 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 index 40195064a3..8f168e8975 100644 --- 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, featureId: keyof FeatureListType) => - featureId, - (featureFlags, featureId) => featureFlags.data[featureId], -); +export const isFeatureEnabled = (featureId: keyof FeatureListType) => + createSelector( + selectFeatureFlagsSlice, + (featureFlags: ReturnType) => + featureFlags.data[featureId] ?? false, + );