Skip to content

Feat: Settings page#88

Open
TatevikGr wants to merge 4 commits into
devfrom
settings
Open

Feat: Settings page#88
TatevikGr wants to merge 4 commits into
devfrom
settings

Conversation

@TatevikGr

@TatevikGr TatevikGr commented Jun 17, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • New Features
    • Added a new Settings page (/settings) with tabbed views for Configs, Admins, and Admin Attributes.
    • Configs: search, refresh, and per-key Save/Reset with inline success/error feedback.
    • Admins: full administrator management with loading/error states plus add/edit dialogs and delete confirmation.
    • Admin Attributes: introduced as a placeholder UI card.
  • Bug Fixes
    • Improved tab button sizing behavior in the bounces UI.
  • Chores
    • Updated the REST API client dependency.

Summary

Provide a general description of the code changes in your pull request …
were there any bugs you had fixed? If so, mention them. If these bugs have open
GitHub issues, be sure to tag them here as well, to keep the conversation
linked together.

Unit test

Are your changes covered with unit tests, and do they not break anything?

You can run the existing unit tests using this command:

vendor/bin/phpunit tests/

Code style

Have you checked that you code is well-documented and follows the PSR-2 coding
style?

You can check for this using this command:

vendor/bin/phpcs --standard=PSR2 src/ tests/

Other Information

If there's anything else that's important and relevant to your pull
request, mention that information here. This could include benchmarks,
or other information.

If you are updating any of the CHANGELOG files or are asked to update the
CHANGELOG files by reviewers, please add the CHANGELOG entry at the top of the file.

Thanks for contributing to phpList!

@TatevikGr TatevikGr changed the base branch from main to dev June 17, 2026 11:36
@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

A complete Settings page is added across backend and frontend. The Symfony SettingsController handles GET /settings and renders the SPA template with auth token and API base URL. The Vue router gains a /settings route pointing to SettingsView, which wraps SettingsActionsPanel inside AdminLayout. SettingsActionsPanel manages a three-tab UI (Configs, Admins, Admin Attributes) with the active tab initialized from and synced to the URL query. SettingsConfigs implements searchable config editing with save/reset via configClient. SettingsAdmins now fully implements administrator management with a responsive list, create modal, and edit modal, all wired to adminClient for CRUD operations. SettingsAdminAttributes remains a placeholder for future implementation. The REST API client dependency is bumped to expose ConfigClient and AdminClient.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ 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 'Feat: Settings page' is fully related to the main change—a new Settings page feature with routes, views, components, and backend controller.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch settings

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 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 `@assets/vue/components/settings/SettingsActionsPanel.vue`:
- Around line 15-18: Replace the deprecated Tailwind utility class
`flex-shrink-0` with the current Tailwind v4 convention `shrink-0` in the class
binding of the SettingsActionsPanel.vue component. The class is located in the
dynamic class attribute that changes based on the activeTab condition, so update
the static class string to use the new utility name for consistency with current
Tailwind standards.

In `@assets/vue/components/settings/SettingsConfigs.vue`:
- Around line 27-71: The SettingsConfigs.vue component has isLoading and error
state variables defined in the script but they are not rendered in the template,
causing users to see a misleading "No configuration keys found" message during
fetch failures or loading. Update the template section to add conditional
rendering that checks isLoading and error states before rendering the
configuration items grid. Add a loading indicator or message when isLoading is
true, display the error message when error is set, and only show the "No
configuration keys found" message when filtered.length is empty and there is no
loading or error state. Use v-if directives to control the visibility of these
different states in the appropriate order.
- Around line 40-44: The input element using v-model="edited[item.key]" lacks an
associated label, making it inaccessible to screen reader users. Add a label
element that explicitly identifies the configuration setting being edited.
Either wrap the input with a label element or add a separate label with a for
attribute pointing to an id on the input. The label text should reference
item.key or the setting name so users can identify which configuration value
they are editing.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 957e3370-b693-425a-90e6-9931b2c1cbf6

📥 Commits

Reviewing files that changed from the base of the PR and between 0f19688 and d31d73e.

📒 Files selected for processing (7)
  • assets/router/index.js
  • assets/vue/components/settings/SettingsActionsPanel.vue
  • assets/vue/components/settings/SettingsAdminAttributes.vue
  • assets/vue/components/settings/SettingsAdmins.vue
  • assets/vue/components/settings/SettingsConfigs.vue
  • assets/vue/views/SettingsView.vue
  • src/Controller/SettingsController.php

Comment thread assets/vue/components/settings/SettingsActionsPanel.vue Outdated
Comment thread assets/vue/components/settings/SettingsConfigs.vue
Comment thread assets/vue/components/settings/SettingsConfigs.vue

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@assets/vue/components/settings/SettingsAdmins.vue`:
- Around line 208-222: The confirmation dialog in the handleDelete function
references admin.login_name, but the admin object uses camelCase properties as
evidenced by the template usage of admin.loginName. Change the property
reference from admin.login_name to admin.loginName in the window.confirm message
to ensure the confirmation dialog displays the actual administrator login name
instead of undefined.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c8984b02-b139-45f8-b66f-6d49d1e8ae26

📥 Commits

Reviewing files that changed from the base of the PR and between d31d73e and 4bac561.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (10)
  • assets/vue/api.js
  • assets/vue/components/bounces/BouncesActionsPanel.vue
  • assets/vue/components/settings/CreateAdminModal.vue
  • assets/vue/components/settings/EditAdminModal.vue
  • assets/vue/components/settings/SettingsActionsPanel.vue
  • assets/vue/components/settings/SettingsAdminAttributes.vue
  • assets/vue/components/settings/SettingsAdmins.vue
  • assets/vue/components/settings/SettingsConfigs.vue
  • assets/vue/views/SettingsView.vue
  • package.json
✅ Files skipped from review due to trivial changes (2)
  • assets/vue/components/bounces/BouncesActionsPanel.vue
  • assets/vue/views/SettingsView.vue
🚧 Files skipped from review as they are similar to previous changes (2)
  • assets/vue/components/settings/SettingsAdminAttributes.vue
  • assets/vue/components/settings/SettingsActionsPanel.vue

Comment thread assets/vue/components/settings/SettingsAdmins.vue

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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 `@assets/vue/components/settings/EditAdminModal.vue`:
- Around line 17-18: The close button in EditAdminModal.vue contains only an SVG
icon without a text label or aria-label, making it inaccessible to screen
readers. Add an aria-label attribute to the button element that triggers the
close method to provide an accessible name. The button should have aria-label
set to a descriptive value like "Close" so assistive technology users can
understand the button's purpose.
- Around line 211-218: The watch function currently only observes the isOpen
prop, causing the form to retain stale values when a different admin is selected
while the modal is already open. Modify the watch function to observe both
props.isOpen and props.admin as dependencies, and ensure resetForm() is called
whenever either the modal opens (isOpen becomes true) or the admin selection
changes, preventing stale data from being submitted for the wrong admin.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 90cc9b2e-5936-44e2-92b5-f1b9230d5f2f

📥 Commits

Reviewing files that changed from the base of the PR and between 4bac561 and bccb908.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (4)
  • assets/vue/components/settings/CreateAdminModal.vue
  • assets/vue/components/settings/EditAdminModal.vue
  • assets/vue/components/settings/SettingsAdmins.vue
  • package.json
🚧 Files skipped from review as they are similar to previous changes (3)
  • package.json
  • assets/vue/components/settings/SettingsAdmins.vue
  • assets/vue/components/settings/CreateAdminModal.vue

Comment on lines +17 to +18
<button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add an accessible name to the icon-only close button.

Screen readers currently get no explicit label for this control. Add aria-label so keyboard/assistive users can reliably close the modal.

Suggested fix
-<button type="button" class="text-slate-400 hover:text-slate-500" `@click`="close">
+<button
+  type="button"
+  aria-label="Close edit administrator modal"
+  class="text-slate-400 hover:text-slate-500"
+  `@click`="close"
+>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
<button
type="button"
aria-label="Close edit administrator modal"
class="text-slate-400 hover:text-slate-500"
`@click`="close"
>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
🤖 Prompt for 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.

In `@assets/vue/components/settings/EditAdminModal.vue` around lines 17 - 18, The
close button in EditAdminModal.vue contains only an SVG icon without a text
label or aria-label, making it inaccessible to screen readers. Add an aria-label
attribute to the button element that triggers the close method to provide an
accessible name. The button should have aria-label set to a descriptive value
like "Close" so assistive technology users can understand the button's purpose.

Comment on lines +211 to +218
watch(
() => props.isOpen,
(isOpen) => {
if (isOpen) {
resetForm()
}
}
)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Watch admin changes too, not just isOpen.

Right now the form only resets when isOpen flips to true. If the selected admin changes while the modal is already open, stale values can be submitted for the wrong admin. Please sync on admin identity changes as well.

Suggested fix
-watch(
-  () => props.isOpen,
-  (isOpen) => {
-    if (isOpen) {
-      resetForm()
-    }
-  }
-)
+watch(
+  () => [props.isOpen, props.admin?.id],
+  ([isOpen]) => {
+    if (isOpen) {
+      resetForm()
+    }
+  }
+)
🤖 Prompt for 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.

In `@assets/vue/components/settings/EditAdminModal.vue` around lines 211 - 218,
The watch function currently only observes the isOpen prop, causing the form to
retain stale values when a different admin is selected while the modal is
already open. Modify the watch function to observe both props.isOpen and
props.admin as dependencies, and ensure resetForm() is called whenever either
the modal opens (isOpen becomes true) or the admin selection changes, preventing
stale data from being submitted for the wrong admin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants