Utilities: Add useExperimentalFlag hook

This commit DRYs out the code, extracting the logic for setting the
value of the experimentalFlag into a new hook found in the utilities.

It also makes the typing stricter - the hook returns a boolean. The
pattern we were using previously to set the value of experimentalFlag
variables could be boolean, string, or undefined.

src/Components/ImagesTable/ImagesTable.tsx

@@ -22,7 +22,6 @@ import {
   Thead,
   Tr,
 } from '@patternfly/react-table';
-import { useFlag } from '@unleash/proxy-client-react';
 import { Link, NavigateFunction, useNavigate } from 'react-router-dom';
 
 import './ImagesTable.scss';
@@ -58,7 +57,7 @@ import {
   computeHoursToExpiration,
   timestampToDisplayString,
 } from '../../Utilities/time';
-import { useGetEnvironment } from '../../Utilities/useGetEnvironment';
+import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
 import { BlueprintActionsMenu } from '../Blueprints/BlueprintActionsMenu';
 import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
 import { DeleteBlueprintModal } from '../Blueprints/DeleteBlueprintModal';
@@ -86,8 +85,7 @@ const ImagesTable = ({
       }),
     }
   );
-  const experimentalFlag =
-    useFlag('image-builder.new-wizard.enabled') || process.env.EXPERIMENTAL;
+  const experimentalFlag = useExperimentalFlag();
   const onSetPage: OnSetPage = (_, page) => setPage(page);
 
   const onPerPageSelect: OnSetPage = (_, perPage) => {
@@ -498,10 +496,7 @@ const Row = ({
 }: RowPropTypes) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const handleToggle = () => setIsExpanded(!isExpanded);
-  const { isBeta } = useGetEnvironment();
-  const experimentalFlag =
-    (useFlag('image-builder.new-wizard.enabled') || process.env.EXPERIMENTAL) &&
-    isBeta();
+  const experimentalFlag = useExperimentalFlag();
   const navigate = useNavigate();
 
   return (

src/Components/LandingPage/LandingPage.tsx

@@ -25,7 +25,7 @@ import Quickstarts from './Quickstarts';
 
 import { manageEdgeImagesUrlName } from '../../Utilities/edge';
 import { resolveRelPath } from '../../Utilities/path';
-import { useGetEnvironment } from '../../Utilities/useGetEnvironment';
+import { useExperimentalFlag } from '../../Utilities/useExperimentalFlag';
 import BlueprintsSidebar from '../Blueprints/BlueprintsSideBar';
 import EdgeImagesTable from '../edge/ImagesTable';
 import ImagesTable from '../ImagesTable/ImagesTable';
@@ -56,10 +56,7 @@ export const LandingPage = () => {
   >();
 
   const edgeParityFlag = useFlag('edgeParity.image-list');
-  const { isBeta } = useGetEnvironment();
-  const experimentalFlag =
-    (useFlag('image-builder.new-wizard.enabled') || process.env.EXPERIMENTAL) &&
-    isBeta();
+  const experimentalFlag = useExperimentalFlag();
 
   const traditionalImageList = (
     <>

src/Components/sharedComponents/ImageBuilderHeader.tsx

@@ -25,7 +25,7 @@ import { resolveRelPath } from '../../Utilities/path';
 import './ImageBuilderHeader.scss';
 
 type ImageBuilderHeaderPropTypes = {
-  experimentalFlag?: string | true | undefined;
+  experimentalFlag?: boolean;
 };
 
 export const ImageBuilderHeader = ({

src/Utilities/useExperimentalFlag.ts

@@ -0,0 +1,26 @@
+import { useFlag } from '@unleash/proxy-client-react';
+
+import { useGetEnvironment } from './useGetEnvironment';
+
+/**
+ * @example
+ * // returns true
+ * toBoolean('true');
+ * @example
+ * // returns false
+ * toBoolean('FALSE');
+ * @example
+ * // returns false
+ * toBoolean(undefined);
+ */
+const toBoolean = (environmentVariable: string | undefined): boolean => {
+  return environmentVariable?.toLowerCase() === 'true';
+};
+
+export const useExperimentalFlag = () => {
+  const { isBeta } = useGetEnvironment();
+  const isExperimental = toBoolean(process.env.EXPERIMENTAL);
+  return (
+    (useFlag('image-builder.new-wizard.enabled') || isExperimental) && isBeta()
+  );
+};