edge: setup an unleash toggle for the image table

The edge images table is going to be integrated in the frontend code
base in the coming weeks. To help smooth that development process there
is need for a feature flag that would keep the current behavior running
on stage and prod while the new image table is being developed.

For now dummy code is returned for when the flag is on, and legacy
behavior keeps on going when the flag is off.

The stage flag can be seen there:
- https://insights-stage.unleash.devshift.net/projects/default/features/image-builder.edge.local-image-table

The prod flag can be seen there:
- https://insights.unleash.devshift.net/projects/default/features/image-builder.edge.local-image-table

The commit brings in some documentation in the Readme. Any member of
the team should be able to follow these steps to add in new feature
flags and use them in the code base.

The commit also brings in two new testing files for the future
components to come. For now these tests only check that the mocking
value for the unleash flag is properly set.

src/Components/edge/ImageDetails.js

@@ -16,9 +16,15 @@ import { resolveRelPath } from '../../Utilities/path';
 const ImageDetail = () => {
   const dispatch = useDispatch();
   const notificationProp = getNotificationProp(dispatch);
+  // Feature flag for the federated modules
   const edgeParityFlag = useFlag('edgeParity.image-list');
+  // Feature flag to access the 'local' images table list
+  const edgeLocalImageTable = useFlag('image-builder.edge.local-image-table');
 
-  return edgeParityFlag ? (
+  if (edgeLocalImageTable) {
+    return <div />;
+  }
+  if (edgeParityFlag) {
     <AsyncComponent
       appName="edge"
       module="./ImagesDetail"
@@ -29,10 +35,9 @@ const ImageDetail = () => {
       pathPrefix={resolveRelPath('')}
       urlName={manageEdgeImagesUrlName}
       paramsProp={useParams}
-    />
-  ) : (
-    <Unavailable />
-  );
+    />;
+  }
+  return <Unavailable />;
 };
 
 export default ImageDetail;

src/Components/edge/ImagesTable.js

@@ -16,26 +16,33 @@ import { resolveRelPath } from '../../Utilities/path';
 const ImagesTable = () => {
   const dispatch = useDispatch();
   const notificationProp = getNotificationProp(dispatch);
+  // Feature flag for the federated modules
   const edgeParityFlag = useFlag('edgeParity.image-list');
+  // Feature flag to access the 'local' images table list
+  const edgeLocalImageTable = useFlag('image-builder.edge.local-image-table');
 
-  return edgeParityFlag ? (
-    <AsyncComponent
-      appName="edge"
-      module="./Images"
-      ErrorComponent={<ErrorState />}
-      navigateProp={useNavigate}
-      locationProp={useLocation}
-      showHeaderProp={false}
-      docLinkProp={
-        'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html-single/creating_customized_images_by_using_insights_image_builder/index'
-      }
-      notificationProp={notificationProp}
-      pathPrefix={resolveRelPath('')}
-      urlName={manageEdgeImagesUrlName}
-    />
-  ) : (
-    <Unavailable />
-  );
+  if (edgeLocalImageTable) {
+    return <div />;
+  }
+  if (edgeParityFlag) {
+    return (
+      <AsyncComponent
+        appName="edge"
+        module="./Images"
+        ErrorComponent={<ErrorState />}
+        navigateProp={useNavigate}
+        locationProp={useLocation}
+        showHeaderProp={false}
+        docLinkProp={
+          'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html-single/creating_customized_images_by_using_insights_image_builder/index'
+        }
+        notificationProp={notificationProp}
+        pathPrefix={resolveRelPath('')}
+        urlName={manageEdgeImagesUrlName}
+      />
+    );
+  }
+  return <Unavailable />;
 };
 
 export default ImagesTable;