PMM-7 Run unit tests for QAN & add ci for setup page

.github/workflows/build.yml

@@ -1,6 +1,9 @@
 name: Test pipeline
 
-on: pull_request
+on:
+  pull_request:
+    paths:
+      - pmm-app/**
 
 jobs:
   build:
@@ -29,6 +32,28 @@ jobs:
           path: pmm-app/dist/
           if-no-files-found: error
 
+  unit_tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Run with Node 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: pmm-app/yarn.lock
+
+      - name: Install deps
+        run: make prepare_release
+
+      - name: Run lint
+        run: cd pmm-app && yarn lint:check
+
+      - name: Run unit tests
+        run: cd pmm-app && yarn test:ci
+
   code_coverage:
     needs: build
     runs-on: ubuntu-latest
@@ -57,7 +82,7 @@ jobs:
         run: make generate_coverage
 
   workflow_success:
-    needs: [code_coverage, build]
+    needs: [unit_tests, code_coverage, build]
     name: Slack Notification success
     runs-on: ubuntu-latest
     env:
@@ -77,7 +102,7 @@ jobs:
 
   workflow_failure:
     if: ${{ failure() }}
-    needs: [code_coverage, build]
+    needs: [unit_tests, code_coverage, build]
     name: Slack Notification failure
     runs-on: ubuntu-latest
     env:

.github/workflows/setup-page.yml

@@ -0,0 +1,29 @@
+name: Setup Page pipeline
+
+on:
+  pull_request:
+    paths:
+      - setup-page/**
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Run with Node 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "npm"
+          cache-dependency-path: setup-page/package-lock.json
+
+      - name: Install deps
+        run: cd setup-page && npm ci
+
+      - name: Run lint
+        run: cd setup-page && npm run lint
+
+      - name: Run build
+        run: cd setup-page && npm run build

pmm-app/package.json

@@ -16,6 +16,7 @@
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "jest": "jest",
     "lint": "yarn lint:dev",
+    "lint:check": "eslint --ext .tsx,.ts src/",
     "lint:dev": "eslint --ext .tsx,.ts --fix src/",
     "lint:fix": "yarn run lint --fix",
     "server": "docker-compose up --build",

pmm-app/src/pmm-qan/panel/components/Details/Metrics/Metrics.test.tsx

@@ -11,9 +11,10 @@ jest.mock('shared/components/helpers/notification-manager');
 jest.mock('antd/es/tooltip', () => <div className="tooltip" />);
 
 jest.mock('./hooks/useHistogram', () => ({
-  useHistogram: jest.fn(({ theme }) => (
-    [getChartDataFromHistogramItems([{ frequency: 6175, range: '(0-3)' }], theme), true]
-  )),
+  useHistogram: jest.fn(({ theme }) => [
+    getChartDataFromHistogramItems([{ frequency: 6175, range: '(0-3)' }], theme),
+    true,
+  ]),
 }));
 
 const originalConsoleError = console.error;
@@ -2696,6 +2697,10 @@ const panelState = {
 describe('useFilters::', () => {
   beforeEach(() => {
     console.error = jest.fn();
+    // TODO: Grafana Tooltip component uses a react 18 hook - useId
+    // due to enzyme we are currently stuck at react 17, mocking for now
+    // @ts-ignore
+    React.useId = () => '';
   });
 
   afterEach(() => {
@@ -2717,7 +2722,6 @@ describe('useFilters::', () => {
           textMetrics={textMetrics}
           loading={false}
         />
-        ,
       </QueryAnalyticsProvider.Provider>,
     );
 
@@ -2731,14 +2735,7 @@ describe('useFilters::', () => {
           panelState,
         }}
       >
-        <Metrics
-          databaseType={Databases.mysql}
-          groupBy="queryid"
-          totals
-          metrics={metrics}
-          loading={false}
-        />
-        ,
+        <Metrics databaseType={Databases.mysql} groupBy="queryid" totals metrics={metrics} loading={false} />
       </QueryAnalyticsProvider.Provider>,
     );
 
@@ -2760,7 +2757,6 @@ describe('useFilters::', () => {
           textMetrics={textMetrics}
           loading={false}
         />
-        ,
       </QueryAnalyticsProvider.Provider>,
     );
 

pmm-app/src/shared/components/Elements/Charts/TimeDistribution/__snapshots__/TimeDistribution.test.tsx.snap

@@ -4,14 +4,14 @@ exports[`TimeDistributionChart chart test Renders correct 1`] = `
 <Fragment>
   <h
     data={
-      Array [
-        Object {
+      [
+        {
           "color": "#BD4848",
           "description": "0.08%",
           "name": "Lock Time",
           "value": 1,
         },
-        Object {
+        {
           "color": "gray",
           "description": "99.92%",
           "name": "Other",