fix(quay): add visual indicator to security scan when it is still loading (#848)

Author: debsmita1

plugins/quay/src/components/QuayRepository/QuayRepository.test.tsx

@@ -6,6 +6,11 @@ import { render } from '@testing-library/react';
 import { useTags } from '../../hooks';
 import { QuayRepository } from './QuayRepository';
 
+jest.mock('react-use', () => ({
+  ...jest.requireActual('react-use'),
+  useAsync: jest.fn().mockReturnValue({ loading: true }),
+}));
+
 jest.mock('@backstage/core-plugin-api', () => ({
   ...jest.requireActual('@backstage/core-plugin-api'),
   useApi: jest
@@ -68,4 +73,27 @@ describe('QuayRepository', () => {
     expect(queryByText(/Quay repository/i)).toBeInTheDocument();
     expect(queryByText(/No data was added yet/i)).not.toBeInTheDocument();
   });
+
+  it('should show table if loaded and data is present but shows progress if security scan is not loaded', () => {
+    (useTags as jest.Mock).mockReturnValue({
+      loading: false,
+      data: [
+        {
+          name: 'latest',
+          manifest_digest: undefined,
+          size: null,
+          last_modified: 'Wed, 15 Mar 2023 18:22:18 -0000',
+        },
+      ],
+    });
+    const { queryByTestId, queryByText } = render(
+      <BrowserRouter>
+        <QuayRepository />
+      </BrowserRouter>,
+    );
+    expect(queryByTestId('quay-repo-table')).not.toBeNull();
+    expect(queryByTestId('quay-repo-table-empty')).toBeNull();
+    expect(queryByText(/Quay repository/i)).toBeInTheDocument();
+    expect(queryByTestId('quay-repo-security-scan-progress')).not.toBeNull();
+  });
 });

plugins/quay/src/components/QuayRepository/tableHeading.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 
-import { Link, TableColumn } from '@backstage/core-components';
+import { Link, Progress, TableColumn } from '@backstage/core-components';
 
 import makeStyles from '@material-ui/core/styles/makeStyles';
 
 import type { Layer } from '../../types';
 
-const vulnerabilitySummary = (layer?: Layer): string => {
-  if (!layer) {
-    return 'No security scan';
-  }
+const vulnerabilitySummary = (layer: Layer): string => {
   const summary: Record<string, number> = {};
 
-  layer.Features.forEach(feature => {
+  layer?.Features.forEach(feature => {
     feature.Vulnerabilities?.forEach(vulnerability => {
       const { Severity } = vulnerability;
       if (!summary[Severity]) {
@@ -44,7 +41,14 @@ export const columns: TableColumn[] = [
     title: 'Security Scan',
     field: 'securityScan',
     render: (rowData: any): React.ReactNode => {
-      const tagManifest = rowData.manifest_digest_raw as string;
+      if (!rowData.securityDetails) {
+        return (
+          <span data-testid="quay-repo-security-scan-progress">
+            <Progress />
+          </span>
+        );
+      }
+      const tagManifest = rowData.manifest_digest_raw;
       const retStr = vulnerabilitySummary(rowData.securityDetails as Layer);
       return <Link to={`tag/${tagManifest}`}>{retStr}</Link>;
     },

plugins/quay/src/hooks/quay.tsx

@@ -64,6 +64,7 @@ export const useTags = (organization: string, repository: string) => {
       const hashFunc = tag.manifest_digest.substring(0, 6);
       const shortHash = tag.manifest_digest.substring(7, 19);
       return {
+        id: `${tag.manifest_digest}-${tag.name}`,
         name: tag.name,
         last_modified: formatDate(tag.last_modified),
         size: formatByteSize(tag.size),