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",