Skip to content

mobile: widgets page, AI panel, sidebar polish + quick-filter chips #1822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karinakharchenko wants to merge 13 commits into
base: main
Choose a base branch
from
Open

mobile: widgets page, AI panel, sidebar polish + quick-filter chips #1822

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8cedb77
feat(mobile): inline quick-filter chips with horizontal scroll + pagi…
karinakharchenko Jun 2, 2026
0893e98
feat(mobile): widgets page, AI panel, sidebar polish + misc fixes
karinakharchenko Jun 2, 2026
78617cf
feat(mobile): audit feed view + sidebar/AI panel polish
karinakharchenko Jun 2, 2026
f7d0979
feat(mobile): permissions dialog as bottom sheet + policy/empty-state…
karinakharchenko Jun 2, 2026
37cf40e
wip(auto-configure): scaffold streaming progress UI (awaiting backend)
karinakharchenko Jun 1, 2026
84f5b7c
feat(auto-configure): live humanized progress log + success summary
karinakharchenko Jun 2, 2026
aa15566
style(auto-configure): tighter card spacing and faded log overflow
karinakharchenko Jun 2, 2026
6a3079e
feat: add createdAt timestamp to email verification and password rese…
Artuomka Jun 2, 2026
bb8d0d7
increase css maximum budget
lyubov-voloshko Jun 3, 2026
bd40f6b
add throttle decorator to getCompanyNameById endpoint
Artuomka Jun 3, 2026
de3b4a2
add validation for read-only MongoDB aggregation pipelines in checkMo…
Artuomka Jun 3, 2026
c2a46f8
connection settings mobile version: fix colors inputs
lyubov-voloshko Jun 3, 2026
e9366ae
permissions: update users names and email styling
lyubov-voloshko Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 29 additions & 3 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,34 @@
width: 60vw;
}

.main-menu-sidenav .account-section-item {
--mdc-list-list-item-label-text-size: 13px;
--mat-list-list-item-leading-icon-size: 18px;
--mdc-list-list-item-one-line-container-height: 40px;
--mdc-list-list-item-two-line-container-height: 52px;
}

.main-menu-sidenav .account-section-item .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}

@media (width <= 600px) {
.main-menu-sidenav.mat-drawer {
top: 44px !important;
height: calc(100vh - 44px) !important;
}

.main-menu-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
top: 44px !important;
}
Comment on lines +44 to +46

@coderabbitai coderabbitai Bot Jun 2, 2026

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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Show the referenced snippet with line numbers
echo "=== app.component.css: lines around 44-46 ==="
nl -ba frontend/src/app/app.component.css | sed -n '35,60p'

# Confirm how many ::ng-deep occurrences exist in this file
echo "=== Count of ::ng-deep in app.component.css ==="
rg -n "::ng-deep" frontend/src/app/app.component.css || true

# Find all occurrences of ::ng-deep in the frontend (to see if there’s an established pattern)
echo "=== Count of ::ng-deep in frontend ==="
rg -n "::ng-deep" frontend | head -n 50 || true

# Locate Stylelint config files (common locations)
echo "=== Locate stylelint config ==="
ls -la | rg -n "stylelint|\.stylelintrc|stylelint\.json|\.stylelint" || true
find . -maxdepth 4 -type f \( -iname "*stylelint*" -o -iname ".stylelintrc*" -o -iname "*.stylelintrc*" \) | head -n 50 || true

# Print likely stylelint config contents if small; otherwise just grep relevant rules
echo "=== Search stylelint config for ng-deep / deep selectors / unknown pseudo-element ==="
CONFIGS=$(find . -maxdepth 6 -type f \( -iname "*stylelint*" -o -iname ".stylelintrc*" -o -iname "*.stylelintrc*" \) 2>/dev/null | tr '\n' ' ')
if [ -z "${CONFIGS// /}" ]; then
  echo "No stylelint config files found within depth."
else
  # Grep for deep selectors or pseudo-element related rules
  rg -n "ng-deep|::ng-deep|deep\s+selector|pseudo-element|unknown" -S $CONFIGS || true
fi

Repository: rocket-admin/rocketadmin

Length of output: 175

🏁 Script executed:

#!/bin/bash
set -u

FILE="frontend/src/app/app.component.css"

echo "=== app.component.css: lines around 44-46 ==="
python3 - <<'PY'
import itertools
path="frontend/src/app/app.component.css"
start=35
end=60
for i,line in enumerate(open(path,'r',encoding='utf-8',errors='ignore'), start=1):
    if start <= i <= end:
        print(f"{i:4d} {line.rstrip()}")
    if i > end:
        break
PY

echo "=== Count of ::ng-deep in app.component.css ==="
rg -n "::ng-deep" "$FILE" || true

echo "=== Search stylelint config files (shallow) ==="
find . -maxdepth 6 -type f \( -iname "*stylelint*" -o -iname ".stylelintrc*" -o -iname "*.stylelintrc*" \) 2>/dev/null | head -n 50 || true

echo "=== Search stylelint configs for ::ng-deep / deep selector rules ==="
CONFIGS="$(find . -maxdepth 6 -type f \( -iname "*stylelint*" -o -iname ".stylelintrc*" -o -iname "*.stylelintrc*" \) 2>/dev/null)"
if [ -z "${CONFIGS}" ]; then
  echo "No stylelint config files found within depth."
else
  # Grep (via rg) across configs only
  echo "$CONFIGS" | tr ' ' '\n' | xargs -I{} sh -c 'rg -n "ng-deep|::ng-deep|deep selector|pseudo-element|selector-pseudo-element-no-unknown" "{}" || true' | head -n 80
fi

Repository: rocket-admin/rocketadmin

Length of output: 1145

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="frontend/src/app/app.component.css"

echo "=== Git diff for app.component.css (if available) ==="
git diff --stat -- "$FILE" || true
git diff -- "$FILE" | sed -n '1,160p' || true

echo "=== Show .stylelintrc.json ==="
cat .stylelintrc.json

echo "=== Stylelint rules related to pseudo-elements/unknown selectors ==="
rg -n "selector-pseudo-element-no-unknown|selector-pseudo-element-colon-notation|pseudo-element|ng-deep|::ng-deep" .stylelintrc.json || true

echo "=== Search other stylelint configs referencing pseudo-element rules ==="
rg -n "selector-pseudo-element-no-unknown|selector-pseudo-element-colon-notation|pseudo-element" -S . || true

echo "=== Count occurrences of ::ng-deep in the repo and list files ==="
rg -n "::ng-deep" frontend | cut -d: -f1 | sort -u

Repository: rocket-admin/rocketadmin

Length of output: 6033

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Search for Stylelint config overrides/suppressions
rg -n "selector-pseudo-element-no-unknown|selector-pseudo-element-colon-notation|stylelint.*ng-deep|ng-deep.*stylelint" -S . || true

# Check how Stylelint is invoked (CI scripts / package.json)
if [ -f package.json ]; then
  cat package.json | rg -n "\"stylelint\"|lint|styles" -n || true
fi

# Find likely stylelint config usage (common paths)
find . -maxdepth 4 -type f \( -iname "*lint*" -o -iname "*stylelint*" \) | head -n 50 || true

# Show any additional stylelint configs if present
find . -type f \( -iname ".stylelintrc*" -o -iname "*stylelint*.json" -o -iname "*stylelint*.rc*" \) 2>/dev/null | head -n 50 || true

Repository: rocket-admin/rocketadmin

Length of output: 208

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Root package.json scripts (stylelint-related) ==="
if [ -f package.json ]; then
  python3 - <<'PY'
import json
p="package.json"
with open(p,'r',encoding='utf-8') as f: d=json.load(f)
scripts=d.get("scripts",{})
for k,v in scripts.items():
    if "stylelint" in k.lower() or "stylelint" in str(v).lower():
        print(k,":",v)
PY
else
  echo "No root package.json"
fi

echo "=== Frontend package.json scripts (stylelint-related) ==="
if [ -f frontend/package.json ]; then
  python3 - <<'PY'
import json, pathlib
p="frontend/package.json"
with open(p,'r',encoding='utf-8') as f: d=json.load(f)
scripts=d.get("scripts",{})
for k,v in scripts.items():
    if "stylelint" in k.lower() or "stylelint" in str(v).lower():
        print(k,":",v)
PY
else
  echo "No frontend/package.json"
fi

echo "=== Repo-wide: where stylelint is referenced ==="
rg -n "stylelint" -S package.json frontend/package.json . || true

Repository: rocket-admin/rocketadmin

Length of output: 229

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Repo-wide search for 'stylelint' (all files) ==="
rg -n "stylelint" -S . || true

echo "=== Search CI/workflows for stylelint ==="
find . -maxdepth 4 -type f \( -path "./.github/*" -o -path "./.gitlab/*" \) -print | head -n 200 || true
rg -n "stylelint" -S .github .gitlab 2>/dev/null || true

echo "=== Frontend package.json contents (to confirm scripts) ==="
ls -la frontend/package.json || true
sed -n '1,120p' frontend/package.json 2>/dev/null || true

echo "=== Root package.json contents (to confirm scripts) ==="
ls -la package.json || true
sed -n '1,120p' package.json 2>/dev/null || true

echo "=== Any lint-staged / precommit configs referencing stylelint ==="
ls -la | rg -n "lintstaged|husky|precommit|commitlint|lefthook|prettier|stylelint" || true
find . -maxdepth 3 -type f \( -iname "*husky*" -o -iname "*lint-staged*" -o -iname "*lefthook*" -o -iname "*pre-commit*" -o -iname "*lintstaged*" \) -print 2>/dev/null || true
rg -n "stylelint" -S .husky* .lintstaged* .lintstagedrc* .pre-commit* .lefthook* 2>/dev/null || true

Repository: rocket-admin/rocketadmin

Length of output: 5357

🌐 Web query:

stylelint-config-standard-scss selector-pseudo-element-no-unknown default enabled

💡 Result:

The rule selector-pseudo-element-no-unknown is enabled by default in stylelint-config-standard-scss [1][2]. This is because stylelint-config-standard-scss extends the standard Stylelint configuration (stylelint-config-standard), which includes core Stylelint rules such as selector-pseudo-element-no-unknown to enforce standard CSS practices [1][3][2]. If this rule causes issues in your project (for example, by flagging valid SCSS-specific selectors or non-standard vendor-prefixed pseudo-elements), you can disable or customize it by adding it to the rules section of your Stylelint configuration file [1][4][3]. Example of how to disable the rule: { "extends": "stylelint-config-standard-scss", "rules": { "selector-pseudo-element-no-unknown": null } } Example of how to allow specific pseudo-elements: { "extends": "stylelint-config-standard-scss", "rules": { "selector-pseudo-element-no-unknown": [true, { "ignorePseudoElements": ["your-custom-pseudo-element"] }] } }

Citations:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== .husky/pre-commit ==="
if [ -f .husky/pre-commit ]; then
  cat .husky/pre-commit
else
  echo "Missing .husky/pre-commit"
fi

echo "=== Find stylelint usage in GitHub workflows ==="
rg -n "stylelint|ng lint|lint:" .github/workflows -S || true

echo "=== Show likely front-end quality workflow files ==="
for f in .github/workflows/frontend.yml .github/workflows/code-quality.yml .github/workflows/build.yml .github/workflows/build-agent.yml; do
  if [ -f "$f" ]; then
    echo "---- $f ----"
    sed -n '1,220p' "$f"
  fi
done

Repository: rocket-admin/rocketadmin

Length of output: 12806

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check whether stylelint is a declared dependency anywhere
echo "=== Search for stylelint in package manifests ==="
rg -n "\"stylelint\"|stylelint-config|stylelint-" package.json frontend/package.json .github/workflows -S || true

echo "=== Search for stylelint in pnpm/lockfiles ==="
ls -ლა | rg -i "pnpm-lock|yarn-lock|package-lock" || true
find . -maxdepth 3 -type f \( -iname "*pnpm-lock*.yaml" -o -iname "*yarn.lock" -o -iname "*package-lock*.json" \) | head -n 20 | while read -r f; do
  echo "--- $f ---"
  rg -n "stylelint" "$f" -S || true
done

# Inspect Angular lint config (if any) for stylelint usage
echo "=== Inspect Angular workspace config ==="
if [ -f frontend/angular.json ]; then
  sed -n '1,200p' frontend/angular.json
  rg -n "stylelint|lintOptions|style" frontend/angular.json -S || true
fi
if [ -f frontend/.angular-cli.json ]; then
  cat frontend/.angular-cli.json
fi

Repository: rocket-admin/rocketadmin

Length of output: 6299

Remove ::ng-deep from frontend/src/app/app.component.css (lines 44-46)

::ng-deep in the backdrop override (.main-menu-container ::ng-deep .mat-drawer-backdrop...) will be flagged by Stylelint because .stylelintrc.json extends stylelint-config-standard-scss without disabling selector-pseudo-element-no-unknown. Move this backdrop override to a global stylesheet (or otherwise apply it outside view encapsulation) to avoid deep selectors.

🧰 Tools
🪛 Stylelint (17.12.0)

[error] 44-44: Unknown pseudo-element selector "::ng-deep" (selector-pseudo-element-no-unknown)

(selector-pseudo-element-no-unknown)

🤖 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 `@frontend/src/app/app.component.css` around lines 44 - 46, Remove the deep
selector from the component stylesheet: delete the ::ng-deep token from the rule
in .main-menu-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown and move
that selector (without ::ng-deep) into your global stylesheet so it applies
outside Angular view encapsulation; keep the rule body (top: 44px !important;)
and ensure the selector is exactly .main-menu-container
.mat-drawer-backdrop.mat-drawer-shown in the global styles to avoid stylelint
error (do not disable the lint rule).


.main-menu-sidenav mat-toolbar {
display: none !important;
}
}

.nav-bar {
position: sticky;
top: 0;
Expand Down Expand Up @@ -218,8 +246,6 @@
display: flex;
flex-direction: column;
align-items: flex-start;
border-top: var(--mat-table-row-item-outline-width, 1px) solid
var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
border-bottom: var(--mat-table-row-item-outline-width, 1px) solid
var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
margin-left: 8px;
Expand All @@ -243,7 +269,7 @@
}

.connection-navigation__upgrade-button {
margin-top: 8px;
margin-top: -12px;
margin-left: 8px;
width: calc(100% - 16px);
}
Expand Down
34 changes: 24 additions & 10 deletions frontend/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
class="main-menu-sidenav"
>
<mat-toolbar>Rocketadmin</mat-toolbar>
<mat-nav-list *ngIf="userLoggedIn === true">
<a mat-list-item routerLink="/connections-list"
<mat-nav-list *ngIf="userLoggedIn === true" (click)="drawer.close()">
<a *ngIf="!connectionID" mat-list-item routerLink="/connections-list"
routerLinkActive="nav-bar__button_active"
aria-label="List of connections">
<mat-icon matListItemIcon class="connection-navigation__icon">
Expand All @@ -21,7 +21,7 @@
{{navigationTabs[tab].caption}}
</a>
</mat-nav-list>
<a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user" data-testid="account-link-account-menu">
<a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user account-section-item" data-testid="account-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon connection-navigation__icon_account"
matBadge="1" [matBadgeHidden]="currentUser.isActive"
matBadgeColor="accent" matBadgeSize="small">
Expand All @@ -30,35 +30,44 @@
<div matListItemTitle>Account</div>
<div matListItemLine>{{currentUser.email}}</div>
</a>
<a mat-list-item routerLink="/company" data-testid="company-link-account-menu">
<a mat-list-item routerLink="/company" class="account-section-item" data-testid="company-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">
apartment
</mat-icon>
<div matListItemTitle>Company</div>
</a>
<a mat-list-item routerLink="/secrets" data-testid="secrets-link-account-menu">
<a mat-list-item routerLink="/hosted-databases"
routerLinkActive="nav-bar__button_active"
aria-label="Hosted databases">
<mat-icon matListItemIcon fontSet="material-symbols-outlined" class="connection-navigation__icon">
database
</mat-icon>
<div matListItemTitle>Hosted databases</div>
</a>
Comment on lines +39 to +46

@coderabbitai coderabbitai Bot Jun 2, 2026

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

Finish wiring the new Hosted databases entry across both account menus.

This adds the route in the mobile sidenav, but the desktop #accountMenu in this same template still jumps from Company straight to Secrets, so desktop users never see the new destination. Also, this anchor is the only new account-row item here without account-section-item, which means the compact sizing added in app.component.css will not apply to it.

🤖 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 `@frontend/src/app/app.component.html` around lines 39 - 46, The desktop
account menu (`#accountMenu`) is missing the new Hosted databases router entry and
the anchor lacks the account-section-item class; add an <a> element with
routerLink="/hosted-databases" and routerLinkActive="nav-bar__button_active"
into the `#accountMenu` account rows (placing it between the Company and Secrets
items to match mobile sidenav order) and ensure the anchor includes the
account-section-item class so the compact sizing in app.component.css applies;
update the existing anchor (the one already added to the mobile sidenav) or
duplicate its attributes (including mat-list-item, aria-label="Hosted
databases", mat-icon and matListItemTitle) into the `#accountMenu` markup.

<a mat-list-item routerLink="/secrets" class="account-section-item" data-testid="secrets-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">
key
</mat-icon>
<div matListItemTitle>Secrets</div>
</a>
<a mat-list-item *ngIf="isSaas" routerLink="/zapier" data-testid="zapier-link-account-menu">
<a mat-list-item *ngIf="isSaas" routerLink="/zapier" class="account-section-item" data-testid="zapier-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">
electric_bolt
</mat-icon>
<div matListItemTitle>Zapier</div>
</a>
<a mat-list-item href="https://docs.rocketadmin.com/" target="_blank">
<a mat-list-item class="account-section-item" href="https://docs.rocketadmin.com/" target="_blank">

@coderabbitai coderabbitai Bot Jun 2, 2026

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 rel="noopener noreferrer" to the external Help center link.

Opening a new tab with target="_blank" without rel leaves window.opener exposed unnecessarily.

Suggested fix 
-            <a mat-list-item class="account-section-item" href="https://docs.rocketadmin.com/" target="_blank">
+            <a
+                mat-list-item
+                class="account-section-item"
+                href="https://docs.rocketadmin.com/"
+                target="_blank"
+                rel="noopener noreferrer">
📝 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
<a mat-list-item class="account-section-item" href="https://docs.rocketadmin.com/" target="_blank">
<a
mat-list-item
class="account-section-item"
href="https://docs.rocketadmin.com/"
target="_blank"
rel="noopener noreferrer">
🤖 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 `@frontend/src/app/app.component.html` at line 59, The external Help center
anchor element with class "account-section-item" that uses target="_blank"
should include rel="noopener noreferrer" to prevent exposing window.opener;
update the <a> element (the anchor with href="https://docs.rocketadmin.com/" and
class "account-section-item") to add rel="noopener noreferrer" alongside the
existing target attribute.

<mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-symbols-outlined">help</mat-icon>
<div matListItemTitle>Help center</div>
</a>
<mat-list-item (click)="logOut()" data-testid="logout-button-account-menu">
<mat-list-item class="account-section-item" (click)="logOut()" data-testid="logout-button-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
<div matListItemTitle>Log out</div>
</mat-list-item>
Comment on lines +63 to 66

@coderabbitai coderabbitai Bot Jun 2, 2026

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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Show the referenced region with line numbers
sed -n '40,90p' frontend/src/app/app.component.html | nl -ba | sed -n '1,120p'

# 2) Search for the logout handler usage
rg -n "logOut\\(" frontend/src/app/app.component.html frontend/src/app -S || true

# 3) Find other mat-list-item + click patterns for keyboard/a11y precedents
rg -n "mat-list-item\\b[^\\n]*\\(click\\)" frontend/src/app -S || true

# 4) Check whether mat-list-item is used as a button anywhere else
rg -n "<button[^>]*\\bmat-list-item\\b|\\bmat-list-item\\b[^\\n]*routerLink|mat-list-item\\b[^\\n]*href" frontend/src/app -S || true

Repository: rocket-admin/rocketadmin

Length of output: 111

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Show referenced region with line numbers (avoid nl)
sed -n '55,80p' frontend/src/app/app.component.html | cat -n

# 2) Search for the logout handler usage
rg -n "logOut\\(" frontend/src/app/app.component.html frontend/src/app -S || true

# 3) Find mat-list-item + click patterns for accessibility precedent
rg -n "mat-list-item\\b[^\\n]*\\(click\\)" frontend/src/app -S || true

# 4) Check for any existing pattern of using a real button with mat-list-item in this repo
rg -n "<button[^>]*\\bmat-list-item\\b|mat-list-item\\b[^\\n]*\\brole=\\\"button\\\"|mat-list-item\\b[^\\n]*\\btabindex=" frontend/src/app -S || true

Repository: rocket-admin/rocketadmin

Length of output: 3280

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# A) Show the logout list-item region precisely
sed -n '55,75p' frontend/src/app/app.component.html | cat -n

# B) Show the other logout button usage near line ~222
sed -n '205,235p' frontend/src/app/app.component.html | cat -n

# C) Find all mat-list-item elements with (click)=
rg -n "mat-list-item\\b[^>]*\\(click\\)=" frontend/src/app -S || true

# D) Find whether repo already uses <button ... mat-list-item ...>
rg -n "<button[^>]*\\bmat-list-item\\b" frontend/src/app -S || true

# E) Find other mat-list-item usages to see intended pattern (a vs button vs bare mat-list-item)
rg -n "mat-list-item\\b" frontend/src/app -S | head -n 80

Repository: rocket-admin/rocketadmin

Length of output: 8002

Use a real button for the “Log out” row (account menu)

In frontend/src/app/app.component.html, the logout entry uses (click) on a bare <mat-list-item>, which doesn’t provide native button semantics or keyboard interaction. The repo already uses real buttons with mat-list-item elsewhere, and this page already uses a real <button> for the logout inside the mat-menu.

<mat-list-item class="account-section-item" (click)="logOut()" data-testid="logout-button-account-menu">
    <mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
    <div matListItemTitle>Log out</div>
</mat-list-item>
Suggested fix 
-            <mat-list-item class="account-section-item" (click)="logOut()" data-testid="logout-button-account-menu">
+            <button type="button" mat-list-item class="account-section-item" (click)="logOut()" data-testid="logout-button-account-menu">
                 <mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
                 <div matListItemTitle>Log out</div>
-            </mat-list-item>
+            </button>
🤖 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 `@frontend/src/app/app.component.html` around lines 63 - 66, Replace the
clickable plain mat-list-item with a real button element to restore native
button semantics and keyboard interaction: locate the logout entry using the
account-section-item class and data-testid "logout-button-account-menu" and
change it to a button with the mat-list-item attribute, keep the existing
(click)="logOut()" handler and the child mat-icon and title, and ensure the
button has type="button" and any existing testid/aria attributes preserved so
behavior and tests remain the same.

</mat-nav-list>
<a mat-flat-button color="accent" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'" class="connection-navigation__upgrade-button" routerLink="/upgrade"
routerLinkActive="nav-bar__button_active">
routerLinkActive="nav-bar__button_active"
(click)="drawer.close()">
Upgrade
</a>
</mat-sidenav>
Expand Down Expand Up @@ -88,7 +97,7 @@
class="logo__image">
<ng-template #defaultRocketLogo>
<picture>
<source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
<source *ngIf="connectionID" media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
<img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
</picture>
</ng-template>
Expand Down Expand Up @@ -125,6 +134,11 @@
[ngClass]="{'connection_active': connectionID === connection.connection.id}">
{{connection.displayTitle}}
</a>
<mat-divider></mat-divider>
<a mat-menu-item routerLink="/hosted-databases">
<mat-icon class="nav-menu__list-link-icon" fontSet="material-symbols-outlined">database</mat-icon>
<span>Hosted databases</span>
</a>
</ng-template>
</mat-menu>
<span *ngIf="isDemo" class="logo__demo-mark">demo</span>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
Expand Down Expand Up @@ -50,6 +51,7 @@ amplitude.getInstance().init('9afd282be91f94da735c11418d5ff4f5');
MatButtonModule,
MatBadgeModule,
MatMenuModule,
MatDividerModule,
MatTooltipModule,
Angulartics2OnModule,
FeatureNotificationComponent,
Expand Down
Loading
Loading