Docs links

frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.css

@@ -6,14 +6,25 @@
 
 .header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
     margin: 36px 70px 24px 0;
 }
 
+.header-actions-box {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 16px;
+}
+
 .header-actions {
     display: flex;
-    gap: 20px;
+    gap: 16px;
+}
+
+.header-links {
+    display: flex;
+    gap: 16px;
 }
 
 .empty-state {
@@ -22,6 +33,11 @@
     align-items: center;
 }
 
+.empty-state__actions {
+    display: flex;
+    gap: 12px;
+}
+
 .widgets-hint {
     display: flex;
     flex-direction: column;

frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.html

@@ -5,22 +5,40 @@
     <header class="header">
         <app-breadcrumbs [crumbs]="getCrumbs(currentConnection.title || currentConnection.database)" class="row-breadcrumbs"></app-breadcrumbs>
 
-        <div *ngIf="widgets.length" class="header-actions">
-            <button  mat-stroked-button
-                type="button"
-                (click)="openClearAllConfirmation()"
-                [disabled]="fields.length === 0 && widgets.length === 0">
-                Clear All
-            </button>
-            <button mat-stroked-button color="accent"
-                type="button"
-                angulartics2On="click"
-                angularticsAction="Widgets: add widget is clicked"
-                (click)="addNewWidget()"
-                [disabled]="fields.length === 0 || widgets.length === fieldsCount">
-                <mat-icon>add</mat-icon>
-                Add UI widget
-            </button>
+        <div *ngIf="widgets.length" class="header-actions-box">
+            <div class="header-actions">
+                <button  mat-stroked-button
+                    type="button"
+                    (click)="openClearAllConfirmation()"
+                    [disabled]="fields.length === 0 && widgets.length === 0">
+                    Clear All
+                </button>
+                <button mat-stroked-button color="accent"
+                    type="button"
+                    angulartics2On="click"
+                    angularticsAction="Widgets: add widget is clicked"
+                    (click)="addNewWidget()"
+                    [disabled]="fields.length === 0 || widgets.length === fieldsCount">
+                    <mat-icon>add</mat-icon>
+                    Add UI widget
+                </button>
+            </div>
+            <div class="header-links">
+                <a mat-button color="primary"
+                    href="https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_definition"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    What are UI Widgets
+                    <mat-icon>open_in_new</mat-icon>
+                </a>
+                <a mat-button color="primary"
+                    href="https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    How to manage UI Widgets
+                    <mat-icon>open_in_new</mat-icon>
+                </a>
+            </div>
         </div>
 
     </header>
@@ -62,12 +80,21 @@
                 <span class="widgets-hint__text">Nothing will be changed in your data types, just better reflecting the nature of the data.</span>
             </p>
 
-            <button mat-flat-button color="accent"
-                angulartics2On="click"
-                angularticsAction="Widgets: add first widget is clicked"
-                (click)="addNewWidget()">
-                Create UI Widget
-            </button>
+            <div class="empty-state__actions">
+                <button mat-flat-button color="accent"
+                    angulartics2On="click"
+                    angularticsAction="Widgets: add first widget is clicked"
+                    (click)="addNewWidget()">
+                    Create UI Widget
+                </button>
+                <a mat-stroked-button color="primary"
+                    href="https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_definition"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    Read what UI Widgets are
+                    <mat-icon>open_in_new</mat-icon>
+                </a>
+            </div>
 
             <div class="widget-examples">
                 <div class="widget-example">

frontend/src/app/components/dashboard/db-table-widgets/widget/widget.component.css

@@ -4,12 +4,15 @@
     word-break: break-all;
 }
 
-/* ::ng-deep .CodeMirror {
-    border-radius: 4px;
-    border: 1px solid rgba(0, 0, 0, 0.34);
-    height: auto;
-    margin-bottom: 20px;
-    min-height: 78px;
+.widget-type ::ng-deep .mat-mdc-form-field-hint-wrapper {
+    --mdc-outlined-button-container-height: 24px;
+    --mat-outlined-button-horizontal-padding: 12px;
+
+    padding: 8px 4px;
+}
+
+/* .widget-type__docs-link {
+    color: var(--color-accentedDarkPalette-500);
 } */
 
 .code-editor-box {

frontend/src/app/components/dashboard/db-table-widgets/widget/widget.component.html

@@ -11,15 +11,24 @@
     </mat-form-field>
 </ng-template>
 
-<mat-form-field appearance="outline">
-    <mat-label>Display type</mat-label>
-    <mat-select name="{{widget.field_name}}-field-type"
-        [(ngModel)]="widget.widget_type"
-        (ngModelChange)="onWidgetTypeChange.emit(widget.field_name)">
-        <mat-option *ngFor="let widgetType of widgetTypes"
-            [value]="widgetType">{{ widgetType }}</mat-option>
-    </mat-select>
-</mat-form-field>
+<div class="widget-type">
+    <mat-form-field appearance="outline">
+        <mat-label>Display type</mat-label>
+        <mat-select name="{{widget.field_name}}-field-type"
+            [(ngModel)]="widget.widget_type"
+            (ngModelChange)="onWidgetTypeChange.emit(widget.field_name)">
+            <mat-option *ngFor="let widgetType of widgetTypes"
+                [value]="widgetType">{{ widgetType }}</mat-option>
+        </mat-select>
+        <mat-hint *ngIf="docsUrls[widgetType]">
+            <a mat-stroked-button [href]="docsUrls[widgetType]" target="_blank" color="primary">
+                Docs
+                <mat-icon>open_in_new</mat-icon>
+            </a>
+        </mat-hint>
+    </mat-form-field>
+
+</div>
 
 <div class="code-editor-box">
     <ngs-code-editor

frontend/src/app/components/dashboard/db-table-widgets/widget/widget.component.ts

@@ -3,12 +3,12 @@ import { CUSTOM_ELEMENTS_SCHEMA, Component, EventEmitter, Input, OnChanges, OnIn
 import { CodeEditorModule } from '@ngstack/code-editor';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { Widget } from 'src/app/models/table';
-import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-widget',
@@ -59,6 +59,17 @@ export class WidgetComponent implements OnInit, OnChanges {
     wordWrap: 'on',
   };
 
+  public docsUrls = {
+    Boolean: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#boolean',
+    Textarea: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#textarea',
+    Select: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#select',
+    Password: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#password',
+    Code: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#code',
+    Image: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#image',
+    Foreign_key: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#foreign-key',
+    Phone: 'https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_management#phone'
+  };
+
   ngOnInit(): void {
     this.mutableWidgetParams = {
       language: 'json',

frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css

@@ -1,5 +1,12 @@
-.mat-dialog-title {
-    margin-bottom: 12px;
+.permissions-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 16px 0;
+}
+
+.permissions-header::before {
+    display: none;
 }
 
 .permissions-alert {

frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html

@@ -1,5 +1,13 @@
-<h1 mat-dialog-title>Permissions for <strong>{{ group.title }}</strong> group</h1>
 <form #addPermissionsForm="ngForm" class="permissions-form" (ngSubmit)="addPermissions()">
+    <h1 mat-dialog-title class="permissions-header">
+        <span>Permissions for <strong>{{ group.title }}</strong> group</span>
+        <a mat-stroked-button
+            href="https://docs.rocketadmin.com/Reference/permissions"
+            color="primary">
+            <mat-icon>open_in_new</mat-icon>
+            Docs
+        </a>
+    </h1>
     <mat-dialog-content>
         <app-alert *ngIf="connectionAccess === 'edit' && group.title === 'Admin'" [alert]="adminGroupAlert" class="permissions-alert"></app-alert>
         <app-alert *ngIf="connectionAccess === 'edit' && group.title !== 'Admin'" [alert]="connectionFullAccessAlert" class="permissions-alert"></app-alert>

frontend/src/app/components/zapier/zapier.component.css

@@ -1,3 +1,10 @@
 .zapier-page {
+    display: flex;
+    flex-direction: column;
     padding: 32px max(calc(50vw - 325px), 10%);
+}
+
+.zapier-docs-button {
+    align-self: flex-end;
+    margin-bottom: -36px;
 }

frontend/src/app/components/zapier/zapier.component.html

@@ -1,4 +1,11 @@
 <div class="zapier-page">
+    <a mat-stroked-button
+        class="zapier-docs-button"
+        href="https://docs.rocketadmin.com/Integrations/Zapier"
+        color="primary">
+        <mat-icon>open_in_new</mat-icon>
+        Docs
+    </a>
     <zapier-workflow
         [signUpEmail]="currentUser.email"
         [clientId]='"4MFV3OrjI8e8JkZPySqbFVbKtZUz0sV0H3XJnb6w"'

frontend/src/app/components/zapier/zapier.component.ts

@@ -1,11 +1,16 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { User } from '@sentry/angular-ivy';
 import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-zapier',
-  imports: [],
+  imports: [
+    MatIconModule,
+    MatButtonModule
+  ],
   templateUrl: './zapier.component.html',
   styleUrl: './zapier.component.css',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],