diff --git a/src/Components/Blueprints/BlueprintActionsMenu.tsx b/src/Components/Blueprints/BlueprintActionsMenu.tsx index 3f823289..eef1a7f3 100644 --- a/src/Components/Blueprints/BlueprintActionsMenu.tsx +++ b/src/Components/Blueprints/BlueprintActionsMenu.tsx @@ -8,7 +8,6 @@ import { MenuToggleElement, } from '@patternfly/react-core'; import { EllipsisVIcon } from '@patternfly/react-icons'; -import { useFlag } from '@unleash/proxy-client-react'; import { selectSelectedBlueprintId } from '../../store/BlueprintSlice'; import { useAppSelector } from '../../store/hooks'; @@ -16,6 +15,7 @@ import { BlueprintResponse, useLazyGetBlueprintQuery, } from '../../store/imageBuilderApi'; +import { useFlagWithEphemDefault } from '../../Utilities/useGetEnvironment'; import BetaLabel from '../sharedComponents/BetaLabel'; interface BlueprintActionsMenuProps { @@ -30,7 +30,9 @@ export const BlueprintActionsMenu: React.FunctionComponent< const onSelect = () => { setShowBlueprintActionsMenu(!showBlueprintActionsMenu); }; - const importExportFlag = useFlag('image-builder.import.enabled'); + const importExportFlag = useFlagWithEphemDefault( + 'image-builder.import.enabled' + ); const [trigger] = useLazyGetBlueprintQuery(); const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId); diff --git a/src/Components/sharedComponents/ImageBuilderHeader.tsx b/src/Components/sharedComponents/ImageBuilderHeader.tsx index 4998caa3..0c2ccfdb 100644 --- a/src/Components/sharedComponents/ImageBuilderHeader.tsx +++ b/src/Components/sharedComponents/ImageBuilderHeader.tsx @@ -19,7 +19,6 @@ import { PageHeader, PageHeaderTitle, } from '@redhat-cloud-services/frontend-components'; -import { useFlag } from '@unleash/proxy-client-react'; import { useNavigate } from 'react-router-dom'; import { @@ -29,6 +28,7 @@ import { } from '../../constants'; import { resolveRelPath } from '../../Utilities/path'; import './ImageBuilderHeader.scss'; +import { useFlagWithEphemDefault } from '../../Utilities/useGetEnvironment'; import { ImportBlueprintModal } from '../Blueprints/ImportBlueprintModal'; type ImageBuilderHeaderPropTypes = { @@ -96,7 +96,9 @@ export const ImageBuilderHeader = ({ inWizard, }: ImageBuilderHeaderPropTypes) => { const navigate = useNavigate(); - const importExportFlag = useFlag('image-builder.import.enabled'); + const importExportFlag = useFlagWithEphemDefault( + 'image-builder.import.enabled' + ); const [showImportModal, setShowImportModal] = useState(false); const isOnBlueprintsTab = activeTab === 0; return ( diff --git a/src/Router.tsx b/src/Router.tsx index 5b1e2870..a9cf9901 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -6,6 +6,7 @@ import { Route, Routes } from 'react-router-dom'; import EdgeImageDetail from './Components/edge/ImageDetails'; import ShareImageModal from './Components/ShareImageModal/ShareImageModal'; import { manageEdgeImagesUrlName } from './Utilities/edge'; +import { useFlagWithEphemDefault } from './Utilities/useGetEnvironment'; const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage')); const ImportImageWizard = lazy( @@ -17,7 +18,9 @@ const CreateImageWizardV2 = lazy( export const Router = () => { const edgeParityFlag = useFlag('edgeParity.image-list'); - const importExportFlag = useFlag('image-builder.import.enabled'); + const importExportFlag = useFlagWithEphemDefault( + 'image-builder.import.enabled' + ); return ( { const { isBeta, isProd, getEnvironment } = useChrome(); @@ -8,3 +9,20 @@ export const useGetEnvironment = () => { } return { isBeta: () => false, isProd: isProd }; }; + +/** + * A hook that returns the value of a flag with a default value for ephemeral environment. + * @param flag The flag to check. + * @param ephemDefault The default value of the flag in ephemeral environment, defaults to true. + * @returns The value of the flag if the environment is not ephemeral, the selected default otherwise. + * @example + * const isFlagEnabled = useFlagWithEphemDefault('image-builder.my-flag'); + */ +export const useFlagWithEphemDefault = ( + flag: string, + ephemDefault: boolean = true +): boolean => { + const getFlag = useFlag(flag); + const { getEnvironment } = useChrome(); + return (getEnvironment() === 'qa' && ephemDefault) || getFlag; +};