fix: set the tab to first with issues (#178)

Author: owenrumney

ui/src/BaseReport.tsx

@@ -31,12 +31,39 @@ export class BaseReport extends React.Component<
   BaseReportState
 > {
   public props: BaseReportProps;
+  assuranceCount: number;
+  suppressedCount: number;
+  licensesCount: number;
+  secretsCount: number;
+  misconfigCount: number;
+  vulnCount: number;
 
   constructor(props: BaseReportProps) {
     super(props);
     this.props = props;
+
+    this.vulnCount = countReportVulnerabilities(this.props.report);
+    this.misconfigCount = countReportMisconfigurations(this.props.report);
+    this.secretsCount = countReportSecrets(this.props.report);
+    this.licensesCount = countReportLicenses(this.props.report);
+    this.suppressedCount = countReportSuppressed(this.props.report);
+    this.assuranceCount = countAssuranceIssues(this.props.assurance);
+
     this.state = {
-      selectedTabId: 'vulnerabilities',
+      selectedTabId:
+        this.vulnCount > 0
+          ? 'vulnerabilities'
+          : this.misconfigCount > 0
+            ? 'misconfigurations'
+            : this.secretsCount > 0
+              ? 'secrets'
+              : this.licensesCount > 0
+                ? 'licenses'
+                : this.suppressedCount > 0
+                  ? 'suppressed'
+                  : this.assuranceCount > 0
+                    ? 'assurance'
+                    : 'vulnerabilities',
     };
   }
 
@@ -45,13 +72,6 @@ export class BaseReport extends React.Component<
   };
 
   render() {
-    const vulnCount = countReportVulnerabilities(this.props.report);
-    const misconfigCount = countReportMisconfigurations(this.props.report);
-    const secretsCount = countReportSecrets(this.props.report);
-    const licensesCount = countReportLicenses(this.props.report);
-    const suppressedCount = countReportSuppressed(this.props.report);
-    const assuranceCount = countAssuranceIssues(this.props.assurance);
-
     return (
       <div className="flex-grow">
         <div className="flex-grow">
@@ -60,52 +80,52 @@ export class BaseReport extends React.Component<
             selectedTabId={this.state.selectedTabId}
             tabSize={TabSize.Tall}
           >
-            {vulnCount > 0 && (
+            {this.vulnCount > 0 && (
               <Tab
                 id="vulnerabilities"
                 name="Vulnerabilities"
                 key="vulnerabilities"
-                badgeCount={vulnCount}
+                badgeCount={this.vulnCount}
               />
             )}
-            {misconfigCount > 0 && (
+            {this.misconfigCount > 0 && (
               <Tab
                 id="misconfigurations"
                 name="Misconfigurations"
                 key="misconfigurations"
-                badgeCount={misconfigCount}
+                badgeCount={this.misconfigCount}
               />
             )}
-            {secretsCount > 0 && (
+            {this.secretsCount > 0 && (
               <Tab
                 id="secrets"
                 name="Secrets"
                 key="secrets"
-                badgeCount={secretsCount}
+                badgeCount={this.secretsCount}
               />
             )}
-            {licensesCount > 0 && (
+            {this.licensesCount > 0 && (
               <Tab
                 id="licenses"
                 name="Licenses"
                 key="licenses"
-                badgeCount={licensesCount}
+                badgeCount={this.licensesCount}
               />
             )}
-            {suppressedCount > 0 && (
+            {this.suppressedCount > 0 && (
               <Tab
                 id="suppressed"
                 name="Suppressed"
                 key="Suppressed"
-                badgeCount={suppressedCount}
+                badgeCount={this.suppressedCount}
               />
             )}
-            {assuranceCount > 0 && (
+            {this.assuranceCount > 0 && (
               <Tab
                 id="assurance"
                 name="Assurance Issues"
                 key="assurance"
-                badgeCount={assuranceCount}
+                badgeCount={this.assuranceCount}
               />
             )}
           </TabBar>