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

Merged
lyubov-voloshko merged 4 commits into from
May 29, 2026
Merged

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
4 commits
Select commit Hold shift + click to select a range
d5881dc
feat(connections): promote schema editor to a dedicated card row
karinakharchenko May 20, 2026
b92b5af
style(connections): polish schema button hover & dialog control flow
lyubov-voloshko May 28, 2026
df602e4
chore: ignore .yarn/ cache directory
lyubov-voloshko May 28, 2026
5ee47b7
Merge branch 'main' into connection-card-schema-edit-button
lyubov-voloshko May 28, 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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

# dependencies
/node_modules
.yarn/

# profiling files
chrome-profiler-events*.json
Expand Down
6 changes: 4 additions & 2 deletions ...ections-list/hosted-database-success-dialog/hosted-database-success-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,10 @@ <h1 mat-dialog-title>
[cdkCopyToClipboard]="credentialsText"
(cdkCopyToClipboardCopied)="handleCredentialsCopied()">
@if (copied) {
<mat-icon class="hosted-dialog__copy-check">check</mat-icon>
Credentials copied
<ng-container>
<mat-icon class="hosted-dialog__copy-check">check</mat-icon>
Credentials copied
</ng-container>
} @else {
Copy connection string
}
Expand Down
62 changes: 55 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,18 +334,65 @@
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;
color: var(--mdc-text-button-label-text-color) !important;

@coderabbitai coderabbitai Bot May 20, 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

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;
color: var(--color-accentedPalette-500) !important;
}

@media (prefers-color-scheme: dark) {
.connectionSchemaButton:hover {
color: var(--color-accentedPalette-100) !important;
background: var(--color-accentedPalette-900);
}

.connectionSchemaButton:hover .connectionSchemaButton__ai {
color: var(--color-accentedPalette-100) !important;
}
}

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




/* ── Show more / less ── */

.showAllButton {
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 color="accent"
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>
</li>
}
Expand Down
6 changes: 4 additions & 2 deletions ...osted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,10 @@ <h1 mat-dialog-title>New password for <strong>{{ result()!.databaseName }}</stro
[cdkCopyToClipboard]="credentialsText"
(cdkCopyToClipboardCopied)="handleCredentialsCopied()">
@if (copied()) {
<mat-icon class="reset-dialog__copy-check">check</mat-icon>
Credentials copied
<ng-container>
<mat-icon class="reset-dialog__copy-check">check</mat-icon>
Credentials copied
</ng-container>
} @else {
Copy connection string
}
Expand Down
Loading