fix(admin-ui): enable SSA Apply button when 'Is Expirable' is enabled

[faisalsiddique4400]

fix(admin-ui): enable SSA Apply button when 'Is Expirable' is enabled (#2909)

Summary

This PR fixes an issue in the SSA creation flow where the Apply button remained disabled after enabling the Is Expirable toggle, preventing users from creating an SSA even when all required fields were completed.

The update corrects the form validation and state management so the Apply button is enabled once the form satisfies the required validation criteria.

---

Fix Summary

• Fixed form validation logic for the SSA creation flow
• Corrected Apply button enablement when the Is Expirable toggle is enabled
• Ensured form state updates correctly after toggling expiration settings
• Preserved existing validation behavior for all other SSA fields
• Improved consistency between form state and action availability
• Restored the expected SSA creation workflow

---

Verification

npm run check:all

passes successfully.

• Verified the Apply button is enabled after completing the required fields with Is Expirable enabled
• Verified SSA creation succeeds with expiration enabled
• Verified SSA creation continues to work correctly with expiration disabled
• Verified no regressions in the SSA management workflow

---

🔗 Ticket

Closes: #2909

Summary by CodeRabbit

• New Features

  • Date pickers now support a disabled state in single mode.
  • The SSA form now always shows the expiration date field, with clearer disabled and error handling.

• Bug Fixes

  • Expiration date validation now checks dates at the day level for more consistent behavior.
  • Selecting an expiration date now properly marks the field as touched, improving error display.
  • Disabled styling and messaging for the expiration date field have been refined for better clarity.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds disabled-state support to the single date picker, reworks the SSA expiration-date field to render disabled until enabled, updates validation and error-state handling, and reformats several tests.

Changes

SSA expiration date handling and test cleanup

Layer / File(s)	Summary
Disabled date picker prop admin-ui/app/components/GluuDatePicker/types.ts, admin-ui/app/components/GluuDatePicker/GluuDatePicker.tsx	GluuDatePicker single mode accepts disabled, forwards it to the picker, and includes it in memo comparison.
Expiration validation state admin-ui/plugins/auth-server/components/Ssa/helper/validations.ts, admin-ui/plugins/auth-server/components/Ssa/hooks/useSsaValidationState.ts	expirationDate validation uses day precision, and the validation-state hook exposes expiration-date error fields and memo dependencies.
SSA expiration date field admin-ui/plugins/auth-server/components/Ssa/components/SsaForm.tsx, admin-ui/plugins/auth-server/components/Ssa/components/styles/SsaForm.style.ts, admin-ui/plugins/auth-server/components/Ssa/__tests__/components/SsaForm.test.tsx	SsaForm always renders the expiration-date cell, disables it until expirable, updates touched state on change, adjusts styling, and aligns tests with the new behavior.
Test formatting updates admin-ui/app/components/*/__tests__/*, admin-ui/app/routes/Apps/Gluu/__tests__/*	Several test render calls and helper functions were reformatted without changing assertions or selector logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• GluuFederation/flex#2831 — Also changes admin-ui/plugins/auth-server/components/Ssa/components/SsaForm.tsx and related styles around the SSA form layout.

Suggested reviewers

• duttarnab
• moabu

Poem

🐰 I hopped by the date field under moonlight glow,
With disabled paws and validation in tow.
When expirable wakes, the blossoms unhide,
And the little form button bounces with pride.
Thump! thump! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Several unrelated test-only formatting changes were added across Gluu, Sidebar, Dropdown, and other components.	Remove the unrelated formatting-only edits or move them to a separate cleanup PR, keeping this change focused on the SSA fix.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main SSA fix: enabling the Apply button when Is Expirable is enabled.
Linked Issues check	✅ Passed	The SSA form, validation, and state updates address the reported disabled Apply button when Is Expirable is on.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch admin-ui-issue-2909

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sonarqubecloud]

Quality Gate passed for 'Gluu Admin UI'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@admin-ui/plugins/auth-server/components/Ssa/components/styles/SsaForm.style.ts`:
- Around line 202-208: The expiration-date validation text in SsaForm.style.ts
is absolutely positioned, which removes it from normal layout flow and prevents
the row from expanding when the message appears. Update the datePickerError
style in the SsaForm styling to use normal flow positioning so the validation
message contributes to layout height and pushes surrounding content down, rather
than overlaying the next grid row.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7696fa66-351b-4dd1-bff2-914619839bf2

📥 Commits

Reviewing files that changed from the base of the PR and between 565d176 and e65612f.

📒 Files selected for processing (15)

• admin-ui/app/components/CustomInput/__tests__/CustomInput.test.tsx
• admin-ui/app/components/GluuDatePicker/GluuDatePicker.tsx
• admin-ui/app/components/GluuDatePicker/__tests__/GluuDatePicker.test.tsx
• admin-ui/app/components/GluuDatePicker/types.ts
• admin-ui/app/components/GluuDropdown/__tests__/GluuDropdown.test.tsx
• admin-ui/app/components/GluuDynamicList/__tests__/GluuDynamicList.test.tsx
• admin-ui/app/components/GluuSearchToolbar/__tests__/GluuSearchToolbar.test.tsx
• admin-ui/app/components/Sidebar/__tests__/Sidebar.test.tsx
• admin-ui/app/routes/Apps/Gluu/__tests__/GluuInputEditor.test.tsx
• admin-ui/app/routes/Apps/Gluu/__tests__/GluuThemeFormFooter.test.tsx
• admin-ui/plugins/auth-server/components/Ssa/__tests__/components/SsaForm.test.tsx
• admin-ui/plugins/auth-server/components/Ssa/components/SsaForm.tsx
• admin-ui/plugins/auth-server/components/Ssa/components/styles/SsaForm.style.ts
• admin-ui/plugins/auth-server/components/Ssa/helper/validations.ts
• admin-ui/plugins/auth-server/components/Ssa/hooks/useSsaValidationState.ts