fix: add key to table components (#122)

* fix: add key to the report tables

The report tables aren't being rerendered when the selected report
changes so adding a key to the component to trigger a rerender on report
change

* chore: remove the .env from UI

* chore: tidy up code

* chore: add names to the workflows

.github/workflows/lint.yml

@@ -1,5 +1,8 @@
+name: lint
+
 on:
   pull_request:
+
 jobs:
   lint:
     runs-on: ubuntu-latest

.github/workflows/package.yml

@@ -1,5 +1,8 @@
+name: package 
+
 on:
   pull_request:
+
 jobs:
   package:
     runs-on: ubuntu-latest

.github/workflows/publish.yml

@@ -1,3 +1,5 @@
+name: publish
+
 on:
   push:
     tags:

.gitignore

@@ -1,4 +1,5 @@
 *.vsix
 node_modules
 .idea
-**/tsconfig.tsbuildinfo
+**/tsconfig.tsbuildinfo
+.env

ui/src/BaseReport.tsx

@@ -66,11 +66,6 @@ export class BaseReport extends React.Component<
     const licensesCount = countReportLicenses(this.props.report);
     const assuranceCount = this.countAssuranceIssues(this.props.assurance);
 
-    const hasReportResults =
-      this.props.report &&
-      this.props.report.Results &&
-      this.props.report.Results.length > 0;
-
     return (
       <div className="flex-grow">
         <div className="flex-grow">
@@ -122,30 +117,44 @@ export class BaseReport extends React.Component<
           </TabBar>
         </div>
         <div className="tab-content flex-row">
-          {this.state.selectedTabId === 'vulnerabilities' &&
-            hasReportResults && (
-              <div className="flex-grow">
-                <VulnerabilitiesTable report={this.props.report} />
-              </div>
-            )}
+          {this.state.selectedTabId === 'vulnerabilities' && (
+            <div className="flex-grow">
+              <VulnerabilitiesTable
+                key={this.props.report.DisplayName}
+                report={this.props.report}
+              />
+            </div>
+          )}
           {this.state.selectedTabId === 'misconfigurations' && (
             <div className="flex-grow">
-              <MisconfigurationsTable report={this.props.report} />
+              <MisconfigurationsTable
+                key={this.props.report.DisplayName}
+                report={this.props.report}
+              />
             </div>
           )}
           {this.state.selectedTabId === 'secrets' && (
             <div className="flex-grow">
-              <SecretsTable report={this.props.report} />
+              <SecretsTable
+                key={this.props.report.DisplayName}
+                report={this.props.report}
+              />
             </div>
           )}
           {this.state.selectedTabId === 'licenses' && (
             <div className="flex-grow">
-              <LicensesTable report={this.props.report} />
+              <LicensesTable
+                key={this.props.report.DisplayName}
+                report={this.props.report}
+              />
             </div>
           )}
           {this.state.selectedTabId === 'assurance' && (
             <div className="flex-grow">
-              <AssuranceTable report={this.props.assurance} />
+              <AssuranceTable
+                key={this.props.report.DisplayName}
+                report={this.props.assurance}
+              />
             </div>
           )}
         </div>