Add Prettier format script for consistent code formatting in UI files

.github/workflows/CI.yml

@@ -330,6 +330,11 @@ jobs:
           cd src/github.com/goharbor/harbor
           bash ./tests/showtime.sh ./tests/ci/ui_ut_run.sh
           df -h
+      - name: Fail if format changes are detected
+        if: ${{ failure() }}
+        run: |
+          echo "Code formatting issues detected. Please run 'npm run format' locally and commit the changes."
+          exit 1
       - name: Codecov For UI
         uses: codecov/codecov-action@v4
         with:

src/portal/package.json

@@ -4,6 +4,8 @@
   "description": "Harbor UI with Clarity",
   "angular-cli": {},
   "scripts": {
+    "format": "prettier --write \"src/**/*.{ts,js,html,scss}\" && ng lint --fix",
+    "prettier:check": "prettier --check \"src/**/*.{ts,js,html,scss}\"",
     "postinstall": "node scripts/convert-yaml-to-json.js && ng-swagger-gen -i ng-swagger-gen/swagger.json -o ng-swagger-gen && node scripts/delete-swagger-json.js",
     "start": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0",
     "start:prod": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --configuration production",
@@ -62,6 +64,7 @@
     "@angular/cli": "^16.2.16",
     "@angular/compiler-cli": "^16.2.9",
     "@cypress/schematic": "^2.5.2",
+    "@types/eslint": "^9.6.1",
     "@types/express": "^4.17.21",
     "@types/jasmine": "~4.3.1",
     "@types/node": "^16.18.108",

src/portal/src/app/account/sign-in/sign-in.component.scss

@@ -20,26 +20,26 @@
     top: -9px;
 }
 
-.bg{
+.bg {
     position: absolute;
-    top: 60px; 
+    top: 60px;
     right: 0;
-    width: 100%; 
-    height: 100%; 
+    width: 100%;
+    height: 100%;
     background-size: cover;
 }
 
 .login-wrapper {
     flex-wrap: wrap;
 
     .login {
-        background:transparent;
+        background: transparent;
     }
 }
 
 .reset-label {
-    font-size:inherit;
-    color:inherit;
+    font-size: inherit;
+    color: inherit;
     font-family: inherit;
 }
 
@@ -90,13 +90,13 @@
 
 .title {
     position: absolute;
-    top: 10rem
+    top: 10rem;
 }
 
 .login-group {
     width: 70%;
     position: absolute;
-    top: 10rem
+    top: 10rem;
 }
 
 .more-info {

src/portal/src/app/account/sign-in/top-repo/top-repo.component.scss

@@ -5,4 +5,4 @@
     .pop-repos {
         margin-top: 0;
     }
-}
+}

src/portal/src/app/base/account-settings/account-settings-modal.component.scss

@@ -11,10 +11,10 @@ clr-modal {
             padding-right: 3px;
         }
 
-    bottom: 9px;
+        bottom: 9px;
     }
 
-    .label-inner-text{
+    .label-inner-text {
         margin: 0;
     }
 

src/portal/src/app/base/global-confirmation-dialog/global-confirmation-dialog.component.scss

@@ -18,13 +18,36 @@
     word-break: break-all;
 }
 /* stylelint-disable */
-.batchInfoUl{
-    padding: 20px; list-style-type: none;
+.batchInfoUl {
+    padding: 20px;
+    list-style-type: none;
+}
+.batchInfoUl li {
+    line-height: 24px;
+    border-bottom: 1px solid #e8e8e8;
 }
-.batchInfoUl li {line-height: 24px;border-bottom: 1px solid #e8e8e8;}
 
-.batchInfoUl li span:first-child {padding-right: 20px; width: 240px; display: inline-block; color:#666;
-    text-overflow: ellipsis; overflow: hidden; vertical-align: middle;}
-.batchInfoUl li span:last-child {width: 220px; display: inline-block;  color:#666;}
-.batchInfoUl li span i {display: inline-block; line-height: 1.2em; font-size: 0.8em; color: #999;}
-.batchInfoUl li span a{cursor: pointer; text-decoration: underline;}
+.batchInfoUl li span:first-child {
+    padding-right: 20px;
+    width: 240px;
+    display: inline-block;
+    color: #666;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    vertical-align: middle;
+}
+.batchInfoUl li span:last-child {
+    width: 220px;
+    display: inline-block;
+    color: #666;
+}
+.batchInfoUl li span i {
+    display: inline-block;
+    line-height: 1.2em;
+    font-size: 0.8em;
+    color: #999;
+}
+.batchInfoUl li span a {
+    cursor: pointer;
+    text-decoration: underline;
+}

src/portal/src/app/base/harbor-shell/harbor-shell.component.scss

@@ -6,7 +6,7 @@
     position: relative !important;
 }
 
-.content-container{
+.content-container {
     position: relative;
 }
 

src/portal/src/app/base/left-side-nav/clearing-job/audit-log-purge/history/purge-history.component.scss

@@ -1,5 +1,5 @@
 .history-header {
-    margin:20px 0 6px;
+    margin: 20px 0 6px;
     display: inline-block;
     width: 97%;
 }
@@ -15,6 +15,6 @@
     cursor: pointer;
 
     &:hover {
-        color: #007CBB;
+        color: #007cbb;
     }
 }

src/portal/src/app/base/left-side-nav/clearing-job/audit-log-purge/set-job/set-job.component.scss

@@ -4,7 +4,7 @@
 }
 
 .gc-start-btn {
-    width:150px;
+    width: 150px;
     margin-top: 35px;
 }
 
@@ -48,6 +48,6 @@
 }
 
 .p-06 {
-    padding-left: .6rem;
-    padding-right: .6rem;
+    padding-left: 0.6rem;
+    padding-right: 0.6rem;
 }

src/portal/src/app/base/left-side-nav/clearing-job/gc-page/gc/gc-history/gc-history.component.scss

@@ -1,5 +1,5 @@
 .history-header {
-    margin:20px 0 6px;
+    margin: 20px 0 6px;
     display: inline-block;
     width: 97%;
 }
@@ -15,7 +15,7 @@
     cursor: pointer;
 
     &:hover {
-        color: #007CBB;
+        color: #007cbb;
     }
 }
 

src/portal/src/app/base/left-side-nav/clearing-job/gc-page/gc/gc.component.scss

@@ -4,7 +4,7 @@
 }
 
 .gc-start-btn {
-    width:150px;
+    width: 150px;
     margin-top: 35px;
 }
 
@@ -32,8 +32,8 @@
 }
 
 .p-06 {
-    padding-left: .6rem;
-    padding-right: .6rem;
+    padding-left: 0.6rem;
+    padding-right: 0.6rem;
 }
 
 .worker-select {

src/portal/src/app/base/left-side-nav/config/auth/config-auth.component.scss

@@ -1,4 +1,3 @@
-
 .oidc-tip {
     color: rgb(10 10 10);
     margin-top: 1rem;
@@ -13,5 +12,5 @@
 }
 
 .clr-control-label {
- width: 10.6rem !important;
+    width: 10.6rem !important;
 }