Open
Conversation
- Purpose: hide the server name from the onboarding flow without changing the underlying state or apply behavior. - Before: onboarding showed the server name in core settings, next steps, and the summary card. - Problem: the flow exposed server identity details that should no longer be visible to users during onboarding. - Now: server-name UI nodes remain mounted for state continuity but are visually hidden and removed from accessibility exposure. - How: adds Tailwind hidden styling, aria-hidden markers, and focused tests that assert the server-name rows stay hidden.
Contributor
WalkthroughThe pull request hides the server name element across multiple onboarding step components by applying hidden CSS classes and aria-hidden attributes, with corresponding test additions to verify the hidden state. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/components/Onboarding/steps/OnboardingCoreSettingsStep.vue (1)
459-473:⚠️ Potential issue | 🟠 MajorHidden server-name control can create an unrecoverable submit block.
Because
Line 459hides the entire server-name control, but submit still fails whenserverNameValidationis non-null (Line 359,Line 624), users with an invalid preloaded server name cannot proceed or fix it.Proposed fix (gate server-name validation only when the control is visible)
+const isServerNameUiHidden = true; + const handleSubmit = async () => { - if (serverNameValidation.value || serverDescriptionValidation.value) { + if ((!isServerNameUiHidden && serverNameValidation.value) || serverDescriptionValidation.value) { error.value = t('common.error'); return; }<BrandButton :text="t('onboarding.coreSettings.next')" class="!bg-primary hover:!bg-primary/90 w-full min-w-[160px] !text-white shadow-md transition-all hover:shadow-lg sm:w-auto" - :disabled="isBusy || !!serverNameValidation || !!serverDescriptionValidation" + :disabled=" + isBusy || (!isServerNameUiHidden && !!serverNameValidation) || !!serverDescriptionValidation + " :loading="isBusy" `@click`="handleSubmit" :icon-right="ChevronRightIcon" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/Onboarding/steps/OnboardingCoreSettingsStep.vue` around lines 459 - 473, The server-name input (UInput bound to serverName) is rendered hidden (class "hidden", aria-hidden="true") but serverNameValidation is still blocking submission; update the validation gating so serverNameValidation only affects form submission and input styling when the control is visible. Add a visibility check (e.g., isServerNameVisible or derive from the same condition that adds "hidden"/aria-hidden) and use it wherever serverNameValidation is consulted (submit handler and any computed/disabled logic) so invalid preloaded server names do not block progress when the field is hidden; keep the existing model (serverName, serverNameValidation, isBusy) and only apply the red-border class and validation failure when the visibility flag is true.
🧹 Nitpick comments (2)
web/__test__/components/Onboarding/OnboardingSummaryStep.test.ts (1)
482-487: Make the hidden-state assertion less brittle and async-safe.Await pending renders, assert the element exists first, then verify both
hiddenandaria-hidden.Suggested test update
- it('marks the server name hidden in the summary card', () => { + it('marks the server name hidden in the summary card', async () => { const { wrapper } = mountComponent(); + await flushPromises(); const serverNameLabel = wrapper.findAll('span').find((span) => span.text() === 'Server Name'); - expect(serverNameLabel?.element.parentElement?.classList.contains('hidden')).toBe(true); + expect(serverNameLabel).toBeDefined(); + const row = serverNameLabel!.element.parentElement as HTMLElement; + expect(row.classList.contains('hidden')).toBe(true); + expect(row.getAttribute('aria-hidden')).toBe('true'); });Based on learnings: Applies to web/**/*.test.{ts,tsx} : Vue component testing: Always await async operations before making assertions.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/__test__/components/Onboarding/OnboardingSummaryStep.test.ts` around lines 482 - 487, The test 'marks the server name hidden in the summary card' is brittle and not awaiting Vue's async updates; make the test async, await pending renders (e.g., await wrapper.vm.$nextTick() or await flushPromises()) after calling mountComponent(), locate the Server Name element via wrapper.find / wrapper.findAll and assert it exists first, then verify its parent element has the 'hidden' class and that the element (or its parent) has aria-hidden="true"; use the existing mountComponent, wrapper, and serverNameLabel identifiers to find and assert on the DOM nodes.web/__test__/components/Onboarding/OnboardingCoreSettingsStep.test.ts (1)
202-208: Strengthen this test to validate behavior/accessibility, not only a CSS utility class.Assert that the row exists and carries
aria-hidden="true"in addition to thehiddenclass.Suggested test update
it('marks server name controls hidden', async () => { const { wrapper } = mountComponent(); await flushPromises(); const serverNameLabel = wrapper.findAll('label').find((label) => label.text() === 'Server Name'); - expect(serverNameLabel?.element.parentElement?.classList.contains('hidden')).toBe(true); + expect(serverNameLabel).toBeDefined(); + const row = serverNameLabel!.element.parentElement as HTMLElement; + expect(row.classList.contains('hidden')).toBe(true); + expect(row.getAttribute('aria-hidden')).toBe('true'); });Based on learnings: Applies to /test/components//*.ts : Test component behavior and output, not implementation details.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/__test__/components/Onboarding/OnboardingCoreSettingsStep.test.ts` around lines 202 - 208, The test currently only checks for the presence of the 'hidden' CSS class on the Server Name label (serverNameLabel variable); update it to assert the row exists and that the DOM indicates it is hidden for accessibility by also checking the container/row element has aria-hidden="true" (in addition to the hidden class). Locate where serverNameLabel is found via wrapper.findAll('label') and then inspect its parent/container element (parentElement or closest row) to assert it is present and that parentElement.getAttribute('aria-hidden') === 'true' while still confirming the 'hidden' class.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@web/src/components/Onboarding/steps/OnboardingCoreSettingsStep.vue`:
- Around line 459-473: The server-name input (UInput bound to serverName) is
rendered hidden (class "hidden", aria-hidden="true") but serverNameValidation is
still blocking submission; update the validation gating so serverNameValidation
only affects form submission and input styling when the control is visible. Add
a visibility check (e.g., isServerNameVisible or derive from the same condition
that adds "hidden"/aria-hidden) and use it wherever serverNameValidation is
consulted (submit handler and any computed/disabled logic) so invalid preloaded
server names do not block progress when the field is hidden; keep the existing
model (serverName, serverNameValidation, isBusy) and only apply the red-border
class and validation failure when the visibility flag is true.
---
Nitpick comments:
In `@web/__test__/components/Onboarding/OnboardingCoreSettingsStep.test.ts`:
- Around line 202-208: The test currently only checks for the presence of the
'hidden' CSS class on the Server Name label (serverNameLabel variable); update
it to assert the row exists and that the DOM indicates it is hidden for
accessibility by also checking the container/row element has aria-hidden="true"
(in addition to the hidden class). Locate where serverNameLabel is found via
wrapper.findAll('label') and then inspect its parent/container element
(parentElement or closest row) to assert it is present and that
parentElement.getAttribute('aria-hidden') === 'true' while still confirming the
'hidden' class.
In `@web/__test__/components/Onboarding/OnboardingSummaryStep.test.ts`:
- Around line 482-487: The test 'marks the server name hidden in the summary
card' is brittle and not awaiting Vue's async updates; make the test async,
await pending renders (e.g., await wrapper.vm.$nextTick() or await
flushPromises()) after calling mountComponent(), locate the Server Name element
via wrapper.find / wrapper.findAll and assert it exists first, then verify its
parent element has the 'hidden' class and that the element (or its parent) has
aria-hidden="true"; use the existing mountComponent, wrapper, and
serverNameLabel identifiers to find and assert on the DOM nodes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a6f2d1ec-6550-4254-b738-aa4765d4f0eb
📒 Files selected for processing (5)
web/__test__/components/Onboarding/OnboardingCoreSettingsStep.test.tsweb/__test__/components/Onboarding/OnboardingSummaryStep.test.tsweb/src/components/Onboarding/steps/OnboardingCoreSettingsStep.vueweb/src/components/Onboarding/steps/OnboardingNextStepsStep.vueweb/src/components/Onboarding/steps/OnboardingSummaryStep.vue
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1993 +/- ##
=======================================
Coverage 52.55% 52.55%
=======================================
Files 1033 1033
Lines 71649 71654 +5
Branches 8172 8172
=======================================
+ Hits 37655 37660 +5
Misses 33869 33869
Partials 125 125 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
elibosley
changed the title
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 162b73dd4f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div class="mb-8 grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-2"> | ||
| <!-- Server Name --> | ||
| <div class="flex flex-col gap-2"> | ||
| <div class="hidden flex-col gap-2" aria-hidden="true"> |
There was a problem hiding this comment.
Hiding this entire server-name control makes onboarding impossible to complete whenever serverName is empty or invalid (for example, a bad value from draft/API/activation metadata), because submit is still blocked by serverNameValidation in both handleSubmit and the Next button disable condition. Before this change users could correct the value; after this change they can get stuck on this step with no visible way to fix it.
Useful? React with 👍 / 👎.
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.
Summary
Tests
Summary by CodeRabbit
Tests
Changes