From c7ae348836cc196f081f80a228991a15b12609fe Mon Sep 17 00:00:00 2001 From: Bryttanie <28575816+xbhouse@users.noreply.github.com> Date: Thu, 2 Nov 2023 19:49:31 -0400 Subject: [PATCH] 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 --- .../ContentListTable.test.tsx | 50 +++++++++++++------ .../ContentListTable/ContentListTable.tsx | 36 ++++++++++++- .../components/AddContent/helpers.ts | 2 +- src/testingHelpers.tsx | 19 +++++++ 4 files changed, 90 insertions(+), 17 deletions(-) diff --git a/src/Pages/ContentListTable/ContentListTable.test.tsx b/src/Pages/ContentListTable/ContentListTable.test.tsx index a7dfae90..df437825 100644 --- 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,6 +68,10 @@ 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, @@ -69,18 +79,7 @@ it('Render with a single row', () => { (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 index a9596ea9..3d233071 100644 --- 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 = () => { {name} -
+ + + + {last_snapshot + ? `Last snapshot ${dayjs(last_snapshot?.created_at).fromNow()}` + : 'No snapshot yet'} + + + + Changes: + + + + + {archesDisplay(distribution_arch)} {versionDisplay(distribution_versions)} diff --git a/src/Pages/ContentListTable/components/AddContent/helpers.ts b/src/Pages/ContentListTable/components/AddContent/helpers.ts index 416e4c42..50dddabe 100644 --- 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 index 34e34efb..8279524d 100644 --- 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, +};