From d89f4161bb037081e0ea47997ca105cb690bcf62 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <32638572+matejkubinec@users.noreply.github.com>
Date: Thu, 2 May 2024 11:51:39 +0200
Subject: [PATCH] PMM-7 Run unit tests for QAN & add ci for setup page (#1595)

* PMM-7 Run unit tests for QAN & add ci for setup page (#1593)

* PMM-7 Switch unit tests to node 18

* PMM-7 Use correct test command

* PMM-7 Update snapshots

* PMM-7 Mock useId hook for unit tests
---
 .github/workflows/build.yml                   |  31 +-
 .github/workflows/setup-page.yml              |  29 +
 pmm-app/package.json                          |   1 +
 .../Details/Metrics/Metrics.test.tsx          |  22 +-
 .../TimeDistribution.test.tsx.snap            |   6 +-
 .../__snapshots__/Helpers.test.tsx.snap       | 931 ++++++++++--------
 setup-page/.gitignore                         |   1 +
 7 files changed, 572 insertions(+), 449 deletions(-)
 create mode 100644 .github/workflows/setup-page.yml

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index d975224b85..e0c0666aca 100644
--- a/.github/workflows/build.yml
+++ b/.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:
diff --git a/.github/workflows/setup-page.yml b/.github/workflows/setup-page.yml
new file mode 100644
index 0000000000..aab76a27d5
--- /dev/null
+++ b/.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
diff --git a/pmm-app/package.json b/pmm-app/package.json
index 52e94b3370..bf74a3fd96 100644
--- a/pmm-app/package.json
+++ b/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",
diff --git a/pmm-app/src/pmm-qan/panel/components/Details/Metrics/Metrics.test.tsx b/pmm-app/src/pmm-qan/panel/components/Details/Metrics/Metrics.test.tsx
index 2b3dac8a7b..decffd3fd3 100644
--- a/pmm-app/src/pmm-qan/panel/components/Details/Metrics/Metrics.test.tsx
+++ b/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>,
     );
 
diff --git a/pmm-app/src/shared/components/Elements/Charts/TimeDistribution/__snapshots__/TimeDistribution.test.tsx.snap b/pmm-app/src/shared/components/Elements/Charts/TimeDistribution/__snapshots__/TimeDistribution.test.tsx.snap
index def78a5ccd..ea18da4b5a 100644
--- a/pmm-app/src/shared/components/Elements/Charts/TimeDistribution/__snapshots__/TimeDistribution.test.tsx.snap
+++ b/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",
diff --git a/pmm-app/src/shared/components/helpers/__snapshots__/Helpers.test.tsx.snap b/pmm-app/src/shared/components/helpers/__snapshots__/Helpers.test.tsx.snap
index c1cf9e4c2b..d66cf0cad8 100644
--- a/pmm-app/src/shared/components/helpers/__snapshots__/Helpers.test.tsx.snap
+++ b/pmm-app/src/shared/components/helpers/__snapshots__/Helpers.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`PluginTooltip Renders with right props 1`] = `
 <PluginTooltip
   links={
-    Array [
-      Object {
+    [
+      {
         "text": "Some text",
         "url": "/test-url",
       },
@@ -13,13 +13,9 @@ exports[`PluginTooltip Renders with right props 1`] = `
   text="test tooltip text"
 >
   <Tooltip
-    arrowPointAtCenter={false}
-    autoAdjustOverflow={true}
-    mouseEnterDelay={0.1}
-    mouseLeaveDelay={0.1}
     placement="topLeft"
     style={
-      Object {
+      {
         "background": "deepskyblue",
       }
     }
@@ -33,7 +29,7 @@ exports[`PluginTooltip Renders with right props 1`] = `
             href="/test-url"
             rel="noopener noreferrer"
             style={
-              Object {
+              {
                 "color": "white",
                 "textDecoration": "underline",
               }
@@ -46,277 +42,264 @@ exports[`PluginTooltip Renders with right props 1`] = `
         </div>
       </React.Fragment>
     }
-    transitionName="zoom-big-fast"
   >
-    <Tooltip
-      align={Object {}}
-      arrowContent={null}
-      arrowPointAtCenter={false}
-      autoAdjustOverflow={true}
+    <ForwardRef(Tooltip)
+      arrowContent={
+        <span
+          className="ant-tooltip-arrow-content"
+        />
+      }
       builtinPlacements={
-        Object {
-          "bottom": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              0,
-              4,
-            ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+        {
+          "bottom": {
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              0,
+              12,
+            ],
+            "overflow": {
+              "adjustY": true,
+              "shiftX": 40,
+              "shiftY": true,
             },
-            "points": Array [
+            "points": [
               "tc",
               "bc",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "bottomLeft": Object {
-            "ignoreShake": true,
-            "offset": Array [
+          "bottomLeft": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
               0,
-              4,
+              12,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "tl",
               "bl",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "bottomRight": Object {
-            "ignoreShake": true,
-            "offset": Array [
+          "bottomRight": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
               0,
-              4,
+              12,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "tr",
               "br",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "left": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              -4,
+          "left": {
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              -12,
               0,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "shiftX": true,
+              "shiftY": 32,
             },
-            "points": Array [
+            "points": [
               "cr",
               "cl",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "leftBottom": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              -4,
+          "leftBottom": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              -12,
               0,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "br",
               "bl",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "leftTop": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              -4,
+          "leftTop": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              -12,
               0,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "tr",
               "tl",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "right": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              4,
+          "right": {
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              12,
               0,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "shiftX": true,
+              "shiftY": 32,
             },
-            "points": Array [
+            "points": [
               "cl",
               "cr",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "rightBottom": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              4,
+          "rightBottom": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              12,
               0,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "bl",
               "br",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "rightTop": Object {
-            "ignoreShake": true,
-            "offset": Array [
-              4,
+          "rightTop": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
+              12,
               0,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "tl",
               "tr",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "top": Object {
-            "ignoreShake": true,
-            "offset": Array [
+          "top": {
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
               0,
-              -4,
+              -12,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustY": true,
+              "shiftX": 40,
+              "shiftY": true,
             },
-            "points": Array [
+            "points": [
               "bc",
               "tc",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "topLeft": Object {
-            "ignoreShake": true,
-            "offset": Array [
+          "topLeft": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
               0,
-              -4,
+              -12,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "bl",
               "tl",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
-          "topRight": Object {
-            "ignoreShake": true,
-            "offset": Array [
+          "topRight": {
+            "autoArrow": false,
+            "dynamicInset": true,
+            "htmlRegion": "visibleFirst",
+            "offset": [
               0,
-              -4,
+              -12,
             ],
-            "overflow": Object {
-              "adjustX": 1,
-              "adjustY": 1,
+            "overflow": {
+              "adjustX": true,
+              "adjustY": true,
             },
-            "points": Array [
+            "points": [
               "br",
               "tr",
             ],
-            "targetOffset": Array [
-              0,
-              0,
-            ],
           },
         }
       }
       destroyTooltipOnHide={false}
+      motion={
+        {
+          "motionDeadline": 1000,
+          "motionName": "ant-zoom-big-fast",
+        }
+      }
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
-      onPopupAlign={[Function]}
       onVisibleChange={[Function]}
       overlay={
-        <React.Fragment>
-          test tooltip text
-           
-          <br />
-          <div>
-            <a
-              href="/test-url"
-              rel="noopener noreferrer"
-              style={
-                Object {
-                  "color": "white",
-                  "textDecoration": "underline",
-                }
-              }
-              target="_blank"
-            >
-              Some text
-            </a>
+        <NoCompactStyle>
+          <React.Fragment>
+            test tooltip text
+             
             <br />
-          </div>
-        </React.Fragment>
+            <div>
+              <a
+                href="/test-url"
+                rel="noopener noreferrer"
+                style={
+                  {
+                    "color": "white",
+                    "textDecoration": "underline",
+                  }
+                }
+                target="_blank"
+              >
+                Some text
+              </a>
+              <br />
+            </div>
+          </React.Fragment>
+        </NoCompactStyle>
       }
+      overlayClassName="css-dev-only-do-not-override-42nv3w"
+      overlayInnerStyle={{}}
+      overlayStyle={{}}
       placement="topLeft"
       prefixCls="ant-tooltip"
+      showArrow={true}
       style={
-        Object {
+        {
           "background": "deepskyblue",
         }
       }
@@ -330,7 +313,7 @@ exports[`PluginTooltip Renders with right props 1`] = `
               href="/test-url"
               rel="noopener noreferrer"
               style={
-                Object {
+                {
                   "color": "white",
                   "textDecoration": "underline",
                 }
@@ -343,303 +326,242 @@ exports[`PluginTooltip Renders with right props 1`] = `
           </div>
         </React.Fragment>
       }
-      transitionName="zoom-big-fast"
-      trigger={
-        Array [
-          "hover",
-        ]
-      }
       visible={false}
     >
       <Trigger
         action={
-          Array [
+          [
             "hover",
           ]
         }
-        afterPopupVisibleChange={[Function]}
-        arrowContent={null}
-        arrowPointAtCenter={false}
-        autoAdjustOverflow={true}
-        blurDelay={0.15}
+        arrow={true}
+        autoDestroy={false}
         builtinPlacements={
-          Object {
-            "bottom": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                0,
-                4,
-              ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+          {
+            "bottom": {
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                0,
+                12,
+              ],
+              "overflow": {
+                "adjustY": true,
+                "shiftX": 40,
+                "shiftY": true,
               },
-              "points": Array [
+              "points": [
                 "tc",
                 "bc",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "bottomLeft": Object {
-              "ignoreShake": true,
-              "offset": Array [
+            "bottomLeft": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
                 0,
-                4,
+                12,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "tl",
                 "bl",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "bottomRight": Object {
-              "ignoreShake": true,
-              "offset": Array [
+            "bottomRight": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
                 0,
-                4,
+                12,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "tr",
                 "br",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "left": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                -4,
+            "left": {
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                -12,
                 0,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "shiftX": true,
+                "shiftY": 32,
               },
-              "points": Array [
+              "points": [
                 "cr",
                 "cl",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "leftBottom": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                -4,
+            "leftBottom": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                -12,
                 0,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "br",
                 "bl",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "leftTop": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                -4,
+            "leftTop": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                -12,
                 0,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "tr",
                 "tl",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "right": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                4,
+            "right": {
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                12,
                 0,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "shiftX": true,
+                "shiftY": 32,
               },
-              "points": Array [
+              "points": [
                 "cl",
                 "cr",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "rightBottom": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                4,
+            "rightBottom": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                12,
                 0,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "bl",
                 "br",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "rightTop": Object {
-              "ignoreShake": true,
-              "offset": Array [
-                4,
+            "rightTop": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                12,
                 0,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "tl",
                 "tr",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "top": Object {
-              "ignoreShake": true,
-              "offset": Array [
+            "top": {
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
                 0,
-                -4,
+                -12,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustY": true,
+                "shiftX": 40,
+                "shiftY": true,
               },
-              "points": Array [
+              "points": [
                 "bc",
                 "tc",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "topLeft": Object {
-              "ignoreShake": true,
-              "offset": Array [
+            "topLeft": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
                 0,
-                -4,
+                -12,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "bl",
                 "tl",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
-            "topRight": Object {
-              "ignoreShake": true,
-              "offset": Array [
+            "topRight": {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
                 0,
-                -4,
+                -12,
               ],
-              "overflow": Object {
-                "adjustX": 1,
-                "adjustY": 1,
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
               },
-              "points": Array [
+              "points": [
                 "br",
                 "tr",
               ],
-              "targetOffset": Array [
-                0,
-                0,
-              ],
             },
           }
         }
-        defaultPopupVisible={false}
-        destroyPopupOnHide={false}
-        focusDelay={0}
-        getDocument={[Function]}
-        getPopupClassNameFromAlign={[Function]}
-        hideAction={Array []}
-        mask={false}
-        maskClosable={true}
         mouseEnterDelay={0.1}
         mouseLeaveDelay={0.1}
-        onPopupAlign={[Function]}
         onPopupVisibleChange={[Function]}
-        overlay={
-          <React.Fragment>
-            test tooltip text
-             
-            <br />
-            <div>
-              <a
-                href="/test-url"
-                rel="noopener noreferrer"
-                style={
-                  Object {
-                    "color": "white",
-                    "textDecoration": "underline",
-                  }
-                }
-                target="_blank"
-              >
-                Some text
-              </a>
-              <br />
-            </div>
-          </React.Fragment>
-        }
         popup={[Function]}
-        popupAlign={Object {}}
-        popupClassName=""
+        popupAlign={{}}
+        popupClassName="css-dev-only-do-not-override-42nv3w"
+        popupMotion={
+          {
+            "motionDeadline": 1000,
+            "motionName": "ant-zoom-big-fast",
+          }
+        }
         popupPlacement="topLeft"
-        popupStyle={Object {}}
-        popupTransitionName="zoom-big-fast"
+        popupStyle={{}}
         popupVisible={false}
         prefixCls="ant-tooltip"
-        showAction={Array []}
         style={
-          Object {
+          {
             "background": "deepskyblue",
           }
         }
@@ -653,7 +575,7 @@ exports[`PluginTooltip Renders with right props 1`] = `
                 href="/test-url"
                 rel="noopener noreferrer"
                 style={
-                  Object {
+                  {
                     "color": "white",
                     "textDecoration": "underline",
                   }
@@ -668,61 +590,210 @@ exports[`PluginTooltip Renders with right props 1`] = `
         }
         visible={false}
       >
-        <Icon
-          key="trigger"
+        <ResizeObserver
+          disabled={true}
+          onResize={[Function]}
+        >
+          <SingleObserver
+            disabled={true}
+            key="rc-observer-key-0"
+            onResize={[Function]}
+          >
+            <DomWrapper>
+              <TriggerWrapper>
+                <QuestionCircleFilled
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  onPointerEnter={[Function]}
+                  onPointerLeave={[Function]}
+                  style={
+                    {
+                      "marginLeft": "5px",
+                    }
+                  }
+                >
+                  <AntdIcon
+                    icon={
+                      {
+                        "icon": {
+                          "attrs": {
+                            "focusable": "false",
+                            "viewBox": "64 64 896 896",
+                          },
+                          "children": [
+                            {
+                              "attrs": {
+                                "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z",
+                              },
+                              "tag": "path",
+                            },
+                          ],
+                          "tag": "svg",
+                        },
+                        "name": "question-circle",
+                        "theme": "filled",
+                      }
+                    }
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
+                    onPointerEnter={[Function]}
+                    onPointerLeave={[Function]}
+                    style={
+                      {
+                        "marginLeft": "5px",
+                      }
+                    }
+                  >
+                    <span
+                      aria-label="question-circle"
+                      className="anticon anticon-question-circle"
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onPointerEnter={[Function]}
+                      onPointerLeave={[Function]}
+                      role="img"
+                      style={
+                        {
+                          "marginLeft": "5px",
+                        }
+                      }
+                    >
+                      <IconReact
+                        icon={
+                          {
+                            "icon": {
+                              "attrs": {
+                                "focusable": "false",
+                                "viewBox": "64 64 896 896",
+                              },
+                              "children": [
+                                {
+                                  "attrs": {
+                                    "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z",
+                                  },
+                                  "tag": "path",
+                                },
+                              ],
+                              "tag": "svg",
+                            },
+                            "name": "question-circle",
+                            "theme": "filled",
+                          }
+                        }
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="question-circle"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          key="svg-question-circle"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z"
+                            key="svg-question-circle-svg-0"
+                          />
+                        </svg>
+                      </IconReact>
+                    </span>
+                  </AntdIcon>
+                </QuestionCircleFilled>
+              </TriggerWrapper>
+            </DomWrapper>
+          </SingleObserver>
+        </ResizeObserver>
+        <Popup
+          align={
+            {
+              "autoArrow": false,
+              "dynamicInset": true,
+              "htmlRegion": "visibleFirst",
+              "offset": [
+                0,
+                -12,
+              ],
+              "overflow": {
+                "adjustX": true,
+                "adjustY": true,
+              },
+              "points": [
+                "bl",
+                "tl",
+              ],
+            }
+          }
+          arrow={{}}
+          arrowPos={
+            {
+              "x": 0,
+              "y": 0,
+            }
+          }
+          autoDestroy={false}
+          className="css-dev-only-do-not-override-42nv3w ant-tooltip-placement-topLeft"
+          keepDom={false}
+          maskMotion={null}
+          motion={
+            {
+              "motionDeadline": 1000,
+              "motionName": "ant-zoom-big-fast",
+            }
+          }
+          offsetB={0}
+          offsetR={0}
+          offsetX={0}
+          offsetY={0}
+          onAlign={[Function]}
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
-          style={
-            Object {
-              "marginLeft": "5px",
+          onPointerEnter={[Function]}
+          onPrepare={[Function]}
+          onVisibleChanged={[Function]}
+          open={false}
+          popup={[Function]}
+          portal={
+            {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
             }
           }
-          type="question-circle"
-        >
-          <LocaleReceiver
-            componentName="Icon"
-          >
-            <i
-              aria-label="icon: question-circle"
-              className="anticon anticon-question-circle"
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "marginLeft": "5px",
-                }
-              }
+          prefixCls="ant-tooltip"
+          ready={false}
+          style={{}}
+          target={
+            <span
+              aria-label="question-circle"
+              class="anticon anticon-question-circle"
+              role="img"
+              style="margin-left: 5px;"
             >
-              <IconReact
-                className=""
-                type="question-circle-o"
+              <svg
+                aria-hidden="true"
+                data-icon="question-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  className=""
-                  data-icon="question-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  key="svg-question-circle"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                    key="svg-question-circle-svg-0"
-                  />
-                  <path
-                    d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"
-                    key="svg-question-circle-svg-1"
-                  />
-                </svg>
-              </IconReact>
-            </i>
-          </LocaleReceiver>
-        </Icon>
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z"
+                />
+              </svg>
+            </span>
+          }
+          targetHeight={0}
+          targetWidth={0}
+        >
+          <Portal
+            autoDestroy={false}
+            open={false}
+          />
+        </Popup>
       </Trigger>
-    </Tooltip>
+    </ForwardRef(Tooltip)>
   </Tooltip>
 </PluginTooltip>
 `;
diff --git a/setup-page/.gitignore b/setup-page/.gitignore
index b9e0dbb228..8357ce1b88 100644
--- a/setup-page/.gitignore
+++ b/setup-page/.gitignore
@@ -23,3 +23,4 @@ yarn-error.log*
 yarn.lock
 .parcel-cache
 dist
+build