From a57050ecf9beee823a19050a3b25bafaf2085121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tibor=20Cserv=C3=A1k?= <tibor.cservak97@gmail.com>
Date: Wed, 9 Aug 2023 11:20:51 +0200
Subject: [PATCH] Jump directly to documentation url without error modal

Currently on the report detail page there is a red error bubble where we can click on the checker documentation button to have more information about the error. The button click triggers a modal that contains already known information and the real checker documentation URL.
The modal is unnecessary and it has two steps to navigate to the effective documentation. To reduce the step numbers, there are some modifications in the Report and the ReportStepMessage components.
When the report page is loaded the first thing is to create an errorChecker, then getting its documentation and passing it to ReportStepMessage via props. The ReportStepMessage component present the checker documentation button if the URL exists. The button refers to the checker error documentation without displaying a modal. When the documentation is not available, the ReportStepMessage shows the "No documentation for checker." message in the bubble.
---
 web/server/vue-cli/e2e/specs/reportDetail.js  | 20 +++++------
 .../vue-cli/src/components/Report/Report.vue  | 35 ++++++++++++-------
 .../components/Report/ReportStepMessage.vue   | 18 +++++++---
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/web/server/vue-cli/e2e/specs/reportDetail.js b/web/server/vue-cli/e2e/specs/reportDetail.js
index 2c01a6fb98..1c715d6264 100644
--- a/web/server/vue-cli/e2e/specs/reportDetail.js
+++ b/web/server/vue-cli/e2e/specs/reportDetail.js
@@ -25,18 +25,18 @@ module.exports = {
 
   "show documentation" (browser) {
     const reportDetailPage = browser.page.reportDetail();
-    const dialog = reportDetailPage.section.documentationDialog;
+    reportDetailPage.expect.element('@showDocumentationBtn')
+      .to.be.present.before(5000, false);
 
-    reportDetailPage.click("@showDocumentationBtn");
+    reportDetailPage.click('@showDocumentationBtn');
 
-    reportDetailPage.expect.section(dialog)
-      .to.be.visible.before(5000);
-
-    dialog.expect.element("@content").text.to.not.equal(null);
-
-    dialog.pause(100).click("@closeBtn");
-
-    reportDetailPage.expect.section(dialog).to.not.be.present.before(5000);
+    browser.windowHandles(windowObj => {
+      if (windowObj.value.length > 1) {
+        browser.switchWindow(windowObj.value[1]);
+        browser.closeWindow();
+        browser.switchWindow(windowObj.value[0]);
+      }
+    });
   },
 
   "show blame information" (browser) {
diff --git a/web/server/vue-cli/src/components/Report/Report.vue b/web/server/vue-cli/src/components/Report/Report.vue
index 2a336a6022..154348f975 100644
--- a/web/server/vue-cli/src/components/Report/Report.vue
+++ b/web/server/vue-cli/src/components/Report/Report.vue
@@ -1,10 +1,5 @@
 <template>
   <v-container fluid class="pa-0">
-    <checker-documentation-dialog
-      :value.sync="checkerDocumentationDialog"
-      :checker="selectedChecker"
-    />
-
     <analysis-info-dialog
       :value.sync="analysisInfoDialog"
       :report-id="reportId"
@@ -313,8 +308,7 @@ import ReportTreeKind from "@/components/Report/ReportTree/ReportTreeKind";
 import { SetCleanupPlanBtn } from "@/components/Report/CleanupPlan";
 
 import AnalysisInfoBtn from "./AnalysisInfoBtn";
-import CheckerDocumentationDialog from
-  "@/components/CheckerDocumentationDialog";
+
 import { ReportComments } from "./Comment";
 import GitBlameMixin from "./Git/GitBlame";
 import ToggleBlameViewBtn from "./Git/ToggleBlameViewBtn";
@@ -330,7 +324,6 @@ export default {
   components: {
     AnalysisInfoBtn,
     AnalysisInfoDialog,
-    CheckerDocumentationDialog,
     CopyBtn,
     ReportComments,
     ReportInfoButton,
@@ -367,11 +360,11 @@ export default {
       loading: true,
       bus: new Vue(),
       annotation: null,
-      checkerDocumentationDialog: false,
       selectedChecker: null,
       analysisInfoDialog: false,
       reportId: null,
-      enableBlameView
+      enableBlameView,
+      docUrl: null
     };
   },
 
@@ -487,7 +480,6 @@ export default {
         analyzerName: this.report.analyzerName,
         checkerId: this.report.checkerId
       });
-      this.checkerDocumentationDialog = true;
     });
   },
 
@@ -654,6 +646,24 @@ export default {
           }));
       });
 
+      const errorChecker = new Checker({
+        analyzerName: this.report.analyzerName,
+        checkerId: this.report.checkerId
+      });
+      await new Promise(resolve => {
+        ccService.getClient().getCheckerLabels(
+          [ errorChecker ],
+          handleThriftError(labels => {
+            const docUrlLabels = labels[0].filter(
+              param => param.startsWith("doc_url")
+            );
+            this.docUrl = docUrlLabels.length ? 
+              docUrlLabels[0].split("doc_url:")[1] : null;
+            resolve(this.docUrl);
+          })
+        );
+      });
+
       const isSameFile = path => path.fileId.equals(this.sourceFile.fileId);
 
       // Add extra path events (macro expansions, notes).
@@ -757,7 +767,8 @@ export default {
             index: event.$index,
             bus: this.bus,
             prevStep: event.$prevStep,
-            nextStep: event.$nextStep
+            nextStep: event.$nextStep,
+            docUrl: this.docUrl
           };
           this.addLineWidget(event, props);
         });
diff --git a/web/server/vue-cli/src/components/Report/ReportStepMessage.vue b/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
index 272d8f96c2..93877ca900 100644
--- a/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
+++ b/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
@@ -31,7 +31,7 @@
     <div>
       {{ value }}
 
-      <p v-if="type === 'error'" class="mb-0 mt-2">
+      <p v-if="type === 'error' && docUrl" class="mb-0 mt-2">
         For more information see the
         <a
           class="show-documentation-btn"
@@ -40,6 +40,12 @@
           checker documentation
         </a>.
       </p>
+      <p 
+        v-else-if="type === 'error'" 
+        class="no-documentation-msg-text mb-0 mt-2"
+      >
+        No documentation for checker.
+      </p>
     </div>
 
     <v-btn
@@ -73,7 +79,8 @@ export default {
     index: { type: [ Number, String ], default: null },
     bus: { type: Object, default: null },
     prevStep: { type: Object, default: null },
-    nextStep: { type: Object, default: null }
+    nextStep: { type: Object, default: null },
+    docUrl: { type: String, default: null }
   },
   computed: {
     color() {
@@ -118,9 +125,7 @@ export default {
     },
 
     showDocumentation() {
-      if (!this.bus) return;
-
-      this.bus.$emit("showDocumentation");
+      window.open(this.docUrl, "_blank");
     }
   }
 };
@@ -147,5 +152,8 @@ export default {
       display: inline-block;
     }
   }
+  .no-documentation-msg-text {
+    color: grey
+  }
 }
 </style>