UI: Replace flex layout with tailwind.

thingsboard · Jan 27, 2025 · 90039b9 · 90039b9
1 parent 6f11f50
commit 90039b9
Show file tree

Hide file tree

Showing 104 changed files with 685 additions and 870 deletions.
diff --git a/ui-ngx/src/app/core/core.module.ts b/ui-ngx/src/app/core/core.module.ts
@@ -34,7 +34,6 @@ import { TbMissingTranslationHandler } from './translate/missing-translate-handl
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
 import { TranslateDefaultParser } from '@core/translate/translate-default-parser';
@@ -43,7 +42,6 @@ import { TranslateDefaultLoader } from '@core/translate/translate-default-loader
 @NgModule({
   imports: [
     CommonModule,
-    FlexLayoutModule.withConfig({addFlexToParent: false}),
     MatDialogModule,
     MatButtonModule,
     MatSnackBarModule,

diff --git a/ui-ngx/src/app/modules/home/components/card-config/card-config.component.html b/ui-ngx/src/app/modules/home/components/card-config/card-config.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex class="tb-home-card-container tb-home-padding">
+<div class="tb-home-card-container tb-home-padding flex !flex-1">
   <tb-card-title-button [cardType]="cardType" [disabled]="true"></tb-card-title-button>
-  <section fxFlex class="tb-config-table" fxFlex.lt-lg="auto">
+  <section class="tb-config-table">
     <table mat-table matSort [dataSource]="dataSource" matSortDisableClear>
       @for (column of columns; track column) {
         <ng-container [matColumnDef]="column.key">
@@ -31,7 +31,7 @@
             @if (column.key === 'value') {
               <span>
                 {{ formatBytesToValue(entity) }}
-                <tb-copy-button [fxShow]="showCopyButton(entity, configParams)"
+                <tb-copy-button [class.!hidden]="!showCopyButton(entity, configParams)"
                   [copyText]="entity.value"
                   [buttonClass]="{'tb-mat-12': true}"
                   [style]="{display: 'inline'}"
@@ -53,6 +53,6 @@
       <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </table>
-    <div fxFlex></div>
+    <div class="flex flex-1"></div>
   </section>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/card-config/card-config.component.scss b/ui-ngx/src/app/modules/home/components/card-config/card-config.component.scss
@@ -34,6 +34,7 @@
   }
 
   .tb-config-table {
+    flex: 1 1 0 !important;
     overflow: auto;
   }
 }

diff --git a/...x/src/app/modules/home/components/client-credentials-templates/basic/basic.component.html b/...x/src/app/modules/home/components/client-credentials-templates/basic/basic.component.html
@@ -24,7 +24,7 @@
       <input matInput formControlName="clientId">
       <tb-copy-button #copyClientIdBtn
         (click)="onClickTbCopyButton('clientId')"
-        [fxShow]="credentialsMqttFormGroup.get('clientId')?.value?.length" matSuffix
+        [class.!hidden]="!credentialsMqttFormGroup.get('clientId')?.value?.length" matSuffix
         [copyText]="credentialsMqttFormGroup.get('clientId').value">
       </tb-copy-button>
       <button mat-icon-button matSuffix
@@ -41,14 +41,14 @@
         </mat-error>
       }
     </mat-form-field>
-    <div fxLayout="column">
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-        <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-col">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="flex flex-1">
           <mat-label translate>mqtt-client-credentials.username</mat-label>
           <input matInput formControlName="userName" name="user-name">
           <tb-copy-button matSuffix #copyUsernameBtn
             (click)="onClickTbCopyButton('userName')"
-            [fxShow]="credentialsMqttFormGroup.get('userName')?.value?.length"
+            [class.!hidden]="!credentialsMqttFormGroup.get('userName')?.value?.length"
             [copyText]="credentialsMqttFormGroup.get('userName').value">
           </tb-copy-button>
           <button mat-icon-button matSuffix
@@ -66,7 +66,7 @@
           }
         </mat-form-field>
         @if (!entity()?.id) {
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex flex-1">
             <mat-label translate>mqtt-client-credentials.password</mat-label>
             <input matInput formControlName="password"
               autocomplete="new-password" name="new-password"
@@ -90,10 +90,10 @@
       </mat-panel-title>
     </mat-expansion-panel-header>
     <section>
-      <div class="tb-hint" style="padding-top: 0" [innerHtml]="'mqtt-client-credentials.hint-authorization-basic' | translate"></div>
+      <div class="tb-hint pt-0" [innerHtml]="'mqtt-client-credentials.hint-authorization-basic' | translate"></div>
       <div class="tb-hint" [innerHtml]="'mqtt-client-credentials.hint-regex-patterns' | translate"></div>
     </section>
-    <div fxFlex fxLayout="column" formGroupName="authRules" style="margin-top: 8px">
+    <div class="mt-2 flex flex-1 flex-col" formGroupName="authRules">
       <mat-form-field class="mat-block">
         <mat-label translate>mqtt-client-credentials.authorization-rule-patterns-pub</mat-label>
         <mat-chip-grid #chipListPub formControlName="pubAuthRulePatterns">
@@ -119,7 +119,7 @@
             [matChipInputFor]="chipListPub"
             (matChipInputTokenEnd)="addTopicRule($event, authRulePatternsType.PUBLISH)">
         </mat-chip-grid>
-        <mat-icon [fxShow]="!pubRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-pub' | translate">
+        <mat-icon [class.!hidden]="pubRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-pub' | translate">
           warning
         </mat-icon>
       </mat-form-field>
@@ -148,7 +148,7 @@
             [matChipInputFor]="chipListSub"
             (matChipInputTokenEnd)="addTopicRule($event, authRulePatternsType.SUBSCRIBE)">
         </mat-chip-grid>
-        <mat-icon [fxShow]="!subRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-sub' | translate">
+        <mat-icon [class.!hidden]="subRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-sub' | translate">
           warning
         </mat-icon>
       </mat-form-field>

diff --git a/...me/components/client-credentials-templates/client-credentials-autocomplete.component.html b/...me/components/client-credentials-templates/client-credentials-autocomplete.component.html
@@ -25,7 +25,7 @@
     (keydown)="clientCredentialsEnter($event)"
     (keypress)="clientCredentialsEnter($event)"
     [matAutocomplete]="clientCredentialsAutocomplete"
-    [fxShow]="!showDetailsPageLink() || !disabled() || !selectCredentialsFormGroup.get('clientCredentials').value">
+    [class.!hidden]="!(showDetailsPageLink() || !disabled() || !selectCredentialsFormGroup.get('clientCredentials').value)">
   @if (showDetailsPageLink() && selectCredentialsFormGroup.get('clientCredentials').value && disabled()) {
     <a aria-label="Open client credentials">
       {{ displayClientCredentialsFn(selectCredentialsFormGroup.get('clientCredentials').value) }}

diff --git a/...x/src/app/modules/home/components/client-credentials-templates/scram/scram.component.html b/...x/src/app/modules/home/components/client-credentials-templates/scram/scram.component.html
@@ -19,14 +19,14 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>mqtt-client-credentials.authentication</legend>
     <div class="tb-hint" innerHTML="{{ 'mqtt-client-credentials.hint-credentials-type-scram' | translate }}"></div>
-    <div fxLayout="column">
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-        <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-col">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="flex flex-1">
           <mat-label translate>mqtt-client-credentials.username</mat-label>
           <input matInput formControlName="userName" name="user-name">
           <tb-copy-button #copyUsernameBtn
             (click)="onClickTbCopyButton('userName')"
-            [fxShow]="credentialsMqttFormGroup.get('userName')?.value?.length" matSuffix
+            [class.!hidden]="!credentialsMqttFormGroup.get('userName')?.value?.length" matSuffix
             [copyText]="credentialsMqttFormGroup.get('userName').value">
           </tb-copy-button>
           <button mat-icon-button matSuffix
@@ -43,7 +43,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="flex flex-1">
           <mat-label translate>mqtt-client-credentials.password</mat-label>
           <input matInput formControlName="password"
             autocomplete="new-password" name="new-password"
@@ -56,7 +56,7 @@
           }
         </mat-form-field>
       </div>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex flex-1">
         <mat-label translate>mqtt-client-credentials.select-sha</mat-label>
         <mat-select formControlName="algorithm" (selectionChange)="algorithmChanged()">
           @for (sha of shaTypes; track sha) {
@@ -79,7 +79,7 @@
       <div class="tb-hint" style="padding-top: 0" [innerHtml]="'mqtt-client-credentials.hint-authorization-basic' | translate"></div>
       <div class="tb-hint" [innerHtml]="'mqtt-client-credentials.hint-regex-patterns' | translate"></div>
     </section>
-    <div fxFlex fxLayout="column" formGroupName="authRules" style="margin-top: 8px">
+    <div class="mt:2 flex flex-1 flex-col" formGroupName="authRules">
       <mat-form-field class="mat-block">
         <mat-label translate>mqtt-client-credentials.authorization-rule-patterns-pub</mat-label>
         <mat-chip-grid #chipListPub formControlName="pubAuthRulePatterns">
@@ -105,7 +105,7 @@
             [matChipInputFor]="chipListPub"
             (matChipInputTokenEnd)="addTopicRule($event, authRulePatternsType.PUBLISH)">
         </mat-chip-grid>
-        <mat-icon [fxShow]="!pubRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-pub' | translate">
+        <mat-icon [class.!hidden]="pubRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-pub' | translate">
           warning
         </mat-icon>
       </mat-form-field>
@@ -134,7 +134,7 @@
             [matChipInputFor]="chipListSub"
             (matChipInputTokenEnd)="addTopicRule($event, authRulePatternsType.SUBSCRIBE)">
         </mat-chip-grid>
-        <mat-icon [fxShow]="!subRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-sub' | translate">
+        <mat-icon [class.!hidden]="subRulesSet.size" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-sub' | translate">
           warning
         </mat-icon>
       </mat-form-field>

diff --git a/...rc/app/modules/home/components/client-credentials-templates/ssl/auth-rules.component.html b/...rc/app/modules/home/components/client-credentials-templates/ssl/auth-rules.component.html
@@ -27,7 +27,7 @@
         </mat-panel-description>
       }
     </mat-expansion-panel-header>
-    <div fxLayout="column" [formGroup]="rulesMappingFormGroup">
+    <div class="flex flex-col" [formGroup]="rulesMappingFormGroup">
       <section>
         <div class="tb-hint" [innerHtml]="'mqtt-client-credentials.hint-authorization-ssl' | translate"></div>
         <div class="tb-hint" [innerHtml]="'mqtt-client-credentials.hint-authorization-ssl-example' | translate"></div>
@@ -36,8 +36,8 @@
         <div formArrayName="authRulesMapping">
           <fieldset class="fields-group">
             <legend class="group-title">{{ 'mqtt-client-credentials.rule' | translate }} #{{ (index +  1) }}</legend>
-            <div [formGroupName]="index" fxFlex fxLayoutAlign="flex-start center" fxLayoutGap="8px">
-              <div fxFlex fxLayout="column">
+            <div [formGroupName]="index" class="flex flex-1 flex-row items-center gap-2">
+              <div class="flex flex-1 flex-col">
                 <mat-form-field class="mat-block">
                   <mat-label translate>mqtt-client-credentials.certificate-matcher-regex</mat-label>
                   <input matInput formControlName="certificateMatcherRegex" required>
@@ -77,7 +77,7 @@
                       [matChipInputFor]="chipListPub"
                       (matChipInputTokenEnd)="addTopicRule($event, index, authRulePatternsType.PUBLISH)">
                   </mat-chip-grid>
-                  <mat-icon [fxShow]="!pubRulesArray[index]?.length" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-pub' | translate">
+                  <mat-icon [class.!hidden]="pubRulesArray[index]?.length" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-pub' | translate">
                     warning
                   </mat-icon>
                 </mat-form-field>
@@ -106,13 +106,13 @@
                       [matChipInputFor]="chipListSub"
                       (matChipInputTokenEnd)="addTopicRule($event, index, authRulePatternsType.SUBSCRIBE)">
                   </mat-chip-grid>
-                  <mat-icon [fxShow]="!subRulesArray[index]?.length" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-sub' | translate">
+                  <mat-icon [class.!hidden]="subRulesArray[index]?.length" matSuffix style="color: #ff9a00" [matTooltip]="'mqtt-client-credentials.warning-sub' | translate">
                     warning
                   </mat-icon>
                 </mat-form-field>
               </div>
               <button mat-icon-button color="warn"
-                [fxShow]="!disabled()"
+                [class.!hidden]="disabled()"
                 [disabled]="rulesFormArray?.controls?.length === 1"
                 type="button"
                 (click)="removeRule(index)"
@@ -126,7 +126,7 @@
       }
     </div>
     <button mat-stroked-button color="primary"
-      [fxShow]="!disabled()"
+      [class.!hidden]="disabled()"
       (click)="addRule()"
       type="button">
       {{ 'mqtt-client-credentials.add-authorization-rules' | translate }}

diff --git a/ui-ngx/src/app/modules/home/components/client-credentials-templates/ssl/ssl.component.html b/ui-ngx/src/app/modules/home/components/client-credentials-templates/ssl/ssl.component.html
@@ -24,7 +24,7 @@
       <input required matInput formControlName="certCnPattern">
       <tb-copy-button #copyBtn
         (click)="onClickTbCopyButton(credentialsMqttFormGroup.get('certCnPattern')?.value)"
-        [fxShow]="credentialsMqttFormGroup?.get('certCnPattern').value?.length" matSuffix
+        [class.!hidden]="!credentialsMqttFormGroup?.get('certCnPattern').value?.length" matSuffix
         [copyText]="credentialsMqttFormGroup?.get('certCnPattern').value">
       </tb-copy-button>
       @if (credentialsMqttFormGroup.get('certCnPattern').hasError('required')) {

diff --git a/...c/app/modules/home/components/client-credentials-templates/user-properties.component.html b/...c/app/modules/home/components/client-credentials-templates/user-properties.component.html
@@ -16,18 +16,18 @@
 
 -->
 <form [formGroup]="userPropertiesFormGroup">
-  <fieldset fxLayout="column" class="fields-group" style="padding: 0 16px 16px 16px" [disabled]="mqttVersion() !== 5">
+  <fieldset class="fields-group flex flex-col" style="padding: 0 16px 16px 16px" [disabled]="mqttVersion() !== 5">
     <legend class="group-title" translate>ws-client.connections.user-properties</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <section class="container">
         @for (control of userPropertiesFormArray.controls; track control) {
           <div formArrayName="props">
-            <div [formGroupName]="$index" fxFlex fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
-              <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+            <div [formGroupName]="$index" class="flex flex-1 flex-row items-center justify-center gap-4">
+              <mat-form-field class="flex flex-1" subscriptSizing="dynamic">
                 <mat-label translate>ws-client.connections.key</mat-label>
                 <input matInput formControlName="k">
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+              <mat-form-field class="flex flex-1" subscriptSizing="dynamic">
                 <mat-label translate>ws-client.connections.value</mat-label>
                 <input matInput formControlName="v" type="text">
               </mat-form-field>
@@ -42,7 +42,7 @@
       </section>
       <div class="mat-block">
         <button mat-stroked-button color="primary"
-          [fxShow]="!disabled()"
+          [class.!hidden]="disabled()"
           (click)="addRule()"
           type="button">
           {{ 'ws-client.connections.add-user-property' | translate }}

diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -17,9 +17,9 @@
 -->
 <header>
   <mat-toolbar class="details-toolbar" color="primary" [ngStyle]="{height: headerHeightPx()+'px'}">
-    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" style="height: 100%;">
-      <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start" [fxHide]="showSearchPane">
-        <div class="tb-details-title" fxLayout="row" fxLayoutAlign="start center">
+    <div class="mat-toolbar-tools flex h-full flex-row items-center">
+      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col" [class.!hidden]="showSearchPane">
+        <div class="tb-details-title flex flex-row items-center">
           <ng-content select=".prefix-title-buttons"></ng-content>
           <span>{{ headerTitle() }}</span>
         </div>
@@ -29,7 +29,7 @@
         </span>
       </div>
       @if (isShowSearch()) {
-        <div [fxHide]="!showSearchPane" fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
+        <div [class.!hidden]="!showSearchPane" class="flex w-full flex-row items-center">
           <button mat-icon-button (click)="onToggleSearch()">
             <mat-icon class="material-icons">arrow_back</mat-icon>
           </button>
@@ -49,7 +49,7 @@
       </button>
     </div>
     @if (!isReadOnly()) {
-      <section fxLayout="row" class="layout-wrap tb-header-buttons">
+      <section class="layout-wrap tb-header-buttons flex flex-row">
         <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
           mat-fab
           matTooltip="{{ 'action.apply-changes' | translate }}"
@@ -71,6 +71,6 @@
     }
   </mat-toolbar>
 </header>
-<div fxFlex class="mat-content" [ngStyle]="{backgroundColor: backgroundColor()}">
+<div class="mat-content flex flex-1" [ngStyle]="{backgroundColor: backgroundColor()}">
   <ng-content></ng-content>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ translations.add }}</h2>
-  <span fxFlex></span>
+  <span class="flex flex-1"></span>
   <div [tb-help]="helpLinkId()"></div>
   <button mat-icon-button
     (click)="cancel()"
@@ -53,13 +53,13 @@ <h2 translate>{{ translations.add }}</h2>
 </div>
 <div mat-dialog-actions style="padding: 0">
   @if (addDialogOwnerAndGroupWizard) {
-    <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
+    <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end">
       @if (selectedIndex > 0) {
         <button mat-stroked-button
           [disabled]="(isLoading$ | async)"
         (click)="previousStep()">{{ 'action.back' | translate }}</button>
       }
-      <span fxFlex></span>
+      <span class="flex flex-1"></span>
       @if (showNext) {
         <button mat-stroked-button
           color="primary"
@@ -69,7 +69,7 @@ <h2 translate>{{ translations.add }}</h2>
     </div>
   }
   <mat-divider style="width: 100%"></mat-divider>
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end gap-2">
     <button mat-button
       [disabled]="(isLoading$ | async)"
     (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ @@
       }
       .tb-config-table {
+        flex: 1 1 0 !important;
         overflow: auto;
       }
     }
@@ Expand Down @@