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

[faisalsiddique4400]

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

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:

• SMTP

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

• Bug Fixes

  • Enhanced form validation with improved error handling and field-level feedback on submit
  • Fixed form footer default behavior
  • Added real-time validation on form load

• New Features

  • Added test functionality for SMTP configuration verification

[coderabbitai]

📝 Walkthrough

Walkthrough

Two files updated: GluuFormFooter.tsx adds a default value for the disableBack prop, and SmtpForm.tsx replaces the footer component with new API, introduces client-side form validation on submit, enables validation on mount, and injects a test button section when enabled.

Changes

Cohort / File(s)	Summary
Form Footer Configuration admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx	Added explicit default value disableBack = false to function parameter destructuring
SMTP Form Updates admin-ui/plugins/smtp-management/components/SmtpManagement/SmtpForm.tsx	Replaced GluuCommitFooter with GluuFormFooter using new footer API; added async submit handler with client-side validation (calls formik.validateForm(), marks invalid fields as touched, shows error toast if validation fails); enabled validateOnMount: true in Formik config; conditionally renders test button section when testButtonEnabled is true; wired footer disable states to form validity and dirtiness

Sequence Diagram

sequenceDiagram
    actor User
    participant Form as SmtpForm
    participant Formik as Formik Instance
    participant Validation as Validator
    participant Toast as Toast Notifier
    participant API as SMTP API

    rect rgb(240, 248, 255)
        Note over Form,API: New Validation Flow
        User->>Form: Click Apply/Submit
        Form->>Formik: submitForm()
        Formik->>Validation: validateForm()
        alt Validation Errors
            Validation-->>Formik: errors object
            Formik->>Form: Mark fields as touched
            Form->>Toast: Show mandatory-fields error
            Toast-->>User: Display error message
            Note over Form: Submission aborted
        else Validation Success
            Validation-->>Formik: empty errors
            Formik->>Form: Proceed to submission
            Form->>API: toggle + submit SMTP config
            API-->>User: Success response
        end
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Focus areas:
  • Validation logic in the async submitForm handler (error handling flow, toast display, field touch logic)
  • Footer API migration and prop mapping between old and new component contracts
  • Test button conditional rendering and its interaction with the form lifecycle
  • Verify validateOnMount doesn't cause unexpected behavior on initial render

Possibly related PRs

• feat(admin): adding uniformity in cancel and back buttons present in Jans Lock #2405: Modifies form footer APIs and wires enable/disable states through form dirty/valid/isSubmitting state, directly paralleling the footer component swap and validation wiring in this PR.

Suggested reviewers

• syntrydy
• duttarnab

Poem

🐰 A form takes shape with validation's grace,
Defaults now clear, errors in their place,
Test buttons hop where they're meant to be,
The SMTP form dances wild and free! 🎭

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 pull request title 'feat(admin): adding uniformity in cancel and back buttons present in SMTP' accurately reflects the main objectives described in the PR. The changes involve replacing GluuCommitFooter with GluuFormFooter and implementing consistent behavior for Cancel, Back, and Apply buttons. However, the title focuses specifically on SMTP rather than the broader intent stated in the objectives (uniformity 'in all configuration forms including SMTP'), which represents a slight scope mismatch.

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 477a8f9 and c9bfbd9.

📒 Files selected for processing (2)

• admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx (1 hunks)
• admin-ui/plugins/smtp-management/components/SmtpManagement/SmtpForm.tsx (4 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.926Z
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.926Z

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.926Z
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

🔇 Additional comments (1)

admin-ui/app/routes/Apps/Gluu/GluuFormFooter.tsx (1)

49-64: Back button stays enabled by default

Defaulting disableBack to false keeps the Back button available for forms that rely on the footer’s built‑in navigation to /home/dashboard, matching the expectation we aligned on in PR #2404. No follow-up needed.
Based on learnings

---

_{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]

@faisalsiddique4400: I'll review the changes in this PR right away.

---

🧠 Learnings used

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.926Z
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.

✅ 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]

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

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