EDM-3426: Correctly place message and disable steps after device is bound

libs/i18n/locales/en/translation.json

@@ -492,6 +492,7 @@
   "Updates": "Updates",
   "Review and save": "Review and save",
   "The device will be bound to a fleet. As a result, its configurations cannot be edited directly.": "The device will be bound to a fleet. As a result, its configurations cannot be edited directly.",
+  "Why this step is disabled": "Why this step is disabled",
   "This port mapping already exists": "This port mapping already exists",
   "Port mapping must be in format \"hostPort:containerPort\"": "Port mapping must be in format \"hostPort:containerPort\"",
   "Invalid port values": "Invalid port values",

libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx

@@ -113,16 +113,16 @@ const EditDeviceWizard = () => {
           const templateStepValid = isDeviceTemplateStepValid(formikErrors);
           const updateStepValid = isUpdatePolicyStepValid(formikErrors);
 
-          const canEditTemplate = !values.fleetMatch;
-          const isTemplateStepDisabled = !(generalStepValid && canEditTemplate);
-          const isUpdateStepDisabled = !templateStepValid;
+          const isFleetless = !values.fleetMatch;
+          const isTemplateStepDisabled = !(generalStepValid && isFleetless);
+          const isUpdateStepDisabled = !(generalStepValid && templateStepValid && isFleetless);
 
           return (
             <>
               <LeaveFormConfirmation />
               <Wizard
                 footer={<EditDeviceWizardFooter />}
-                nav={<EditDeviceWizardNav />}
+                nav={<EditDeviceWizardNav isFleetless={isFleetless} />}
                 onStepChange={() => {
                   if (submitError) {
                     setSubmitError(undefined);

libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx

@@ -1,19 +1,46 @@
 import * as React from 'react';
-import { Icon, Tooltip, WizardNav, WizardNavItem, useWizardContext } from '@patternfly/react-core';
+import { Flex, FlexItem, Icon, Tooltip, WizardNav, WizardNavItem, useWizardContext } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { useTranslation } from '../../../hooks/useTranslation';
-import { TFunction } from 'react-i18next';
 
 const generalInfoStepIndex = 0;
 const deviceTemplateStepIndex = 1;
 const deviceUpdatesStepIndex = 2;
 const reviewDeviceStepIndex = 3;
 
-const disabledTemplateReason = (t: TFunction) =>
-  t('The device will be bound to a fleet. As a result, its configurations cannot be edited directly.');
+const StepNavContent = ({
+  stepName,
+  isDisabled,
+  isFleetless,
+}: {
+  stepName: string;
+  isDisabled?: boolean;
+  isFleetless?: boolean;
+}) => {
+  const { t } = useTranslation();
+  if (!isDisabled || isFleetless) {
+    return stepName;
+  }
+  return (
+    <Flex>
+      <FlexItem>{stepName}</FlexItem>
+      <FlexItem>
+        <Tooltip
+          content={t('The device will be bound to a fleet. As a result, its configurations cannot be edited directly.')}
+        >
+          <span tabIndex={0} aria-label={t('Why this step is disabled')}>
+            <Icon status="info" size="sm">
+              <InfoCircleIcon />
+            </Icon>
+          </span>
+        </Tooltip>
+      </FlexItem>
+    </Flex>
+  );
+};
 
-const EditDeviceWizardNav = () => {
+const EditDeviceWizardNav = ({ isFleetless }: { isFleetless: boolean }) => {
   const { t } = useTranslation();
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
@@ -33,9 +60,15 @@ const EditDeviceWizardNav = () => {
       />
       <WizardNavItem
         stepIndex={deviceTemplateStepIndex}
-        content={t('Device template')}
+        content={
+          <StepNavContent
+            stepName={t('Device template')}
+            isDisabled={isEditTemplateDisabled}
+            isFleetless={isFleetless}
+          />
+        }
         isCurrent={activeStep?.index === deviceTemplateStepIndex + 1}
-        isDisabled={isEditTemplateDisabled}
+        aria-disabled={isEditTemplateDisabled}
         onClick={() => {
           if (!isEditTemplateDisabled) {
             goToStepByIndex(deviceTemplateStepIndex + 1);
@@ -44,23 +77,17 @@ const EditDeviceWizardNav = () => {
       />
       <WizardNavItem
         stepIndex={deviceUpdatesStepIndex}
-        content={t('Updates')}
+        content={
+          <StepNavContent stepName={t('Updates')} isDisabled={isDeviceUpdatesDisabled} isFleetless={isFleetless} />
+        }
         isCurrent={activeStep?.index === deviceUpdatesStepIndex + 1}
-        isDisabled={isDeviceUpdatesDisabled}
+        aria-disabled={isDeviceUpdatesDisabled}
         onClick={() => {
           if (!isDeviceUpdatesDisabled) {
             goToStepByIndex(deviceUpdatesStepIndex + 1);
           }
         }}
-      >
-        {isDeviceUpdatesDisabled && (
-          <Tooltip content={disabledTemplateReason(t)}>
-            <Icon status="info" size="sm">
-              <InfoCircleIcon />
-            </Icon>
-          </Tooltip>
-        )}
-      </WizardNavItem>
+      />
       <WizardNavItem
         stepIndex={reviewDeviceStepIndex}
         content={t('Review and save')}