EDM-3426: Correctly place message and disable steps after device is bound#548
Open
celdrake wants to merge 1 commit intoflightctl:mainfrom
Open
EDM-3426: Correctly place message and disable steps after device is bound#548celdrake wants to merge 1 commit intoflightctl:mainfrom
celdrake wants to merge 1 commit intoflightctl:mainfrom
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
WalkthroughRefactors EditDeviceWizard and EditDeviceWizardNav to introduce an explicit Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx (1)
63-92:⚠️ Potential issue | 🟠 MajorReplace
aria-disabledprop withisDisabledonWizardNavItemcomponents.
aria-disabledis not a supported prop in PatternFly'sWizardNavItemAPI. Lines 73 and 86 usearia-disabled={isEditTemplateDisabled}andaria-disabled={isDeviceUpdatesDisabled}, but these props will be ignored. The correct approach (shown on line 97) is to use theisDisabledprop instead:- aria-disabled={isEditTemplateDisabled} + isDisabled={isEditTemplateDisabled}and
- aria-disabled={isDeviceUpdatesDisabled} + isDisabled={isDeviceUpdatesDisabled}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx` around lines 63 - 92, The WizardNavItem instances are using an unsupported aria-disabled prop; update the two occurrences (the WizardNavItem with stepIndex={deviceTemplateStepIndex} that uses isEditTemplateDisabled, and the WizardNavItem with stepIndex={deviceUpdatesStepIndex} that uses isDeviceUpdatesDisabled) to pass the boolean via the isDisabled prop instead of aria-disabled so the PatternFly API recognizes and disables the nav items (ensure you pass the same isEditTemplateDisabled / isDeviceUpdatesDisabled values to isDisabled).
🧹 Nitpick comments (1)
libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx (1)
12-43: Optional: unnecessary<Flex>wrapper in theisDisabled && isFleetlessbranch.When
isDisabled=trueandisFleetless=true,StepNavContentrenders the step name wrapped in a<Flex>/<FlexItem>layout with no tooltip — the extra layout primitives add no value over a plain string return.♻️ Proposed simplification
if (!isDisabled) { return stepName; } + if (isFleetless) { + return stepName; + } return ( <Flex> <FlexItem>{stepName}</FlexItem> - {!isFleetless && ( <FlexItem> <Tooltip content={t( 'The device will be bound to a fleet. As a result, its configurations cannot be edited directly.', )} > <Icon status="info" size="sm"> <InfoCircleIcon /> </Icon> </Tooltip> </FlexItem> - )} </Flex> );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx` around lines 12 - 43, StepNavContent currently always wraps the disabled state in a <Flex> with <FlexItem> even when isFleetless is true, producing unnecessary layout; update StepNavContent so that when isDisabled && isFleetless it returns stepName directly (like the non-disabled branch) and only uses the <Flex>/<FlexItem> + Tooltip rendering when isDisabled && !isFleetless, preserving the t(...) tooltip text and Icon rendering in that branch.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx`:
- Around line 116-118: The Updates-step enablement is missing a dependency on
the General step; update the boolean expression that computes
isUpdateStepDisabled in EditDeviceWizard.tsx so the Updates step is only enabled
when the General step and the Template step are both valid and the device is
fleetless — i.e. change the logic that sets isUpdateStepDisabled (currently
based on templateStepValid and isFleetless) to include generalStepValid as well
so it becomes disabled unless generalStepValid && templateStepValid &&
isFleetless.
---
Outside diff comments:
In
`@libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx`:
- Around line 63-92: The WizardNavItem instances are using an unsupported
aria-disabled prop; update the two occurrences (the WizardNavItem with
stepIndex={deviceTemplateStepIndex} that uses isEditTemplateDisabled, and the
WizardNavItem with stepIndex={deviceUpdatesStepIndex} that uses
isDeviceUpdatesDisabled) to pass the boolean via the isDisabled prop instead of
aria-disabled so the PatternFly API recognizes and disables the nav items
(ensure you pass the same isEditTemplateDisabled / isDeviceUpdatesDisabled
values to isDisabled).
---
Nitpick comments:
In
`@libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx`:
- Around line 12-43: StepNavContent currently always wraps the disabled state in
a <Flex> with <FlexItem> even when isFleetless is true, producing unnecessary
layout; update StepNavContent so that when isDisabled && isFleetless it returns
stepName directly (like the non-disabled branch) and only uses the
<Flex>/<FlexItem> + Tooltip rendering when isDisabled && !isFleetless,
preserving the t(...) tooltip text and Icon rendering in that branch.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsxlibs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx
libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx
Outdated
Show resolved
Hide resolved
celdrake
changed the title
celdrake
force-pushed
the
EDM-3426-tooltip-for-disabled-steps
branch
from
3f03f40 to
5967892
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx`:
- Around line 29-35: The tooltip is attached to a non-focusable Icon in
EditDeviceWizardNav.tsx so keyboard users can't discover it; make the tooltip
anchor focusable by either adding tabIndex={0} (and a suitable aria-label or
aria-describedby) to the Icon element or wrapping <Icon><InfoCircleIcon/></Icon>
in a focusable element (e.g., <span> or <button>) with role="button" and
tabIndex={0}, so the Tooltip component receives focus events and the tooltip
shows on keyboard focus; ensure the accessible name (aria-label) describes the
disabled reason for screen readers.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsxlibs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizard.tsx
libs/ui-components/src/components/Device/EditDeviceWizard/EditDeviceWizardNav.tsx
Show resolved
Hide resolved
celdrake
force-pushed
the
EDM-3426-tooltip-for-disabled-steps
branch
from
5967892 to
5cd07d0
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The tooltip that should have been displayed when by editing a device it becomes bound to a fleet, was being displayed wrongly positioned and when device was not becoming bound to a fleet.
Summary by CodeRabbit
New Features
Accessibility