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

[faisalsiddique4400]

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

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:

• Logging

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

  • New validation schemas and initial-value helpers for logging and SSA forms.
  • Debounced search for SSA attributes to improve attribute lookup responsiveness.

• Improvements

  • Required-field indicators and inline error messages on forms.
  • Footer actions unified with enhanced form footer (Back/Cancel/Apply), loading and validity feedback, and customizable back icon.
  • Better form initialization, synchronization, expiration handling, and standardized logging options.

• UX

  • Modal close now uses the unified form footer for consistent behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

Integrates Formik/Yup validation into LoggingPage, replaces GluuCommitFooter with GluuFormFooter across multiple dialogs/forms, adds logging and SSA utility initializers and validation schemas, introduces constants for logging levels/layouts, and adds debounced search and date-to-epoch utility for SSA.

Changes

Cohort / File(s)	Change Summary
Logging UI & Validation admin-ui/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js, admin-ui/plugins/auth-server/components/Configuration/Defaults/validations.js, admin-ui/plugins/auth-server/components/Configuration/Defaults/utils.js	LoggingPage: swapped GluuCommitFooter → GluuFormFooter; wired Formik with loggingValidationSchema, enableReinitialize, validateOnMount; added required indicators, onBlur touch handling, per-field errors, centralized logging state usage, LOG_LEVELS/LOG_LAYOUTS select options, and commit-dialog toggle. New validations.js: Yup loggingValidationSchema. utils.js: LOG_LEVELS, LOG_LAYOUTS, getLoggingInitialValues.
Form Footer API admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx	Added optional backIconClass?: string prop and default value; back button now uses backIconClass for its icon rendering.
JSON Viewer Dialog admin-ui/plugins/auth-server/components/JsonViewer/JsonViewerDialog.js	Replaced inline modal close button with GluuFormFooter (showBack enabled) and wired its back action to dialog toggle; updated imports accordingly.
SSA Form: utilities, validation, and UX admin-ui/plugins/auth-server/components/Ssa/SsaAddPage.js, admin-ui/plugins/auth-server/components/Ssa/utils.js, admin-ui/plugins/auth-server/components/Ssa/validations.js	SsaAddPage: switched to external ssaValidationSchema and getSsaInitialValues; added debounced filteredQuery via useRef with cleanup; replaced GluuCommitFooter → GluuFormFooter with expanded controls (Back/Cancel/Apply) and form reset on cancel; added required flags, expirable toggle behavior, and toEpochSecondsFromDayjs usage for expiration. utils.js: added getSsaInitialValues and toEpochSecondsFromDayjs. validations.js: new Yup ssaValidationSchema.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Component
    participant Formik
    participant YupSchema
    participant GluuFormFooter

    User->>Component: Mount / open dialog
    Component->>Formik: init with get*InitialValues()
    Formik->>YupSchema: attach validationSchema (validateOnMount)

    User->>Component: Edit field
    Component->>Formik: setFieldValue / onBlur -> markTouched
    Formik->>YupSchema: validate field
    alt valid
        Formik->>Component: clear error
    else invalid
        Formik->>Component: show error message
    end

    User->>GluuFormFooter: Click Apply/Cancel/Back
    GluuFormFooter->>Formik: submit / reset / navigate
    Formik->>YupSchema: final validate
    Formik->>Component: submit result -> update centralized state

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Pay attention to Formik integration and validateOnMount behavior in LoggingPage and SsaAddPage.
• Verify Yup schemas align with model fields and select option constants.
• Confirm debounced search cleanup and epoch conversion handle edge cases.

Possibly related PRs

• feat(admin): adding uniformity in cancel and back buttons present in SCIM & Jans Lock #2404 — Similar migration from GluuCommitFooter to GluuFormFooter across forms.
• feat(admin): adding uniformity in cancel and back buttons present in SERVICES #2411 — Unifies Back/Cancel/Apply footer logic; overlaps with footer behavior changes here.
• feat(admin): adding uniformity in cancel and back buttons present in SMTP #2410 — Updates GluuFormFooter API/usage; relevant to added backIconClass prop and new footer wiring.

Suggested labels

comp-admin-ui, kind-feature

Suggested reviewers

• syntrydy
• duttarnab

Poem

🐇 I hopped through fields and schemas bright,
Formik held my forms just right.
Yup checks tails with gentle care,
Footers swapped to take me there.
Logs and SSAs now snug as a hare. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references adding uniformity to cancel and back buttons in Logging, which is a real aspect of the changeset, but the PR encompasses much broader changes beyond just button uniformity, including Formik validation integration, form state management, and utility functions across multiple modules.

✨ 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-logging

---

_{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: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b17c0a3 and ddec89f.

📒 Files selected for processing (3)

• admin-ui/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js (12 hunks)
• admin-ui/plugins/auth-server/components/Configuration/Defaults/utils.js (1 hunks)
• admin-ui/plugins/auth-server/components/Configuration/Defaults/validations.js (1 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.

🔇 Additional comments (11)

admin-ui/plugins/auth-server/components/Configuration/Defaults/utils.js (2)

1-2: LGTM! Constants are well-defined.

The log level and layout constants are appropriately defined and will provide consistent values across validation and UI components.

---

4-10: LGTM! Safe and clean initial values extraction.

The function correctly uses optional chaining to safely extract initial form values from the logging configuration object, preventing errors when logging is null or undefined.

admin-ui/plugins/auth-server/components/Configuration/Defaults/validations.js (1)

1-10: LGTM! Comprehensive validation schema.

The Yup validation schema correctly enforces:

• Required fields with appropriate constraints (oneOf for log levels and layouts)
• Clear error messages for validation failures
• Optional boolean toggles

This will provide robust form validation aligned with the logging configuration requirements.

admin-ui/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js (8)

7-10: LGTM! Imports align with the refactoring.

The new imports for validation schema, utilities, and GluuFormFooter correctly support the centralized form management approach and standardized button behavior described in the PR objectives.

---

35-35: LGTM! Well-optimized toggle callback.

The useCallback with an empty dependency array and the functional setState pattern ensures a stable reference and correct state updates.

---

54-63: LGTM! Submit handler correctly prepares commit data.

The handler appropriately merges values, identifies changed fields, and triggers the commit dialog flow. The dependency array correctly includes logging.

---

91-97: LGTM! Formik configuration is well-structured.

The configuration correctly:

• Enables reinitialization to sync with updated logging state
• Validates on mount to catch initial validation errors
• Integrates the centralized validation schema

This ensures a robust form state management implementation.

---

106-130: LGTM! Excellent validation UX and accessibility enhancements.

The field now includes:

• Visual required indicator for users
• Touch-based validation feedback via onBlur
• Proper ARIA attributes for screen readers
• Clear error message display

These changes significantly improve the form's usability and accessibility.

---

139-163: LGTM! Consistent validation pattern applied.

The loggingLayout field correctly mirrors the validation and accessibility enhancements applied to loggingLevel, ensuring a consistent user experience across required fields.

---

219-219: LGTM! Using the memoized toggle callback.

The commit dialog handler now uses the memoized toggleCommitDialog callback, which is cleaner and prevents unnecessary re-renders.

---

199-210: Back button navigation is correctly implemented.

Verification confirms that GluuFormFooter navigates to /home/dashboard when the Back button is clicked, since no onBack prop is provided. The implementation matches the learnings requirement.

[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: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ddec89f and 2522984.

📒 Files selected for processing (5)

• admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx (3 hunks)
• admin-ui/plugins/auth-server/components/JsonViewer/JsonViewerDialog.js (2 hunks)
• admin-ui/plugins/auth-server/components/Ssa/SsaAddPage.js (13 hunks)
• admin-ui/plugins/auth-server/components/Ssa/utils.js (1 hunks)
• admin-ui/plugins/auth-server/components/Ssa/validations.js (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 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.

📚 Learning: 2025-11-03T08:47:33.943Z

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.

Applied to files:

• admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx
• admin-ui/plugins/auth-server/components/JsonViewer/JsonViewerDialog.js
• admin-ui/plugins/auth-server/components/Ssa/SsaAddPage.js