Merge pull request #1138 from rocket-admin/fixes

lyubov-voloshko · web-flow · commit d6a16b246ab0 · 2025-04-14T17:19:23.000+03:00
Fixes
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
@@ -29,6 +29,7 @@ import { UpgradeSuccessComponent } from './components/upgrade-success/upgrade-su
 import { UserDeletedSuccessComponent } from './components/user-deleted-success/user-deleted-success.component';
 import { UserSettingsComponent } from './components/user-settings/user-settings.component';
 import { UsersComponent } from './components/users/users.component';
+import { ZapierComponent } from './components/zapier/zapier.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/connections-list', pathMatch: 'full'},
@@ -60,6 +61,7 @@ const routes: Routes = [
   {path: 'dashboard/:connection-id/:table-name/settings', pathMatch: 'full', component: DbTableSettingsComponent, canActivate: [AuthGuard]},
   {path: 'dashboard/:connection-id/:table-name/actions', pathMatch: 'full', component: DbTableActionsComponent, canActivate: [AuthGuard]},
   {path: 'permissions/:connection-id', component: UsersComponent, canActivate: [AuthGuard]},
+  {path: 'zapier', component: ZapierComponent, canActivate: [AuthGuard]},
   {path: '**', component: PageNotFoundComponent},
 ];
 
diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.html b/frontend/src/app/components/connection-settings/connection-settings.component.html
diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.ts b/frontend/src/app/components/connection-settings/connection-settings.component.ts
@@ -23,8 +23,7 @@ import { normalizeTableName } from '../../lib/normalize'
 import { BannerComponent } from '../ui-components/banner/banner.component';
 import { PlaceholderConnectionSettingsComponent } from '../skeletons/placeholder-connection-settings/placeholder-connection-settings.component';
 import { AlertComponent } from '../ui-components/alert/alert.component';
-import { ZapierComponent } from './zapier/zapier.component';
-import { MatTabsModule } from '@angular/material/tabs';
+
 import { CompanyService } from 'src/app/services/company.service';
 
 @Component({
@@ -33,7 +32,6 @@ import { CompanyService } from 'src/app/services/company.service';
   styleUrls: ['./connection-settings.component.css'],
   imports: [
     CommonModule,
-    MatTabsModule,
     FormsModule,
     MatFormFieldModule,
     MatInputModule,
@@ -45,8 +43,7 @@ import { CompanyService } from 'src/app/services/company.service';
     BannerComponent,
     PlaceholderConnectionSettingsComponent,
     AlertComponent,
-    Angulartics2Module,
-    ZapierComponent
+    Angulartics2Module
   ]
 })
 export class ConnectionSettingsComponent implements OnInit {
diff --git a/frontend/src/app/components/connection-settings/zapier/zapier.component.css b/frontend/src/app/components/connection-settings/zapier/zapier.component.css
diff --git a/frontend/src/app/components/connections-list/connections-list.component.css b/frontend/src/app/components/connections-list/connections-list.component.css
@@ -30,8 +30,9 @@
 
 .pageTitleHeader {
     position: relative;
-    align-self: center;
+    text-align: center;
     margin-bottom: 54px;
+    width: 100%;
 }
 
 @media (width <= 600px) {
@@ -41,6 +42,11 @@
 }
 
 .pageTitleHeader .pageTitle {
+    position: relative;
+    display: inline-block;
+}
+
+.pageTitleHeader .pageTitle__name {
     font-weight: 600;
     margin-bottom: 0;
 }
@@ -60,7 +66,7 @@
     }
 }
 
-.pageTitleHeader:hover .companyEditLink {
+.pageTitle:hover .companyEditLink {
     opacity: 1;
 }
 
@@ -99,15 +105,56 @@
     height: 40px;
 }
 
-.fabAddButton {
+.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;
-    margin-top: 20px;
     width: 178px;
 }
 
diff --git a/frontend/src/app/components/connections-list/connections-list.component.html b/frontend/src/app/components/connections-list/connections-list.component.html
@@ -1,13 +1,21 @@
 <app-alert></app-alert>
 <div class="wrapper">
-    <div *ngIf="companyName" class="pageTitleHeader">
-        <h1 class="mat-headline-4 pageTitle">{{companyName}}</h1>
-        <a mat-icon-button *ngIf="currentUser.role === 'ADMIN'"
-            routerLink="/company"
-            class="companyEditLink">
-            <mat-icon>edit</mat-icon>
-        </a>
+    <div *ngIf="companyName; else companyNameLoader" class="pageTitleHeader">
+        <div class="pageTitle">
+            <h1 class="mat-headline-4 pageTitle__name">{{companyName}}</h1>
+            <a mat-icon-button *ngIf="currentUser.role === 'ADMIN'"
+                routerLink="/company"
+                class="companyEditLink">
+                <mat-icon>edit</mat-icon>
+            </a>
+        </div>
+
     </div>
+    <ng-template #companyNameLoader>
+        <div class="skeleton" style="width: auto;">
+            <div class="bone" style="height: 40px; width: 18vw; margin-bottom: 54px;"></div>
+        </div>
+    </ng-template>
 
     <ng-container *ngIf="connections; else loader">
         <div *ngIf="!connections.length && connections !== null" class="empty-state">
@@ -185,16 +193,40 @@ <h2 class="connectionInfo__connectionTitle">{{ titles[connectionItem.connection.
             Show less
         </button>
 
-        <a mat-flat-button *ngIf="currentUser.role === 'ADMIN' || currentUser.role === 'DB_ADMIN'"
-            data-testid="add-connection-button"
-            color="primary"
-            [ngClass]="connections.length ? 'fabAddButton' : 'addButton'"
-            routerLink="/connect-db"
-            angulartics2On="click"
-            angularticsAction="Connections: Add connection button is clicked">
-            <mat-icon *ngIf="connections?.length">add</mat-icon>
-            Add database
-        </a>
+        <div [ngClass]="connections.length ? 'fabActions' : null">
+            <a routerLink="/zapier" *ngIf="connections.length && (currentUser.role === 'ADMIN' || currentUser.role === 'DB_ADMIN')" class="zapier-link">
+                <svg class="zapier-link__logo" width="401" height="400" viewBox="0 0 401 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="0.526367" width="400" height="400" fill="#FF4F00"/>
+                    <rect x="0.526367" width="400" height="400" rx="200" fill="#FF4F00"/>
+                    <path d="M56.8003 220.362L56.7432 220.181L92.8062 187.166V171.258H34.9491V187.166H69.5072L69.5643 187.318L33.8536 220.362V236.269H93.3873V220.362H56.8003Z" fill="#FFFDF9"/>
+                    <path d="M128.897 169.748C122.223 169.748 116.784 170.754 112.58 172.767C108.664 174.522 105.365 177.412 103.112 181.064C100.956 184.74 99.6023 188.83 99.1397 193.066L116.695 195.533C117.33 191.793 118.6 189.142 120.505 187.579C122.671 185.946 125.339 185.12 128.049 185.246C131.612 185.246 134.196 186.198 135.803 188.103C137.394 190.008 138.203 192.647 138.203 196.124V197.857H121.324C112.732 197.857 106.56 199.762 102.807 203.573C99.0539 207.383 97.1806 212.412 97.1869 218.661C97.1869 225.062 99.0603 229.825 102.807 232.949C106.554 236.073 111.265 237.626 116.943 237.607C123.985 237.607 129.402 235.184 133.193 230.339C135.432 227.361 137.031 223.953 137.889 220.328H138.527L140.947 236.235H156.854V195.952C156.854 187.627 154.66 181.178 150.272 176.606C145.884 172.034 138.759 169.748 128.897 169.748ZM134.46 219.404C131.935 221.509 128.63 222.557 124.515 222.557C121.124 222.557 118.768 221.963 117.447 220.775C116.804 220.214 116.292 219.517 115.948 218.735C115.604 217.953 115.436 217.105 115.457 216.251C115.419 215.445 115.546 214.641 115.829 213.886C116.112 213.131 116.546 212.442 117.105 211.86C117.708 211.294 118.42 210.856 119.198 210.572C119.976 210.289 120.803 210.166 121.629 210.212H138.232V211.307C138.265 212.856 137.943 214.391 137.289 215.795C136.635 217.199 135.667 218.433 134.46 219.404Z" fill="#FFFDF9"/>
+                    <path d="M253.012 171.258H234.218V236.279H253.012V171.258Z" fill="#FFFDF9"/>
+                    <path d="M364.046 171.258C358.738 171.258 354.553 173.132 351.492 176.878C349.295 179.571 347.625 183.549 346.482 188.814H345.929L343.472 171.258H327.421V236.269H346.215V202.93C346.215 198.726 347.199 195.504 349.168 193.262C351.136 191.02 354.769 189.9 360.065 189.9H367.199V171.258H364.046Z" fill="#FFFDF9"/>
+                    <path d="M308.708 173.379C304.32 170.769 298.786 169.468 292.106 169.474C281.59 169.474 273.36 172.468 267.416 178.456C261.472 184.445 258.5 192.7 258.5 203.222C258.349 209.584 259.738 215.888 262.548 221.597C265.121 226.684 269.128 230.906 274.074 233.742C279.053 236.618 284.974 238.06 291.839 238.066C297.777 238.066 302.736 237.152 306.718 235.323C310.461 233.68 313.721 231.106 316.186 227.845C318.533 224.645 320.277 221.042 321.33 217.215L305.136 212.681C304.455 215.17 303.143 217.44 301.326 219.273C299.497 221.101 296.433 222.016 292.134 222.016C287.022 222.016 283.212 220.552 280.704 217.625C278.884 215.51 277.741 212.491 277.237 208.576H321.577C321.758 206.747 321.853 205.213 321.853 203.975V199.927C321.961 194.488 320.837 189.096 318.567 184.152C316.442 179.649 313.006 175.894 308.708 173.379ZM291.563 184.972C299.183 184.972 303.504 188.721 304.527 196.221H277.57C277.998 193.719 279.035 191.36 280.589 189.353C283.06 186.426 286.717 184.965 291.563 184.972Z" fill="#FFFDF9"/>
+                    <path d="M243.839 145.056C242.425 145.007 241.016 145.244 239.695 145.751C238.374 146.259 237.169 147.026 236.151 148.009C235.147 149 234.36 150.19 233.841 151.502C233.321 152.814 233.079 154.22 233.131 155.63C233.081 157.049 233.323 158.464 233.843 159.785C234.364 161.107 235.151 162.307 236.155 163.311C237.16 164.315 238.361 165.101 239.683 165.62C241.005 166.139 242.42 166.38 243.839 166.328C245.249 166.381 246.655 166.14 247.967 165.62C249.28 165.1 250.469 164.313 251.46 163.308C252.443 162.293 253.211 161.089 253.717 159.77C254.222 158.45 254.456 157.042 254.404 155.63C254.469 154.226 254.24 152.824 253.733 151.513C253.226 150.203 252.451 149.012 251.457 148.018C250.464 147.024 249.274 146.248 247.964 145.74C246.654 145.231 245.243 144.992 243.839 145.056Z" fill="#FFFDF9"/>
+                    <path d="M205.013 169.474C198.612 169.474 193.469 171.484 189.582 175.503C186.706 178.482 184.594 182.927 183.248 188.839H182.648L180.19 171.284H164.14V254.955H182.934V220.492H183.619C184.193 222.79 184.997 225.024 186.02 227.16C187.61 230.639 190.217 233.555 193.497 235.523C196.899 237.379 200.73 238.302 204.604 238.199C212.472 238.199 218.463 235.135 222.578 229.008C226.693 222.88 228.751 214.329 228.751 203.356C228.751 192.757 226.76 184.46 222.778 178.466C218.797 172.471 212.875 169.474 205.013 169.474ZM206.919 216.586C204.728 219.761 201.299 221.349 196.631 221.349C194.707 221.438 192.789 221.067 191.036 220.267C189.284 219.467 187.747 218.261 186.553 216.748C184.121 213.694 182.908 209.512 182.915 204.203V202.965C182.915 197.574 184.127 193.446 186.553 190.582C188.979 187.718 192.338 186.302 196.631 186.334C201.381 186.334 204.832 187.842 206.985 190.858C209.138 193.875 210.214 198.082 210.214 203.479C210.227 209.061 209.135 213.43 206.938 216.586H206.919Z" fill="#FFFDF9"/>
+                </svg>
+                <mat-icon fontSet="material-icons-outlined" class="zapier-link__icon">keyboard_double_arrow_right</mat-icon>
+                <svg class="zapier-link__logo" width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect width="240" height="240" transform="translate(0 0.000976562)" fill="#A664DA"/>
+                    <path d="M176.214 93.941H140.892C135.682 93.941 133.099 90.0115 135.13 85.2209L147.846 55.3742C150.738 48.5968 147.074 43.0557 139.7 43.0557H106.763C103.54 43.0557 99.8749 45.484 98.6166 48.4422L83.3178 84.3601C80.7791 90.2985 84.0022 95.1552 90.4484 95.1552H124.225C127.956 95.1552 131.333 97.3849 132.79 100.807L147.846 136.128C149.899 140.941 147.294 144.871 142.084 144.871H63.3831C60.16 144.871 56.4954 147.299 55.2371 150.257L40.5785 184.63C37.6866 191.407 41.3512 196.948 48.7246 196.948H125.329C128.552 196.948 132.216 194.52 133.475 191.562L150.517 151.56C151.952 148.204 155.22 146.041 158.862 146.041H192.131C198.82 146.041 202.131 141.007 199.504 134.87L184.36 99.3497C183.102 96.3915 179.437 93.9631 176.214 93.9631V93.941Z" fill="white"/>
+                </svg>
+
+            </a>
+
+            <a mat-flat-button *ngIf="currentUser.role === 'ADMIN' || currentUser.role === 'DB_ADMIN'"
+                data-testid="add-connection-button"
+                color="primary"
+                [ngClass]="connections.length ? 'fabAddButton' : 'addButton'"
+                routerLink="/connect-db"
+                angulartics2On="click"
+                angularticsAction="Connections: Add connection button is clicked">
+                <mat-icon *ngIf="connections?.length">add</mat-icon>
+                Add database
+            </a>
+        </div>
+
+
 
         <div *ngIf="!connections.length && connections !== null" class="empty-state_bottom">
             <p class="mat-body-1 empty-state__text">
diff --git a/frontend/src/app/components/zapier/zapier.component.css b/frontend/src/app/components/zapier/zapier.component.css
@@ -0,0 +1,3 @@
+.zapier-page {
+    padding: 32px max(calc(50vw - 325px), 10%);
+}
diff --git a/frontend/src/app/components/zapier/zapier.component.html b/frontend/src/app/components/zapier/zapier.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="zapier-page">
     <zapier-workflow
         [signUpEmail]="currentUser.email"
         [clientId]='"4MFV3OrjI8e8JkZPySqbFVbKtZUz0sV0H3XJnb6w"'
diff --git a/frontend/src/app/components/zapier/zapier.component.spec.ts b/frontend/src/app/components/zapier/zapier.component.spec.ts
diff --git a/frontend/src/app/components/zapier/zapier.component.ts b/frontend/src/app/components/zapier/zapier.component.ts
@@ -1,16 +1,16 @@
-import { CommonModule } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+
 import { User } from '@sentry/angular-ivy';
 import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-zapier',
+  imports: [],
   templateUrl: './zapier.component.html',
   styleUrl: './zapier.component.css',
-  imports: [CommonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class ZapierComponent implements OnInit {
+export class ZapierComponent {
   public currentUser: User;
 
   constructor(

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.zapier-page {`
	`2`	`+ padding: 32px max(calc(50vw - 325px), 10%);`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div>`
	`1`	`+<div class="zapier-page">`
`2`	`2`	`<zapier-workflow`
`3`	`3`	`[signUpEmail]="currentUser.email"`
`4`	`4`	`[clientId]='"4MFV3OrjI8e8JkZPySqbFVbKtZUz0sV0H3XJnb6w"'`