ESLint: All the single quotes

eslint.config.js

@@ -124,7 +124,7 @@ module.exports = defineConfig([
         semi: true,
         tabWidth: 2,
         singleQuote: true,
-        jsxSingleQuote: false,
+        jsxSingleQuote: true,
         bracketSpacing: true,
         tsxSingleQuote: true,
         tsSingleQuote: true,

src/AppCockpit.tsx

@@ -41,7 +41,7 @@ const Application = () => {
 };
 const ImageBuilder = () => (
   <Provider store={store}>
-    <Page className="no-masthead-sidebar" isContentFilled>
+    <Page className='no-masthead-sidebar' isContentFilled>
       <PageSection>
         <Application />
       </PageSection>

src/Components/Blueprints/BlueprintActionsMenu.tsx

@@ -58,10 +58,10 @@ export const BlueprintActionsMenu: React.FunctionComponent<
           ref={toggleRef}
           isExpanded={showBlueprintActionsMenu}
           onClick={() => setShowBlueprintActionsMenu(!showBlueprintActionsMenu)}
-          variant="plain"
+          variant='plain'
-          aria-label="blueprint menu toggle"
+          aria-label='blueprint menu toggle'
         >
-          <EllipsisVIcon aria-hidden="true" />
+          <EllipsisVIcon aria-hidden='true' />
         </MenuToggle>
       )}
     >

src/Components/Blueprints/BlueprintCard.tsx

@@ -52,7 +52,7 @@ const BlueprintCard = ({ blueprint }: blueprintProps) => {
         >
           <CardTitle>
             {isLoading && blueprint.id === selectedBlueprintId && (
-              <Spinner size="md" />
+              <Spinner size='md' />
             )}
             {blueprint.name}
           </CardTitle>

src/Components/Blueprints/BlueprintDiffModal.tsx

@@ -53,20 +53,20 @@ const BlueprintDiffModal = ({
       />
       <ModalBody>
         <DiffEditor
-          height="90vh"
+          height='90vh'
-          language="json"
+          language='json'
           original={JSON.stringify(baseBlueprint, undefined, 2)}
           modified={JSON.stringify(blueprint, undefined, 2)}
         />
       </ModalBody>
       <ModalFooter>
-        <BuildImagesButton key="build-button">
+        <BuildImagesButton key='build-button'>
           Synchronize images
         </BuildImagesButton>
         <Button
-          key="cancel-button"
+          key='cancel-button'
-          variant="link"
+          variant='link'
-          type="button"
+          type='button'
           onClick={onClose}
         >
           Cancel

src/Components/Blueprints/BlueprintVersionFilter.tsx

@@ -58,10 +58,10 @@ const BlueprintVersionFilter: React.FC<blueprintVersionFilterProps> = ({
       shouldFocusToggleOnSelect
     >
       <DropdownList>
-        <DropdownItem value={'all'} key="all">
+        <DropdownItem value={'all'} key='all'>
           All versions
         </DropdownItem>
-        <DropdownItem value={'latest'} key="newest">
+        <DropdownItem value={'latest'} key='newest'>
           Newest
         </DropdownItem>
       </DropdownList>

src/Components/Blueprints/BlueprintsPagination.tsx

@@ -50,8 +50,8 @@ const BlueprintsPagination = () => {
       page={currPage}
       onSetPage={onSetPage}
       onPerPageSelect={onPerPageSelect}
-      widgetId="blueprints-pagination-bottom"
+      widgetId='blueprints-pagination-bottom'
-      data-testid="blueprints-pagination-bottom"
+      data-testid='blueprints-pagination-bottom'
       isCompact
     />
   );

src/Components/Blueprints/BlueprintsSideBar.tsx

@@ -100,7 +100,7 @@ const BlueprintsSidebar = () => {
   if (isLoading) {
     return (
       <Bullseye>
-        <Spinner size="xl" />
+        <Spinner size='xl' />
       </Bullseye>
     );
   }
@@ -114,8 +114,8 @@ const BlueprintsSidebar = () => {
       <EmptyBlueprintState
         icon={PlusCircleIcon}
         action={<Link to={resolveRelPath('imagewizard')}>Add blueprint</Link>}
-        titleText="No blueprints yet"
+        titleText='No blueprints yet'
-        bodyText="Add a blueprint and optionally build related images."
+        bodyText='Add a blueprint and optionally build related images.'
       />
     );
   }
@@ -147,7 +147,7 @@ const BlueprintsSidebar = () => {
               <Flex justifyContent={{ default: 'justifyContentCenter' }}>
                 <FlexItem>
                   <Button
-                    variant="link"
+                    variant='link'
                     isDisabled={!selectedBlueprintId}
                     onClick={handleClickViewAll}
                   >
@@ -163,14 +163,14 @@ const BlueprintsSidebar = () => {
             icon={SearchIcon}
             action={
               <Button
-                variant="link"
+                variant='link'
                 onClick={() => dispatch(setBlueprintSearchInput(undefined))}
               >
                 Clear all filters
               </Button>
             }
-            titleText="No blueprints found"
+            titleText='No blueprints found'
-            bodyText="No blueprints match your search criteria. Try a different search."
+            bodyText='No blueprints match your search criteria. Try a different search.'
           />
         )}
         {blueprintsTotal > 0 &&
@@ -212,7 +212,7 @@ const BlueprintSearch = ({ blueprintsTotal }: blueprintSearchProps) => {
   return (
     <SearchInput
       value={blueprintSearchInput || ''}
-      placeholder="Search by name or description"
+      placeholder='Search by name or description'
       onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
       resultsCount={`${blueprintsTotal} blueprints`}
@@ -226,7 +226,7 @@ const EmptyBlueprintState = ({
   icon,
   action,
 }: emptyBlueprintStateProps) => (
-  <EmptyState headingLevel="h4" icon={icon} titleText={titleText} variant="sm">
+  <EmptyState headingLevel='h4' icon={icon} titleText={titleText} variant='sm'>
     <EmptyStateBody>{bodyText}</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>{action}</EmptyStateActions>

src/Components/Blueprints/BuildImagesButton.tsx

@@ -101,17 +101,17 @@ export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
       onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
-          variant="primary"
+          variant='primary'
-          data-testid="blueprint-build-image-menu"
+          data-testid='blueprint-build-image-menu'
           ref={toggleRef}
           onClick={onToggleClick}
           isExpanded={isOpen}
           splitButtonItems={[
             <MenuToggleAction
-              data-testid="blueprint-build-image-menu-option"
+              data-testid='blueprint-build-image-menu-option'
-              key="split-action"
+              key='split-action'
               onClick={onBuildHandler}
-              id="wizard-build-image-btn"
+              id='wizard-build-image-btn'
               isDisabled={
                 !selectedBlueprintId ||
                 deselectedTargets.length === blueprintImageType?.length
@@ -127,7 +127,7 @@ export const BuildImagesButton = ({ children }: BuildImagesButtonPropTypes) => {
                         } as React.CSSProperties
                       }
                       isInline
-                      size="md"
+                      size='md'
                     />
                   </FlexItem>
                 )}

src/Components/Blueprints/DeleteBlueprintModal.tsx

@@ -93,16 +93,16 @@ export const DeleteBlueprintModal: React.FunctionComponent<
   };
   return (
     <Modal variant={ModalVariant.small} isOpen={isOpen} onClose={onDeleteClose}>
-      <ModalHeader title={'Delete blueprint?'} titleIconVariant="warning" />
+      <ModalHeader title={'Delete blueprint?'} titleIconVariant='warning' />
       <ModalBody>
         All versions of {blueprintName} and its associated images will be
         deleted.
       </ModalBody>
       <ModalFooter>
-        <Button variant="danger" type="button" onClick={handleDelete}>
+        <Button variant='danger' type='button' onClick={handleDelete}>
           Delete
         </Button>
-        <Button variant="link" type="button" onClick={onDeleteClose}>
+        <Button variant='link' type='button' onClick={onDeleteClose}>
           Cancel
         </Button>
       </ModalFooter>

src/Components/Blueprints/EditBlueprintButton.tsx

@@ -16,7 +16,7 @@ export const EditBlueprintButton = () => {
       onClick={() =>
         navigate(resolveRelPath(`imagewizard/${selectedBlueprintId}`))
       }
-      variant="secondary"
+      variant='secondary'
     >
       Edit blueprint
     </Button>

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -258,9 +258,9 @@ export const ImportBlueprintModal: React.FunctionComponent<
             >
               <Button
                 icon={<HelpIcon />}
-                variant="plain"
+                variant='plain'
-                aria-label="About import"
+                aria-label='About import'
-                className="pf-v6-u-pl-sm"
+                className='pf-v6-u-pl-sm'
                 isInline
               />
             </Popover>
@@ -269,23 +269,23 @@ export const ImportBlueprintModal: React.FunctionComponent<
       />
       <ModalBody>
         <Form>
-          <FormGroup fieldId="checkbox-import-custom-repositories">
+          <FormGroup fieldId='checkbox-import-custom-repositories'>
             <Checkbox
-              label="Import missing custom repositories after file upload."
+              label='Import missing custom repositories after file upload.'
               isChecked={isCheckedImportRepos}
               onChange={() => setIsCheckedImportRepos((prev) => !prev)}
-              aria-label="Import Custom Repositories checkbox"
+              aria-label='Import Custom Repositories checkbox'
-              id="checkbox-import-custom-repositories"
+              id='checkbox-import-custom-repositories'
-              name="Import Repositories"
+              name='Import Repositories'
             />
           </FormGroup>
-          <FormGroup fieldId="import-blueprint-file-upload">
+          <FormGroup fieldId='import-blueprint-file-upload'>
             <FileUpload
-              id="import-blueprint-file-upload"
+              id='import-blueprint-file-upload'
-              type="text"
+              type='text'
               value={fileContent}
               filename={filename}
-              filenamePlaceholder="Drag and drop a file or upload one"
+              filenamePlaceholder='Drag and drop a file or upload one'
               onFileInputChange={handleFileInputChange}
               onDataChange={handleDataChange}
               onReadStarted={handleFileReadStarted}
@@ -293,7 +293,7 @@ export const ImportBlueprintModal: React.FunctionComponent<
               onClearClick={handleClear}
               isLoading={isLoading}
               isReadOnly={true}
-              browseButtonText="Upload"
+              browseButtonText='Upload'
               dropzoneProps={{
                 accept: { 'text/json': ['.json'], 'text/plain': ['.toml'] },
                 maxSize: 512000,
@@ -319,7 +319,7 @@ export const ImportBlueprintModal: React.FunctionComponent<
       </ModalBody>
       <ModalFooter>
         <Button
-          type="button"
+          type='button'
           isDisabled={isRejected || isInvalidFormat || !fileContent}
           onClick={() =>
             navigate(resolveRelPath(`imagewizard/import`), {
@@ -329,7 +329,7 @@ export const ImportBlueprintModal: React.FunctionComponent<
         >
           Review and finish
         </Button>
-        <Button variant="link" type="button" onClick={onImportClose}>
+        <Button variant='link' type='button' onClick={onImportClose}>
           Cancel
         </Button>
       </ModalFooter>

src/Components/CloudProviderConfig/AWSConfig.tsx

@@ -44,13 +44,13 @@ const AWSConfigToggle = ({ value, onChange }: ToggleGroupProps) => {
   };
 
   return (
-    <FormGroup label="Configure AWS Uploads">
+    <FormGroup label='Configure AWS Uploads'>
       <Switch
-        id="aws-config-switch"
+        id='aws-config-switch'
-        ouiaId="aws-config-switch"
+        ouiaId='aws-config-switch'
-        aria-label="aws-config-switch"
+        aria-label='aws-config-switch'
         // empty label so there is no icon
-        label=""
+        label=''
         isChecked={value}
         onChange={handleChange}
       />
@@ -79,19 +79,19 @@ const AWSBucket = ({ value, onChange, isDisabled }: FormGroupProps<string>) => {
 
   if (isDisabled) {
     return (
-      <DisabledInputGroup label={label} value={value} ariaLabel="aws-bucket" />
+      <DisabledInputGroup label={label} value={value} ariaLabel='aws-bucket' />
     );
   }
 
   return (
     <FormGroup label={label}>
       <ValidatedInput
-        placeholder="AWS bucket"
+        placeholder='AWS bucket'
-        ariaLabel="aws-bucket"
+        ariaLabel='aws-bucket'
         value={value || ''}
         validator={isAwsBucketValid}
         onChange={(_event, value) => onChange(value)}
-        helperText="Invalid AWS bucket name"
+        helperText='Invalid AWS bucket name'
       />
     </FormGroup>
   );
@@ -100,7 +100,7 @@ const AWSBucket = ({ value, onChange, isDisabled }: FormGroupProps<string>) => {
 const CredsPathPopover = () => {
   return (
     <Popover
-      minWidth="35rem"
+      minWidth='35rem'
       headerContent={'What is the AWS Credentials Path?'}
       bodyContent={
         <Content>
@@ -115,9 +115,9 @@ const CredsPathPopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        aria-label="Credentials Path Info"
+        aria-label='Credentials Path Info'
-        className="pf-v6-u-pl-sm header-button"
+        className='pf-v6-u-pl-sm header-button'
       />
     </Popover>
   );
@@ -139,7 +139,7 @@ const AWSCredsPath = ({
       <DisabledInputGroup
         value={value}
         label={label}
-        ariaLabel="aws-creds-path"
+        ariaLabel='aws-creds-path'
       />
     );
   }
@@ -147,12 +147,12 @@ const AWSCredsPath = ({
   return (
     <FormGroup label={label}>
       <ValidatedInput
-        placeholder="Path to AWS credentials"
+        placeholder='Path to AWS credentials'
-        ariaLabel="aws-creds-path"
+        ariaLabel='aws-creds-path'
         value={value || ''}
         validator={isAwsCredsPathValid}
         onChange={(_event, value) => onChange(value)}
-        helperText="Invalid filepath for AWS credentials"
+        helperText='Invalid filepath for AWS credentials'
       />
     </FormGroup>
   );

src/Components/CloudProviderConfig/CloudProviderConfig.tsx

@@ -48,9 +48,9 @@ const ConfigError = ({
     <EmptyState
       variant={EmptyStateVariant.xl}
       icon={ExclamationIcon}
-      color="#C9190B"
+      color='#C9190B'
     >
-      <Title headingLevel="h4" size="lg">
+      <Title headingLevel='h4' size='lg'>
         Error
       </Title>
       <EmptyStateBody>
@@ -59,7 +59,7 @@ const ConfigError = ({
       </EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
-          <Button variant="primary" onClick={onClose}>
+          <Button variant='primary' onClick={onClose}>
             Go back
           </Button>
         </EmptyStateActions>
@@ -118,8 +118,8 @@ export const CloudProviderConfig = () => {
       <PageSection>
         <Wizard onClose={handleClose}>
           <WizardStep
-            name="AWS Config"
+            name='AWS Config'
-            id="aws-config"
+            id='aws-config'
             footer={{
               nextButtonText: 'Submit',
               isNextDisabled: !isAwsStepValid(config),

src/Components/Cockpit/NotReady.tsx

@@ -13,7 +13,7 @@ import cockpit from 'cockpit';
 export const NotReady = ({ enabled }: { enabled: boolean }) => {
   return (
     <EmptyState
-      headingLevel="h4"
+      headingLevel='h4'
       icon={CubesIcon}
       titleText={`OSBuild Composer is not ${enabled ? 'started' : 'enabled'}`}
       variant={EmptyStateVariant.xl}
@@ -21,7 +21,7 @@ export const NotReady = ({ enabled }: { enabled: boolean }) => {
       <EmptyStateFooter>
         <EmptyStateActions>
           <Button
-            variant="primary"
+            variant='primary'
             onClick={(event) => {
               event.preventDefault();
               cockpit
@@ -40,7 +40,7 @@ export const NotReady = ({ enabled }: { enabled: boolean }) => {
         </EmptyStateActions>
         <EmptyStateActions>
           <Button
-            variant="link"
+            variant='link'
             onClick={(event) => {
               event.preventDefault();
               cockpit.jump(

src/Components/Cockpit/RequireAdmin.tsx

@@ -10,9 +10,9 @@ import { LockIcon } from '@patternfly/react-icons';
 export const RequireAdmin = () => {
   return (
     <EmptyState
-      headingLevel="h4"
+      headingLevel='h4'
       icon={LockIcon}
-      titleText="Access is limited."
+      titleText='Access is limited.'
       variant={EmptyStateVariant.xl}
     >
       <EmptyStateBody>

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -118,7 +118,7 @@ export const CustomWizardFooter = ({
     <WizardFooterWrapper>
       <Flex columnGap={{ default: 'columnGapSm' }}>
         <Button
-          variant="primary"
+          variant='primary'
           onClick={() => {
             if (!process.env.IS_ON_PREMISE) {
               analytics.track(`${AMPLITUDE_MODULE_NAME} - Button Clicked`, {
@@ -134,7 +134,7 @@ export const CustomWizardFooter = ({
           Next
         </Button>
         <Button
-          variant="secondary"
+          variant='secondary'
           onClick={() => {
             if (!process.env.IS_ON_PREMISE) {
               analytics.track(`${AMPLITUDE_MODULE_NAME} - Button Clicked`, {
@@ -151,7 +151,7 @@ export const CustomWizardFooter = ({
         </Button>
         {optional && (
           <Button
-            variant="tertiary"
+            variant='tertiary'
             onClick={() => {
               if (!process.env.IS_ON_PREMISE) {
                 analytics.track(`${AMPLITUDE_MODULE_NAME} - Button Clicked`, {
@@ -168,7 +168,7 @@ export const CustomWizardFooter = ({
           </Button>
         )}
         <Button
-          variant="link"
+          variant='link'
           onClick={() => {
             if (!process.env.IS_ON_PREMISE) {
               analytics.track(`${AMPLITUDE_MODULE_NAME} - Button Clicked`, {
@@ -372,8 +372,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
           isVisitRequired
         >
           <WizardStep
-            name="Image output"
+            name='Image output'
-            id="step-image-output"
+            id='step-image-output'
             footer={
               <CustomWizardFooter
                 disableNext={targetEnvironments.length === 0}
@@ -384,8 +384,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             <ImageOutputStep />
           </WizardStep>
           <WizardStep
-            name="Target Environment"
+            name='Target Environment'
-            id="step-target-environment"
+            id='step-target-environment'
             isHidden={
               !targetEnvironments.find(
                 (target: string) =>
@@ -394,9 +394,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             }
             steps={[
               <WizardStep
-                name="Amazon Web Services"
+                name='Amazon Web Services'
-                id="wizard-target-aws"
+                id='wizard-target-aws'
-                key="wizard-target-aws"
+                key='wizard-target-aws'
                 footer={
                   <CustomWizardFooter
                     disableNext={
@@ -415,9 +415,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <Aws />
               </WizardStep>,
               <WizardStep
-                name="Google Cloud Platform"
+                name='Google Cloud Platform'
-                id="wizard-target-gcp"
+                id='wizard-target-gcp'
-                key="wizard-target-gcp"
+                key='wizard-target-gcp'
                 footer={
                   <CustomWizardFooter
                     disableNext={
@@ -431,9 +431,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <Gcp />
               </WizardStep>,
               <WizardStep
-                name="Azure"
+                name='Azure'
-                id="wizard-target-azure"
+                id='wizard-target-azure'
-                key="wizard-target-azure"
+                key='wizard-target-azure'
                 footer={
                   <CustomWizardFooter
                     disableNext={
@@ -456,13 +456,13 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             ]}
           />
           <WizardStep
-            name="Optional steps"
+            name='Optional steps'
-            id="step-optional-steps"
+            id='step-optional-steps'
             steps={[
               <WizardStep
-                name="Register"
+                name='Register'
-                id="step-register"
+                id='step-register'
-                key="step-register"
+                key='step-register'
                 isHidden={!!process.env.IS_ON_PREMISE || !isRhel(distribution)}
                 navItem={CustomStatusNavItem}
                 status={
@@ -483,8 +483,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
               </WizardStep>,
               <WizardStep
                 name={complianceEnabled ? 'Compliance' : 'OpenSCAP'}
-                id="step-oscap"
+                id='step-oscap'
-                key="step-oscap"
+                key='step-oscap'
                 navItem={CustomStatusNavItem}
                 footer={
                   <CustomWizardFooter disableNext={false} optional={true} />
@@ -493,9 +493,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <OscapStep />
               </WizardStep>,
               <WizardStep
-                name="File system configuration"
+                name='File system configuration'
-                id="step-file-system"
+                id='step-file-system'
-                key="step-file-system"
+                key='step-file-system'
                 navItem={CustomStatusNavItem}
                 isHidden={hasWslTargetOnly}
                 footer={
@@ -519,9 +519,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 </FileSystemContext.Provider>
               </WizardStep>,
               <WizardStep
-                name="Repeatable build"
+                name='Repeatable build'
-                id="wizard-repository-snapshot"
+                id='wizard-repository-snapshot'
-                key="wizard-repository-snapshot"
+                key='wizard-repository-snapshot'
                 navItem={CustomStatusNavItem}
                 status={snapshotValidation.disabledNext ? 'error' : 'default'}
                 isHidden={!!process.env.IS_ON_PREMISE}
@@ -535,9 +535,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <SnapshotStep />
               </WizardStep>,
               <WizardStep
-                name="Custom repositories"
+                name='Custom repositories'
-                id="wizard-custom-repositories"
+                id='wizard-custom-repositories'
-                key="wizard-custom-repositories"
+                key='wizard-custom-repositories'
                 navItem={CustomStatusNavItem}
                 isHidden={!!process.env.IS_ON_PREMISE}
                 isDisabled={snapshotValidation.disabledNext}
@@ -548,9 +548,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <RepositoriesStep />
               </WizardStep>,
               <WizardStep
-                name="Additional packages"
+                name='Additional packages'
-                id="wizard-additional-packages"
+                id='wizard-additional-packages'
-                key="wizard-additional-packages"
+                key='wizard-additional-packages'
                 navItem={CustomStatusNavItem}
                 isDisabled={snapshotValidation.disabledNext}
                 footer={
@@ -560,9 +560,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <PackagesStep />
               </WizardStep>,
               <WizardStep
-                name="Users"
+                name='Users'
-                id="wizard-users"
+                id='wizard-users'
-                key="wizard-users"
+                key='wizard-users'
                 navItem={CustomStatusNavItem}
                 status={usersValidation.disabledNext ? 'error' : 'default'}
                 footer={
@@ -575,9 +575,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <UsersStep />
               </WizardStep>,
               <WizardStep
-                name="Timezone"
+                name='Timezone'
-                id="wizard-timezone"
+                id='wizard-timezone'
-                key="wizard-timezone"
+                key='wizard-timezone'
                 navItem={CustomStatusNavItem}
                 status={timezoneValidation.disabledNext ? 'error' : 'default'}
                 footer={
@@ -590,9 +590,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <TimezoneStep />
               </WizardStep>,
               <WizardStep
-                name="Locale"
+                name='Locale'
-                id="wizard-locale"
+                id='wizard-locale'
-                key="wizard-locale"
+                key='wizard-locale'
                 navItem={CustomStatusNavItem}
                 status={localeValidation.disabledNext ? 'error' : 'default'}
                 footer={
@@ -605,9 +605,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <LocaleStep />
               </WizardStep>,
               <WizardStep
-                name="Hostname"
+                name='Hostname'
-                id="wizard-hostname"
+                id='wizard-hostname'
-                key="wizard-hostname"
+                key='wizard-hostname'
                 navItem={CustomStatusNavItem}
                 status={hostnameValidation.disabledNext ? 'error' : 'default'}
                 footer={
@@ -620,9 +620,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <HostnameStep />
               </WizardStep>,
               <WizardStep
-                name="Kernel"
+                name='Kernel'
-                id="wizard-kernel"
+                id='wizard-kernel'
-                key="wizard-kernel"
+                key='wizard-kernel'
                 navItem={CustomStatusNavItem}
                 isHidden={hasWslTargetOnly}
                 status={kernelValidation.disabledNext ? 'error' : 'default'}
@@ -636,9 +636,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <KernelStep />
               </WizardStep>,
               <WizardStep
-                name="Firewall"
+                name='Firewall'
-                id="wizard-firewall"
+                id='wizard-firewall'
-                key="wizard-firewall"
+                key='wizard-firewall'
                 navItem={CustomStatusNavItem}
                 status={firewallValidation.disabledNext ? 'error' : 'default'}
                 footer={
@@ -651,9 +651,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <FirewallStep />
               </WizardStep>,
               <WizardStep
-                name="Systemd services"
+                name='Systemd services'
-                id="wizard-services"
+                id='wizard-services'
-                key="wizard-services"
+                key='wizard-services'
                 navItem={CustomStatusNavItem}
                 status={servicesValidation.disabledNext ? 'error' : 'default'}
                 footer={
@@ -666,9 +666,9 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 <ServicesStep />
               </WizardStep>,
               <WizardStep
-                name="First boot script configuration"
+                name='First boot script configuration'
-                id="wizard-first-boot"
+                id='wizard-first-boot'
-                key="wizard-first-boot"
+                key='wizard-first-boot'
                 navItem={CustomStatusNavItem}
                 status={firstBootValidation.disabledNext ? 'error' : 'default'}
                 isHidden={!!process.env.IS_ON_PREMISE}
@@ -684,8 +684,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             ]}
           />
           <WizardStep
-            name="Details"
+            name='Details'
-            id="step-details"
+            id='step-details'
             navItem={CustomStatusNavItem}
             status={detailsValidation.disabledNext ? 'error' : 'default'}
             footer={
@@ -697,8 +697,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             <DetailsStep />
           </WizardStep>
           <WizardStep
-            name="Review"
+            name='Review'
-            id="step-review"
+            id='step-review'
             footer={<ReviewWizardFooter />}
           >
             <ReviewStep />

src/Components/CreateImageWizard/LabelInput.tsx

@@ -154,21 +154,21 @@ const LabelInput = ({
         <TextInputGroupUtilities>
           <Button
             icon={
-              <Icon status="info">
+              <Icon status='info'>
                 <PlusCircleIcon />
               </Icon>
             }
-            variant="plain"
+            variant='plain'
             onClick={(e) => handleAddItem(e, inputValue)}
             isDisabled={!inputValue}
             aria-label={ariaLabel}
           />
           <Button
             icon={<TimesIcon />}
-            variant="plain"
+            variant='plain'
             onClick={handleClear}
             isDisabled={!inputValue}
-            aria-label="Clear input"
+            aria-label='Clear input'
           />
         </TextInputGroupUtilities>
       </TextInputGroup>
@@ -185,7 +185,7 @@ const LabelInput = ({
         <LabelGroup
           categoryName={requiredCategoryName}
           numLabels={20}
-          className="pf-v6-u-mt-sm pf-v6-u-w-100"
+          className='pf-v6-u-mt-sm pf-v6-u-w-100'
         >
           {requiredList.map((item) => (
             <Label key={item} isCompact>
@@ -194,7 +194,7 @@ const LabelInput = ({
           ))}
         </LabelGroup>
       )}
-      <LabelGroup numLabels={20} className="pf-v6-u-mt-sm pf-v6-u-w-100">
+      <LabelGroup numLabels={20} className='pf-v6-u-mt-sm pf-v6-u-w-100'>
         {list?.map((item) => (
           <Label
             key={item}

src/Components/CreateImageWizard/UsrSubDirectoriesDisabled.tsx

@@ -5,8 +5,8 @@ import { Alert } from '@patternfly/react-core';
 const UsrSubDirectoriesDisabled = () => {
   return (
     <Alert
-      variant="warning"
+      variant='warning'
-      title="Sub-directories for the /usr mount point are no longer supported"
+      title='Sub-directories for the /usr mount point are no longer supported'
       isInline
     >
       Please note that including sub-directories in the /usr path is no longer

src/Components/CreateImageWizard/ValidatedInput.tsx

@@ -98,7 +98,7 @@ export const ValidatedInputAndTextArea = ({
       )}
       {warning !== undefined && warning !== '' && (
         <HelperText>
-          <HelperTextItem variant="warning">{warning}</HelperTextItem>
+          <HelperTextItem variant='warning'>{warning}</HelperTextItem>
         </HelperText>
       )}
       {validated === 'error' && hasError && (
@@ -125,7 +125,7 @@ const getValidationState = (
 export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
   return (
     <HelperText>
-      <HelperTextItem variant="error">{errorMessage}</HelperTextItem>
+      <HelperTextItem variant='error'>{errorMessage}</HelperTextItem>
     </HelperText>
   );
 };
@@ -158,7 +158,7 @@ export const ValidatedInput = ({
       <TextInput
         value={value}
         data-testid={dataTestId}
-        type="text"
+        type='text'
         onChange={onChange!}
         validated={handleValidation()}
         aria-label={ariaLabel || ''}
@@ -167,7 +167,7 @@ export const ValidatedInput = ({
       />
       {!isPristine && !validator(value) && (
         <HelperText>
-          <HelperTextItem variant="error">{helperText}</HelperTextItem>
+          <HelperTextItem variant='error'>{helperText}</HelperTextItem>
         </HelperText>
       )}
     </>

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

@@ -45,7 +45,7 @@ const DetailsStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Details
       </Title>
       <Content>
@@ -53,15 +53,15 @@ const DetailsStep = () => {
         images created from this blueprint will use the name of the parent
         blueprint.
       </Content>
-      <FormGroup isRequired label="Blueprint name" fieldId="blueprint-name">
+      <FormGroup isRequired label='Blueprint name' fieldId='blueprint-name'>
         <ValidatedInputAndTextArea
-          ariaLabel="blueprint name"
+          ariaLabel='blueprint name'
-          dataTestId="blueprint"
+          dataTestId='blueprint'
           value={blueprintName}
           onChange={handleNameChange}
-          placeholder="Add blueprint name"
+          placeholder='Add blueprint name'
           stepValidation={stepValidation}
-          fieldName="name"
+          fieldName='name'
           isRequired={true}
         />
         <FormHelperText>
@@ -75,17 +75,17 @@ const DetailsStep = () => {
       </FormGroup>
 
       <FormGroup
-        label="Blueprint description"
+        label='Blueprint description'
-        fieldId="blueprint-description-name"
+        fieldId='blueprint-description-name'
       >
         <ValidatedInputAndTextArea
-          ariaLabel="blueprint description"
+          ariaLabel='blueprint description'
-          dataTestId="blueprint description"
+          dataTestId='blueprint description'
           value={blueprintDescription}
           onChange={handleDescriptionChange}
-          placeholder="Add description"
+          placeholder='Add description'
           stepValidation={stepValidation}
-          fieldName="description"
+          fieldName='description'
         />
       </FormGroup>
     </Form>

src/Components/CreateImageWizard/steps/FileSystem/components/FileSystemAutomaticPartitionInformation.tsx

@@ -16,13 +16,13 @@ const FileSystemAutomaticPartition = () => {
         current supported configuration layout.
         <br></br>
         <Button
-          component="a"
+          component='a'
-          target="_blank"
+          target='_blank'
-          variant="link"
+          variant='link'
           icon={<ExternalLinkAltIcon />}
-          iconPosition="right"
+          iconPosition='right'
           href={FILE_SYSTEM_CUSTOMIZATION_URL}
-          className="pf-v6-u-pl-0"
+          className='pf-v6-u-pl-0'
         >
           Customizing file systems during the image creation
         </Button>

src/Components/CreateImageWizard/steps/FileSystem/components/FileSystemConfiguration.tsx

@@ -72,13 +72,13 @@ const FileSystemConfiguration = () => {
           order to conform to best practices and ensure functionality.
           <br></br>
           <Button
-            component="a"
+            component='a'
-            target="_blank"
+            target='_blank'
-            variant="link"
+            variant='link'
             icon={<ExternalLinkAltIcon />}
-            iconPosition="right"
+            iconPosition='right'
             href={FILE_SYSTEM_CUSTOMIZATION_URL}
-            className="pf-v6-u-pl-0"
+            className='pf-v6-u-pl-0'
           >
             Read more about manual configuration here
           </Button>
@@ -87,7 +87,7 @@ const FileSystemConfiguration = () => {
       {(environments.includes('image-installer') ||
         environments.includes('wsl')) && (
         <Alert
-          variant="warning"
+          variant='warning'
           isInline
           title={`Filesystem customizations are not applied to ${filteredTargets.join(
             ' and ',
@@ -97,8 +97,8 @@ const FileSystemConfiguration = () => {
       <FileSystemTable />
       <Content>
         <Button
-          className="pf-v6-u-text-align-left"
+          className='pf-v6-u-text-align-left'
-          variant="link"
+          variant='link'
           icon={<PlusCircleIcon />}
           onClick={handleAddPartition}
         >

src/Components/CreateImageWizard/steps/FileSystem/components/FileSystemPartition.tsx

@@ -23,27 +23,27 @@ const FileSystemPartition = () => {
   return (
     <FormGroup>
       <Radio
-        id="automatic file system config radio"
+        id='automatic file system config radio'
         label={
           <>
-            <Label isCompact color="blue">
+            <Label isCompact color='blue'>
               Recommended
             </Label>{' '}
             Use automatic partitioning
           </>
         }
-        name="sc-radio-automatic"
+        name='sc-radio-automatic'
-        description="Automatically partition your image to what is best, depending on the target environment(s)"
+        description='Automatically partition your image to what is best, depending on the target environment(s)'
         isChecked={fileSystemConfigurationType === 'automatic'}
         onChange={() => {
           dispatch(changeFileSystemConfigurationType('automatic'));
         }}
       />
       <Radio
-        id="manual file system config radio"
+        id='manual file system config radio'
-        label="Manually configure partitions"
+        label='Manually configure partitions'
-        name="fsc-radio-manual"
+        name='fsc-radio-manual'
-        description="Manually configure the file system of your image by adding, removing, and editing partitions"
+        description='Manually configure the file system of your image by adding, removing, and editing partitions'
         isChecked={fileSystemConfigurationType === 'manual'}
         onChange={() => {
           dispatch(changeFileSystemConfigurationType('manual'));

src/Components/CreateImageWizard/steps/FileSystem/components/FileSystemTable.tsx

@@ -43,7 +43,7 @@ export const FileSystemContext = React.createContext<boolean>(true);
 export const MinimumSizePopover = () => {
   return (
     <Popover
-      maxWidth="30rem"
+      maxWidth='30rem'
       bodyContent={
         <Content>
           <Content>
@@ -55,10 +55,10 @@ export const MinimumSizePopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        aria-label="File system configuration info"
+        aria-label='File system configuration info'
-        aria-describedby="file-system-configuration-info"
+        aria-describedby='file-system-configuration-info'
-        className="popover-button pf-v6-u-p-0"
+        className='popover-button pf-v6-u-p-0'
       />
     </Popover>
   );
@@ -112,11 +112,11 @@ const Row = ({ partition, onDragEnd, onDragStart, onDrop }: RowPropTypes) => {
           id: `draggable-row-${partition.id}`,
         }}
       />
-      <Td className="pf-m-width-20">
+      <Td className='pf-m-width-20'>
         <MountpointPrefix partition={partition} />
         {!isPristine && stepValidation.errors[`mountpoint-${partition.id}`] && (
           <Alert
-            variant="danger"
+            variant='danger'
             isInline
             isPlain
             title={stepValidation.errors[`mountpoint-${partition.id}`]}
@@ -142,7 +142,7 @@ const Row = ({ partition, onDragEnd, onDragStart, onDrop }: RowPropTypes) => {
       </Td>
       <Td width={10}>
         <Button
-          variant="link"
+          variant='link'
           icon={<MinusCircleIcon />}
           onClick={() => handleRemovePartition(partition.id)}
           isDisabled={partition.mountpoint === '/'}
@@ -234,7 +234,7 @@ const MountpointSuffix = ({ partition }: MountpointSuffixPropTypes) => {
   return (
     <TextInput
       value={suffix}
-      type="text"
+      type='text'
       onChange={(event: React.FormEvent, newValue) => {
         const mountpoint = prefix + normalizeSuffix(newValue);
         dispatch(
@@ -244,7 +244,7 @@ const MountpointSuffix = ({ partition }: MountpointSuffixPropTypes) => {
           }),
         );
       }}
-      aria-label="mountpoint suffix"
+      aria-label='mountpoint suffix'
     />
   );
 };
@@ -274,7 +274,7 @@ const MinimumSize = ({ partition }: MinimumSizePropTypes) => {
 
   return (
     <ValidatedInputAndTextArea
-      ariaLabel="minimum partition size"
+      ariaLabel='minimum partition size'
       value={partition.min_size}
       isDisabled={partition.unit === 'B'}
       warning={
@@ -282,10 +282,10 @@ const MinimumSize = ({ partition }: MinimumSizePropTypes) => {
           ? 'The Wizard only supports KiB, MiB, or GiB. Adjust or keep the current value.'
           : ''
       }
-      type="text"
+      type='text'
       stepValidation={stepValidation}
       fieldName={`min-size-${partition.id}`}
-      placeholder="File system"
+      placeholder='File system'
       onChange={(event, minSize) => {
         if (minSize === '' || /^\d+$/.test(minSize)) {
           dispatch(
@@ -497,20 +497,20 @@ const FileSystemTable = () => {
   return (
     <Table
       className={isDragging ? styles.modifiers.dragOver : ''}
-      aria-label="File system table"
+      aria-label='File system table'
-      variant="compact"
+      variant='compact'
     >
       <Thead>
         <Tr>
-          <Th aria-label="Drag mount point" />
+          <Th aria-label='Drag mount point' />
           <Th>Mount point</Th>
-          <Th aria-label="Suffix">Suffix</Th>
+          <Th aria-label='Suffix'>Suffix</Th>
           <Th>Type</Th>
           <Th>
             Minimum size <MinimumSizePopover />
           </Th>
-          <Th aria-label="Unit">Unit</Th>
+          <Th aria-label='Unit'>Unit</Th>
-          <Th aria-label="Remove mount point" />
+          <Th aria-label='Remove mount point' />
         </Tr>
       </Thead>
 

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

@@ -20,7 +20,7 @@ const FileSystemStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         File system configuration
       </Title>
       <Content>Define the partitioning of the image.</Content>

src/Components/CreateImageWizard/steps/Firewall/components/PortsInput.tsx

@@ -18,17 +18,17 @@ const PortsInput = () => {
   const stepValidation = useFirewallValidation();
 
   return (
-    <FormGroup label="Ports">
+    <FormGroup label='Ports'>
       <LabelInput
-        ariaLabel="Add ports"
+        ariaLabel='Add ports'
-        placeholder="Add ports"
+        placeholder='Add ports'
         validator={isPortValid}
         list={ports}
-        item="Port"
+        item='Port'
         addAction={addPort}
         removeAction={removePort}
         stepValidation={stepValidation}
-        fieldName="ports"
+        fieldName='ports'
       />
     </FormGroup>
   );

src/Components/CreateImageWizard/steps/Firewall/components/Services.tsx

@@ -22,30 +22,30 @@ const Services = () => {
 
   return (
     <>
-      <FormGroup label="Enabled services">
+      <FormGroup label='Enabled services'>
         <LabelInput
-          ariaLabel="Add enabled service"
+          ariaLabel='Add enabled service'
-          placeholder="Add enabled service"
+          placeholder='Add enabled service'
           validator={isServiceValid}
           list={enabledServices}
-          item="Enabled service"
+          item='Enabled service'
           addAction={addEnabledFirewallService}
           removeAction={removeEnabledFirewallService}
           stepValidation={stepValidation}
-          fieldName="enabledServices"
+          fieldName='enabledServices'
         />
       </FormGroup>
-      <FormGroup label="Disabled services">
+      <FormGroup label='Disabled services'>
         <LabelInput
-          ariaLabel="Add disabled service"
+          ariaLabel='Add disabled service'
-          placeholder="Add disabled service"
+          placeholder='Add disabled service'
           validator={isServiceValid}
           list={disabledServices}
-          item="Disabled service"
+          item='Disabled service'
           addAction={addDisabledFirewallService}
           removeAction={removeDisabledFirewallService}
           stepValidation={stepValidation}
-          fieldName="disabledServices"
+          fieldName='disabledServices'
         />
       </FormGroup>
     </>

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

@@ -8,7 +8,7 @@ import Services from './components/Services';
 const FirewallStep = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Firewall
       </Title>
       <Content>Customize firewall settings for your image.</Content>

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

@@ -53,7 +53,7 @@ const FirstBootStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         First boot configuration
       </Title>
       <Content>
@@ -61,10 +61,10 @@ const FirstBootStep = () => {
         boot.
       </Content>
       <Alert
-        variant="warning"
+        variant='warning'
         isExpandable
         isInline
-        title="Important: please do not include sensitive information"
+        title='Important: please do not include sensitive information'
       >
         <Content>
           Please ensure that your script does not contain any secrets,
@@ -90,14 +90,14 @@ const FirstBootStep = () => {
             dispatch(setFirstBootScript(code.replace('\r\n', '\n')));
           }}
           code={selectedScript}
-          height="35vh"
+          height='35vh'
-          emptyStateButton="Browse"
+          emptyStateButton='Browse'
-          emptyStateLink="Start from scratch"
+          emptyStateLink='Start from scratch'
         />
         {errors.script && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem variant="error">{errors.script}</HelperTextItem>
+              <HelperTextItem variant='error'>{errors.script}</HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}

src/Components/CreateImageWizard/steps/Hostname/components/HostnameInput.tsx

@@ -21,14 +21,14 @@ const HostnameInput = () => {
   };
 
   return (
-    <FormGroup label="Hostname">
+    <FormGroup label='Hostname'>
       <ValidatedInputAndTextArea
-        ariaLabel="hostname input"
+        ariaLabel='hostname input'
         value={hostname}
         onChange={handleChange}
-        placeholder="Add a hostname"
+        placeholder='Add a hostname'
         stepValidation={stepValidation}
-        fieldName="hostname"
+        fieldName='hostname'
       />
     </FormGroup>
   );

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

@@ -7,7 +7,7 @@ import HostnameInput from './components/HostnameInput';
 const HostnameStep = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Hostname
       </Title>
       <Content>Select a hostname for your image.</Content>

src/Components/CreateImageWizard/steps/ImageOutput/components/ArchSelect.tsx

@@ -60,14 +60,14 @@ const ArchSelect = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      data-testid="arch_select"
+      data-testid='arch_select'
     >
       {arch}
     </MenuToggle>
   );
 
   return (
-    <FormGroup isRequired={true} label="Architecture">
+    <FormGroup isRequired={true} label='Architecture'>
       <Select
         isOpen={isOpen}
         selected={arch}

src/Components/CreateImageWizard/steps/ImageOutput/components/CentOSAcknowledgement.tsx

@@ -8,11 +8,11 @@ import { DEVELOPERS_URL } from '../../../../../constants';
 const DeveloperProgramButton = () => {
   return (
     <Button
-      component="a"
+      component='a'
-      target="_blank"
+      target='_blank'
-      variant="link"
+      variant='link'
       icon={<ExternalLinkAltIcon />}
-      iconPosition="right"
+      iconPosition='right'
       isInline
       href={DEVELOPERS_URL}
     >
@@ -24,7 +24,7 @@ const DeveloperProgramButton = () => {
 const CentOSAcknowledgement = () => {
   return (
     <Alert
-      variant="info"
+      variant='info'
       isPlain
       isInline
       title={

src/Components/CreateImageWizard/steps/ImageOutput/components/ReleaseLifecycle.tsx

@@ -117,7 +117,7 @@ export const chartMajorVersionCfg = {
 export const MajorReleasesLifecyclesChart = () => {
   return (
     <Panel>
-      <PanelMain maxHeight="10rem">
+      <PanelMain maxHeight='10rem'>
         <Bar
           options={chartMajorVersionCfg.options}
           data={chartMajorVersionCfg.data}
@@ -147,16 +147,16 @@ const ReleaseLifecycle = () => {
         isExpanded={isExpanded}
         isIndented
       >
-        <FormGroup label="Release lifecycle">
+        <FormGroup label='Release lifecycle'>
           <MajorReleasesLifecyclesChart />
         </FormGroup>
         <br />
         <Button
-          component="a"
+          component='a'
-          target="_blank"
+          target='_blank'
-          variant="link"
+          variant='link'
           icon={<ExternalLinkAltIcon />}
-          iconPosition="right"
+          iconPosition='right'
           isInline
           href={RELEASE_LIFECYCLE_URL}
         >

src/Components/CreateImageWizard/steps/ImageOutput/components/ReleaseSelect.tsx

@@ -127,7 +127,7 @@ const ReleaseSelect = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      data-testid="release_select"
+      data-testid='release_select'
       style={
         {
           maxWidth: '100%',
@@ -139,7 +139,7 @@ const ReleaseSelect = () => {
   );
 
   return (
-    <FormGroup isRequired={true} label="Release">
+    <FormGroup isRequired={true} label='Release'>
       <Select
         isOpen={isOpen}
         onOpenChange={(isOpen) => setIsOpen(isOpen)}
@@ -160,7 +160,7 @@ const ReleaseSelect = () => {
                   ev.stopPropagation();
                   handleExpand();
                 }}
-                value="loader"
+                value='loader'
                 isLoadButton
               >
                 Show options for further development of RHEL

src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx

@@ -76,11 +76,11 @@ const TargetEnvironmentCard = ({
             // the logos don't display in cockpit,
             // so we can just hide them
             <FlexItem>
-              <img className="provider-icon" src={imageSrc} alt={imageAlt} />
+              <img className='provider-icon' src={imageSrc} alt={imageAlt} />
             </FlexItem>
           )}
           <FlexItem>
-            <Title headingLevel="h5" size="md">
+            <Title headingLevel='h5' size='md'>
               {title}
             </Title>
           </FlexItem>
@@ -144,8 +144,8 @@ const TargetEnvironment = () => {
   if (isFetching) {
     return (
       <EmptyState
-        titleText="Loading target environments"
+        titleText='Loading target environments'
-        headingLevel="h6"
+        headingLevel='h6'
         icon={Spinner}
       />
     );
@@ -155,7 +155,7 @@ const TargetEnvironment = () => {
     return (
       <Alert
         title="Couldn't fetch target environments"
-        variant="danger"
+        variant='danger'
         isInline
       >
         Target environments couldn&apos;t be loaded, please refresh the page or
@@ -167,17 +167,17 @@ const TargetEnvironment = () => {
   return (
     <FormGroup
       isRequired={true}
-      label="Select target environments"
+      label='Select target environments'
-      data-testid="target-select"
+      data-testid='target-select'
     >
       {publicCloudsSupported() && (
         <FormGroup label={<small>Public cloud</small>}>
           <Gallery hasGutter>
             {supportedEnvironments?.includes('aws') && (
               <TargetEnvironmentCard
-                title="Amazon Web Services"
+                title='Amazon Web Services'
                 imageSrc={'/apps/frontend-assets/partners-icons/aws.svg'}
-                imageAlt="Amazon Web Services logo"
+                imageAlt='Amazon Web Services logo'
                 handleOnClick={() => handleToggleEnvironment('aws')}
                 onMouseEnter={() => prefetchSources({ provider: 'aws' })}
                 isClicked={environments.includes('aws')}
@@ -185,11 +185,11 @@ const TargetEnvironment = () => {
             )}
             {supportedEnvironments?.includes('gcp') && (
               <TargetEnvironmentCard
-                title="Google Cloud Platform"
+                title='Google Cloud Platform'
                 imageSrc={
                   '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
                 }
-                imageAlt="Google Cloud Platform logo"
+                imageAlt='Google Cloud Platform logo'
                 handleOnClick={() => handleToggleEnvironment('gcp')}
                 onMouseEnter={() => prefetchSources({ provider: 'gcp' })}
                 isClicked={environments.includes('gcp')}
@@ -197,11 +197,11 @@ const TargetEnvironment = () => {
             )}
             {supportedEnvironments?.includes('azure') && (
               <TargetEnvironmentCard
-                title="Microsoft Azure"
+                title='Microsoft Azure'
                 imageSrc={
                   '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
                 }
-                imageAlt="Microsoft Azure logo"
+                imageAlt='Microsoft Azure logo'
                 handleOnClick={() => handleToggleEnvironment('azure')}
                 onMouseEnter={() => prefetchSources({ provider: 'azure' })}
                 isClicked={environments.includes('azure')}
@@ -209,11 +209,11 @@ const TargetEnvironment = () => {
             )}
             {supportedEnvironments?.includes('oci') && (
               <TargetEnvironmentCard
-                title="Oracle Cloud Infrastructure"
+                title='Oracle Cloud Infrastructure'
                 imageSrc={
                   '/apps/frontend-assets/partners-icons/oracle-short.svg'
                 }
-                imageAlt="Oracle Cloud Infrastructure logo"
+                imageAlt='Oracle Cloud Infrastructure logo'
                 handleOnClick={() => handleToggleEnvironment('oci')}
                 isClicked={environments.includes('oci')}
               />
@@ -225,19 +225,19 @@ const TargetEnvironment = () => {
         supportedEnvironments?.includes('vsphere-ova')) && (
         <FormGroup
           label={<small>Private cloud</small>}
-          className="pf-v6-u-mt-sm"
+          className='pf-v6-u-mt-sm'
         >
           {supportedEnvironments.includes('vsphere-ova') && (
             <Checkbox
-              name="vsphere-checkbox-ova"
+              name='vsphere-checkbox-ova'
-              aria-label="VMware vSphere checkbox OVA"
+              aria-label='VMware vSphere checkbox OVA'
-              id="vsphere-checkbox-ova"
+              id='vsphere-checkbox-ova'
               label={
                 <>
                   VMware vSphere - Open virtualization format (.ova)
                   <Popover
-                    maxWidth="30rem"
+                    maxWidth='30rem'
-                    position="right"
+                    position='right'
                     bodyContent={
                       <Content>
                         <Content>
@@ -252,9 +252,9 @@ const TargetEnvironment = () => {
                   >
                     <Button
                       icon={<HelpIcon />}
-                      className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+                      className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
-                      variant="plain"
+                      variant='plain'
-                      aria-label="About OVA file"
+                      aria-label='About OVA file'
                       isInline
                     />
                   </Popover>
@@ -268,16 +268,16 @@ const TargetEnvironment = () => {
           )}
           {supportedEnvironments.includes('vsphere') && (
             <Checkbox
-              className="pf-v6-u-mt-sm"
+              className='pf-v6-u-mt-sm'
-              name="vsphere-checkbox-vmdk"
+              name='vsphere-checkbox-vmdk'
-              aria-label="VMware vSphere checkbox VMDK"
+              aria-label='VMware vSphere checkbox VMDK'
-              id="vsphere-checkbox-vmdk"
+              id='vsphere-checkbox-vmdk'
               label={
                 <>
                   VMware vSphere - Virtual disk (.vmdk)
                   <Popover
-                    maxWidth="30rem"
+                    maxWidth='30rem'
-                    position="right"
+                    position='right'
                     bodyContent={
                       <Content>
                         <Content>
@@ -291,9 +291,9 @@ const TargetEnvironment = () => {
                   >
                     <Button
                       icon={<HelpIcon />}
-                      className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+                      className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
-                      variant="plain"
+                      variant='plain'
-                      aria-label="About VMDK file"
+                      aria-label='About VMDK file'
                       isInline
                     />
                   </Popover>
@@ -310,26 +310,26 @@ const TargetEnvironment = () => {
       <FormGroup label={<small>Other</small>}>
         {supportedEnvironments?.includes('guest-image') && (
           <Checkbox
-            label="Virtualization - Guest image (.qcow2)"
+            label='Virtualization - Guest image (.qcow2)'
             isChecked={environments.includes('guest-image')}
             onChange={() => {
               handleToggleEnvironment('guest-image');
             }}
-            aria-label="Virtualization guest image checkbox"
+            aria-label='Virtualization guest image checkbox'
-            id="checkbox-guest-image"
+            id='checkbox-guest-image'
-            name="Virtualization guest image"
+            name='Virtualization guest image'
           />
         )}
         {supportedEnvironments?.includes('image-installer') && (
           <Checkbox
-            label="Bare metal - Installer (.iso)"
+            label='Bare metal - Installer (.iso)'
             isChecked={environments.includes('image-installer')}
             onChange={() => {
               handleToggleEnvironment('image-installer');
             }}
-            aria-label="Bare metal installer checkbox"
+            aria-label='Bare metal installer checkbox'
-            id="checkbox-image-installer"
+            id='checkbox-image-installer'
-            name="Bare metal installer"
+            name='Bare metal installer'
           />
         )}
         {supportedEnvironments?.includes('wsl') && (
@@ -338,8 +338,8 @@ const TargetEnvironment = () => {
               <>
                 WSL - Windows Subsystem for Linux (.wsl)
                 <Popover
-                  maxWidth="30rem"
+                  maxWidth='30rem'
-                  position="right"
+                  position='right'
                   headerContent={
                     <Content>
                       <Content>
@@ -360,13 +360,13 @@ const TargetEnvironment = () => {
                   }
                   footerContent={
                     <Button
-                      component="a"
+                      component='a'
-                      target="_blank"
+                      target='_blank'
-                      variant="link"
+                      variant='link'
                       icon={<ExternalLinkAltIcon />}
-                      iconPosition="right"
+                      iconPosition='right'
                       isInline
-                      href="https://access.redhat.com/articles/7115538"
+                      href='https://access.redhat.com/articles/7115538'
                     >
                       Learn more about Red Hat&apos;s WSL support
                     </Button>
@@ -374,9 +374,9 @@ const TargetEnvironment = () => {
                 >
                   <Button
                     icon={<HelpIcon />}
-                    className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+                    className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
-                    variant="plain"
+                    variant='plain'
-                    aria-label="About WSL file"
+                    aria-label='About WSL file'
                     isInline
                   />
                 </Popover>
@@ -386,9 +386,9 @@ const TargetEnvironment = () => {
             onChange={() => {
               handleToggleEnvironment('wsl');
             }}
-            aria-label="windows subsystem for linux checkbox"
+            aria-label='windows subsystem for linux checkbox'
-            id="checkbox-wsl"
+            id='checkbox-wsl'
-            name="WSL"
+            name='WSL'
           />
         )}
       </FormGroup>

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

@@ -35,7 +35,7 @@ const ImageOutputStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Image output
       </Title>
       <Content>

src/Components/CreateImageWizard/steps/Kernel/components/KernelArguments.tsx

@@ -39,19 +39,19 @@ const KernelArguments = () => {
   );
 
   return (
-    <FormGroup isRequired={false} label="Append">
+    <FormGroup isRequired={false} label='Append'>
       <LabelInput
-        ariaLabel="Add kernel argument"
+        ariaLabel='Add kernel argument'
-        placeholder="Add kernel argument"
+        placeholder='Add kernel argument'
         validator={isKernelArgumentValid}
         list={kernelAppend.filter((arg) => !requiredByOpenSCAP.includes(arg))}
         requiredList={requiredByOpenSCAP}
-        requiredCategoryName="Required by OpenSCAP"
+        requiredCategoryName='Required by OpenSCAP'
-        item="Kernel argument"
+        item='Kernel argument'
         addAction={addKernelArg}
         removeAction={removeKernelArg}
         stepValidation={stepValidation}
-        fieldName="kernelAppend"
+        fieldName='kernelAppend'
       />
     </FormGroup>
   );

src/Components/CreateImageWizard/steps/Kernel/components/KernelName.tsx

@@ -113,7 +113,7 @@ const KernelName = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={onToggleClick}
       isExpanded={isOpen}
     >
@@ -122,8 +122,8 @@ const KernelName = () => {
           value={kernel ? kernel : inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select kernel package"
+          placeholder='Select kernel package'
           isExpanded={isOpen}
         />
 
@@ -131,9 +131,9 @@ const KernelName = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={onClearButtonClick}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -145,12 +145,12 @@ const KernelName = () => {
     <>
       {kernel && !initialOptions.includes(kernel) && (
         <Alert
-          title="Custom kernel packages cannot be validated and can cause build issues."
+          title='Custom kernel packages cannot be validated and can cause build issues.'
           isInline
-          variant="warning"
+          variant='warning'
         />
       )}
-      <FormGroup isRequired={false} label="Name">
+      <FormGroup isRequired={false} label='Name'>
         <Select
           isScrollable
           isOpen={isOpen}

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

@@ -13,15 +13,15 @@ const KernelStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Kernel
       </Title>
       <Content>Customize kernel name and kernel arguments.</Content>
       {environments.includes('wsl') && (
         <Alert
-          variant="warning"
+          variant='warning'
           isInline
-          title="Kernel customizations are not applied to Windows Subsystem for Linux images"
+          title='Kernel customizations are not applied to Windows Subsystem for Linux images'
         />
       )}
       <KernelName />

src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx

@@ -98,7 +98,7 @@ const KeyboardDropDown = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={onToggleClick}
       isExpanded={isOpen}
     >
@@ -107,8 +107,8 @@ const KeyboardDropDown = () => {
           value={keyboard ? keyboard : inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select a keyboard"
+          placeholder='Select a keyboard'
           isExpanded={isOpen}
         />
 
@@ -116,9 +116,9 @@ const KeyboardDropDown = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={onClearButtonClick}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -127,7 +127,7 @@ const KeyboardDropDown = () => {
   );
 
   return (
-    <FormGroup isRequired={false} label="Keyboard">
+    <FormGroup isRequired={false} label='Keyboard'>
       <Select
         isScrollable
         isOpen={isOpen}

src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx

@@ -130,7 +130,7 @@ const LanguagesDropDown = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={onToggleClick}
       isExpanded={isOpen}
     >
@@ -139,17 +139,17 @@ const LanguagesDropDown = () => {
           value={inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select a language"
+          placeholder='Select a language'
           isExpanded={isOpen}
         />
         {inputValue && (
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={onClearButtonClick}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -158,7 +158,7 @@ const LanguagesDropDown = () => {
   );
 
   return (
-    <FormGroup isRequired={false} label="Languages">
+    <FormGroup isRequired={false} label='Languages'>
       <Select
         isScrollable
         isOpen={isOpen}
@@ -198,7 +198,7 @@ const LanguagesDropDown = () => {
           )}`}</HelperTextItem>
         </HelperText>
       )}
-      <LabelGroup numLabels={5} className="pf-v6-u-mt-sm pf-v6-u-w-100">
+      <LabelGroup numLabels={5} className='pf-v6-u-mt-sm pf-v6-u-w-100'>
         {languages?.map((lang) => (
           <Label
             key={lang}

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

@@ -8,7 +8,7 @@ import LanguagesDropDown from './components/LanguagesDropDown';
 const LocaleStep = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Locale
       </Title>
       <Content>Select the locale for your image.</Content>

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

@@ -24,7 +24,7 @@ const Oscap = ({ majorVersion }: OscapPropTypes) => {
 
   if (majorVersion === '10' && complianceType === 'openscap') {
     return (
-      <Alert title="OpenSCAP Security Profiles for RHEL 10 Not Yet Available">
+      <Alert title='OpenSCAP Security Profiles for RHEL 10 Not Yet Available'>
         OpenSCAP security profiles aren’t available for RHEL 10 in Image Builder
         yet. Support is on the way—check back soon for updates.
       </Alert>
@@ -35,9 +35,9 @@ const Oscap = ({ majorVersion }: OscapPropTypes) => {
     <>
       {environments.includes('wsl') && (
         <Alert
-          variant="warning"
+          variant='warning'
           isInline
-          title="OpenSCAP profiles are not compatible with WSL images."
+          title='OpenSCAP profiles are not compatible with WSL images.'
         />
       )}
       {complianceType === 'openscap' ? <ProfileSelector /> : <PolicySelector />}

src/Components/CreateImageWizard/steps/Oscap/components/OnPremSpinner.tsx

@@ -5,11 +5,11 @@ import { Form, FormGroup, Spinner, Title } from '@patternfly/react-core';
 const OscapOnPremSpinner = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         OpenSCAP profile
       </Title>
       <FormGroup>
-        <Spinner size="xl" />
+        <Spinner size='xl' />
       </FormGroup>
     </Form>
   );

src/Components/CreateImageWizard/steps/Oscap/components/OnPremWarning.tsx

@@ -13,7 +13,7 @@ import {
 const OscapOnPremWarning = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         OpenSCAP profile
       </Title>
       <FormGroup>
@@ -23,17 +23,17 @@ const OscapOnPremWarning = () => {
               '0 var(--pf-v6-c-toolbar__content--PaddingRight) 0 var(--pf-v6-c-toolbar__content--PaddingLeft)',
           }}
           isInline
-          variant="warning"
+          variant='warning'
-          title="The packages required to apply security profiles by using OpenSCAP are missing on this host. Install them with the following command"
+          title='The packages required to apply security profiles by using OpenSCAP are missing on this host. Install them with the following command'
         />
       </FormGroup>
       <FormGroup>
         <CodeBlock>
           <CodeBlockCode>
             <ClipboardCopy
-              hoverTip="Copy"
+              hoverTip='Copy'
-              clickTip="Copied"
+              clickTip='Copied'
-              variant="inline-compact"
+              variant='inline-compact'
             >
               sudo dnf install openscap-scanner scap-security-guide
             </ClipboardCopy>

src/Components/CreateImageWizard/steps/Oscap/components/OscapProfileInformation.tsx

@@ -79,14 +79,14 @@ export const OscapProfileInformation = ({
   return (
     <>
       {(isFetchingOscapProfileInfo || isFetchingPolicyInfo) && (
-        <Spinner size="lg" />
+        <Spinner size='lg' />
       )}
       {isSuccessOscapProfileInfo && (
         <>
-          <Content component={ContentVariants.dl} className="review-step-dl">
+          <Content component={ContentVariants.dl} className='review-step-dl'>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Profile description
             </Content>
@@ -95,19 +95,19 @@ export const OscapProfileInformation = ({
             </Content>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Reference ID
             </Content>
             <Content
-              data-testid="oscap-profile-info-ref-id"
+              data-testid='oscap-profile-info-ref-id'
               component={ContentVariants.dd}
             >
               {oscapProfile?.profile_id}
             </Content>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Packages
             </Content>
@@ -120,7 +120,7 @@ export const OscapProfileInformation = ({
             </Content>
             <Content
               component={ContentVariants.dt}
-              className="pf-v5-u-min-width"
+              className='pf-v5-u-min-width'
             >
               Kernel arguments
             </Content>
@@ -133,7 +133,7 @@ export const OscapProfileInformation = ({
             </Content>
             <Content
               component={ContentVariants.dt}
-              className="pf-v5-u-min-width"
+              className='pf-v5-u-min-width'
             >
               Enabled services
             </Content>
@@ -146,7 +146,7 @@ export const OscapProfileInformation = ({
             </Content>
             <Content
               component={ContentVariants.dt}
-              className="pf-v5-u-min-width"
+              className='pf-v5-u-min-width'
             >
               Disabled services
             </Content>
@@ -165,10 +165,10 @@ export const OscapProfileInformation = ({
       {isSuccessPolicyInfo && (
         <>
           <Content>
-            <Content component={ContentVariants.dl} className="review-step-dl">
+            <Content component={ContentVariants.dl} className='review-step-dl'>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 Policy description:
               </Content>
@@ -177,7 +177,7 @@ export const OscapProfileInformation = ({
               </Content>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 Business objective:
               </Content>
@@ -186,7 +186,7 @@ export const OscapProfileInformation = ({
               </Content>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 Policy type:
               </Content>
@@ -195,7 +195,7 @@ export const OscapProfileInformation = ({
               </Content>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 Reference ID:
               </Content>

src/Components/CreateImageWizard/steps/Oscap/components/PolicySelector.tsx

@@ -198,7 +198,7 @@ const PolicySelector = () => {
 
     const res = [
       <SelectOption
-        key="compliance-none-option"
+        key='compliance-none-option'
         value={{ toString: () => 'None', compareTo: () => false }}
       >
         None
@@ -216,7 +216,7 @@ const PolicySelector = () => {
 
   const toggleCompliance = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
-      ouiaId="compliancePolicySelect"
+      ouiaId='compliancePolicySelect'
       ref={toggleRef}
       onClick={() => setIsOpen(!isOpen)}
       isExpanded={isOpen}
@@ -232,7 +232,7 @@ const PolicySelector = () => {
   );
 
   return (
-    <FormGroup label="Policy">
+    <FormGroup label='Policy'>
       <Select
         isScrollable
         isOpen={isOpen}

src/Components/CreateImageWizard/steps/Oscap/components/ProfileSelector.tsx

@@ -279,9 +279,9 @@ const ProfileSelector = () => {
 
   const toggleOpenSCAP = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
-      data-testid="profileSelect"
+      data-testid='profileSelect'
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={() => setIsOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={!isSuccess || hasWslTargetOnly}
@@ -297,8 +297,8 @@ const ProfileSelector = () => {
           onClick={onInputClick}
           onChange={onTextInputChange}
           onKeyDown={onKeyDown}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="None"
+          placeholder='None'
           isExpanded={isOpen}
         />
 
@@ -306,9 +306,9 @@ const ProfileSelector = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={handleClear}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -317,7 +317,7 @@ const ProfileSelector = () => {
   );
 
   return (
-    <FormGroup label="Profile">
+    <FormGroup label='Profile'>
       <Select
         isScrollable
         isOpen={isOpen}
@@ -332,14 +332,14 @@ const ProfileSelector = () => {
       >
         <SelectList>
           {isFetching && (
-            <SelectOption value="loader">
+            <SelectOption value='loader'>
-              <Spinner size="lg" />
+              <Spinner size='lg' />
             </SelectOption>
           )}
           {selectOptions.length > 0 &&
             [
               <SelectOption
-                key="oscap-none-option"
+                key='oscap-none-option'
                 value={{ toString: () => 'None', compareTo: () => false }}
               >
                 None
@@ -367,8 +367,8 @@ const ProfileSelector = () => {
       </Select>
       {isError && (
         <Alert
-          title="Error fetching the profiles"
+          title='Error fetching the profiles'
-          variant="danger"
+          variant='danger'
           isPlain
           isInline
         >

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

@@ -107,7 +107,7 @@ const OscapContent = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         {complianceEnabled ? 'Compliance' : 'OpenSCAP profile'}
       </Title>
       <Content>
@@ -118,16 +118,16 @@ const OscapContent = () => {
         registered RHEL systems to a selected policy or profile.
       </Content>
       {complianceEnabled && (
-        <ToggleGroup aria-label="Default with single selectable">
+        <ToggleGroup aria-label='Default with single selectable'>
           <ToggleGroupItem
-            text="Compliance policies"
+            text='Compliance policies'
-            buttonId="toggle-group-compliance"
+            buttonId='toggle-group-compliance'
             isSelected={complianceType === 'compliance'}
             onChange={() => handleTypeChange('compliance')}
           />
           <ToggleGroupItem
-            text="OpenSCAP profiles"
+            text='OpenSCAP profiles'
-            buttonId="toggle-group-openscap"
+            buttonId='toggle-group-openscap'
             isSelected={complianceType === 'openscap'}
             onChange={() => handleTypeChange('openscap')}
           />
@@ -136,7 +136,7 @@ const OscapContent = () => {
       {Array.isArray(policies?.data) &&
         policies.data.length === 0 &&
         complianceType === 'compliance' && (
-          <Alert variant="info" isInline title="No compliance policies created">
+          <Alert variant='info' isInline title='No compliance policies created'>
             <p>
               Currently there are no compliance policies in your environment. To
               help you get started, select one of the default policies below and
@@ -144,7 +144,7 @@ const OscapContent = () => {
               policy or to create a new one, you must go through Insights
               Compliance.
             </p>
-            <AlertActionLink component="a" href={COMPLIANCE_URL}>
+            <AlertActionLink component='a' href={COMPLIANCE_URL}>
               Save blueprint and navigate to Insights Compliance
             </AlertActionLink>
           </Alert>

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

@@ -149,7 +149,7 @@ const PackageRecommendations = () => {
   };
 
   return (
-    <Panel variant="bordered" className="panel-border">
+    <Panel variant='bordered' className='panel-border'>
       <PanelMain>
         <PanelMainBody>
           <ExpandableSection
@@ -166,7 +166,7 @@ const PackageRecommendations = () => {
                     <Content component={ContentVariants.small}>
                       <em>Powered by RHEL Lightspeed</em>{' '}
                       <Popover
-                        maxWidth="30rem"
+                        maxWidth='30rem'
                         // overrides the expandable behaviour to allow placing
                         // a popover there
                         onShow={() => setIsExpanded(false)}
@@ -194,11 +194,11 @@ const PackageRecommendations = () => {
             {packages.length === 0 && (
               <>Select packages to generate recommendations.</>
             )}
-            {isLoading && <Spinner size="lg" />}
+            {isLoading && <Spinner size='lg' />}
             {isError && (
               <Alert
                 title="Recommendations couldn't be fetched"
-                variant="danger"
+                variant='danger'
                 isPlain
                 isInline
               >
@@ -219,15 +219,15 @@ const PackageRecommendations = () => {
                     blueprint.
                   </Content>
                 </Content>
-                <Table variant="compact">
+                <Table variant='compact'>
                   <Thead>
                     <Tr>
                       <Th width={35}>Package name</Th>
                       <Th width={45}>Description</Th>
                       <Th width={20}>
                         <Button
-                          variant="link"
+                          variant='link'
-                          component="a"
+                          component='a'
                           onClick={() => addAllPackages()}
                           isInline
                         >
@@ -242,7 +242,7 @@ const PackageRecommendations = () => {
                         <Td>{pkg}</Td>
                         {isLoadingDescriptions && (
                           <Td>
-                            <Spinner size="md" />
+                            <Spinner size='md' />
                           </Td>
                         )}
                         {isSuccessDescriptions && (
@@ -254,8 +254,8 @@ const PackageRecommendations = () => {
                         )}
                         <Td>
                           <Button
-                            variant="link"
+                            variant='link'
-                            component="a"
+                            component='a'
                             onClick={() => {
                               analytics.track(
                                 `${AMPLITUDE_MODULE_NAME} - Recommended Package Added`,

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

@@ -447,9 +447,9 @@ const Packages = () => {
           <Td colSpan={5}>
             <Bullseye>
               <EmptyState
-                headingLevel="h4"
+                headingLevel='h4'
                 icon={SearchIcon}
-                titleText="The search value is too short"
+                titleText='The search value is too short'
                 variant={EmptyStateVariant.sm}
               >
                 <EmptyStateBody>
@@ -470,14 +470,14 @@ const Packages = () => {
           <Td colSpan={5}>
             <Bullseye>
               <EmptyState
-                headingLevel="h4"
+                headingLevel='h4'
-                titleText="No selected packages in Other repos"
+                titleText='No selected packages in Other repos'
                 variant={EmptyStateVariant.sm}
               >
                 <EmptyStateBody>
                   Try looking under &quot;
                   <Button
-                    variant="link"
+                    variant='link'
                     onClick={() => setActiveTabKey(Repos.INCLUDED)}
                     isInline
                   >
@@ -501,8 +501,8 @@ const Packages = () => {
             <Td colSpan={5}>
               <Bullseye>
                 <EmptyState
-                  headingLevel="h4"
+                  headingLevel='h4'
-                  titleText="No results found"
+                  titleText='No results found'
                   icon={SearchIcon}
                   variant={EmptyStateVariant.sm}
                 >
@@ -514,7 +514,7 @@ const Packages = () => {
                     <EmptyStateActions>
                       {!process.env.IS_ON_PREMISE && (
                         <Button
-                          variant="primary"
+                          variant='primary'
                           onClick={() => setActiveTabKey(Repos.OTHER)}
                         >
                           Search other repositories
@@ -523,12 +523,12 @@ const Packages = () => {
                     </EmptyStateActions>
                     <EmptyStateActions>
                       <Button
-                        className="pf-v6-u-pt-md"
+                        className='pf-v6-u-pt-md'
-                        variant="link"
+                        variant='link'
                         isInline
-                        component="a"
+                        component='a'
-                        target="_blank"
+                        target='_blank'
-                        iconPosition="right"
+                        iconPosition='right'
                         icon={<ExternalLinkAltIcon />}
                         href={CONTENT_URL}
                       >
@@ -549,8 +549,8 @@ const Packages = () => {
             <Td colSpan={5}>
               <Bullseye>
                 <EmptyState
-                  headingLevel="h4"
+                  headingLevel='h4'
-                  titleText="No results found"
+                  titleText='No results found'
                   icon={SearchIcon}
                   variant={EmptyStateVariant.sm}
                 >
@@ -558,10 +558,10 @@ const Packages = () => {
                     No packages found in known repositories. If you know of a
                     repository containing this packages, add it to{' '}
                     <Button
-                      variant="link"
+                      variant='link'
                       isInline
-                      component="a"
+                      component='a'
-                      target="_blank"
+                      target='_blank'
                       href={CONTENT_URL}
                     >
                       your repositories
@@ -582,11 +582,11 @@ const Packages = () => {
       <Modal
         isOpen={isRepoModalOpen}
         onClose={handleCloseModalToggle}
-        width="50%"
+        width='50%'
       >
         <ModalHeader
-          title="Custom repositories will be added to your image"
+          title='Custom repositories will be added to your image'
-          titleIconVariant="warning"
+          titleIconVariant='warning'
         />
         <ModalBody>
           You have selected packages that belong to custom repositories. By
@@ -596,10 +596,10 @@ const Packages = () => {
           <br />
           The repositories will also get enabled in{' '}
           <Button
-            component="a"
+            component='a'
-            target="_blank"
+            target='_blank'
-            variant="link"
+            variant='link'
-            iconPosition="right"
+            iconPosition='right'
             isInline
             icon={<ExternalLinkAltIcon />}
             href={CONTENT_URL}
@@ -608,7 +608,7 @@ const Packages = () => {
           </Button>{' '}
           if they were not enabled yet:
           <br />
-          <Table variant="compact">
+          <Table variant='compact'>
             <Thead>
               <Tr>
                 {isSelectingPackage ? (
@@ -639,15 +639,15 @@ const Packages = () => {
         </ModalBody>
         <ModalFooter>
           <Button
-            key="add"
+            key='add'
-            variant="primary"
+            variant='primary'
             isLoading={createLoading}
             isDisabled={createLoading}
             onClick={handleConfirmModalToggle}
           >
             Add listed repositories
           </Button>
-          <Button key="back" variant="link" onClick={handleCloseModalToggle}>
+          <Button key='back' variant='link' onClick={handleCloseModalToggle}>
             Back
           </Button>
         </ModalFooter>
@@ -1168,21 +1168,21 @@ const Packages = () => {
     switch (true) {
       case differenceInDays < 0:
         icon = (
-          <Icon status="danger" isInline>
+          <Icon status='danger' isInline>
             <ExclamationCircleIcon />
           </Icon>
         );
         break;
       case differenceInDays <= 365:
         icon = (
-          <Icon status="warning" isInline>
+          <Icon status='warning' isInline>
             <ExclamationTriangleIcon />
           </Icon>
         );
         break;
       case differenceInDays > 365:
         icon = (
-          <Icon status="success" isInline>
+          <Icon status='success' isInline>
             <CheckCircleIcon />
           </Icon>
         );
@@ -1211,7 +1211,7 @@ const Packages = () => {
               key={`${grp.name}-${rowIndex}`}
               isExpanded={isGroupExpanded(grp.name)}
             >
-              <Tr data-testid="package-row">
+              <Tr data-testid='package-row'>
                 <Td
                   expand={{
                     rowIndex: rowIndex,
@@ -1232,8 +1232,8 @@ const Packages = () => {
                 <Td>
                   @{grp.name}
                   <Popover
-                    minWidth="25rem"
+                    minWidth='25rem'
-                    headerContent="Included packages"
+                    headerContent='Included packages'
                     bodyContent={
                       <div
                         style={
@@ -1244,8 +1244,8 @@ const Packages = () => {
                       >
                         {grp.package_list.length > 0 ? (
                           <Table
-                            variant="compact"
+                            variant='compact'
-                            data-testid="group-included-packages-table"
+                            data-testid='group-included-packages-table'
                           >
                             <Tbody>
                               {grp.package_list.map((pkg) => (
@@ -1262,11 +1262,11 @@ const Packages = () => {
                     }
                   >
                     <Button
-                      icon={<HelpIcon className="pf-v6-u-ml-xs" />}
+                      icon={<HelpIcon className='pf-v6-u-ml-xs' />}
-                      variant="plain"
+                      variant='plain'
-                      aria-label="About included packages"
+                      aria-label='About included packages'
-                      component="span"
+                      component='span'
-                      className="pf-v6-u-p-0"
+                      className='pf-v6-u-p-0'
                       isInline
                     />
                   </Popover>
@@ -1311,7 +1311,7 @@ const Packages = () => {
               key={`${pkg.name}-${rowIndex}`}
               isExpanded={isPkgExpanded(pkg)}
             >
-              <Tr data-testid="package-row">
+              <Tr data-testid='package-row'>
                 <Td
                   expand={{
                     rowIndex: rowIndex,
@@ -1434,11 +1434,11 @@ const Packages = () => {
 
   const PackagesTable = () => {
     return (
-      <Table variant="compact" data-testid="packages-table">
+      <Table variant='compact' data-testid='packages-table'>
         <Thead>
           <Tr>
-            <Th aria-label="Expanded" />
+            <Th aria-label='Expanded' />
-            <Th aria-label="Selected" />
+            <Th aria-label='Selected' />
             <Th sort={getSortParams(0)} width={30}>
               Name
             </Th>
@@ -1463,10 +1463,10 @@ const Packages = () => {
           <ToolbarContent>
             <ToolbarItem>
               <SearchInput
-                type="text"
+                type='text'
-                placeholder="Search packages"
+                placeholder='Search packages'
-                aria-label="Search packages"
+                aria-label='Search packages'
-                data-testid="packages-search-input"
+                data-testid='packages-search-input'
                 value={searchTerm}
                 onChange={handleSearch}
                 onClear={() => handleClear()}
@@ -1475,8 +1475,8 @@ const Packages = () => {
             <ToolbarItem>
               <ToggleGroup>
                 <ToggleGroupItem
-                  text="Available"
+                  text='Available'
-                  buttonId="toggle-available"
+                  buttonId='toggle-available'
                   isSelected={toggleSelected === 'toggle-available'}
                   onChange={handleFilterToggleClick}
                 />
@@ -1488,15 +1488,15 @@ const Packages = () => {
                         ? ` (${packages.length + groups.length})`
                         : ' (100+)'
                   }`}
-                  buttonId="toggle-selected"
+                  buttonId='toggle-selected'
                   isSelected={toggleSelected === 'toggle-selected'}
                   onChange={handleFilterToggleClick}
                 />
               </ToggleGroup>
             </ToolbarItem>
-            <ToolbarItem variant="pagination">
+            <ToolbarItem variant='pagination'>
               <Pagination
-                data-testid="packages-pagination-top"
+                data-testid='packages-pagination-top'
                 itemCount={
                   searchTerm === '' && toggleSelected === 'toggle-available'
                     ? 0
@@ -1517,7 +1517,7 @@ const Packages = () => {
           <ToolbarContent>
             <CustomHelperText
               hide={!debouncedSearchTermLengthOf1 || debouncedSearchTermIsGroup}
-              textValue="The search value must be greater than 1 character"
+              textValue='The search value must be greater than 1 character'
             />
           </ToolbarContent>
         </Stack>
@@ -1526,26 +1526,26 @@ const Packages = () => {
       <Tabs
         activeKey={activeTabKey}
         onSelect={handleTabClick}
-        aria-label="Repositories tabs on packages step"
+        aria-label='Repositories tabs on packages step'
       >
         <Tab
-          eventKey="included-repos"
+          eventKey='included-repos'
           title={<TabTitleText>Included repos</TabTitleText>}
           actions={<IncludedReposPopover />}
-          aria-label="Included repositories"
+          aria-label='Included repositories'
         />
         {!process.env.IS_ON_PREMISE && (
           <Tab
-            eventKey="other-repos"
+            eventKey='other-repos'
             title={<TabTitleText>Other repos</TabTitleText>}
             actions={<OtherReposPopover />}
-            aria-label="Other repositories"
+            aria-label='Other repositories'
           />
         )}
       </Tabs>
       <PackagesTable />
       <Pagination
-        data-testid="packages-pagination-bottom"
+        data-testid='packages-pagination-bottom'
         itemCount={
           searchTerm === '' && toggleSelected === 'toggle-available'
             ? 0

src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx

@@ -6,7 +6,7 @@ import { HelpIcon } from '@patternfly/react-icons';
 const PackageInfoNotAvailablePopover = () => {
   return (
     <Popover
-      headerContent="Package description"
+      headerContent='Package description'
       bodyContent={
         <Content>
           <Content>
@@ -22,9 +22,9 @@ const PackageInfoNotAvailablePopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        aria-label="Package description"
+        aria-label='Package description'
-        className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+        className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
       />
     </Popover>
   );

src/Components/CreateImageWizard/steps/Packages/components/RepoPopovers.tsx

@@ -17,10 +17,10 @@ export const IncludedReposPopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        aria-label="About included repositories"
+        aria-label='About included repositories'
-        component="span"
+        component='span'
-        size="sm"
+        size='sm'
         isInline
       />
     </Popover>
@@ -41,10 +41,10 @@ export const OtherReposPopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        aria-label="About other repositories"
+        aria-label='About other repositories'
-        component="span"
+        component='span'
-        size="sm"
+        size='sm'
         isInline
       />
     </Popover>

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

@@ -13,21 +13,21 @@ const PackagesStep = () => {
   const distribution = useAppSelector(selectDistribution);
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Additional packages
       </Title>
       <Content>
         Blueprints created with Images include all required packages.
       </Content>
       {!process.env.IS_ON_PREMISE && (
-        <Alert variant="info" isInline title="Search for package groups">
+        <Alert variant='info' isInline title='Search for package groups'>
           Search for package groups by starting your search with the
           &apos;@&apos; character. A single &apos;@&apos; as search input lists
           all available package groups.
         </Alert>
       )}
       {process.env.IS_ON_PREMISE && (
-        <Alert variant="info" isInline title="Searching for packages">
+        <Alert variant='info' isInline title='Searching for packages'>
           Search for exact matches by specifying the whole package name, or glob
           using asterisk wildcards (*) before or after the package name.
         </Alert>

src/Components/CreateImageWizard/steps/Registration/components/ActivationKeyInformation.tsx

@@ -32,7 +32,7 @@ const ActivationKeyInformation = (): JSX.Element => {
 
   return (
     <>
-      {isFetchingActivationKeyInfo && <Spinner size="lg" />}
+      {isFetchingActivationKeyInfo && <Spinner size='lg' />}
       {isSuccessActivationKeyInfo && (
         <Content>
           <Content component={ContentVariants.dl}>
@@ -65,29 +65,29 @@ const ActivationKeyInformation = (): JSX.Element => {
               >
                 <Button
                   icon={<HelpIcon />}
-                  variant="plain"
+                  variant='plain'
-                  aria-label="About additional repositories"
+                  aria-label='About additional repositories'
-                  className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+                  className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
                 />
               </Popover>
             </Content>
             <Content
               component={ContentVariants.dd}
-              className="pf-v6-u-display-flex pf-v6-u-align-items-flex-end"
+              className='pf-v6-u-display-flex pf-v6-u-align-items-flex-end'
             >
               {activationKeyInfo?.body?.additionalRepositories &&
               activationKeyInfo?.body?.additionalRepositories?.length > 0 ? (
                 <Popover
-                  position="right"
+                  position='right'
-                  minWidth="30rem"
+                  minWidth='30rem'
                   bodyContent={
                     <Content>
                       <Content component={ContentVariants.h3}>
                         Additional repositories
                       </Content>
                       <Table
-                        aria-label="Additional repositories table"
+                        aria-label='Additional repositories table'
-                        variant="compact"
+                        variant='compact'
                       >
                         <Thead>
                           <Tr>
@@ -108,9 +108,9 @@ const ActivationKeyInformation = (): JSX.Element => {
                   }
                 >
                   <Button
-                    variant="link"
+                    variant='link'
-                    aria-label="Show additional repositories"
+                    aria-label='Show additional repositories'
-                    className="pf-v6-u-pl-0 pf-v6-u-pt-0 pf-v6-u-pb-0"
+                    className='pf-v6-u-pl-0 pf-v6-u-pt-0 pf-v6-u-pb-0'
                   >
                     {activationKeyInfo.body?.additionalRepositories?.length}{' '}
                     repositories
@@ -131,8 +131,8 @@ const ActivationKeyInformation = (): JSX.Element => {
           </Content>
           <br />
           <Alert
-            title="Information about the activation key unavailable"
+            title='Information about the activation key unavailable'
-            variant="danger"
+            variant='danger'
             isPlain
             isInline
           >

src/Components/CreateImageWizard/steps/Registration/components/ActivationKeysList.tsx

@@ -207,15 +207,15 @@ const ActivationKeysList = () => {
 
     if (isFetchingActivationKeys) {
       selectOptionsElement.push(
-        <SelectOption key="Fetching" value="loader">
+        <SelectOption key='Fetching' value='loader'>
-          <Spinner size="md" />
+          <Spinner size='md' />
         </SelectOption>,
       );
     }
 
     if (isSuccessActivationKeys && selectOptions.length === 0) {
       selectOptionsElement.push(
-        <SelectOption key="no_results" value="no_results" isDisabled>
+        <SelectOption key='no_results' value='no_results' isDisabled>
           No results found
         </SelectOption>,
       );
@@ -227,11 +227,11 @@ const ActivationKeysList = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={handleToggle}
       onKeyDown={handleKeyDown}
       isExpanded={isOpen}
-      data-testid="activation-key-select"
+      data-testid='activation-key-select'
       isDisabled={
         !isSuccessActivationKeys ||
         registrationType === 'register-later' ||
@@ -250,8 +250,8 @@ const ActivationKeysList = () => {
           }
           onClick={handleToggle}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select activation key"
+          placeholder='Select activation key'
           isExpanded={isOpen}
         />
       </TextInputGroup>
@@ -260,7 +260,7 @@ const ActivationKeysList = () => {
 
   return (
     <>
-      <FormGroup label="Activation key to use for this image">
+      <FormGroup label='Activation key to use for this image'>
         <Select
           isScrollable
           isOpen={isOpen}
@@ -283,8 +283,8 @@ const ActivationKeysList = () => {
       </FormGroup>
       {isErrorActivationKeys && (
         <Alert
-          title="Activation keys unavailable"
+          title='Activation keys unavailable'
-          variant="danger"
+          variant='danger'
           isPlain
           isInline
         >

src/Components/CreateImageWizard/steps/Registration/components/ManageKeysButton.tsx

@@ -8,11 +8,11 @@ import { ACTIVATION_KEYS_URL } from '../../../../../constants';
 const ManageKeysButton = () => {
   return (
     <Button
-      component="a"
+      component='a'
-      target="_blank"
+      target='_blank'
-      variant="link"
+      variant='link'
       icon={<ExternalLinkAltIcon />}
-      iconPosition="right"
+      iconPosition='right'
       isInline
       href={ACTIVATION_KEYS_URL}
     >

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

@@ -21,9 +21,9 @@ import {
 const InsightsPopover = () => {
   return (
     <Popover
-      headerContent="About Red Hat Insights"
+      headerContent='About Red Hat Insights'
-      position="right"
+      position='right'
-      minWidth="30rem"
+      minWidth='30rem'
       bodyContent={
         <Content>
           <Content>
@@ -33,11 +33,11 @@ const InsightsPopover = () => {
             in downtime.
           </Content>
           <Button
-            component="a"
+            component='a'
-            target="_blank"
+            target='_blank'
-            variant="link"
+            variant='link'
             icon={<ExternalLinkAltIcon />}
-            iconPosition="right"
+            iconPosition='right'
             isInline
             href={INSIGHTS_URL}
           >
@@ -48,9 +48,9 @@ const InsightsPopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+        className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
-        aria-label="About remote host configuration (rhc)"
+        aria-label='About remote host configuration (rhc)'
         isInline
       />
     </Popover>
@@ -60,9 +60,9 @@ const InsightsPopover = () => {
 const RhcPopover = () => {
   return (
     <Popover
-      headerContent="About remote host configuration (rhc)"
+      headerContent='About remote host configuration (rhc)'
-      position="right"
+      position='right'
-      minWidth="30rem"
+      minWidth='30rem'
       bodyContent={
         <Content>
           <Content>
@@ -71,11 +71,11 @@ const RhcPopover = () => {
             to use the Red Hat Insights Remediations service.
           </Content>
           <Button
-            component="a"
+            component='a'
-            target="_blank"
+            target='_blank'
-            variant="link"
+            variant='link'
             icon={<ExternalLinkAltIcon />}
-            iconPosition="right"
+            iconPosition='right'
             isInline
             href={RHC_URL}
           >
@@ -86,9 +86,9 @@ const RhcPopover = () => {
     >
       <Button
         icon={<HelpIcon />}
-        variant="plain"
+        variant='plain'
-        className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
+        className='pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0'
-        aria-label="About remote host configuration (rhc)"
+        aria-label='About remote host configuration (rhc)'
         isInline
       />
     </Popover>
@@ -108,9 +108,9 @@ const Registration = () => {
   );
 
   return (
-    <FormGroup label="Registration method">
+    <FormGroup label='Registration method'>
       <Radio
-        label="Automatically register and enable advanced capabilities"
+        label='Automatically register and enable advanced capabilities'
         isChecked={
           registrationType === 'register-now' ||
           registrationType === 'register-now-insights' ||
@@ -121,13 +121,13 @@ const Registration = () => {
             dispatch(changeRegistrationType('register-now-rhc'));
           }
         }}
-        id="register-system-now"
+        id='register-system-now'
-        name="register-system-now"
+        name='register-system-now'
         autoFocus
         description={
           <Button
-            component="a"
+            component='a'
-            variant="link"
+            variant='link'
             isDisabled={!registrationType.startsWith('register-now')}
             isInline
             onClick={() => setShowOptions(!showOptions)}
@@ -138,7 +138,7 @@ const Registration = () => {
         body={
           showOptions && (
             <Checkbox
-              className="pf-v6-u-ml-lg"
+              className='pf-v6-u-ml-lg'
               label={
                 <>
                   Enable predictive analytics and management capabilities
@@ -156,8 +156,8 @@ const Registration = () => {
                   dispatch(changeRegistrationType('register-now'));
                 }
               }}
-              id="register-system-now-insights"
+              id='register-system-now-insights'
-              name="register-system-insights"
+              name='register-system-insights'
               body={
                 <Checkbox
                   label={
@@ -175,8 +175,8 @@ const Registration = () => {
                       dispatch(changeRegistrationType('register-now-insights'));
                     }
                   }}
-                  id="register-system-now-rhc"
+                  id='register-system-now-rhc'
-                  name="register-system-rhc"
+                  name='register-system-rhc'
                 />
               }
             />
@@ -184,25 +184,25 @@ const Registration = () => {
         }
       />
       <Radio
-        label="Register later"
+        label='Register later'
         isChecked={registrationType === 'register-later'}
         onChange={() => {
           dispatch(changeRegistrationType('register-later'));
           setShowOptions(false);
         }}
-        id="register-later"
+        id='register-later'
-        name="register-later"
+        name='register-later'
       />
       {isSatelliteRegistrationEnabled && (
         <Radio
-          label="Register with Satellite"
+          label='Register with Satellite'
           isChecked={registrationType === 'register-satellite'}
           onChange={() => {
             dispatch(changeRegistrationType('register-satellite'));
             setShowOptions(false);
           }}
-          id="register-satellite"
+          id='register-satellite'
-          name="register-satellite"
+          name='register-satellite'
         />
       )}
     </FormGroup>

src/Components/CreateImageWizard/steps/Registration/components/SatelliteRegistration.tsx

@@ -50,10 +50,10 @@ const SatelliteRegistration = () => {
   return (
     <>
       <SatelliteRegistrationCommand />
-      <FormGroup label="Certificate authority (CA) for Satellite">
+      <FormGroup label='Certificate authority (CA) for Satellite'>
         <FileUpload
-          id="text-file-with-restrictions-example"
+          id='text-file-with-restrictions-example'
-          type="text"
+          type='text'
           value={caCertificate || ''}
           filename={caCertificate ? 'CA detected' : ''}
           onDataChange={handleDataChange}
@@ -69,7 +69,7 @@ const SatelliteRegistration = () => {
             onDropRejected: handleFileRejected,
           }}
           validated={isRejected ? 'error' : validated}
-          browseButtonText="Upload"
+          browseButtonText='Upload'
           allowEditingUploadedText={true}
         />
         <FormHelperText>

src/Components/CreateImageWizard/steps/Registration/components/SatelliteRegistrationCommand.tsx

@@ -37,22 +37,22 @@ const SatelliteRegistrationCommand = () => {
   };
 
   return (
-    <FormGroup label="Registration command from Satellite" isRequired>
+    <FormGroup label='Registration command from Satellite' isRequired>
       <ValidatedInputAndTextArea
         inputType={'textArea'}
-        ariaLabel="registration command"
+        ariaLabel='registration command'
         value={registrationCommand || ''}
         onChange={handleChange}
-        placeholder="Registration command"
+        placeholder='Registration command'
         stepValidation={stepValidation}
-        fieldName="command"
+        fieldName='command'
         warning={stepValidation.errors.expired}
       />
       <FormHelperText>
         <HelperText>
           <HelperTextItem>
             To generate command from Satellite, follow the{' '}
-            <a href={registrationDocs} target="_blank" rel="noreferrer">
+            <a href={registrationDocs} target='_blank' rel='noreferrer'>
               documentation
             </a>
             .

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

@@ -41,14 +41,14 @@ const RegistrationStep = () => {
   const registrationType = useAppSelector(selectRegistrationType);
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Register systems using this image
       </Title>
-      <FormGroup label="Organization ID">
+      <FormGroup label='Organization ID'>
         <ClipboardCopy
-          hoverTip="Copy to clipboard"
+          hoverTip='Copy to clipboard'
-          clickTip="Successfully copied to clipboard!"
+          clickTip='Successfully copied to clipboard!'
-          variant="inline-compact"
+          variant='inline-compact'
         >
           {orgId || ''}
         </ClipboardCopy>
@@ -71,7 +71,7 @@ const RegistrationStep = () => {
         registrationType !== 'register-satellite' && (
           <FormGroup
             label={'Selected activation key'}
-            data-testid="selected-activation-key"
+            data-testid='selected-activation-key'
           >
             <ActivationKeyInformation />
           </FormGroup>

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

@@ -507,8 +507,8 @@ const Repositories = () => {
   if (!isTemplateSelected) {
     return (
       <Grid>
-        <Modal isOpen={modalOpen} onClose={onClose} variant="small">
+        <Modal isOpen={modalOpen} onClose={onClose} variant='small'>
-          <ModalHeader title="Are you sure?" titleIconVariant="warning" />
+          <ModalHeader title='Are you sure?' titleIconVariant='warning' />
           <ModalBody>
             You are removing a previously added repository.
             <br />
@@ -516,18 +516,18 @@ const Repositories = () => {
             from them.
           </ModalBody>
           <ModalFooter>
-            <Button key="remove" variant="primary" onClick={handleRemoveAnyway}>
+            <Button key='remove' variant='primary' onClick={handleRemoveAnyway}>
               Remove anyway
             </Button>
-            <Button key="back" variant="link" onClick={onClose}>
+            <Button key='back' variant='link' onClick={onClose}>
               Back
             </Button>
           </ModalFooter>
         </Modal>
         {wizardMode === 'edit' && (
           <Alert
-            title="Removing previously added repositories may lead to issues with selected packages"
+            title='Removing previously added repositories may lead to issues with selected packages'
-            variant="warning"
+            variant='warning'
             isPlain
             isInline
           />
@@ -554,8 +554,8 @@ const Repositories = () => {
             </ToolbarItem>
             <ToolbarItem>
               <SearchInput
-                placeholder="Filter repositories"
+                placeholder='Filter repositories'
-                aria-label="Filter repositories"
+                aria-label='Filter repositories'
                 onChange={handleFilterRepositories}
                 value={filterValue}
                 onClear={() => setFilterValue('')}
@@ -563,7 +563,7 @@ const Repositories = () => {
             </ToolbarItem>
             <ToolbarItem>
               <Button
-                variant="primary"
+                variant='primary'
                 isInline
                 onClick={() => refresh()}
                 isLoading={isFetching}
@@ -572,19 +572,19 @@ const Repositories = () => {
               </Button>
             </ToolbarItem>
             <ToolbarItem>
-              <ToggleGroup aria-label="Filter repositories list">
+              <ToggleGroup aria-label='Filter repositories list'>
                 <ToggleGroupItem
-                  text="All"
+                  text='All'
-                  aria-label="All repositories"
+                  aria-label='All repositories'
-                  buttonId="toggle-group-all"
+                  buttonId='toggle-group-all'
                   isSelected={toggleSelected === 'toggle-group-all'}
                   onChange={() => handleToggleClick('toggle-group-all')}
                 />
                 <ToggleGroupItem
-                  text="Selected"
+                  text='Selected'
                   isDisabled={!selected.size}
-                  aria-label="Selected repositories"
+                  aria-label='Selected repositories'
-                  buttonId="toggle-group-selected"
+                  buttonId='toggle-group-selected'
                   isSelected={toggleSelected === 'toggle-group-selected'}
                   onChange={() => handleToggleClick('toggle-group-selected')}
                 />
@@ -605,10 +605,10 @@ const Repositories = () => {
                 refetch={refresh}
               />
             ) : (
-              <Table variant="compact">
+              <Table variant='compact'>
                 <Thead>
                   <Tr>
-                    <Th aria-label="Selected" />
+                    <Th aria-label='Selected' />
                     <Th width={45}>Name</Th>
                     <Th width={15}>Architecture</Th>
                     <Th>Version</Th>
@@ -656,11 +656,11 @@ const Repositories = () => {
                             <>
                               <br />
                               <Button
-                                component="a"
+                                component='a'
-                                target="_blank"
+                                target='_blank'
-                                variant="link"
+                                variant='link'
                                 icon={<ExternalLinkAltIcon />}
-                                iconPosition="right"
+                                iconPosition='right'
                                 isInline
                                 href={url}
                               >
@@ -706,7 +706,7 @@ const Repositories = () => {
     return (
       <>
         <Alert
-          variant="info"
+          variant='info'
           isInline
           title={
             <>
@@ -714,9 +714,9 @@ const Repositories = () => {
               and have been added automatically. If you do not want these
               repositories in your image, you can{' '}
               <Button
-                component="a"
+                component='a'
-                target="_blank"
+                target='_blank'
-                variant="link"
+                variant='link'
                 isInline
                 icon={<ExternalLinkAltIcon />}
                 href={`${TEMPLATES_URL}/${templateUuid}/edit`}
@@ -731,10 +731,10 @@ const Repositories = () => {
         <Grid>
           <Panel>
             <PanelMain>
-              <Table variant="compact">
+              <Table variant='compact'>
                 <Thead>
                   <Tr>
-                    <Th aria-label="Selected" />
+                    <Th aria-label='Selected' />
                     <Th width={45}>Name</Th>
                     <Th width={15}>Architecture</Th>
                     <Th>Version</Th>
@@ -774,11 +774,11 @@ const Repositories = () => {
                             <>
                               <br />
                               <Button
-                                component="a"
+                                component='a'
-                                target="_blank"
+                                target='_blank'
-                                variant="link"
+                                variant='link'
                                 icon={<ExternalLinkAltIcon />}
-                                iconPosition="right"
+                                iconPosition='right'
                                 isInline
                                 href={url}
                               >

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

@@ -63,10 +63,10 @@ const RepositoriesStatus = ({
   if (repoStatus === 'Valid') {
     return (
       <>
-        <Icon status="success">
+        <Icon status='success'>
           <CheckCircleIcon />
         </Icon>{' '}
-        <span className="pf-v6-u-font-weight-bold pf-v6-u-text-color-status-success">
+        <span className='pf-v6-u-font-weight-bold pf-v6-u-text-color-status-success'>
           {repoStatus}
         </span>
       </>
@@ -75,19 +75,19 @@ const RepositoriesStatus = ({
     return (
       <>
         <Popover
-          position="bottom"
+          position='bottom'
-          minWidth="30rem"
+          minWidth='30rem'
           bodyContent={
             <>
               <Alert
                 variant={repoStatus === 'Invalid' ? 'danger' : 'warning'}
                 title={repoStatus}
-                className="pf-v6-u-pb-sm"
+                className='pf-v6-u-pb-sm'
                 isInline
                 isPlain
               />
               {repoUrl ? (
-                <p className="pf-v6-u-pb-md">Cannot fetch {repoUrl}</p>
+                <p className='pf-v6-u-pb-md'>Cannot fetch {repoUrl}</p>
               ) : (
                 ''
               )}
@@ -123,10 +123,10 @@ const RepositoriesStatus = ({
                 </>
               )}
               <Button
-                component="a"
+                component='a'
-                target="_blank"
+                target='_blank'
-                variant="link"
+                variant='link'
-                iconPosition="right"
+                iconPosition='right'
                 isInline
                 icon={<ExternalLinkAltIcon />}
                 href={CONTENT_URL}
@@ -136,23 +136,23 @@ const RepositoriesStatus = ({
             </>
           }
         >
-          <Button variant="link" className="pf-v6-u-p-0 pf-v6-u-font-size-sm">
+          <Button variant='link' className='pf-v6-u-p-0 pf-v6-u-font-size-sm'>
             {repoStatus === 'Invalid' && (
               <>
-                <Icon status="danger">
+                <Icon status='danger'>
                   <ExclamationCircleIcon />
                 </Icon>{' '}
-                <span className="pf-v6-u-font-weight-bold pf-v6-u-text-color-status-danger failure-button">
+                <span className='pf-v6-u-font-weight-bold pf-v6-u-text-color-status-danger failure-button'>
                   {repoStatus}
                 </span>
               </>
             )}
             {repoStatus === 'Unavailable' && (
               <>
-                <Icon status="warning">
+                <Icon status='warning'>
                   <ExclamationTriangleIcon />
                 </Icon>{' '}
-                <span className="pf-v6-u-font-weight-bold pf-v6-u-text-color-status-warning failure-button">
+                <span className='pf-v6-u-font-weight-bold pf-v6-u-text-color-status-warning failure-button'>
                   {repoStatus}
                 </span>
               </>
@@ -165,7 +165,7 @@ const RepositoriesStatus = ({
     return (
       <>
         <Spinner isInline />{' '}
-        <span className="pf-v6-u-font-weight-bold pf-v6-u-text-color-status-info">
+        <span className='pf-v6-u-font-weight-bold pf-v6-u-text-color-status-info'>
           {repoStatus}
         </span>
       </>

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

@@ -8,8 +8,8 @@ import { CONTENT_URL } from '../../../../constants';
 const RepositoryUnavailable = ({ quantity }: { quantity: number }) => {
   return (
     <Alert
-      variant="warning"
+      variant='warning'
-      title="Previously added custom repository unavailable"
+      title='Previously added custom repository unavailable'
       isInline
     >
       {quantity > 1
@@ -20,10 +20,10 @@ const RepositoryUnavailable = ({ quantity }: { quantity: number }) => {
       <br />
       <br />
       <Button
-        component="a"
+        component='a'
-        target="_blank"
+        target='_blank'
-        variant="link"
+        variant='link'
-        iconPosition="right"
+        iconPosition='right'
         isInline
         icon={<ExternalLinkAltIcon />}
         href={CONTENT_URL}

src/Components/CreateImageWizard/steps/Repositories/components/BulkSelect.tsx

@@ -46,15 +46,15 @@ export function BulkSelect({
     <Dropdown
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
-          id="bulk-select-toggle"
+          id='bulk-select-toggle'
-          data-testid="bulk-select-toggle"
+          data-testid='bulk-select-toggle'
           ref={toggleRef}
           isDisabled={isDisabled}
           splitButtonItems={[
             <MenuToggleCheckbox
-              id="bulk-select-checkbox"
+              id='bulk-select-checkbox'
-              key="split-checkbox"
+              key='split-checkbox'
-              aria-label="Select all"
+              aria-label='Select all'
               isChecked={allChecked || someChecked ? null : false}
               onClick={handleSelectPage}
             />,
@@ -68,7 +68,7 @@ export function BulkSelect({
     >
       <DropdownList>
         <DropdownItem
-          key="none"
+          key='none'
           isDisabled={!selected.size}
           onClick={() => {
             deselectAll();
@@ -76,7 +76,7 @@ export function BulkSelect({
           }}
         >{`Clear all (${selected.size} items)`}</DropdownItem>
         <DropdownItem
-          key="page"
+          key='page'
           isDisabled={!contentList.length}
           onClick={() => {
             handleSelectPage();

src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx

@@ -19,7 +19,7 @@ type EmptyProps = {
 const Empty = ({ hasFilterValue, refetch }: EmptyProps) => {
   return (
     <EmptyState
-      headingLevel="h4"
+      headingLevel='h4'
       icon={RepositoryIcon}
       titleText={
         hasFilterValue
@@ -36,15 +36,15 @@ const Empty = ({ hasFilterValue, refetch }: EmptyProps) => {
       </EmptyStateBody>
       <EmptyStateFooter>
         <Button
-          variant="primary"
+          variant='primary'
-          component="a"
+          component='a'
-          target="_blank"
+          target='_blank'
           href={CONTENT_URL}
-          className="pf-v6-u-mr-sm"
+          className='pf-v6-u-mr-sm'
         >
           Go to repositories
         </Button>
-        <Button variant="secondary" isInline onClick={() => refetch()}>
+        <Button variant='secondary' isInline onClick={() => refetch()}>
           Refresh
         </Button>
       </EmptyStateFooter>

src/Components/CreateImageWizard/steps/Repositories/components/Error.tsx

@@ -4,7 +4,7 @@ import { Alert } from '@patternfly/react-core';
 
 export const Error = () => {
   return (
-    <Alert title="Repositories unavailable" variant="danger" isPlain isInline>
+    <Alert title='Repositories unavailable' variant='danger' isPlain isInline>
       Repositories cannot be reached, try again later.
     </Alert>
   );

src/Components/CreateImageWizard/steps/Repositories/components/Loading.tsx

@@ -6,9 +6,9 @@ export const Loading = () => {
   return (
     <Bullseye>
       <EmptyState
-        headingLevel="h4"
+        headingLevel='h4'
         icon={Spinner}
-        titleText="Loading"
+        titleText='Loading'
       ></EmptyState>
     </Bullseye>
   );

src/Components/CreateImageWizard/steps/Repositories/components/ManageRepositoriesButton.tsx

@@ -8,10 +8,10 @@ import { CONTENT_URL } from '../../../../../constants';
 const ManageRepositoriesButton = () => {
   return (
     <Button
-      component="a"
+      component='a'
-      target="_blank"
+      target='_blank'
-      variant="link"
+      variant='link'
-      iconPosition="right"
+      iconPosition='right'
       isInline
       icon={<ExternalLinkAltIcon />}
       href={CONTENT_URL}

src/Components/CreateImageWizard/steps/Repositories/components/UploadRepositoryLabel.tsx

@@ -17,7 +17,7 @@ const UploadRepositoryLabel = () => {
       }
     >
       <Label
-        variant="outline"
+        variant='outline'
         isCompact
         icon={<UploadIcon />}
         style={{ marginLeft: '8px' }}

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

@@ -17,7 +17,7 @@ const RepositoriesStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Custom repositories
       </Title>
       <Content>
@@ -30,7 +30,7 @@ const RepositoriesStep = () => {
       {packages.length && recommendedRepos.length ? (
         <Alert
           title="Why can't I remove a selected repository?"
-          variant="info"
+          variant='info'
           isInline
         >
           EPEL repository cannot be removed, because packages from it were

src/Components/CreateImageWizard/steps/Review/Footer/CreateDropdown.tsx

@@ -142,8 +142,8 @@ export const CreateSaveButton = ({
     };
 
     return (
-      <Modal isOpen={showModal} onClose={handleClose} width="50%">
+      <Modal isOpen={showModal} onClose={handleClose} width='50%'>
-        <ModalHeader title="Save time by building images" />
+        <ModalHeader title='Save time by building images' />
         <ModalBody>
           Building blueprints and images doesn&apos;t need to be a two step
           process. To build images simultaneously, use the dropdown arrow to the
@@ -151,9 +151,9 @@ export const CreateSaveButton = ({
         </ModalBody>
         <ModalFooter>
           <Button
-            key="back"
+            key='back'
-            variant="primary"
+            variant='primary'
-            data-testid="close-button-saveandbuild-modal"
+            data-testid='close-button-saveandbuild-modal'
             onClick={handleClose}
           >
             Close
@@ -201,7 +201,7 @@ export const CreateSaveButton = ({
       {showModal && <SaveAndBuildImagesModal />}
       <MenuToggleAction
         onClick={onClick}
-        id="wizard-create-save-btn"
+        id='wizard-create-save-btn'
         isDisabled={isDisabled}
       >
         <Flex display={{ default: 'inlineFlex' }}>
@@ -212,7 +212,7 @@ export const CreateSaveButton = ({
                   { '--pf-v6-c-spinner--Color': '#fff' } as React.CSSProperties
                 }
                 isInline
-                size="md"
+                size='md'
               />
             </FlexItem>
           )}

src/Components/CreateImageWizard/steps/Review/Footer/EditDropdown.tsx

@@ -150,7 +150,7 @@ export const EditSaveButton = ({
   return (
     <MenuToggleAction
       onClick={onSave}
-      id="wizard-edit-save-btn"
+      id='wizard-edit-save-btn'
       isDisabled={isDisabled}
     >
       <Flex display={{ default: 'inlineFlex' }}>
@@ -161,7 +161,7 @@ export const EditSaveButton = ({
                 { '--pf-v6-c-spinner--Color': '#fff' } as React.CSSProperties
               }
               isInline
-              size="md"
+              size='md'
             />
           </FlexItem>
         )}

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

@@ -71,7 +71,7 @@ const ReviewWizardFooter = () => {
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
-              variant="primary"
+              variant='primary'
               ref={toggleRef}
               onClick={onToggleClick}
               isExpanded={isOpen}
@@ -80,7 +80,7 @@ const ReviewWizardFooter = () => {
                 composeId
                   ? [
                       <EditSaveButton
-                        key="wizard-edit-save-btn"
+                        key='wizard-edit-save-btn'
                         getBlueprintPayload={getBlueprintPayload}
                         setIsOpen={setIsOpen}
                         blueprintId={composeId}
@@ -89,7 +89,7 @@ const ReviewWizardFooter = () => {
                     ]
                   : [
                       <CreateSaveButton
-                        key="wizard-create-save-btn"
+                        key='wizard-create-save-btn'
                         getBlueprintPayload={getBlueprintPayload}
                         setIsOpen={setIsOpen}
                         isDisabled={!isValid}
@@ -115,10 +115,10 @@ const ReviewWizardFooter = () => {
             />
           )}
         </Dropdown>
-        <Button variant="secondary" onClick={goToPrevStep}>
+        <Button variant='secondary' onClick={goToPrevStep}>
           Back
         </Button>
-        <Button variant="link" onClick={close}>
+        <Button variant='link' onClick={close}>
           Cancel
         </Button>
       </Flex>

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

@@ -150,12 +150,12 @@ const Review = () => {
     return (
       <Button
         icon={<ArrowRightIcon />}
-        variant="link"
+        variant='link'
         aria-label={ariaLabel}
         data-testid={testId}
-        component="span"
+        component='span'
         onClick={() => revisitStep(stepId)}
-        className="pf-v6-u-p-0 pf-v6-u-font-weight-bold"
+        className='pf-v6-u-p-0 pf-v6-u-font-weight-bold'
         isInline
       >
         Revisit step
@@ -172,9 +172,9 @@ const Review = () => {
       <Split hasGutter>
         <SplitItem
           isFilled
-          className="pf-v6-u-min-width pf-v6-u-text-align-start"
+          className='pf-v6-u-min-width pf-v6-u-text-align-start'
         >
-          <Button variant="link" component="span" isInline>
+          <Button variant='link' component='span' isInline>
             {label}
           </Button>
         </SplitItem>
@@ -202,7 +202,7 @@ const Review = () => {
         }
         isExpanded={isExpandedImageOutput}
         isIndented
-        data-testid="image-output-expandable"
+        data-testid='image-output-expandable'
       >
         <ImageOutputList />
       </ExpandableSection>
@@ -217,7 +217,7 @@ const Review = () => {
         }
         isExpanded={isExpandedTargetEnvs}
         isIndented
-        data-testid="target-environments-expandable"
+        data-testid='target-environments-expandable'
       >
         <Stack hasGutter>
           {environments.includes('aws') && (
@@ -304,7 +304,7 @@ const Review = () => {
           }
           isExpanded={isExpandedRegistration}
           isIndented
-          data-testid="registration-expandable"
+          data-testid='registration-expandable'
         >
           {registrationType === 'register-later' && <RegisterLaterList />}
           {registrationType === 'register-satellite' && (
@@ -325,7 +325,7 @@ const Review = () => {
           }
           isExpanded={isExpandedOscapDetail}
           isIndented
-          data-testid="oscap-detail-expandable"
+          data-testid='oscap-detail-expandable'
         >
           <OscapList />
         </ExpandableSection>
@@ -342,7 +342,7 @@ const Review = () => {
           }
           isExpanded={isExpandedComplianceDetail}
           isIndented
-          data-testid="compliance-detail-expandable"
+          data-testid='compliance-detail-expandable'
         >
           <OscapList />
         </ExpandableSection>
@@ -357,7 +357,7 @@ const Review = () => {
           onToggle={(_event, isExpandedFSC) => onToggleFSC(isExpandedFSC)}
           isExpanded={isExpandedFSC}
           isIndented
-          data-testid="file-system-configuration-expandable"
+          data-testid='file-system-configuration-expandable'
         >
           <FSCList />
         </ExpandableSection>
@@ -373,7 +373,7 @@ const Review = () => {
         }
         isExpanded={isExpandedContent}
         isIndented
-        data-testid="content-expandable"
+        data-testid='content-expandable'
       >
         <ContentList />
       </ExpandableSection>
@@ -387,7 +387,7 @@ const Review = () => {
           onToggle={(_event, isExpandedUsers) => onToggleUsers(isExpandedUsers)}
           isExpanded={isExpandedUsers}
           isIndented
-          data-testid="users-expandable"
+          data-testid='users-expandable'
         >
           <UsersList />
         </ExpandableSection>
@@ -404,7 +404,7 @@ const Review = () => {
           }
           isExpanded={isExpandedTimezone}
           isIndented
-          data-testid="timezone-expandable"
+          data-testid='timezone-expandable'
         >
           <TimezoneList />
         </ExpandableSection>
@@ -422,7 +422,7 @@ const Review = () => {
           }
           isExpanded={isExpandedLocale}
           isIndented
-          data-testid="locale-expandable"
+          data-testid='locale-expandable'
         >
           <LocaleList />
         </ExpandableSection>
@@ -439,7 +439,7 @@ const Review = () => {
           }
           isExpanded={isExpandedHostname}
           isIndented
-          data-testid="hostname-expandable"
+          data-testid='hostname-expandable'
         >
           <HostnameList />
         </ExpandableSection>
@@ -456,7 +456,7 @@ const Review = () => {
           }
           isExpanded={isExpandedKernel}
           isIndented
-          data-testid="kernel-expandable"
+          data-testid='kernel-expandable'
         >
           <KernelList />
         </ExpandableSection>
@@ -475,7 +475,7 @@ const Review = () => {
           }
           isExpanded={isExpandedFirewall}
           isIndented
-          data-testid="firewall-expandable"
+          data-testid='firewall-expandable'
         >
           <FirewallList />
         </ExpandableSection>
@@ -494,7 +494,7 @@ const Review = () => {
           }
           isExpanded={isExpandedServices}
           isIndented
-          data-testid="services-expandable"
+          data-testid='services-expandable'
         >
           <ServicesList />
         </ExpandableSection>
@@ -510,7 +510,7 @@ const Review = () => {
         }
         isExpanded={isExpandableFirstBoot}
         isIndented
-        data-testid="firstboot-expandable"
+        data-testid='firstboot-expandable'
       >
         <FirstBootList />
       </ExpandableSection>
@@ -526,7 +526,7 @@ const Review = () => {
           }
           isExpanded={isExpandedImageDetail}
           isIndented
-          data-testid="image-details-expandable"
+          data-testid='image-details-expandable'
         >
           <DetailsList />
         </ExpandableSection>

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

@@ -46,10 +46,10 @@ const RepoName = ({ repoUuid }: repoPropType) => {
   const errorLoading = () => {
     return (
       <Alert
-        variant="danger"
+        variant='danger'
         isInline
         isPlain
-        title="Error loading repository name"
+        title='Error loading repository name'
       />
     );
   };
@@ -67,7 +67,7 @@ const RepoName = ({ repoUuid }: repoPropType) => {
       */}
       {isSuccess && data?.data?.[0]?.name && <p>{data.data[0].name}</p>}
       {isSuccess && !data?.data?.[0]?.name && errorLoading()}
-      {isFetching && <Spinner size="md" />}
+      {isFetching && <Spinner size='md' />}
       {isError && errorLoading()}
     </>
   );
@@ -77,8 +77,8 @@ export const FSReviewTable = () => {
   const partitions = useAppSelector(selectPartitions);
   return (
     <Panel isScrollable>
-      <PanelMain maxHeight="30ch">
+      <PanelMain maxHeight='30ch'>
-        <Table aria-label="File system configuration table" variant="compact">
+        <Table aria-label='File system configuration table' variant='compact'>
           <Thead>
             <Tr>
               <Th>Mount point</Th>
@@ -89,9 +89,9 @@ export const FSReviewTable = () => {
           <Tbody>
             {partitions.map((partition, partitionIndex) => (
               <Tr key={partitionIndex}>
-                <Td className="pf-m-width-30">{partition.mountpoint}</Td>
+                <Td className='pf-m-width-30'>{partition.mountpoint}</Td>
-                <Td className="pf-m-width-30">xfs</Td>
+                <Td className='pf-m-width-30'>xfs</Td>
-                <Td className="pf-m-width-30">
+                <Td className='pf-m-width-30'>
                   {parseInt(partition.min_size).toString()} {partition.unit}
                 </Td>
               </Tr>
@@ -105,7 +105,7 @@ export const FSReviewTable = () => {
 
 const Error = () => {
   return (
-    <Alert title="Repositories unavailable" variant="danger" isPlain isInline>
+    <Alert title='Repositories unavailable' variant='danger' isPlain isInline>
       Repositories cannot be reached, try again later.
     </Alert>
   );
@@ -114,9 +114,9 @@ const Error = () => {
 const Loading = () => {
   return (
     <EmptyState
-      headingLevel="h4"
+      headingLevel='h4'
       icon={Spinner}
-      titleText="Loading"
+      titleText='Loading'
     ></EmptyState>
   );
 };
@@ -164,8 +164,8 @@ export const SnapshotTable = ({
     (isLoading && <Loading />) ||
     (isSuccess && (
       <Panel isScrollable>
-        <PanelMain maxHeight="30ch">
+        <PanelMain maxHeight='30ch'>
-          <Table aria-label="Packages table" variant="compact">
+          <Table aria-label='Packages table' variant='compact'>
             <Thead>
               <Tr>
                 <Th>Name</Th>
@@ -184,7 +184,7 @@ export const SnapshotTable = ({
                             ? stringToDateToMMDDYYYY(last_snapshot.created_at)
                             : 'N/A'
                         }
-                        variant="warning"
+                        variant='warning'
                         isPlain
                         isInline
                       />
@@ -210,8 +210,8 @@ export const PackagesTable = () => {
 
   return (
     <Panel isScrollable>
-      <PanelMain maxHeight="30ch">
+      <PanelMain maxHeight='30ch'>
-        <Table aria-label="Packages table" variant="compact">
+        <Table aria-label='Packages table' variant='compact'>
           <Thead>
             <Tr>
               <Th>Name</Th>
@@ -248,8 +248,8 @@ export const RepositoriesTable = () => {
   );
   return (
     <Panel isScrollable>
-      <PanelMain maxHeight="30ch">
+      <PanelMain maxHeight='30ch'>
-        <Table aria-label="Custom repositories table" variant="compact">
+        <Table aria-label='Custom repositories table' variant='compact'>
           <Thead>
             <Tr>
               <Th>Name</Th>
@@ -258,14 +258,14 @@ export const RepositoriesTable = () => {
           <Tbody>
             {repositoriesList.map((repo, repoIndex) => (
               <Tr key={repoIndex + 1}>
-                <Td className="pf-m-width-60">
+                <Td className='pf-m-width-60'>
                   <RepoName repoUuid={repo.id} />
                 </Td>
               </Tr>
             ))}
             {recommendedRepositoriesList.length > 0 && (
               <Tr key={0}>
-                <Td className="pf-m-width-60">
+                <Td className='pf-m-width-60'>
                   EPEL {getEpelVersionForDistribution(distribution)} Everything
                   x86_64
                 </Td>

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

@@ -92,8 +92,8 @@ import ActivationKeyInformation from '../Registration/components/ActivationKeyIn
 
 const ExpirationWarning = () => {
   return (
-    <Content className="pf-v6-u-font-size-sm pf-v6-u-text-color-status-warning">
+    <Content className='pf-v6-u-font-size-sm pf-v6-u-text-color-status-warning'>
-      <Icon status="warning" isInline>
+      <Icon status='warning' isInline>
         <ExclamationTriangleIcon />
       </Icon>{' '}
       Expires 14 days after creation
@@ -110,7 +110,7 @@ export const ImageOutputList = () => {
     <Content>
       {(distribution === RHEL_8 || distribution === RHEL_9) && (
         <>
-          <Content component="p" className="pf-v6-u-font-size-sm">
+          <Content component='p' className='pf-v6-u-font-size-sm'>
             {RELEASES.get(distribution)} will be supported through{' '}
             {toMonthAndYear(
               distribution === RHEL_8
@@ -126,20 +126,20 @@ export const ImageOutputList = () => {
             . Consider building an image with {RELEASES.get(RHEL_10)} to extend
             the support period.
           </Content>
-          <FormGroup label="Release lifecycle">
+          <FormGroup label='Release lifecycle'>
             <MajorReleasesLifecyclesChart />
           </FormGroup>
           <br />
         </>
       )}
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Release
         </Content>
         <Content component={ContentVariants.dd}>
           {releases.get(distribution)}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Architecture
         </Content>
         <Content component={ContentVariants.dd}>{arch}</Content>
@@ -155,8 +155,8 @@ export const FSCList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Configuration type
         </Content>
         <Content component={ContentVariants.dd}>
@@ -165,17 +165,17 @@ export const FSCList = () => {
             <>
               {' '}
               <Popover
-                position="bottom"
+                position='bottom'
-                headerContent="Partitions"
+                headerContent='Partitions'
                 hasAutoWidth
-                minWidth="30rem"
+                minWidth='30rem'
                 bodyContent={<FSReviewTable />}
               >
                 <Button
-                  variant="link"
+                  variant='link'
-                  aria-label="File system configuration info"
+                  aria-label='File system configuration info'
-                  aria-describedby="file-system-configuration-info"
+                  aria-describedby='file-system-configuration-info'
-                  className="pf-v6-u-pt-0 pf-v6-u-pb-0"
+                  className='pf-v6-u-pt-0 pf-v6-u-pb-0'
                 >
                   View partitions
                 </Button>
@@ -241,8 +241,8 @@ export const TargetEnvAWSList = () => {
   return (
     <Content>
       <Content component={ContentVariants.h3}>{targetOptions.aws}</Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Image type
         </Content>
         <Content component={ContentVariants.dd}>
@@ -250,17 +250,17 @@ export const TargetEnvAWSList = () => {
           <br />
           <ExpirationWarning />
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Shared to account
         </Content>
         <Content component={ContentVariants.dd}>{awsAccountId}</Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           {awsShareMethod === 'sources' ? 'Source' : null}
         </Content>
         <Content component={ContentVariants.dd}>
           {isSuccess && awsShareMethod === 'sources' ? source?.name : null}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Default region
         </Content>
         <Content component={ContentVariants.dd}>
@@ -278,8 +278,8 @@ export const TargetEnvGCPList = () => {
   return (
     <Content>
       <Content component={ContentVariants.h3}>{targetOptions.gcp}</Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Image type
         </Content>
         <Content component={ContentVariants.dd}>
@@ -292,7 +292,7 @@ export const TargetEnvGCPList = () => {
             <>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 Shared with
               </Content>
@@ -305,7 +305,7 @@ export const TargetEnvGCPList = () => {
             <>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 Account type
               </Content>
@@ -320,7 +320,7 @@ export const TargetEnvGCPList = () => {
               </Content>
               <Content
                 component={ContentVariants.dt}
-                className="pf-v6-u-min-width"
+                className='pf-v6-u-min-width'
               >
                 {accountType === 'domain' ? 'Domain' : 'Principal'}
               </Content>
@@ -347,8 +347,8 @@ export const TargetEnvAzureList = () => {
   return (
     <Content>
       <Content component={ContentVariants.h3}>{targetOptions.azure}</Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Image type
         </Content>
         <Content component={ContentVariants.dd}>
@@ -360,7 +360,7 @@ export const TargetEnvAzureList = () => {
           <>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Azure Source
             </Content>
@@ -377,14 +377,14 @@ export const TargetEnvAzureList = () => {
           <>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Azure tenant ID
             </Content>
             <Content component={ContentVariants.dd}>{tenantId}</Content>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Subscription ID
             </Content>
@@ -402,8 +402,8 @@ export const TargetEnvOciList = () => {
   return (
     <Content>
       <Content component={ContentVariants.h3}>{targetOptions.oci}</Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Object Storage URL
         </Content>
         <Content component={ContentVariants.dd}>
@@ -417,8 +417,8 @@ export const TargetEnvOciList = () => {
 export const TargetEnvOtherList = () => {
   return (
     <>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Image type
         </Content>
         <Content component={ContentVariants.dd}>
@@ -505,17 +505,17 @@ export const ContentList = () => {
   return (
     <>
       <Content>
-        <Content component={ContentVariants.dl} className="review-step-dl">
+        <Content component={ContentVariants.dl} className='review-step-dl'>
           <>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Repeatable build
             </Content>
             <Content component={ContentVariants.dd}>
               <Popover
-                position="bottom"
+                position='bottom'
                 headerContent={
                   useLatest
                     ? 'Use the latest repository content'
@@ -526,16 +526,16 @@ export const ContentList = () => {
                         )}`
                 }
                 hasAutoWidth
-                minWidth="60rem"
+                minWidth='60rem'
                 bodyContent={
                   <SnapshotTable snapshotForDate={data?.data || []} />
                 }
               >
                 <Button
-                  variant="link"
+                  variant='link'
                   isInline
-                  aria-label="Snapshot method"
+                  aria-label='Snapshot method'
-                  className="popover-button pf-v6-u-p-0"
+                  className='popover-button pf-v6-u-p-0'
                   isDisabled={noRepositoriesSelected || isLoading || isError}
                   isLoading={isLoading}
                 >
@@ -544,32 +544,32 @@ export const ContentList = () => {
               </Popover>
               {!useLatest && !isLoading && isSuccess && hasSnapshotDateAfter ? (
                 <Alert
-                  variant="warning"
+                  variant='warning'
                   isInline
                   isPlain
-                  title="A snapshot for this date is not available for some repositories."
+                  title='A snapshot for this date is not available for some repositories.'
                 />
               ) : (
                 ''
               )}
             </Content>
           </>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Custom repositories
           </Content>
           <Content component={ContentVariants.dd}>
             {customRepositories?.length + recommendedRepositories.length > 0 ? (
               <Popover
-                position="bottom"
+                position='bottom'
-                headerContent="Custom repositories"
+                headerContent='Custom repositories'
                 hasAutoWidth
-                minWidth="30rem"
+                minWidth='30rem'
                 bodyContent={<RepositoriesTable />}
               >
                 <Button
-                  variant="link"
+                  variant='link'
-                  aria-label="About custom repositories"
+                  aria-label='About custom repositories'
-                  className="popover-button pf-v6-u-p-0"
+                  className='popover-button pf-v6-u-p-0'
                 >
                   {customRepositories?.length +
                     recommendedRepositories.length || 0}
@@ -579,22 +579,22 @@ export const ContentList = () => {
               0
             )}
           </Content>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Additional packages
           </Content>
           <Content component={ContentVariants.dd}>
             {packages?.length > 0 || groups?.length > 0 ? (
               <Popover
-                position="bottom"
+                position='bottom'
-                headerContent="Additional packages"
+                headerContent='Additional packages'
                 hasAutoWidth
-                minWidth="60rem"
+                minWidth='60rem'
                 bodyContent={<PackagesTable />}
               >
                 <Button
-                  variant="link"
+                  variant='link'
-                  aria-label="About packages"
+                  aria-label='About packages'
-                  className="popover-button pf-v6-u-p-0"
+                  className='popover-button pf-v6-u-p-0'
                 >
                   {packages?.length + groups?.length}
                 </Button>
@@ -607,8 +607,8 @@ export const ContentList = () => {
       </Content>
       {duplicatePackages.length > 0 && (
         <Alert
-          title="Can not guarantee where some selected packages will come from"
+          title='Can not guarantee where some selected packages will come from'
-          variant="warning"
+          variant='warning'
           isInline
         >
           Some of the packages added to this image belong to multiple added
@@ -623,8 +623,8 @@ export const ContentList = () => {
 export const RegisterLaterList = () => {
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Registration type
         </Content>
         <Content component={ContentVariants.dd}>
@@ -638,8 +638,8 @@ export const RegisterLaterList = () => {
 export const RegisterSatelliteList = () => {
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Register Satellite
         </Content>
         <Content component={ContentVariants.dd}>Enabled</Content>
@@ -662,37 +662,37 @@ export const RegisterNowList = () => {
   return (
     <>
       <Content>
-        <Content component={ContentVariants.dl} className="review-step-dl">
+        <Content component={ContentVariants.dl} className='review-step-dl'>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Registration type
           </Content>
           <Content
             component={ContentVariants.dd}
-            data-testid="review-registration"
+            data-testid='review-registration'
           >
-            <Content component="ul" isPlainList>
+            <Content component='ul' isPlainList>
               {registrationType?.startsWith('register-now') && (
-                <Content component="li">
+                <Content component='li'>
                   Register with Red Hat Subscription Manager (RHSM)
                   <br />
                 </Content>
               )}
               {(registrationType === 'register-now-insights' ||
                 registrationType === 'register-now-rhc') && (
-                <Content component="li">
+                <Content component='li'>
                   Connect to Red Hat Insights
                   <br />
                 </Content>
               )}
               {registrationType === 'register-now-rhc' && (
-                <Content component="li">
+                <Content component='li'>
                   Use remote host configuration (rhc) utility
                   <br />
                 </Content>
               )}
             </Content>
           </Content>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Activation key
           </Content>
           <Content component={ContentVariants.dd}>
@@ -702,8 +702,8 @@ export const RegisterNowList = () => {
       </Content>
       {isError && (
         <Alert
-          title="Information about the activation key unavailable"
+          title='Information about the activation key unavailable'
-          variant="danger"
+          variant='danger'
           isPlain
           isInline
         >
@@ -721,12 +721,12 @@ export const DetailsList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
         {blueprintName && (
           <>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Blueprint name
             </Content>
@@ -737,7 +737,7 @@ export const DetailsList = () => {
           <>
             <Content
               component={ContentVariants.dt}
-              className="pf-v6-u-min-width"
+              className='pf-v6-u-min-width'
             >
               Description
             </Content>
@@ -761,14 +761,14 @@ export const TimezoneList = () => {
 
   return (
     <>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Timezone
         </Content>
         <Content component={ContentVariants.dd}>
           {timezone ? timezone : 'None'}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           NTP servers
         </Content>
         <Content component={ContentVariants.dd}>
@@ -788,30 +788,30 @@ export const UsersList = () => {
         <Content
           key={user.name}
           component={ContentVariants.dl}
-          className="review-step-dl"
+          className='review-step-dl'
         >
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Username
           </Content>
-          <Content component={ContentVariants.dd} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dd} className='pf-v6-u-min-width'>
             {user.name ? user.name : 'None'}
           </Content>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Password
           </Content>
-          <Content component={ContentVariants.dd} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dd} className='pf-v6-u-min-width'>
             {user.password || user.hasPassword ? '●'.repeat(8) : 'None'}
           </Content>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             SSH key
           </Content>
-          <Content component={ContentVariants.dd} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dd} className='pf-v6-u-min-width'>
             {user.ssh_key ? user.ssh_key : 'None'}
           </Content>
-          <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
             Administrator
           </Content>
-          <Content component={ContentVariants.dd} className="pf-v6-u-min-width">
+          <Content component={ContentVariants.dd} className='pf-v6-u-min-width'>
             {user.isAdministrator ? 'True' : 'False'}
           </Content>
         </Content>
@@ -826,14 +826,14 @@ export const LocaleList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Languages
         </Content>
         <Content component={ContentVariants.dd}>
           {languages && languages.length > 0 ? languages.join(', ') : 'None'}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Keyboard
         </Content>
         <Content component={ContentVariants.dd}>
@@ -849,8 +849,8 @@ export const HostnameList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Hostname
         </Content>
         <Content component={ContentVariants.dd}>
@@ -866,14 +866,14 @@ export const KernelList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Name
         </Content>
         <Content component={ContentVariants.dd}>
           {kernel.name ? kernel.name : 'None'}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Append
         </Content>
         <Content component={ContentVariants.dd}>
@@ -895,8 +895,8 @@ export const FirewallList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Ports
         </Content>
         <Content component={ContentVariants.dd}>
@@ -908,7 +908,7 @@ export const FirewallList = () => {
             'None'
           )}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Enabled services
         </Content>
         <Content component={ContentVariants.dd}>
@@ -922,7 +922,7 @@ export const FirewallList = () => {
             'None'
           )}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Disabled services
         </Content>
         <Content component={ContentVariants.dd}>
@@ -946,8 +946,8 @@ export const ServicesList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Enabled
         </Content>
         <Content component={ContentVariants.dd}>
@@ -959,7 +959,7 @@ export const ServicesList = () => {
             'None'
           )}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Disabled
         </Content>
         <Content component={ContentVariants.dd}>
@@ -971,7 +971,7 @@ export const ServicesList = () => {
             'None'
           )}
         </Content>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           Masked
         </Content>
         <Content component={ContentVariants.dd}>
@@ -993,8 +993,8 @@ export const FirstBootList = () => {
 
   return (
     <Content>
-      <Content component={ContentVariants.dl} className="review-step-dl">
+      <Content component={ContentVariants.dl} className='review-step-dl'>
-        <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
+        <Content component={ContentVariants.dt} className='pf-v6-u-min-width'>
           First boot script
         </Content>
         <Content component={ContentVariants.dd}>

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

@@ -16,7 +16,7 @@ const ReviewStep = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Review {blueprintName} blueprint
       </Title>
       {blueprintDescription && <Content>{blueprintDescription}</Content>}

src/Components/CreateImageWizard/steps/Services/components/ServicesInputs.tsx

@@ -54,56 +54,56 @@ const ServicesInput = () => {
 
   return (
     <>
-      <FormGroup isRequired={false} label="Enabled services">
+      <FormGroup isRequired={false} label='Enabled services'>
         <LabelInput
-          ariaLabel="Add enabled service"
+          ariaLabel='Add enabled service'
-          placeholder="Add enabled service"
+          placeholder='Add enabled service'
           validator={isServiceValid}
           list={enabledServices.filter(
             (service) => !enabledRequiredByOpenSCAP.includes(service),
           )}
           requiredList={enabledRequiredByOpenSCAP}
-          requiredCategoryName="Required by OpenSCAP"
+          requiredCategoryName='Required by OpenSCAP'
-          item="Enabled service"
+          item='Enabled service'
           addAction={addEnabledService}
           removeAction={removeEnabledService}
           stepValidation={stepValidation}
-          fieldName="enabledSystemdServices"
+          fieldName='enabledSystemdServices'
         />
       </FormGroup>
-      <FormGroup isRequired={false} label="Disabled services">
+      <FormGroup isRequired={false} label='Disabled services'>
         <LabelInput
-          ariaLabel="Add disabled service"
+          ariaLabel='Add disabled service'
-          placeholder="Add disabled service"
+          placeholder='Add disabled service'
           validator={isServiceValid}
           list={disabledServices.filter(
             (service) =>
               !oscapProfileInfo?.services?.disabled?.includes(service),
           )}
           requiredList={disabledRequiredByOpenSCAP}
-          requiredCategoryName="Required by OpenSCAP"
+          requiredCategoryName='Required by OpenSCAP'
-          item="Disabled service"
+          item='Disabled service'
           addAction={addDisabledService}
           removeAction={removeDisabledService}
           stepValidation={stepValidation}
-          fieldName="disabledSystemdServices"
+          fieldName='disabledSystemdServices'
         />
       </FormGroup>
-      <FormGroup isRequired={false} label="Masked services">
+      <FormGroup isRequired={false} label='Masked services'>
         <LabelInput
-          ariaLabel="Add masked service"
+          ariaLabel='Add masked service'
-          placeholder="Add masked service"
+          placeholder='Add masked service'
           validator={isServiceValid}
           list={maskedServices.filter(
             (service) => !oscapProfileInfo?.services?.masked?.includes(service),
           )}
           requiredList={maskedRequiredByOpenSCAP}
-          requiredCategoryName="Required by OpenSCAP"
+          requiredCategoryName='Required by OpenSCAP'
-          item="Masked service"
+          item='Masked service'
           addAction={addMaskedService}
           removeAction={removeMaskedService}
           stepValidation={stepValidation}
-          fieldName="maskedSystemdServices"
+          fieldName='maskedSystemdServices'
         />
       </FormGroup>
     </>

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

@@ -7,7 +7,7 @@ import ServicesInput from './components/ServicesInputs';
 const ServicesStep = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Systemd services
       </Title>
       <Content>Enable, disable and mask systemd services.</Content>

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

@@ -63,28 +63,28 @@ export default function Snapshot() {
     <>
       <FormGroup>
         <Radio
-          id="use latest snapshot radio"
+          id='use latest snapshot radio'
-          name="use-latest-snapshot"
+          name='use-latest-snapshot'
-          label="Disable repeatable build"
+          label='Disable repeatable build'
-          description="Use the newest repository content available when building this image"
+          description='Use the newest repository content available when building this image'
           isChecked={selectedOption === 'latest'}
           onChange={() => handleOptionChange('latest')}
         />
         <Radio
-          id="use snapshot date radio"
+          id='use snapshot date radio'
-          name="use-snapshot-date"
+          name='use-snapshot-date'
-          label="Enable repeatable build"
+          label='Enable repeatable build'
-          description="Build this image with the repository content of a selected date"
+          description='Build this image with the repository content of a selected date'
           isChecked={selectedOption === 'snapshotDate'}
           onChange={() => handleOptionChange('snapshotDate')}
         />
         {isTemplatesEnabled ? (
           <Radio
-            id="use content template radio"
+            id='use content template radio'
-            ouiaId="use-content-template-radio"
+            ouiaId='use-content-template-radio'
-            name="use-content-template"
+            name='use-content-template'
-            label="Use a content template"
+            label='Use a content template'
-            description="Select a content template and build this image with repository snapshots included in that template"
+            description='Select a content template and build this image with repository snapshots included in that template'
             isChecked={selectedOption === 'template'}
             onChange={() => handleOptionChange('template')}
           />
@@ -95,7 +95,7 @@ export default function Snapshot() {
 
       {selectedOption === 'latest' ? (
         <>
-          <Title headingLevel="h1" size="xl">
+          <Title headingLevel='h1' size='xl'>
             Use latest content
           </Title>
           <Grid>
@@ -107,21 +107,21 @@ export default function Snapshot() {
         </>
       ) : selectedOption === 'snapshotDate' ? (
         <>
-          <Title headingLevel="h1" size="xl">
+          <Title headingLevel='h1' size='xl'>
             Use a snapshot
           </Title>
-          <FormGroup label="Select snapshot date" isRequired>
+          <FormGroup label='Select snapshot date' isRequired>
             <Flex
               direction={{ default: 'row' }}
               alignContent={{ default: 'alignContentCenter' }}
             >
               <DatePicker
-                id="snapshot-date-picker"
+                id='snapshot-date-picker'
-                name="pick-snapshot-date"
+                name='pick-snapshot-date'
                 value={snapshotDate ? snapshotDate.split('T')[0] : ''}
                 required
                 requiredDateOptions={{ isRequired: true }}
-                placeholder="YYYY-MM-DD"
+                placeholder='YYYY-MM-DD'
                 validators={[
                   (date: Date) => {
                     if (!isSnapshotDateValid(date)) {
@@ -134,7 +134,7 @@ export default function Snapshot() {
               />
 
               <Button
-                variant="link"
+                variant='link'
                 onClick={async () => {
                   //Patternfly DatePicker seems to only clear error text if value is reset to '',
                   // if you have an invalid date (2000-01-010000) and try to reset it, it must be set to '' first
@@ -154,7 +154,7 @@ export default function Snapshot() {
         </>
       ) : isTemplatesEnabled && selectedOption === 'template' ? (
         <>
-          <Title headingLevel="h1" size="xl">
+          <Title headingLevel='h1' size='xl'>
             Use a content template
           </Title>
           <Templates />

src/Components/CreateImageWizard/steps/Snapshot/components/Templates.tsx

@@ -86,7 +86,7 @@ const Templates = () => {
       <Panel>
         {templateList.length > 0 ? (
           <Button
-            variant="primary"
+            variant='primary'
             isInline
             onClick={() => refresh()}
             isLoading={isFetching}
@@ -109,10 +109,10 @@ const Templates = () => {
                 onPerPageSelect={handlePerPageSelect}
                 isCompact
               />
-              <Table variant="compact">
+              <Table variant='compact'>
                 <Thead>
                   <Tr>
-                    <Th aria-label="Selected" />
+                    <Th aria-label='Selected' />
                     <Th width={15}>Name</Th>
                     <Th width={50}>Description</Th>
                     <Th width={15}>Snapshot date</Th>

src/Components/CreateImageWizard/steps/Snapshot/components/TemplatesEmpty.tsx

@@ -19,9 +19,9 @@ const TemplatesEmpty = ({ refetch }: TemplatesEmptyProps) => {
   const GoToTemplatesButton = () => {
     return (
       <Button
-        component="a"
+        component='a'
-        target="_blank"
+        target='_blank'
-        variant="link"
+        variant='link'
         icon={<ExternalLinkAltIcon />}
         href={TEMPLATES_URL}
       >
@@ -32,7 +32,7 @@ const TemplatesEmpty = ({ refetch }: TemplatesEmptyProps) => {
 
   return (
     <EmptyState
-      headingLevel="h4"
+      headingLevel='h4'
       titleText={'No content templates'}
       variant={EmptyStateVariant.lg}
     >
@@ -42,7 +42,7 @@ const TemplatesEmpty = ({ refetch }: TemplatesEmptyProps) => {
       </EmptyStateBody>
       <EmptyStateFooter>
         <GoToTemplatesButton />
-        <Button variant="secondary" isInline onClick={() => refetch()}>
+        <Button variant='secondary' isInline onClick={() => refetch()}>
           Refresh
         </Button>
       </EmptyStateFooter>

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

@@ -9,7 +9,7 @@ import ManageRepositoriesButton from '../Repositories/components/ManageRepositor
 export default function SnapshotStep() {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Repeatable build
       </Title>
       <Content>

src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/AwsAccountId.tsx

@@ -32,17 +32,17 @@ export const AwsAccountId = () => {
 
   return (
     <>
-      <FormGroup label="Associated account ID" isRequired>
+      <FormGroup label='Associated account ID' isRequired>
         <TextInput
-          readOnlyVariant="default"
+          readOnlyVariant='default'
           isRequired
-          id="aws-account-id"
+          id='aws-account-id'
           value={sourceId && data ? (data.aws?.account_id ?? '') : ''}
-          aria-label="aws account id"
+          aria-label='aws account id'
         />
       </FormGroup>
       <HelperText>
-        <HelperTextItem component="div" variant="default">
+        <HelperTextItem component='div' variant='default'>
           This is the account associated with the source.
         </HelperTextItem>
       </HelperText>

src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/AwsSourcesSelect.tsx

@@ -120,15 +120,15 @@ export const AwsSourcesSelect = () => {
 
     if (isFetching) {
       selectOptionsElement.push(
-        <SelectOption key="fetching" value="loader">
+        <SelectOption key='fetching' value='loader'>
-          <Spinner size="lg" />
+          <Spinner size='lg' />
         </SelectOption>,
       );
     }
 
     if (isSuccess && selectOptions.length === 0) {
       selectOptionsElement.push(
-        <SelectOption key="no_results" value="no_results" isDisabled>
+        <SelectOption key='no_results' value='no_results' isDisabled>
           No results found
         </SelectOption>,
       );
@@ -140,7 +140,7 @@ export const AwsSourcesSelect = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={handleToggle}
       isExpanded={isOpen}
       isDisabled={!isSuccess || isLoading}
@@ -150,8 +150,8 @@ export const AwsSourcesSelect = () => {
           value={chosenSource?.name ? chosenSource.name : inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select source"
+          placeholder='Select source'
           isExpanded={isOpen}
         />
 
@@ -159,9 +159,9 @@ export const AwsSourcesSelect = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={handleClear}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -171,7 +171,7 @@ export const AwsSourcesSelect = () => {
 
   return (
     <>
-      <FormGroup isRequired label={'Source name'} data-testid="sources">
+      <FormGroup isRequired label={'Source name'} data-testid='sources'>
         <Select
           isScrollable
           isOpen={isOpen}

src/Components/CreateImageWizard/steps/TargetEnvironment/Aws/index.tsx

@@ -41,11 +41,11 @@ export type AwsShareMethod = 'manual' | 'sources';
 const SourcesButton = () => {
   return (
     <Button
-      component="a"
+      component='a'
-      target="_blank"
+      target='_blank'
-      variant="link"
+      variant='link'
       icon={<ExternalLinkAltIcon />}
-      iconPosition="right"
+      iconPosition='right'
       isInline
       href={'settings/sources'}
     >
@@ -111,7 +111,7 @@ const Aws = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Target environment - Amazon Web Services
       </Title>
       <Content>
@@ -125,12 +125,12 @@ const Aws = () => {
             access the image, copy the image, which will be shared to your
             account by Red Hat, to your own AWS account.
           </Content>
-          <FormGroup label="Share method:">
+          <FormGroup label='Share method:'>
             <Radio
-              id="radio-with-description"
+              id='radio-with-description'
-              label="Use an account configured from Sources."
+              label='Use an account configured from Sources.'
-              name="radio-7"
+              name='radio-7'
-              description="Use a configured source to launch environments directly from the console."
+              description='Use a configured source to launch environments directly from the console.'
               isChecked={shareMethod === 'sources'}
               onChange={() => {
                 dispatch(changeAwsSourceId(undefined));
@@ -140,9 +140,9 @@ const Aws = () => {
               autoFocus
             />
             <Radio
-              id="radio"
+              id='radio'
-              label="Manually enter an account ID."
+              label='Manually enter an account ID.'
-              name="radio-8"
+              name='radio-8'
               isChecked={shareMethod === 'manual'}
               onChange={() => {
                 dispatch(changeAwsSourceId(undefined));
@@ -160,16 +160,16 @@ const Aws = () => {
           <SourcesButton />
           <Gallery hasGutter>
             <GalleryItem>
-              <FormGroup label="Default region" isRequired>
+              <FormGroup label='Default region' isRequired>
                 <TextInput
-                  readOnlyVariant="default"
+                  readOnlyVariant='default'
                   isRequired
-                  id="someid"
+                  id='someid'
-                  value="us-east-1"
+                  value='us-east-1'
                 />
               </FormGroup>
               <HelperText>
-                <HelperTextItem component="div" variant="default">
+                <HelperTextItem component='div' variant='default'>
                   Images are built in the default region but can be copied to
                   other regions later.
                 </HelperTextItem>
@@ -184,25 +184,25 @@ const Aws = () => {
       {shareMethod === 'manual' && (
         <>
           {!process.env.IS_ON_PREMISE && (
-            <FormGroup label="AWS account ID" isRequired>
+            <FormGroup label='AWS account ID' isRequired>
               <ValidatedInput
-                ariaLabel="aws account id"
+                ariaLabel='aws account id'
                 value={shareWithAccount || ''}
                 validator={isAwsAccountIdValid}
                 onChange={(_event, value) =>
                   dispatch(changeAwsAccountId(value))
                 }
-                helperText="Should be 12 characters long."
+                helperText='Should be 12 characters long.'
               />
             </FormGroup>
           )}
-          <FormGroup label="Default region" isRequired>
+          <FormGroup label='Default region' isRequired>
             {!process.env.IS_ON_PREMISE && (
               <TextInput
                 value={'us-east-1'}
-                type="text"
+                type='text'
-                aria-label="default region"
+                aria-label='default region'
-                readOnlyVariant="default"
+                readOnlyVariant='default'
               />
             )}
             {process.env.IS_ON_PREMISE && (

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureAuthButton.tsx

@@ -15,9 +15,9 @@ export const AzureAuthButton = () => {
   return (
     <FormGroup>
       <Button
-        component="a"
+        component='a'
-        target="_blank"
+        target='_blank'
-        variant="secondary"
+        variant='secondary'
         isDisabled={!guidRegex.test(tenantId)}
         href={
           'https://login.microsoftonline.com/' +

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureHyperVSelect.tsx

@@ -31,16 +31,16 @@ export const AzureHyperVSelect = () => {
 
   const selectOptions = [
     <SelectOption
-      key="V1"
+      key='V1'
-      value="V1"
+      value='V1'
-      description="Hyper V Generation 1 (BIOS)"
+      description='Hyper V Generation 1 (BIOS)'
-      label="Hyper V Generation 1"
+      label='Hyper V Generation 1'
     />,
     <SelectOption
-      key="V2"
+      key='V2'
-      value="V2"
+      value='V2'
-      description="Hyper V Generation 2 (UEFI)"
+      description='Hyper V Generation 2 (UEFI)'
-      label="Hyper V Generation 2"
+      label='Hyper V Generation 2'
     />,
   ];
 
@@ -56,7 +56,7 @@ export const AzureHyperVSelect = () => {
 
   return (
     <>
-      <FormGroup isRequired label="HyperV Generation">
+      <FormGroup isRequired label='HyperV Generation'>
         <Select
           isScrollable
           isOpen={isOpen}

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureResourceGroups.tsx

@@ -103,7 +103,7 @@ export const AzureResourceGroups = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={() => setIsOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={!azureSource}
@@ -113,8 +113,8 @@ export const AzureResourceGroups = () => {
           value={azureResourceGroup ? azureResourceGroup : inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select resource group"
+          placeholder='Select resource group'
           isExpanded={isOpen}
         />
 
@@ -122,9 +122,9 @@ export const AzureResourceGroups = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={handleClear}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -146,8 +146,8 @@ export const AzureResourceGroups = () => {
       >
         <SelectList>
           {isFetching && (
-            <SelectOption value="loader">
+            <SelectOption value='loader'>
-              <Spinner size="lg" />
+              <Spinner size='lg' />
             </SelectOption>
           )}
           {selectOptions.length > 0 &&

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureSourcesSelect.tsx

@@ -151,7 +151,7 @@ export const AzureSourcesSelect = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={handleToggle}
       isExpanded={isOpen}
       isDisabled={!isSuccess}
@@ -161,8 +161,8 @@ export const AzureSourcesSelect = () => {
           value={selectedSource ? selectedSource : inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select source"
+          placeholder='Select source'
           isExpanded={isOpen}
         />
 
@@ -170,9 +170,9 @@ export const AzureSourcesSelect = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={handleClear}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -194,8 +194,8 @@ export const AzureSourcesSelect = () => {
         >
           <SelectList>
             {isFetching && (
-              <SelectOption key="loading" value="loader">
+              <SelectOption key='loading' value='loader'>
-                <Spinner size="lg" />
+                <Spinner size='lg' />
               </SelectOption>
             )}
             {selectOptions.length > 0 &&

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/index.tsx

@@ -43,11 +43,11 @@ export type AzureShareMethod = 'manual' | 'sources';
 const SourcesButton = () => {
   return (
     <Button
-      component="a"
+      component='a'
-      target="_blank"
+      target='_blank'
-      variant="link"
+      variant='link'
       icon={<ExternalLinkAltIcon />}
-      iconPosition="right"
+      iconPosition='right'
       isInline
       href={'settings/sources'}
     >
@@ -65,7 +65,7 @@ const Azure = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Target environment - Microsoft Azure
       </Title>
       <Content>
@@ -81,11 +81,11 @@ const Azure = () => {
         defining target by Source selection.
         <br />
         <Button
-          component="a"
+          component='a'
-          target="_blank"
+          target='_blank'
-          variant="link"
+          variant='link'
           icon={<ExternalLinkAltIcon />}
-          iconPosition="right"
+          iconPosition='right'
           isInline
           href={AZURE_AUTH_URL}
         >
@@ -93,12 +93,12 @@ const Azure = () => {
         </Button>
       </Content>
       <AzureHyperVSelect />
-      <FormGroup label="Share method:">
+      <FormGroup label='Share method:'>
         <Radio
-          id="radio-with-description"
+          id='radio-with-description'
-          label="Use an account configured from Sources."
+          label='Use an account configured from Sources.'
-          name="radio-7"
+          name='radio-7'
-          description="Use a configured source to launch environments directly from the console."
+          description='Use a configured source to launch environments directly from the console.'
           isChecked={shareMethod === 'sources'}
           onChange={() => {
             dispatch(changeAzureSource(''));
@@ -110,9 +110,9 @@ const Azure = () => {
           autoFocus
         />
         <Radio
-          id="radio"
+          id='radio'
-          label="Manually enter the account information."
+          label='Manually enter the account information.'
-          name="radio-8"
+          name='radio-8'
           isChecked={shareMethod === 'manual'}
           onChange={() => {
             dispatch(changeAzureSource(''));
@@ -129,24 +129,24 @@ const Azure = () => {
           <SourcesButton />
           <Gallery hasGutter>
             <GalleryItem>
-              <FormGroup label="Azure tenant GUID" isRequired>
+              <FormGroup label='Azure tenant GUID' isRequired>
                 <TextInput
-                  aria-label="Azure tenant GUID"
+                  aria-label='Azure tenant GUID'
-                  readOnlyVariant="default"
+                  readOnlyVariant='default'
                   isRequired
-                  id="tenant id"
+                  id='tenant id'
                   value={tenantId}
                 />
               </FormGroup>
             </GalleryItem>
             <GalleryItem>
-              <FormGroup label="Subscription ID" isRequired>
+              <FormGroup label='Subscription ID' isRequired>
                 <TextInput
-                  aria-label="Subscription ID"
+                  aria-label='Subscription ID'
-                  label="Subscription ID"
+                  label='Subscription ID'
-                  readOnlyVariant="default"
+                  readOnlyVariant='default'
                   isRequired
-                  id="subscription id"
+                  id='subscription id'
                   value={subscriptionId}
                 />
               </FormGroup>
@@ -158,36 +158,36 @@ const Azure = () => {
       )}
       {shareMethod === 'manual' && (
         <>
-          <FormGroup label="Azure tenant GUID" isRequired>
+          <FormGroup label='Azure tenant GUID' isRequired>
             <ValidatedInput
-              ariaLabel="Azure tenant GUID"
+              ariaLabel='Azure tenant GUID'
               value={tenantId || ''}
               validator={isAzureTenantGUIDValid}
               onChange={(_event, value) => dispatch(changeAzureTenantId(value))}
-              helperText="Please enter a valid tenant ID"
+              helperText='Please enter a valid tenant ID'
             />
           </FormGroup>
           <AzureAuthButton />
-          <FormGroup label="Subscription ID" isRequired>
+          <FormGroup label='Subscription ID' isRequired>
             <ValidatedInput
-              ariaLabel="subscription id"
+              ariaLabel='subscription id'
               value={subscriptionId}
               validator={isAzureSubscriptionIdValid}
               onChange={(_event, value) =>
                 dispatch(changeAzureSubscriptionId(value))
               }
-              helperText="Please enter a valid subscription ID"
+              helperText='Please enter a valid subscription ID'
             />
           </FormGroup>
-          <FormGroup label="Resource group" isRequired>
+          <FormGroup label='Resource group' isRequired>
             <ValidatedInput
-              ariaLabel="resource group"
+              ariaLabel='resource group'
               value={resourceGroup}
               validator={isAzureResourceGroupValid}
               onChange={(_event, value) =>
                 dispatch(changeAzureResourceGroup(value))
               }
-              helperText="Resource group names only allow alphanumeric characters, periods, underscores, hyphens, and parenthesis and cannot end in a period"
+              helperText='Resource group names only allow alphanumeric characters, periods, underscores, hyphens, and parenthesis and cannot end in a period'
             />
           </FormGroup>
         </>

src/Components/CreateImageWizard/steps/TargetEnvironment/Gcp/index.tsx

@@ -38,18 +38,18 @@ const Gcp = () => {
 
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Target environment - Google Cloud Platform
       </Title>
       <Content>
         Select how to share your image. The image you create can be used to
         launch instances on GCP, regardless of which method you select.
       </Content>
-      <FormGroup label="Select image sharing" isRequired>
+      <FormGroup label='Select image sharing' isRequired>
         <Radio
-          id="share-with-google"
+          id='share-with-google'
-          label="Share image with a Google account"
+          label='Share image with a Google account'
-          name="radio-1"
+          name='radio-1'
           description={
             <Content component={ContentVariants.small}>
               Your image will be uploaded to GCP and shared with the account you
@@ -65,9 +65,9 @@ const Gcp = () => {
           autoFocus
         />
         <Radio
-          id="share-with-insights"
+          id='share-with-insights'
-          label="Share image with Red Hat Insights only"
+          label='Share image with Red Hat Insights only'
-          name="radio-2"
+          name='radio-2'
           description={
             <Content component={ContentVariants.small}>
               Your image will be uploaded to GCP and shared with Red Hat
@@ -84,38 +84,38 @@ const Gcp = () => {
       </FormGroup>
       {shareMethod === 'withGoogle' && (
         <>
-          <FormGroup label="Account type" isRequired>
+          <FormGroup label='Account type' isRequired>
             <Radio
-              id="google-account"
+              id='google-account'
-              label="Google account"
+              label='Google account'
-              name="radio-3"
+              name='radio-3'
               isChecked={accountType === 'user'}
               onChange={() => {
                 dispatch(changeGcpAccountType('user'));
               }}
             />
             <Radio
-              id="service-account"
+              id='service-account'
-              label="Service account"
+              label='Service account'
-              name="radio-4"
+              name='radio-4'
               isChecked={accountType === 'serviceAccount'}
               onChange={() => {
                 dispatch(changeGcpAccountType('serviceAccount'));
               }}
             />
             <Radio
-              id="google-group"
+              id='google-group'
-              label="Google group"
+              label='Google group'
-              name="radio-5"
+              name='radio-5'
               isChecked={accountType === 'group'}
               onChange={() => {
                 dispatch(changeGcpAccountType('group'));
               }}
             />
             <Radio
-              id="google-domain"
+              id='google-domain'
-              label="Google Workspace domain or Cloud Identity domain"
+              label='Google Workspace domain or Cloud Identity domain'
-              name="radio-6"
+              name='radio-6'
               isChecked={accountType === 'domain'}
               onChange={() => {
                 dispatch(changeGcpAccountType('domain'));
@@ -131,12 +131,12 @@ const Gcp = () => {
             isRequired
           >
             <ValidatedInput
-              ariaLabel="google principal"
+              ariaLabel='google principal'
-              dataTestId="principal"
+              dataTestId='principal'
               value={gcpEmail || ''}
               validator={isGcpEmailValid}
               onChange={(_event, value) => dispatch(changeGcpEmail(value))}
-              helperText="Please enter a valid e-mail address."
+              helperText='Please enter a valid e-mail address.'
             />
           </FormGroup>
         </>

src/Components/CreateImageWizard/steps/Timezone/components/NtpServersInput.tsx

@@ -18,17 +18,17 @@ const NtpServersInput = () => {
   const stepValidation = useTimezoneValidation();
 
   return (
-    <FormGroup isRequired={false} label="NTP servers">
+    <FormGroup isRequired={false} label='NTP servers'>
       <LabelInput
-        ariaLabel="Add NTP server"
+        ariaLabel='Add NTP server'
-        placeholder="Add NTP servers"
+        placeholder='Add NTP servers'
         validator={isNtpServerValid}
         list={ntpServers}
-        item="NTP server"
+        item='NTP server'
         addAction={addNtpServer}
         removeAction={removeNtpServer}
         stepValidation={stepValidation}
-        fieldName="ntpServers"
+        fieldName='ntpServers'
       />
     </FormGroup>
   );

src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx

@@ -106,7 +106,7 @@ const TimezoneDropDown = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      variant="typeahead"
+      variant='typeahead'
       onClick={onToggleClick}
       isExpanded={isOpen}
     >
@@ -115,8 +115,8 @@ const TimezoneDropDown = () => {
           value={timezone ? timezone : inputValue}
           onClick={onInputClick}
           onChange={onTextInputChange}
-          autoComplete="off"
+          autoComplete='off'
-          placeholder="Select a timezone"
+          placeholder='Select a timezone'
           isExpanded={isOpen}
         />
 
@@ -124,9 +124,9 @@ const TimezoneDropDown = () => {
           <TextInputGroupUtilities>
             <Button
               icon={<TimesIcon />}
-              variant="plain"
+              variant='plain'
               onClick={onClearButtonClick}
-              aria-label="Clear input"
+              aria-label='Clear input'
             />
           </TextInputGroupUtilities>
         )}
@@ -135,7 +135,7 @@ const TimezoneDropDown = () => {
   );
 
   return (
-    <FormGroup isRequired={false} label="Timezone">
+    <FormGroup isRequired={false} label='Timezone'>
       <Select
         isScrollable
         isOpen={isOpen}

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

@@ -8,7 +8,7 @@ import TimezoneDropDown from './components/TimezoneDropDown';
 const TimezoneStep = () => {
   return (
     <Form>
-      <Title headingLevel="h1" size="xl">
+      <Title headingLevel='h1' size='xl'>
         Timezone
       </Title>
       <Content>Select a timezone for your image.</Content>

src/Components/CreateImageWizard/steps/Users/components/EmptyUserState.tsx

@@ -20,12 +20,12 @@ const EmptyUserState = () => {
 
   return (
     <EmptyState
-      headingLevel="h4"
+      headingLevel='h4'
       icon={UserIcon}
       variant={EmptyStateVariant.lg}
     >
       <EmptyStateFooter>
-        <Button variant="secondary" onClick={onAddUserClick}>
+        <Button variant='secondary' onClick={onAddUserClick}>
           Add a user
         </Button>
       </EmptyStateFooter>

src/Components/CreateImageWizard/steps/Users/components/RemoveUserModal.tsx

@@ -53,17 +53,17 @@ const RemoveUserModal = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} width="50%">
+    <Modal isOpen={isOpen} onClose={onClose} width='50%'>
       <ModalHeader title={`Remove user${userName ? ` ${userName}` : ''}?`} />
       <ModalBody>
         This action is permanent and cannot be undone. Once deleted all
         information about the user will be lost.
       </ModalBody>
       <ModalFooter>
-        <Button key="confirm" variant="primary" onClick={onConfirm}>
+        <Button key='confirm' variant='primary' onClick={onConfirm}>
           Remove user
         </Button>
-        <Button key="cancel" variant="link" onClick={onClose}>
+        <Button key='cancel' variant='link' onClick={onClose}>
           Cancel
         </Button>
       </ModalFooter>