Skip to content

connections: surface Edit schema as a text row on each card #1788

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 1 commit into
base: main
Choose a base branch
from
Open

connections: surface Edit schema as a text row on each card #1788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
57 changes: 50 additions & 7 deletions frontend/src/app/components/connections-list/own-connections/own-connections.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@
.connection {
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
color: inherit;
Expand All @@ -283,7 +284,7 @@
}
}

.connection:hover {
.connection:has(.connectionLogoPreview:hover) {
border: 1px solid var(--color-primaryPalette-500);
box-shadow:
0px 4px 5px 0px rgba(0, 0, 0, 0.2),
Expand All @@ -292,7 +293,7 @@
}

@media (prefers-color-scheme: dark) {
.connection:hover {
.connection:has(.connectionLogoPreview:hover) {
border: 1px solid #636363;
}
}
Expand Down Expand Up @@ -333,16 +334,58 @@
width: 100%;
}

/* ── Schema button inside card ── */
/* ── Schema button row at the bottom of the card ── */

.connectionSchemaButton {
margin-left: auto;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.7);
position: relative;
align-self: stretch;
justify-content: center;
--mdc-text-button-label-text-color: color-mix(in srgb, var(--color-accentedPalette-500) 18%, #1f2937 82%);
color: var(--mdc-text-button-label-text-color) !important;
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 20, 2026

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

Fix stylelint declaration-empty-line-before violations.

Line 344 and Line 376 currently violate the configured stylelint rule and should be adjusted to keep lint clean.

Proposed lint-only formatting fix 
 .connectionSchemaButton {
 	position: relative;
 	align-self: stretch;
 	justify-content: center;
 	--mdc-text-button-label-text-color: color-mix(in srgb, var(--color-accentedPalette-500) 18%, `#1f2937` 82%);
+
 	color: var(--mdc-text-button-label-text-color) !important;
 	font-size: 13px;
@@
 .connectionSchemaButton:hover {
 	--mdc-text-button-label-text-color: var(--color-accentedPalette-500);
+
 	color: var(--color-accentedPalette-500) !important;
 	background-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 92%);
 }

Also applies to: 376-376

🧰 Tools
🪛 Stylelint (17.11.1)

[error] 344-344: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 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/components/connections-list/own-connections/own-connections.component.css`
at line 344, The stylelint rule 'declaration-empty-line-before' is being
violated for the declaration "color: var(--mdc-text-button-label-text-color)
!important;"; open the CSS blocks containing that exact declaration (both
occurrences) and adjust the blank line immediately before the declaration to
match the project's stylelint setting (add a single empty line if rule requires
one, or remove the empty line if rule forbids it) so that the
declaration-empty-line-before rule is satisfied.

font-size: 13px;
font-weight: 500;
line-height: 1;
height: 34px;
transition: color 150ms ease, background-color 150ms ease;
}

.connectionSchemaButton mat-icon {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
margin-right: 6px;
transition: color 150ms ease;
}

.connectionSchemaButton__ai {
color: var(--color-accentedPalette-500) !important;
}

.connectionSchemaButton__arrow {
position: absolute;
right: 12px;
top: 50%;
margin: 0 !important;
transform: translate(-4px, -50%);
opacity: 0;
transition: opacity 150ms ease, transform 150ms ease;
}

.connectionSchemaButton:hover {
color: #fff;
--mdc-text-button-label-text-color: var(--color-accentedPalette-500);
color: var(--color-accentedPalette-500) !important;
background-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 92%);
}

.connectionSchemaButton:hover .connectionSchemaButton__arrow {
opacity: 1;
transform: translate(0, -50%);
}
Comment on lines 374 to +383

@media (prefers-color-scheme: dark) {
.connectionSchemaButton {
--mdc-text-button-label-text-color: color-mix(in srgb, var(--color-accentedPalette-500) 25%, #e2e8f0 75%);
}
}

/* ── Show more / less ── */
Expand Down
19 changes: 10 additions & 9 deletions frontend/src/app/components/connections-list/own-connections/own-connections.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,17 @@ <h1 class="mat-display-1">Create your first connection</h1>
<h2 class="connectionInfo__connectionTitle">{{ $any(connectionItem).displayTitle }}</h2>
<span class="mat-body-2">{{ supportedDatabasesTitles[connectionItem.connection.type] }}</span>
</div>
@if (connectionItem.accessLevel === 'edit') {
<a mat-icon-button
class="connectionSchemaButton"
routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
matTooltip="Edit schema"
(click)="$event.stopPropagation()">
<mat-icon>schema</mat-icon>
</a>
}
</div>
@if (connectionItem.accessLevel === 'edit') {
<a mat-button
class="connectionSchemaButton"
routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
(click)="$event.stopPropagation()">
<mat-icon class="connectionSchemaButton__ai">auto_awesome</mat-icon>
<span>Edit schema</span>
<mat-icon iconPositionEnd class="connectionSchemaButton__arrow">arrow_forward</mat-icon>
</a>
}
</a>
Comment on lines +35 to 44
</li>
}
Expand Down
Loading