Automatic code formatting for helix-front (#2157)

Add automatic formatting for JavaScript, TypeScript, JSON, CSS, and HTML files in the helix-front module.
apache · Jun 16, 2022 · 8a19aa4 · 8a19aa4
1 parent 9aa8069
commit 8a19aa4
Show file tree

Hide file tree

Showing 181 changed files with 2,290 additions and 2,036 deletions.
diff --git a/helix-front/.eslintrc.json b/helix-front/.eslintrc.json
@@ -1,24 +1,18 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "cypress/tsconfig.json"
-        ],
+        "project": ["tsconfig.json", "cypress/tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [
         "plugin:@angular-eslint/ng-cli-compat",
         "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "prettier"
       ],
       "rules": {
         "@angular-eslint/component-selector": [
@@ -65,18 +59,8 @@
             "hoist": "all"
           }
         ],
-        "@typescript-eslint/semi": [
-          "off",
-          null
-        ],
-        "brace-style": [
-          "error",
-          "1tbs"
-        ],
-        "eqeqeq": [
-          "off",
-          "smart"
-        ],
+        "@typescript-eslint/semi": ["off", null],
+        "eqeqeq": ["off", "smart"],
         "guard-for-in": "off",
         "id-blacklist": "off",
         "id-match": "off",
@@ -89,6 +73,7 @@
         "no-redeclare": "error",
         "no-underscore-dangle": "off",
         "radix": "off",
+        "arrow-body-style": "off",
         "prefer-arrow/prefer-arrow-functions": "off",
         "@typescript-eslint/naming-convention": "off",
         "@typescript-eslint/member-ordering": "off",
@@ -99,12 +84,8 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended", "prettier"],
       "rules": {
         "@angular-eslint/template/eqeqeq": "off"
       }

diff --git a/helix-front/.prettierignore b/helix-front/.prettierignore
@@ -0,0 +1,6 @@
+.angular
+dist
+node
+node_modules
+target
+package.json
diff --git a/helix-front/.prettierrc.json b/helix-front/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/helix-front/.vscode/launch.json b/helix-front/.vscode/launch.json
@@ -12,9 +12,7 @@
       "webRoot": "${workspaceRoot}",
       "sourceMaps": true,
       "userDataDir": "${workspaceRoot}/.vscode/chrome",
-      "runtimeArgs": [
-        "--disable-session-crashed-bubble"
-      ]
+      "runtimeArgs": ["--disable-session-crashed-bubble"]
     },
     {
       "name": "Attach Chrome",
@@ -26,4 +24,4 @@
       "sourceMaps": true
     }
   ]
-}
+}
diff --git a/helix-front/angular.json b/helix-front/angular.json
@@ -17,14 +17,8 @@
             "main": "client/main.ts",
             "tsConfig": "client/tsconfig.app.json",
             "polyfills": "client/polyfills.ts",
-            "assets": [
-              "client/assets",
-              "client/favicon.ico"
-            ],
-            "styles": [
-              "client/styles.scss",
-              "client/theme.scss"
-            ],
+            "assets": ["client/assets", "client/favicon.ico"],
+            "styles": ["client/styles.scss", "client/theme.scss"],
             "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -83,23 +77,13 @@
         "test": {
           "builder": "@angular-builders/jest:run",
           "options": {
-            "main": [
-              "setupJest.ts"
-            ],
+            "main": ["setupJest.ts"],
             "tsConfig": "client/tsconfig.spec.json",
-            "polyfills": [
-              "client/polyfills.ts"
-            ],
+            "polyfills": ["client/polyfills.ts"],
             "no-cache": true,
             "scripts": [],
-            "styles": [
-              "client/styles.scss",
-              "client/theme.scss"
-            ],
-            "assets": [
-              "client/assets",
-              "client/favicon.ico"
-            ]
+            "styles": ["client/styles.scss", "client/theme.scss"],
+            "assets": ["client/assets", "client/favicon.ico"]
           }
         },
         "lint": {
@@ -111,10 +95,7 @@
               "cypress/tsconfig.json"
             ],
             "exclude": [],
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "cypress-run": {
@@ -172,10 +153,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "cypress/**/*.ts",
-              "cypress/**/*.html"
-            ]
+            "lintFilePatterns": ["cypress/**/*.ts", "cypress/**/*.html"]
           }
         },
         "cypress-run": {

diff --git a/helix-front/client/app/app-routing.module.ts b/helix-front/client/app/app-routing.module.ts
@@ -21,12 +21,12 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 const HELIX_ROUTES: Routes = [
   {
     path: '',
-    component: HelixListComponent
+    component: HelixListComponent,
   },
   {
     path: 'embed',
     redirectTo: '/?embed=true',
-    pathMatch: 'full'
+    pathMatch: 'full',
   },
   {
     path: ':helix',
@@ -39,29 +39,29 @@ const HELIX_ROUTES: Routes = [
           {
             path: '',
             redirectTo: 'resources',
-            pathMatch: 'full'
+            pathMatch: 'full',
           },
           {
             path: 'configs',
-            component: ConfigDetailComponent
+            component: ConfigDetailComponent,
           },
           {
             path: 'instances',
-            component: InstanceListComponent
+            component: InstanceListComponent,
           },
           {
             path: 'resources',
-            component: ResourceListComponent
+            component: ResourceListComponent,
           },
           {
             path: 'workflows',
-            component: WorkflowListComponent
+            component: WorkflowListComponent,
           },
           {
             path: 'dashboard',
-            component: DashboardComponent
-          }
-        ]
+            component: DashboardComponent,
+          },
+        ],
       },
       {
         path: ':cluster_name/controller',
@@ -70,13 +70,13 @@ const HELIX_ROUTES: Routes = [
           {
             path: '',
             redirectTo: 'history',
-            pathMatch: 'full'
+            pathMatch: 'full',
           },
           {
             path: 'history',
-            component: HistoryListComponent
-          }
-        ]
+            component: HistoryListComponent,
+          },
+        ],
       },
       {
         path: ':cluster_name/resources/:resource_name',
@@ -85,35 +85,35 @@ const HELIX_ROUTES: Routes = [
           {
             path: '',
             redirectTo: 'partitions',
-            pathMatch: 'full'
+            pathMatch: 'full',
           },
           {
             path: 'partitions',
-            component: PartitionListComponent
+            component: PartitionListComponent,
           },
           {
             path: 'externalView',
             component: ResourceNodeViewerComponent,
             data: {
-              path: 'externalView'
-            }
+              path: 'externalView',
+            },
           },
           {
             path: 'idealState',
             component: ResourceNodeViewerComponent,
             data: {
-              path: 'idealState'
-            }
+              path: 'idealState',
+            },
           },
           {
             path: 'configs',
-            component: ConfigDetailComponent
-          }
-        ]
+            component: ConfigDetailComponent,
+          },
+        ],
       },
       {
         path: ':cluster_name/workflows/:workflow_name',
-        component: WorkflowDetailComponent
+        component: WorkflowDetailComponent,
       },
       {
         path: ':cluster_name/instances/:instance_name',
@@ -122,27 +122,28 @@ const HELIX_ROUTES: Routes = [
           {
             path: '',
             redirectTo: 'resources',
-            pathMatch: 'full'
+            pathMatch: 'full',
           },
           {
             path: 'resources',
             component: ResourceListComponent,
             data: {
-              forInstance: true
-            }
+              forInstance: true,
+            },
           },
           {
             path: 'configs',
-            component: ConfigDetailComponent
+            component: ConfigDetailComponent,
           },
           {
             path: 'history',
-            component: HistoryListComponent
-          }
-        ]
-      }
-    ]
-  }
+            component: HistoryListComponent,
+          },
+        ],
+      },
+    ],
+  },
 ];
 
-export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(HELIX_ROUTES, { relativeLinkResolution: 'legacy' });
+export const AppRoutingModule: ModuleWithProviders<RouterModule> =
+  RouterModule.forRoot(HELIX_ROUTES, { relativeLinkResolution: 'legacy' });
diff --git a/helix-front/client/app/app.component.html b/helix-front/client/app/app.component.html
@@ -18,7 +18,11 @@
   -->
 
 <section class="app" fxLayout="column" fxFill>
-  <mat-toolbar *ngIf="headerEnabled" class="header mat-elevation-z7" color="primary">
+  <mat-toolbar
+    *ngIf="headerEnabled"
+    class="header mat-elevation-z7"
+    color="primary"
+  >
     <a mat-button routerLink="/">
       <img class="helix-logo" src="assets/logo.png" />
       <span class="helix-title">Helix</span>
@@ -29,11 +33,20 @@
       {{ currentUser | async }}
     </a>
   </mat-toolbar>
-  <mat-progress-bar *ngIf="isLoading" mode="indeterminate" [ngClass]="{'no-header': !headerEnabled}"></mat-progress-bar>
-  <section class="main-container" [ngClass]="{'no-header': !headerEnabled}">
+  <mat-progress-bar
+    *ngIf="isLoading"
+    mode="indeterminate"
+    [ngClass]="{ 'no-header': !headerEnabled }"
+  ></mat-progress-bar>
+  <section class="main-container" [ngClass]="{ 'no-header': !headerEnabled }">
     <router-outlet></router-outlet>
   </section>
-  <section *ngIf="footerEnabled" class="footer mat-elevation-z7" fxLayout="row" fxLayoutAlign="center center">
+  <section
+    *ngIf="footerEnabled"
+    class="footer mat-elevation-z7"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+  >
     <span>&copy; 2018 Helix. All rights reserved.</span>
   </section>
 </section>
diff --git a/helix-front/client/app/app.component.scss b/helix-front/client/app/app.component.scss
@@ -1,4 +1,5 @@
-.header, .footer {
+.header,
+.footer {
   z-index: 7;
 }