Blueprint: enable import/export in ephemeral

Adds ability to enable a feature flag in Ephemeral environment by default.

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);

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 (

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 (
     <Routes>
       <Route

src/Utilities/useGetEnvironment.ts

@@ -1,4 +1,5 @@
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import { useFlag } from '@unleash/proxy-client-react';
 
 export const useGetEnvironment = () => {
   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;
+};