{{companyN
-
-
-
- Create your first connection
-
-
-
-
-
-
-
-
-
- add
- Add database
-
-
-
-
-
- Invited to the company and don't see admin panel?
-
-
- Request access to admin panel from your Acount owner.
-
-
-
-
- Explore demo admin panels
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/components/connections-list/connections-list.component.ts b/frontend/src/app/components/connections-list/connections-list.component.ts
index 79eeaec75..7493a3612 100644
--- a/frontend/src/app/components/connections-list/connections-list.component.ts
+++ b/frontend/src/app/components/connections-list/connections-list.component.ts
@@ -12,13 +12,12 @@ import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { PlaceholderConnectionsComponent } from '../skeletons/placeholder-connections/placeholder-connections.component';
import { RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
import { Title } from '@angular/platform-browser';
-import { UiSettings } from 'src/app/models/ui-settings';
-import { UiSettingsService } from 'src/app/services/ui-settings.service';
import { User } from 'src/app/models/user';
import { UserService } from 'src/app/services/user.service';
import { take } from 'rxjs/operators';
+import { OwnConnectionsComponent } from './own-connections/own-connections.component';
+import { DemoConnectionsComponent } from './demo-connections/demo-connections.component';
@Component({
selector: 'app-connections-list',
@@ -32,7 +31,9 @@ import { take } from 'rxjs/operators';
MatDividerModule,
AlertComponent,
PlaceholderConnectionsComponent,
- Angulartics2Module
+ Angulartics2Module,
+ OwnConnectionsComponent,
+ DemoConnectionsComponent
]
})
export class ConnectionsListComponent implements OnInit {
@@ -45,14 +46,12 @@ export class ConnectionsListComponent implements OnInit {
public companyName: string;
public currentUser: User;
- private getTitleSubscription: Subscription;
constructor(
private _connectionsServise: ConnectionsService,
public deleteDialog: MatDialog,
private _userService: UserService,
private _companyService: CompanyService,
- private _uiSettings: UiSettingsService,
private title: Title
) { }
@@ -74,10 +73,6 @@ export class ConnectionsListComponent implements OnInit {
this.companyName = res.name;
})
});
- this._uiSettings.getUiSettings()
- .subscribe( (settings: UiSettings) => {
- this.connectionsListCollapsed = settings?.globalSettings?.connectionsListCollapsed;
- });
this._connectionsServise.fetchConnections()
.subscribe((res: any) => {
this.setConnections(res);
@@ -88,21 +83,10 @@ export class ConnectionsListComponent implements OnInit {
this.connections = res.connections.filter(connectionItem => !connectionItem.connection.isTestConnection);
this.testConnections = res.connections.filter(connectionItem => connectionItem.connection.isTestConnection);
this.titles = Object.assign({}, ...res.connections.map((connectionItem) => ({[connectionItem.connection.id]: this.getTitle(connectionItem.connection)})));
- this.displayedCardCount = this.connectionsListCollapsed ? 3 : this.connections.length;
}
getTitle(connection: Connection) {
if (!connection.title && connection.masterEncryption) return 'Untitled encrypted connection'
return connection.title || connection.database
}
-
- showMore() {
- this.displayedCardCount = this.connections.length;
- this._uiSettings.updateGlobalSetting('connectionsListCollapsed', false);
- }
-
- showLess() {
- this.displayedCardCount = 3;
- this._uiSettings.updateGlobalSetting('connectionsListCollapsed', true);
- }
}
diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css
new file mode 100644
index 000000000..fedf191a4
--- /dev/null
+++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css
@@ -0,0 +1,118 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+}
+
+.testConnections {
+ list-style: none;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ grid-gap: 20px;
+ margin-top: 24px;
+ width: 100%;
+}
+
+@media (width <= 600px) {
+ .testConnections {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+.testConnectionLink {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 4px;
+ box-shadow:
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.12),
+ 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
+ color: inherit;
+ font-weight: 600;
+ height: 48px;
+ padding: 0 16px;
+ text-decoration: none;
+ transition: box-shadow 200ms, background 200ms, border 200ms;
+}
+
+@media (width <= 600px) {
+ .testConnectionLink {
+ justify-content: flex-start;
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ .testConnectionLink {
+ background: var(--mat-sidenav-content-background-color);
+ border: 1px solid var(--mat-sidenav-content-background-color);
+ }
+
+ .testConnectionLink:hover {
+ box-shadow:
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.12),
+ 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .testConnectionLink {
+ background: #404040;
+ border: 1px solid #404040;
+ }
+
+ .testConnectionLink:hover {
+ background: #212121;
+ border: 1px solid rgba(255, 255, 255, 0.75);
+ box-shadow:
+ 0px 1px 3px 0px rgba(255, 255, 255, 0.1),
+ 0px 2px 2px 0px rgba(255, 255, 255, 0.08),
+ 0px 0px 2px 0px rgba(255, 255, 255, 0.12);
+ }
+
+ .testConnectionLink:hover .connection__goIcon {
+ color: var(--color-accentedPalette-500);
+ }
+}
+
+.testConnectionLink:hover {
+ box-shadow:
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.12),
+ 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.testConnectionLink:active {
+ background: rgba(0, 0, 0, 0.16);
+}
+
+.testConnectionLink__iconBox {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image: radial-gradient(#fff 1em, var(--color-accentedPalette-500) 1em);
+ border-radius: 4px;
+ height: 36px;
+ margin-right: 12px;
+ width: 36px;
+}
+
+.testConnectionLink__icon {
+ flex-shrink: 0;
+ height: 20px;
+ width: 20px;
+}
+
+@media (width <= 600px) {
+ .testConnectionLink .connection__goIcon {
+ display: none;
+ }
+}
+
+.testConnectionLink:hover .connection__goIcon,
+.connection:hover .connection__goIcon{
+ opacity: 1;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html
new file mode 100644
index 000000000..07bd802a3
--- /dev/null
+++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html
@@ -0,0 +1,18 @@
+Explore demo admin panels
+Try out a demo admin panel
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.spec.ts b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.spec.ts
new file mode 100644
index 000000000..b15e5029c
--- /dev/null
+++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DemoConnectionsComponent } from './demo-connections.component';
+
+describe('DemoConnectionsComponent', () => {
+ let component: DemoConnectionsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DemoConnectionsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(DemoConnectionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.ts b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.ts
new file mode 100644
index 000000000..7fb5e8540
--- /dev/null
+++ b/frontend/src/app/components/connections-list/demo-connections/demo-connections.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { Angulartics2Module } from 'angulartics2';
+import { ConnectionItem } from 'src/app/models/connection';
+
+@Component({
+ selector: 'app-demo-connections',
+ imports: [
+ CommonModule,
+ RouterModule,
+ MatIconModule,
+ Angulartics2Module
+ ],
+ templateUrl: './demo-connections.component.html',
+ styleUrl: './demo-connections.component.css'
+})
+export class DemoConnectionsComponent {
+ @Input() testConnections: ConnectionItem[] = null;
+ @Input() isDemo: boolean = false;
+}
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
new file mode 100644
index 000000000..8d74ad32b
--- /dev/null
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css
@@ -0,0 +1,213 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+}
+
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.empty-state_bottom {
+ margin-top: auto;
+}
+
+.empty-state__text {
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ margin-top: 56px !important;
+ margin-bottom: 0 !important;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.showAllButton {
+ margin-top: 20px;
+ margin-bottom: -56px;
+}
+
+@media (width <= 600px) {
+ .showAllButton {
+ margin-bottom: 0;
+ }
+}
+
+.addButton {
+ margin-top: -44px;
+ height: 40px;
+}
+
+.fabActions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ align-self: flex-end;
+ margin-top: 20px;
+}
+
+.zapier-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 24px;
+ box-shadow:
+ 0px 1px 10px 0px rgba(0, 0, 0, 0.08),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.05),
+ 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
+ color: var(--color-accentedPalette-500);
+ text-decoration: none;
+ height: 48px;
+ padding: 8px;
+ width: 140px;
+}
+
+.zapier-link__caption {
+ font-size: 12px;
+}
+
+.zapier-link__logo {
+ border-radius: 8px;
+ height: 32px;
+ width: 32px;
+}
+
+.zapier-link__icon {
+ color: var(--mat-sidenav-content-text-color);
+ font-size: 16px;
+ height: 16px;
+ width: 16px;
+}
+
+.fabAddButton {
+ border-radius: 24px;
+ box-shadow:
+ 0px 1px 10px 0px rgba(0, 0, 0, 0.2),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.12),
+ 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+ height: 48px !important;
+ width: 178px;
+}
+
+@media (width <= 600px) {
+ .fabAddButton {
+ position: fixed;
+ bottom: max(64px, 10vw);
+ z-index: 1;
+ }
+}
+
+.connections {
+ list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+ margin-top: 24px;
+ width: 100%;
+}
+
+@media (width <= 600px) {
+ .connections {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ }
+}
+
+.connectionItem {
+ flex: 0 0 calc((100% - 40px)/3);
+}
+
+@media (width <= 600px) {
+ .connectionItem {
+ flex: initial;
+ }
+}
+
+.connection {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ border-radius: 4px;
+ color: inherit;
+ height: 148px;
+ padding: 20px 12px;
+ text-decoration: none;
+ width: 100%;
+ transition: border 200ms, box-shadow 200ms;
+}
+
+@media (prefers-color-scheme: dark) {
+ .connection {
+ background-color: #000;
+ border: 1px solid #313131;
+ }
+}
+
+.connection:hover {
+ border: 1px solid var(--color-primaryPalette-500);
+ box-shadow:
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.2),
+ 0px 3px 14px 0px rgba(0, 0, 0, 0.12),
+ 0px 8px 10px 0px rgba(0, 0, 0, 0.14);
+}
+
+@media (prefers-color-scheme: dark) {
+ .connection:hover {
+ border: 1px solid #636363;
+ }
+}
+
+.connectionLogoPreview {
+ flex-shrink: 0;
+ display: flex;
+ /* flex-direction: column; */
+ /* align-items: flex-start; */
+ align-items: center;
+ /* justify-content: center; */
+ gap: 4px;
+ background-color: var(--color-primaryPalette-500);
+ border-radius: 2px;
+ color: #fff;
+ font-size: 20px;
+ font-weight: 900;
+ height: 52px;
+ margin-bottom: 4px;
+ padding: 8px;
+}
+
+.connectionLogoPreview__logo {
+ height: 100%;
+ object-fit: contain;
+}
+
+.connectionLogoPreview .connectionLogoPreview__name {
+ margin-bottom: 0;
+ font-size: 20px;
+}
+
+.connectionInfo {
+ display: grid;
+ grid-template-columns: auto 40px;
+ align-items: center;
+}
+
+.connectionInfo .connectionInfo__connectionTitle {
+ margin-bottom: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+}
+
+.connection__goIcon {
+ grid-row: 1 / span 2;
+ grid-column: 2;
+ margin-left: auto;
+ opacity: 0.65;
+ transition: opacity 200ms, color 200ms;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html
new file mode 100644
index 000000000..429b39091
--- /dev/null
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html
@@ -0,0 +1,230 @@
+Create you own test connection
+
+
+
+
+ Create your first connection
+
+
+
+
+
+
+
+
+
+
+ add
+ Add database
+
+
+
+
+ Invited to the company and don't see admin panel?
+
+
+ Request access to admin panel from your Acount owner.
+
+
+
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts
new file mode 100644
index 000000000..3307a1fa4
--- /dev/null
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OwnConnectionsComponent } from './own-connections.component';
+import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+
+describe('OwnConnectionsComponent', () => {
+ let component: OwnConnectionsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OwnConnectionsComponent],
+ providers: [
+ provideHttpClient(),
+ provideRouter([])
+ ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(OwnConnectionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
new file mode 100644
index 000000000..1adeaf9dd
--- /dev/null
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { User } from '@sentry/angular-ivy';
+import { ConnectionItem } from 'src/app/models/connection';
+import { UiSettings } from 'src/app/models/ui-settings';
+import { UiSettingsService } from 'src/app/services/ui-settings.service';
+
+@Component({
+ selector: 'app-own-connections',
+ imports: [
+ CommonModule,
+ RouterModule,
+ MatIconModule,
+ MatButtonModule,
+ ],
+ templateUrl: './own-connections.component.html',
+ styleUrl: './own-connections.component.css'
+})
+export class OwnConnectionsComponent {
+ @Input() currentUser: User;
+ @Input() connections: ConnectionItem[] = null;
+ @Input() isDemo: boolean = false;
+
+ public displayedCardCount: number = 3;
+ public connectionsListCollapsed: boolean;
+
+ constructor(private _uiSettings: UiSettingsService) {}
+
+ ngOnInit() {
+ this._uiSettings.getUiSettings()
+ .subscribe( (settings: UiSettings) => {
+ this.connectionsListCollapsed = settings?.globalSettings?.connectionsListCollapsed;
+ this.displayedCardCount = this.connectionsListCollapsed ? 3 : this.connections.length;
+ });
+ }
+
+ showMore() {
+ this.displayedCardCount = this.connections.length;
+ this._uiSettings.updateGlobalSetting('connectionsListCollapsed', false);
+ }
+
+ showLess() {
+ this.displayedCardCount = 3;
+ this._uiSettings.updateGlobalSetting('connectionsListCollapsed', true);
+ }
+}
diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.html b/frontend/src/app/components/dashboard/db-table/db-table.component.html
index ae076773b..40f99a763 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.html
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.html
@@ -111,7 +111,7 @@ {{ displayName }}
-
-
-
-
-
-
-
-
-
-
- Create your first connection
-
-
-
-
- - Invited to the company and don't see admin panel? -
-- Request access to admin panel from your Acount owner. -
-Explore demo admin panels
- - -Create you own test connection
+ +
+
+
+
+
+
+
+
+
+
+
+ + Create your first connection +
+
+
+
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts
new file mode 100644
index 000000000..3307a1fa4
--- /dev/null
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OwnConnectionsComponent } from './own-connections.component';
+import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+
+describe('OwnConnectionsComponent', () => {
+ let component: OwnConnectionsComponent;
+ let fixture: ComponentFixture+ Invited to the company and don't see admin panel? +
++ Request access to admin panel from your Acount owner. +
+