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;

src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx

@@ -25,6 +25,7 @@ const goToDetailsStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
 };
 
 const enterBlueprintDescription = async (

src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx

@@ -113,6 +113,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/steps/FirstBoot/Firstboot.test.tsx

@@ -43,6 +43,7 @@ const goToFirstBootStep = async (): Promise<void> => {
   await clickNext(); // File System
   await clickNext(); // Custom repositories
   await clickNext(); // Additional packages
+  await clickNext(); // Users
   await clickNext(); // Snapshot
   await clickNext(); // First Boot
 };
@@ -64,6 +65,7 @@ const goFromOscapToFirstBoot = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
 };
 
 const openCodeEditor = async (): Promise<void> => {

src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx

@@ -135,6 +135,7 @@ const goToReviewStep = async () => {
   await clickNext(); // Snapshots
   await clickNext(); // Custom repositories
   await clickNext(); // Additional packages
+  await clickNext(); // Users
   await clickNext(); // First boot
   await clickNext(); // Details
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/Oscap/Oscap.test.tsx

@@ -98,6 +98,7 @@ const goToReviewStep = async () => {
   await clickNext(); // Snapshot repositories
   await clickNext(); // Custom repositories
   await clickNext(); // Additional packages
+  await clickNext(); // Users
   await clickNext(); // FirstBoot
   await clickNext(); // Details
   await enterBlueprintName('Oscap test');

src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx

@@ -52,6 +52,7 @@ const goToPackagesStep = async () => {
 };
 
 const goToReviewStep = async () => {
+  await clickNext(); // Users
   await clickNext(); // First Boot
   await clickNext(); // Details
   await enterBlueprintName();
@@ -177,6 +178,7 @@ describe('Step Packages', () => {
     await renderCreateMode();
     await goToPackagesStep();
     await clickNext();
+    await clickNext();
     await screen.findByRole('heading', {
       name: 'First boot configuration',
     });

src/test/Components/CreateImageWizard/steps/Registration/Registration.test.tsx

@@ -96,6 +96,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/steps/Repositories/Repositories.test.tsx

@@ -46,6 +46,7 @@ const goToRepositoriesStep = async () => {
 const goToReviewStep = async () => {
   await clickNext(); // Additional packages
   await clickNext();
+  await clickNext(); // Users
   await clickNext(); // First Boot
   await enterBlueprintName();
   await clickNext(); // Review

src/test/Components/CreateImageWizard/steps/Review/Review.test.tsx

@@ -56,6 +56,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
 };
 
 describe('Step Review', () => {

src/test/Components/CreateImageWizard/steps/Snapshot/Snapshot.test.tsx

@@ -38,6 +38,7 @@ const goToReviewStep = async () => {
   await clickNext(); // Repositories step
   await clickNext(); // Additional packages
   await clickNext();
+  await clickNext(); // Users
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AwsTarget.test.tsx

@@ -44,6 +44,7 @@ const goToReview = async () => {
   await clickNext(); // Snapshot repositories
   await clickNext(); // Custom repositories
   await clickNext(); // Additional packages
+  await clickNext(); // Users
   await clickNext(); // Details
   await clickNext(); // FirstBoot
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AzureTarget.test.tsx

@@ -44,6 +44,7 @@ const goToReview = async () => {
   await clickNext(); // Snapshot repositories
   await clickNext(); // Custom repositories
   await clickNext(); // Additional packages
+  await clickNext(); // Users
   await clickNext(); // FirstBoot
   await clickNext(); // Details
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/TargetEnvironment/GCPTarget.test.tsx

@@ -39,6 +39,7 @@ const goToReview = async () => {
   await clickNext(); // Snapshot repositories
   await clickNext(); // Custom repositories
   await clickNext(); // Additional packages
+  await clickNext(); // Users
   await clickNext(); // Details
   await clickNext(); // FirstBoot
   await enterBlueprintName();

src/test/setup.ts

@@ -53,6 +53,8 @@ vi.mock('@unleash/proxy-client-react', () => ({
   useUnleashContext: () => vi.fn(),
   useFlag: vi.fn((flag) => {
     switch (flag) {
+      case 'image-builder.users.enabled':
+        return true;
       case 'image-builder.import.enabled':
         return true;
       case 'image-builder.firstboot.enabled':