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

@@ -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) {

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);
         });

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>