Fixes 2190: added snapshot info to content list table (#155)

* added snapshot info to content list table when feature is accessible, updated tests * changed color, used hide component, removed br and added flex / gap to td * remove gap, reduce spacing * formatting * change context check from snapshots.accessible to snapshots.enabled * updating backend so we can just check snapshots.accessible here
content-services · Nov 2, 2023 · c7ae348 · c7ae348
1 parent a4cda24
commit c7ae348
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 17 deletions.
diff --git a/src/Pages/ContentListTable/ContentListTable.test.tsx b/src/Pages/ContentListTable/ContentListTable.test.tsx
@@ -1,5 +1,11 @@
-import { render } from '@testing-library/react';
-import { ReactQueryTestWrapper, testRepositoryParamsResponse } from '../../testingHelpers';
+import { render, waitFor } from '@testing-library/react';
+import dayjs from 'dayjs';
+import {
+  ReactQueryTestWrapper,
+  defaultContentItemWithSnapshot,
+  defaultSnapshotItem,
+  testRepositoryParamsResponse,
+} from '../../testingHelpers';
 import ContentListTable from './ContentListTable';
 import { useContentListQuery, useRepositoryParams } from '../../services/Content/ContentQueries';
 import AddContent from './components/AddContent/AddContent';
@@ -62,25 +68,18 @@ it('Render a loading state', () => {
 });
 
 it('Render with a single row', () => {
+  jest.mock('../../middleware/AppContext', () => ({
+    useAppContext: (features) => ({ features: features.snapshot.accessible }),
+  }));
+
   (useRepositoryParams as jest.Mock).mockImplementation(() => ({
     isLoading: false,
     data: testRepositoryParamsResponse,
   }));
   (useContentListQuery as jest.Mock).mockImplementation(() => ({
     isLoading: false,
     data: {
-      data: [
-        {
-          account_id: 'undefined',
-          distribution_arch: 'x86_64',
-          distribution_versions: ['el7'],
-          name: 'AwesomeNamewwyylse12',
-          org_id: '13446804',
-          url: 'https://google.ca/wwyylse12/x86_64/el7',
-          uuid: '2375c35b-a67a-4ac2-a989-21139433c172',
-          package_count: 0,
-        },
-      ],
+      data: [defaultContentItemWithSnapshot],
       meta: { count: 1, limit: 20, offset: 0 },
     },
   }));
@@ -93,4 +92,27 @@ it('Render with a single row', () => {
 
   expect(queryByText('AwesomeNamewwyylse12')).toBeInTheDocument();
   expect(queryByText('https://google.ca/wwyylse12/x86_64/el7')).toBeInTheDocument();
+  waitFor(() =>
+    expect(queryByText(dayjs(defaultSnapshotItem.created_at).fromNow())).toBeInTheDocument(),
+  );
+  waitFor(() =>
+    expect(
+      queryByText(
+        (
+          (defaultSnapshotItem.added_counts['rpm.package'] as number) +
+          (defaultSnapshotItem.added_counts['rpm.advisory'] as number)
+        )?.toString(),
+      ),
+    ).toBeInTheDocument(),
+  );
+  waitFor(() =>
+    expect(
+      queryByText(
+        (
+          (defaultSnapshotItem.removed_counts['rpm.package'] as number) +
+          (defaultSnapshotItem.removed_counts['rpm.advisory'] as number)
+        )?.toString(),
+      ),
+    ).toBeInTheDocument(),
+  );
 });
diff --git a/src/Pages/ContentListTable/ContentListTable.tsx b/src/Pages/ContentListTable/ContentListTable.tsx
@@ -20,7 +20,7 @@ import {
   ThProps,
   Tr,
 } from '@patternfly/react-table';
-import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
+import { global_BackgroundColor_100, global_Color_400 } from '@patternfly/react-tokens';
 import { useCallback, useMemo, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import {
@@ -48,6 +48,7 @@ import { useAppContext } from '../../middleware/AppContext';
 import ConditionalTooltip from '../../components/ConditionalTooltip/ConditionalTooltip';
 import dayjs from 'dayjs';
 import { Outlet, useNavigate, useOutletContext } from 'react-router-dom';
+import ChangedArrows from './components/SnapshotListModal/components/ChangedArrows';
 
 const useStyles = createUseStyles({
   mainContainer: {
@@ -74,6 +75,13 @@ const useStyles = createUseStyles({
   checkboxMinWidth: {
     minWidth: '45px!important',
   },
+  snapshotInfoText: {
+    color: global_Color_400.value,
+    marginRight: '16px',
+  },
+  inline: {
+    display: 'flex',
+  },
 });
 
 const perPageKey = 'contentListPerPage';
@@ -432,6 +440,7 @@ const ContentListTable = () => {
                       uuid,
                       name,
                       url,
+                      last_snapshot,
                       distribution_arch,
                       distribution_versions,
                       last_introspection_time,
@@ -451,8 +460,31 @@ const ContentListTable = () => {
                         </Hide>
                         <Td>
                           {name}
-                          <br />
                           <UrlWithExternalIcon href={url} />
+                          <Hide hide={!features?.snapshots?.accessible}>
+                            <Flex>
+                              <FlexItem className={classes.snapshotInfoText}>
+                                {last_snapshot
+                                  ? `Last snapshot ${dayjs(last_snapshot?.created_at).fromNow()}`
+                                  : 'No snapshot yet'}
+                              </FlexItem>
+                              <Hide hide={!last_snapshot}>
+                                <FlexItem className={classes.inline}>
+                                  <FlexItem className={classes.snapshotInfoText}>Changes:</FlexItem>
+                                  <ChangedArrows
+                                    addedCount={
+                                      (last_snapshot?.added_counts?.['rpm.advisory'] || 0) +
+                                      (last_snapshot?.added_counts?.['rpm.package'] || 0)
+                                    }
+                                    removedCount={
+                                      (last_snapshot?.removed_counts?.['rpm.advisory'] || 0) +
+                                      (last_snapshot?.removed_counts?.['rpm.package'] || 0)
+                                    }
+                                  />
+                                </FlexItem>
+                              </Hide>
+                            </Flex>
+                          </Hide>
                         </Td>
                         <Td>{archesDisplay(distribution_arch)}</Td>
                         <Td>{versionDisplay(distribution_versions)}</Td>

diff --git a/src/Pages/ContentListTable/components/AddContent/helpers.ts b/src/Pages/ContentListTable/components/AddContent/helpers.ts
@@ -135,7 +135,7 @@ export const makeValidationSchema = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore-next-line
       .uniqueProperty('name', 'Names must be unique')
-      .uniqueProperty('url', 'Url\'s must be unique'),
+      .uniqueProperty('url', "Url's must be unique"),
   );
 };
 

diff --git a/src/testingHelpers.tsx b/src/testingHelpers.tsx
@@ -208,3 +208,22 @@ export const defaultSnapshotItem: SnapshotItem = {
   },
   removed_counts: {},
 };
+
+export const defaultContentItemWithSnapshot: ContentItem = {
+  account_id: 'undefined',
+  distribution_arch: 'x86_64',
+  distribution_versions: ['el7'],
+  name: 'AwesomeNamewwyylse12',
+  org_id: '13446804',
+  url: 'https://google.ca/wwyylse12/x86_64/el7',
+  uuid: '2375c35b-a67a-4ac2-a989-21139433c172',
+  package_count: 0,
+  status: '',
+  last_introspection_error: '',
+  last_introspection_time: '',
+  failed_introspections_count: 0,
+  gpg_key: '',
+  metadata_verification: false,
+  snapshot: true,
+  last_snapshot: defaultSnapshotItem,
+};