adding uniformity in cancel and back buttons present in Scopes

[faisalsiddique4400]

feat(admin): adding uniformity in cancel and back buttons present in Scopes

Summary

This update introduces consistent behavior for Cancel, Back, and Apply buttons across Admin UI forms, including correct enabling and disabling based on form state.

Improvements

Button	Updated Behavior
Cancel	Resets all fields to their previous values without navigating away. Disabled until a change is made.
Back	Navigates to the previous page. If there is no navigation history, returns to Dashboard. Always enabled.
Apply	Saves the changes without leaving the page. Enabled only when the form has unsaved changes.

Additional Enhancements

• Buttons now correctly detect dirty form states.
• Apply button is dynamically enabled and disabled based on whether changes exist.
• Cancel button is disabled until a field is modified.
• Prevents accidental navigation or state loss in multi step configuration pages.

Affected Modules

This change is applied across all forms where configuration changes are possible, including but not limited to:

• Users

Parent issue: #2268

Testing Steps

1. Open suggested config form.
2. Modify any field.
3. Verify that:
   • Apply and Cancel buttons become enabled.
   • Apply saves configuration and stays on page.
   • Cancel reverts values and disables itself afterward.
4. Back button should navigate appropriately.

Summary by CodeRabbit

• New Features

  • Added confirmation dialog for scope submissions to prevent accidental changes.
  • Enhanced panel visibility controls for different scope types with improved UI organization.

• Bug Fixes

  • Improved navigation handling and form state management during scope editing.

• Refactor

  • Optimized form submission workflow and scope attribute handling for better performance and reliability.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors Scopes UI components to implement a confirm-on-submit modal workflow with declarative panel visibility logic. Introduces new helper utilities for scope initialization and validation, updates type definitions to use ExtendedScopeAttributes, and restructures ScopeForm with improved Formik integration and derived state management.

Changes

Cohort / File(s)	Summary
ScopeForm Refactor admin-ui/plugins/auth-server/components/Scopes/ScopeForm.tsx	Large refactor introducing rich Formik integration with generic typing, useMemo/useEffect/useCallback hooks, and derivePanelVisibility for decoupled visibility logic. Adds pendingScope state and GluuCommitDialog modal workflow; form submission now stores payload in modal before final confirmation. Replaces manual state initialization with initialFormValues, introduces handleDialogAccept flow, and restructures render logic with controlled form inputs and derived panel visibility.
ScopeListPage Updates admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.tsx	Updates MaterialTable type imports to include Column, Action, and Options. Changes item state from Scope to ScopeTableRow. Removes myActions state and introduces memoized tableActions computed via useMemo. Updates action click handlers to extract ScopeTableRow from potential array data. Adds headerStyle memoization and improves type safety with explicit Action casting.
Scope Helper Utilities admin-ui/plugins/auth-server/components/Scopes/helper/utils.ts	New utility module introducing ScopePanelVisibility interface and helper functions: cloneScopeAttributes for safe attribute cloning, buildScopeInitialValues to map ExtendedScope to ScopeFormValues, derivePanelVisibility to compute UI panel visibility by scopeType, and applyScopeTypeDefaults to reset fields based on scope type.
Scope Validation Schema admin-ui/plugins/auth-server/components/Scopes/helper/validations.ts	New module exporting getScopeValidationSchema function that returns Yup validation schema with required displayName and id fields (minimum 2 characters each) and custom required messages.
Type Definitions admin-ui/plugins/auth-server/components/Scopes/types/componentTypes.ts, admin-ui/plugins/auth-server/components/Scopes/types/formTypes.ts	Updated ScopeDetailPageProps.row type from Scope to ScopeWithClients. Enhanced ScopeFormValues with ExtendedScopeAttributes (replacing ScopeAttributes) and added optional action_message field. Extended UserActionPayload with index signature for arbitrary additional fields.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Form as ScopeForm
    participant Formik
    participant Modal as GluuCommitDialog
    
    User->>Form: Submit form
    Form->>Formik: Validate form values
    Formik-->>Form: Validation result
    
    rect rgb(200, 220, 240)
    Note over Form,Modal: New confirm-on-submit flow
    Form->>Form: Build payload<br/>Store in pendingScope
    Form->>Modal: Open modal<br/>(show modifications)
    end
    
    User->>Modal: Confirm/Accept
    Modal->>Form: handleDialogAccept triggered
    Form->>Form: Augment payload<br/>with action_message
    Form->>Form: Call original submit
    
    rect rgb(220, 240, 220)
    Note over Form,User: Success path
    Form->>Form: Reset modal & state
    Form->>User: Navigate back
    end
    
    User->>Modal: Cancel/Decline
    Modal->>Form: Close modal
    Form->>Form: Reset pending state

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

• ScopeForm.tsx: Major architectural refactor with new modal workflow, derived state management, and significant Formik integration changes requiring careful validation of form flow and state handling
• Type system updates across multiple files: Changes to ScopeFormValues, ScopeDetailPageProps, and UserActionPayload affect downstream usage; ExtendedScopeAttributes vs ScopeAttributes distinction needs verification
• New utility functions: Helper functions for panel visibility and scope initialization require testing against various scope types (openid, dynamic, spontaneous, uma)
• ScopeListPage state type changes: item state type change from Scope to ScopeTableRow requires verification that all downstream operations are compatible

Possibly related PRs

• feat(admin): adding uniformity in cancel and back buttons present in SCIM & Jans Lock #2404: Introduces and standardizes GluuFormFooter component that is now integrated into ScopeForm, ensuring consistent footer behavior across admin UI forms
• feat(admin): adding uniformity in cancel and back buttons present in SERVICES #2411: Modifies GluuCommitDialog and GluuFormFooter button behavior, directly aligned with ScopeForm's new confirm-on-submit modal workflow
• fix(admin-ui): Use typescript generated client for Scopes pages  #2414: Modifies Scopes UI surface with related scope type updates and helper functions (useScopeActions, component types) that work in tandem with this refactor

Suggested labels

comp-admin-ui, kind-feature

Suggested reviewers

• duttarnab
• moabu

Poem

🐰 A scope form's tale of modal grace,
With validation schemas in their place,
Panel visibility now derived with care,
Confirm-on-submit floats through the air,
Formik types and helpers combine,
To make the UI shine! 🌟

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title describes adding uniformity to cancel and back buttons in Scopes, which aligns with the PR objectives describing consistent button behavior across forms, though the scope of changes extends significantly beyond just button uniformity.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch admin-ui-issue-2361-scopes

---

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

[faisalsiddique4400]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 562cc09 and f8360c0.

📒 Files selected for processing (6)

• admin-ui/plugins/auth-server/components/Scopes/ScopeForm.tsx (6 hunks)
• admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.tsx (6 hunks)
• admin-ui/plugins/auth-server/components/Scopes/helper/utils.ts (1 hunks)
• admin-ui/plugins/auth-server/components/Scopes/helper/validations.ts (1 hunks)
• admin-ui/plugins/auth-server/components/Scopes/types/componentTypes.ts (1 hunks)
• admin-ui/plugins/auth-server/components/Scopes/types/formTypes.ts (2 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2404
File: admin-ui/app/routes/Apps/Gluu/Gluuformfooter.tsx:70-77
Timestamp: 2025-11-03T08:47:33.943Z
Learning: In the admin-ui forms (Gluuformfooter component), the Back button should always navigate to '/home/dashboard' rather than using history-based navigation (navigate(-1)), as clarified by faisalsiddique4400 in PR #2404.

🪛 Biome (2.1.2)

admin-ui/plugins/auth-server/components/Scopes/ScopeForm.tsx

[error] 533-536: Static Elements should not be interactive.

To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

(lint/a11y/noStaticElementInteractions)

---

[error] 534-534: Use a button element instead of an a element.

Anchor elements should only be used for default sections or page navigation
Check this thorough explanation to better understand the context.

(lint/a11y/useValidAnchor)

---

[error] 582-585: Static Elements should not be interactive.

To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

(lint/a11y/noStaticElementInteractions)

---

[error] 583-583: Use a button element instead of an a element.

Anchor elements should only be used for default sections or page navigation
Check this thorough explanation to better understand the context.

(lint/a11y/useValidAnchor)

🔇 Additional comments (1)

admin-ui/plugins/auth-server/components/Scopes/ScopeForm.tsx (1)

155-161: Back navigation must target dashboard

Product guidance for admin UI forms requires the Back action to always navigate to /home/dashboard. Falling back to history-based navigation brings back the very inconsistency this PR is meant to eliminate. Please route directly to the dashboard instead.

-    if (window.history.length > 1) {
-      navigate(-1)
-    } else {
-      navigate('/auth-server/scopes')
-    }
+    navigate('/home/dashboard')

Based on learnings

⛔ Skipped due to learnings

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2418
File: admin-ui/plugins/user-management/components/UserForm.tsx:290-297
Timestamp: 2025-11-06T08:23:20.931Z
Learning: In the UserForm component (admin-ui/plugins/user-management/components/UserForm.tsx), the Back button should fall back to '/user/usersmanagement' when browser history is unavailable, not '/home/dashboard', as this keeps users in the user management context. This aligns with the new requirement that users should be redirected to the respective listing screen of the component rather than the dashboard.

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2404
File: admin-ui/app/routes/Apps/Gluu/Gluuformfooter.tsx:70-77
Timestamp: 2025-11-03T08:47:33.943Z
Learning: In the admin-ui forms (Gluuformfooter component), the Back button should always navigate to '/home/dashboard' rather than using history-based navigation (navigate(-1)), as clarified by faisalsiddique4400 in PR #2404.

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2415
File: admin-ui/plugins/auth-server/components/Ssa/SsaAddPage.tsx:148-153
Timestamp: 2025-11-05T19:57:35.134Z
Learning: In the SSA Add page (admin-ui/plugins/auth-server/components/Ssa/SsaAddPage.tsx), the Back button should fall back to '/auth-server/config/ssa' when browser history is unavailable, not '/home/dashboard', as this keeps users in the SSA management context.

Learnt from: kdhttps
Repo: GluuFederation/flex PR: 2378
File: admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx:93-104
Timestamp: 2025-11-07T12:55:26.222Z
Learning: In the Cedarling configuration feature (admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx), the sync role to scopes mappings operation depends on the `auiPolicyStoreUrl`. The backend fetches content from this URL and syncs roles based on the response. Therefore, the audit log for the sync operation should include the `auiPolicyStoreUrl` in its payload to provide proper audit context.