Add CI

Resolves #1.

Signed-off-by: Masashi Honma <masashi.honma@gmail.com>

.github/workflows/ci.yaml

@@ -0,0 +1,37 @@
+name: CI Workflow
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    branches:
+      - main
+      - dev
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Nodejs with yarn caching
+        uses: actions/setup-node@v4
+        with:
+          cache: yarn
+          node-version-file: ".nvmrc"
+
+      - name: Install dependencies
+        run: |
+          yarn install
+
+      - name: Run lint
+        run: |
+          cd pkg/supportability-review-app/
+          npm run format-check
+
+      - name: Build Rancher Extension
+        run: |
+          yarn build-pkg supportability-review-app

pkg/supportability-review-app/.eslintrc.cjs

@@ -0,0 +1,19 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    /* ignore _ variable name */
+    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^_$' }]
+  }
+};

pkg/supportability-review-app/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "htmlWhitespaceSensitivity": "ignore",
+  "bracketSameLine": true
+}

pkg/supportability-review-app/components/ChecksSummaryWidget.vue

@@ -29,20 +29,20 @@ export default {
   },
   computed: {
     summaryData() {
-      return [this.info.checks_pass, this.info.checks_warn, this.info.checks_fail, this.info.checks_skip]
+      return [this.info.checks_pass, this.info.checks_warn, this.info.checks_fail, this.info.checks_skip];
     }
   },
   methods: {
     getLabel(index) {
-      const labels = ['Pass', 'Warn', 'Fail', 'Skip']
-      return labels[index]
+      const labels = ['Pass', 'Warn', 'Fail', 'Skip'];
+      return labels[index];
     },
     getBorderClass(index) {
-      const classes = ['border-success', 'border-warning', 'border-danger', 'border-secondary']
-      return classes[index]
+      const classes = ['border-success', 'border-warning', 'border-danger', 'border-secondary'];
+      return classes[index];
     }
   }
-}
+};
 </script>
 
 <style scoped>

pkg/supportability-review-app/components/ClusterDistroWidget.vue

@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import AksLogo from '../images/aks.png'
-import EksLogo from '../images/eks.png'
-import GkeLogo from '../images/gke.png'
-import HarvesterLogo from '../images/harvester.png'
-import K3sLogo from '../images/k3s.png'
-import RkeLogo from '../images/rke.png'
+import AksLogo from '../images/aks.png';
+import EksLogo from '../images/eks.png';
+import GkeLogo from '../images/gke.png';
+import HarvesterLogo from '../images/harvester.png';
+import K3sLogo from '../images/k3s.png';
+import RkeLogo from '../images/rke.png';
 
 export default {
   name: 'ClustersDistroWidget',
@@ -42,17 +42,17 @@ export default {
         k3s: K3sLogo,
         rke: RkeLogo,
         rke2: RkeLogo
-      }
-      return logos[type] || ''
+      };
+      return logos[type] || '';
     },
     getClusterCountString(count) {
-      return count === 1 ? `${count} Cluster` : `${count} Clusters`
+      return count === 1 ? `${count} Cluster` : `${count} Clusters`;
     },
     getClusterTypeString(type) {
-      return type.toUpperCase()
+      return type.toUpperCase();
     }
   }
-}
+};
 </script>
 
 <style scoped>

pkg/supportability-review-app/components/DashboardView.vue

@@ -26,10 +26,10 @@ export default {
     goToReviewBundle() {
       this.$router.push({
         path: '/c/_/sr/sr.cattle.io.reviewbundle/create'
-      })
+      });
     }
   }
-}
+};
 </script>
 <style scoped>
 .dashboard-view {

pkg/supportability-review-app/components/InstallView.vue

@@ -1,16 +1,16 @@
 <script>
-import { mapGetters } from 'vuex'
-import { allHash } from '@shell/utils/promise'
+import { mapGetters } from 'vuex';
+import { allHash } from '@shell/utils/promise';
 
-import { Banner } from '@components/Banner'
-import AsyncButton from '@shell/components/AsyncButton'
-import Loading from '@shell/components/Loading'
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import Loading from '@shell/components/Loading';
 
-import { CATALOG } from '@shell/config/types'
-import { REPO_TYPE, REPO, CHART, VERSION, LOCAL } from '@shell/config/query-params'
+import { CATALOG } from '@shell/config/types';
+import { REPO_TYPE, REPO, CHART, VERSION, LOCAL } from '@shell/config/query-params';
 
-import { SR_CHARTS } from '../config/types'
-import { handleGrowl, getLatestStableVersion } from '../utils/utils'
+import { SR_CHARTS } from '../config/types';
+import { handleGrowl, getLatestStableVersion } from '../utils/utils';
 
 export default {
   name: 'InstallView',
@@ -20,27 +20,27 @@ export default {
     Loading
   },
   async fetch() {
-    console.log('InstallView: async fetch')
-    this.reloadReady = false
-    const reqs = {}
+    console.log('InstallView: async fetch');
+    this.reloadReady = false;
+    const reqs = {};
 
     if (this.$store.getters['management/canList'](CATALOG.CLUSTER_REPO)) {
       reqs.repos = this.$store.dispatch('management/findAll', {
         type: CATALOG.CLUSTER_REPO
-      })
+      });
     }
 
     // force the refresh of the catalog to populate the charts
     if (!this.srRepo || !this.operatorChart) {
-      reqs.catalogRefresh = this.$store.dispatch('catalog/refresh')
+      reqs.catalogRefresh = this.$store.dispatch('catalog/refresh');
     }
 
-    await allHash(reqs)
-    this.initLoading = false
-    console.log('InstallView: async fetch: done')
+    await allHash(reqs);
+    this.initLoading = false;
+    console.log('InstallView: async fetch: done');
   },
   data() {
-    return { reloadReady: false, initLoading: true }
+    return { reloadReady: false, initLoading: true };
   },
   computed: {
     ...mapGetters({
@@ -50,11 +50,11 @@ export default {
     }),
 
     srRepo() {
-      console.log('InstallView: srRepo')
-      console.log('InstallView: this.charts: ', this.charts)
-      const chart = this.charts?.find((chart) => chart.chartName === SR_CHARTS.OPERATOR)
+      console.log('InstallView: srRepo');
+      console.log('InstallView: this.charts: ', this.charts);
+      const chart = this.charts?.find((chart) => chart.chartName === SR_CHARTS.OPERATOR);
 
-      return this.repos?.find((repo) => repo.id === chart?.repoName)
+      return this.repos?.find((repo) => repo.id === chart?.repoName);
     },
 
     operatorChart() {
@@ -63,77 +63,77 @@ export default {
           repoName: this.srRepo ? this.srRepo.id : null,
           repoType: 'cluster',
           chartName: SR_CHARTS.OPERATOR
-        }) || null
-      console.log('InstallView: operatorChart: chart=', chart)
+        }) || null;
+      console.log('InstallView: operatorChart: chart=', chart);
 
-      return chart
+      return chart;
     }
   },
   methods: {
     async refreshCharts(retry = 0, init) {
-      console.log('InstallView: refreshCharts, retry=', retry)
+      console.log('InstallView: refreshCharts, retry=', retry);
       try {
-        await this.$store.dispatch('catalog/refresh')
+        await this.$store.dispatch('catalog/refresh');
       } catch (e) {
-        handleGrowl({ error: e, store: this.$store })
+        handleGrowl({ error: e, store: this.$store });
       }
 
       if (!this.operatorChart && retry === 0) {
         await this.$store.dispatch('management/findAll', {
           type: CATALOG.CLUSTER_REPO
-        })
-        await this.refreshCharts(retry + 1)
+        });
+        await this.refreshCharts(retry + 1);
       }
 
       if (!this.operatorChart && retry === 1 && !init) {
-        this.reloadReady = true
+        this.reloadReady = true;
       }
     },
 
     async chartRoute() {
-      console.log('InstallView: chartRoute')
+      console.log('InstallView: chartRoute');
       if (!this.operatorChart) {
         try {
-          await this.refreshCharts()
+          await this.refreshCharts();
         } catch (e) {
-          handleGrowl({ error: e, store: this.$store })
+          handleGrowl({ error: e, store: this.$store });
 
-          return
+          return;
         }
       }
 
-      const { repoType, repoName, chartName, versions } = this.operatorChart
+      const { repoType, repoName, chartName, versions } = this.operatorChart;
 
-      const latestStableVersion = getLatestStableVersion(versions)
+      const latestStableVersion = getLatestStableVersion(versions);
 
       if (latestStableVersion) {
         const query = {
           [REPO_TYPE]: repoType,
           [REPO]: repoName,
           [CHART]: chartName,
           [VERSION]: latestStableVersion.version
-        }
+        };
 
         this.$router.push({
           name: 'c-cluster-apps-charts-install',
           params: { cluster: LOCAL },
           query
-        })
+        });
       } else {
         const error = {
           _statusText: this.t('sr.versionError.title'),
           message: this.t('sr.versionError.message')
-        }
+        };
 
-        handleGrowl({ error, store: this.$store })
+        handleGrowl({ error, store: this.$store });
       }
     },
 
     reload() {
-      this.$router.go()
+      this.$router.go();
     }
   }
-}
+};
 </script>
 
 <template>