Wizard: Add Users step to the wizard (HMS-4902)

This commit adds a new step 'Users' that is enabled only in stage-preview,
and will enable it in stage-stable once IQE tests are ready.
The step is not functional yet, this is just the first step.

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -27,6 +27,7 @@ import SnapshotStep from './steps/Snapshot';
 import Aws from './steps/TargetEnvironment/Aws';
 import Azure from './steps/TargetEnvironment/Azure';
 import Gcp from './steps/TargetEnvironment/Gcp';
+import UsersStep from './steps/Users';
 import {
   useFilesystemValidation,
   useSnapshotValidation,
@@ -132,6 +133,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const [searchParams] = useSearchParams();
   const { isBeta } = useGetEnvironment();
 
+  const isUsersEnabled = useFlag('image-builder.users.enabled');
+
   // Remove this and all fallthrough logic when snapshotting is enabled in Prod-stable
   // =========================TO REMOVE=======================
   const { data, isSuccess, isFetching, isError } =
@@ -211,7 +214,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
 
   let startIndex = 1; // default index
   if (isEdit) {
-    startIndex = 15;
+    startIndex = 16;
   }
 
   // Duplicating some of the logic from the Wizard component to allow for custom nav items status
@@ -432,6 +435,17 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
               >
                 <PackagesStep />
               </WizardStep>,
+              <WizardStep
+                name="Users"
+                id="wizard-users"
+                key="wizard-users"
+                isHidden={!isUsersEnabled}
+                footer={
+                  <CustomWizardFooter disableNext={false} optional={true} />
+                }
+              >
+                <UsersStep />
+              </WizardStep>,
               <WizardStep
                 name="First boot script configuration"
                 id="wizard-first-boot"

src/Components/CreateImageWizard/steps/Users/component/Empty.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+  Button,
+  EmptyState,
+  EmptyStateFooter,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+} from '@patternfly/react-core';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
+
+const EmptyUserState = () => {
+  return (
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader
+        icon={<EmptyStateIcon icon={UserIcon} />}
+        headingLevel="h4"
+      />
+      <EmptyStateFooter>
+        <Button variant="secondary" onClick={() => {}}>
+          Add a user
+        </Button>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+export default EmptyUserState;

src/Components/CreateImageWizard/steps/Users/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Form, Text, Title } from '@patternfly/react-core';
+
+import EmptyUserState from './component/Empty';
+
+const UsersStep = () => {
+  return (
+    <Form>
+      <Title headingLevel="h1" size="xl">
+        Users
+      </Title>
+      <Text>Add a user to your image.</Text>
+      <EmptyUserState />
+    </Form>
+  );
+};
+
+export default UsersStep;