diff --git a/libs/i18n/locales/en/translation.json b/libs/i18n/locales/en/translation.json index f04be819c..c46a0dddd 100644 --- a/libs/i18n/locales/en/translation.json +++ b/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", diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx index 490cf8c57..36017a087 100644 --- a/libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx +++ b/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 ( <> } - nav={} + nav={} onStepChange={() => { if (submitError) { setSubmitError(undefined); diff --git a/libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx b/libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx index 8e53e0323..fe8ad9665 100644 --- a/libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx +++ b/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 ( + + {stepName} + + + + + + + + + + + ); +}; -const EditDeviceWizardNav = () => { +const EditDeviceWizardNav = ({ isFleetless }: { isFleetless: boolean }) => { const { t } = useTranslation(); const { activeStep, steps, goToStepByIndex } = useWizardContext(); @@ -33,9 +60,15 @@ const EditDeviceWizardNav = () => { /> + } isCurrent={activeStep?.index === deviceTemplateStepIndex + 1} - isDisabled={isEditTemplateDisabled} + aria-disabled={isEditTemplateDisabled} onClick={() => { if (!isEditTemplateDisabled) { goToStepByIndex(deviceTemplateStepIndex + 1); @@ -44,23 +77,17 @@ const EditDeviceWizardNav = () => { /> + } isCurrent={activeStep?.index === deviceUpdatesStepIndex + 1} - isDisabled={isDeviceUpdatesDisabled} + aria-disabled={isDeviceUpdatesDisabled} onClick={() => { if (!isDeviceUpdatesDisabled) { goToStepByIndex(deviceUpdatesStepIndex + 1); } }} - > - {isDeviceUpdatesDisabled && ( - - - - - - )} - + /> =16.8" } }, - "libs/ui-components/node_modules/react-router-dom": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", - "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", - "license": "MIT", - "peer": true, - "dependencies": { - "@remix-run/router": "1.15.3", - "react-router": "6.22.3" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, "libs/ui-components/node_modules/semver": { "version": "7.7.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", @@ -16685,31 +16667,6 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, - "node_modules/react-redux": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", - "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17 || ^18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-markdown": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz", @@ -16747,6 +16704,31 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, + "node_modules/react-redux": { + "version": "7.2.9", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", + "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/react-redux": "^7.1.20", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17 || ^18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",