HMS-4748: add warning for templates with expiring snaps (#393)

* Fixes 4748: add warning for templates with expiring snaps * fix: change warning text * style: fix wording
content-services · Jan 10, 2025 · 89e4826 · 89e4826
1 parent f85a500
commit 89e4826
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 31 deletions.
diff --git a/src/Pages/Templates/TemplateDetails/TemplateDetails.tsx b/src/Pages/Templates/TemplateDetails/TemplateDetails.tsx
@@ -1,4 +1,5 @@
 import {
+  Alert,
   Breadcrumb,
   BreadcrumbItem,
   Flex,
@@ -16,6 +17,7 @@ import useRootPath from 'Hooks/useRootPath';
 import { useFetchTemplate } from 'services/Templates/TemplateQueries';
 import useArchVersion from 'Hooks/useArchVersion';
 import DetailItem from './components/DetaiItem';
+import Hide from 'components/Hide/Hide';
 import { formatDateDDMMMYYYY } from 'helpers';
 import { global_BackgroundColor_light_100 } from '@patternfly/react-tokens';
 import Loader from 'components/Loader';
@@ -53,6 +55,9 @@ const useStyles = createUseStyles({
       maxHeight: '165px',
     },
   },
+  alertMargin: {
+    marginTop: '20px',
+  },
 });
 
 export default function TemplateDetails() {
@@ -149,6 +154,20 @@ export default function TemplateDetails() {
               />
             </Flex>
           </StackItem>
+          <Hide hide={!(data?.to_be_deleted_snapshots && data.to_be_deleted_snapshots.length > 0)}>
+            <StackItem className={classes.alertMargin}>
+              <Alert
+                variant='warning'
+                isInline
+                title='Template contains soon to be deleted snapshots.'
+              >
+                This template contains snapshots that are going to be deleted in the next 14 days.
+                At that time the template will be updated automatically to use the next available
+                snapshot. Editing the template and selecting a more recent snapshot date will ensure
+                the template does not change unexpectedly.
+              </Alert>
+            </StackItem>
+          </Hide>
         </Stack>
       </Grid>
       <Grid className={classes.childContainer}>

diff --git a/src/Pages/Templates/TemplateDetails/components/Tables/TemplateRepositoriesTable.tsx b/src/Pages/Templates/TemplateDetails/components/Tables/TemplateRepositoriesTable.tsx
@@ -1,3 +1,4 @@
+import ConditionalTooltip from 'components/ConditionalTooltip/ConditionalTooltip';
 import EmptyTableState from 'components/EmptyTableState/EmptyTableState';
 import Hide from 'components/Hide/Hide';
 import { formatDateDDMMMYYYY } from 'helpers';
@@ -13,7 +14,7 @@ import { REPOSITORIES_ROUTE } from 'Routes/constants';
 import { SnapshotItem } from 'services/Content/ContentApi';
 
 import { SkeletonTable } from '@patternfly/react-component-groups';
-import { Button, Grid } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Grid, Icon } from '@patternfly/react-core';
 import {
   BaseCellProps,
   Table,
@@ -26,6 +27,7 @@ import {
   Tr,
 } from '@patternfly/react-table';
 import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
 const useStyles = createUseStyles({
   mainContainer: {
@@ -40,6 +42,7 @@ interface Props {
   isFetchingOrLoading: boolean;
   isLoadingOrZeroCount: boolean;
   snapshotList: SnapshotItem[];
+  toBeDeletedSnapshots: SnapshotItem[];
   clearSearch: () => void;
   perPage: number;
   sortParams: (columnIndex: number) => ThProps['sort'];
@@ -50,6 +53,7 @@ export default function TemplateRepositoriesTable({
   isFetchingOrLoading,
   isLoadingOrZeroCount,
   snapshotList,
+  toBeDeletedSnapshots,
   clearSearch,
   perPage,
   sortParams,
@@ -127,18 +131,36 @@ export default function TemplateRepositoriesTable({
               <Tbody key={uuid + rowIndex + '-column'}>
                 <Tr>
                   <Td>
-                    <Button
-                      variant='link'
-                      ouiaId='repository_edit_button'
-                      isInline
-                      onClick={() =>
-                        navigate(
-                          `${rootPath}/${REPOSITORIES_ROUTE}/edit?repoUUIDS=${repository_uuid}`,
-                        )
-                      }
-                    >
-                      {repository_name}
-                    </Button>
+                    <Flex gap={{ default: 'gapSm' }}>
+                      <FlexItem>
+                        <Button
+                          variant='link'
+                          ouiaId='repository_edit_button'
+                          isInline
+                          onClick={() =>
+                            navigate(
+                              `${rootPath}/${REPOSITORIES_ROUTE}/edit?repoUUIDS=${repository_uuid}`,
+                            )
+                          }
+                        >
+                          {repository_name}
+                        </Button>
+                      </FlexItem>
+                      <Hide hide={!toBeDeletedSnapshots.find((s) => s.uuid == uuid)}>
+                        <FlexItem>
+                          <ConditionalTooltip
+                            show={!!toBeDeletedSnapshots.find((s) => s.uuid == uuid)}
+                            position='right'
+                            content='The snapshot of this repository used by this template is going to be deleted in the next 14 days.'
+                            enableFlip
+                          >
+                            <Icon status='warning' isInline>
+                              <ExclamationTriangleIcon />
+                            </Icon>
+                          </ConditionalTooltip>
+                        </FlexItem>
+                      </Hide>
+                    </Flex>
                   </Td>
                   <Td>{formatDateDDMMMYYYY(created_at, true)}</Td>
                   <Td>

diff --git a/src/Pages/Templates/TemplateDetails/components/Tabs/TemplateRepositoriesTab.test.tsx b/src/Pages/Templates/TemplateDetails/components/Tabs/TemplateRepositoriesTab.test.tsx
@@ -1,14 +1,15 @@
 import { render } from '@testing-library/react';
 
-import { defaultSnapshotItem } from 'testingHelpers';
+import { defaultSnapshotItem, defaultTemplateItem } from 'testingHelpers';
 import TemplateRepositoriesTab from './TemplateRepositoriesTab';
-import { useFetchTemplateSnapshotsQuery } from 'services/Templates/TemplateQueries';
+import {
+  useFetchTemplate,
+  useFetchTemplateSnapshotsQuery,
+} from 'services/Templates/TemplateQueries';
 import type { SnapshotItem } from 'services/Content/ContentApi';
 
-const bananaUUID = 'banana-uuid';
-
 jest.mock('react-router-dom', () => ({
-  useParams: () => ({ templateUUID: bananaUUID }),
+  useParams: () => ({ templateUUID: defaultTemplateItem.uuid }),
   useNavigate: jest.fn(),
   Outlet: () => <></>,
 }));
@@ -25,6 +26,7 @@ jest.mock('react-query');
 
 jest.mock('services/Templates/TemplateQueries', () => ({
   useFetchTemplateSnapshotsQuery: jest.fn(),
+  useFetchTemplate: jest.fn(),
 }));
 
 (useFetchTemplateSnapshotsQuery as jest.Mock).mockImplementation(() => ({
@@ -39,6 +41,12 @@ jest.mock('services/Templates/TemplateQueries', () => ({
   },
 }));
 
+(useFetchTemplate as jest.Mock).mockImplementation(() => ({
+  isLoading: false,
+  isFetching: false,
+  data: defaultTemplateItem,
+}));
+
 it('expect TemplateRepositoriesTab to render 15 items', async () => {
   const { queryByText } = render(<TemplateRepositoriesTab />);
 

diff --git a/src/Pages/Templates/TemplateDetails/components/Tabs/TemplateRepositoriesTab.tsx b/src/Pages/Templates/TemplateDetails/components/Tabs/TemplateRepositoriesTab.tsx
@@ -17,7 +17,10 @@ import {
 import { SearchIcon } from '@patternfly/react-icons';
 import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
 
-import { useFetchTemplateSnapshotsQuery } from 'services/Templates/TemplateQueries';
+import {
+  useFetchTemplate,
+  useFetchTemplateSnapshotsQuery,
+} from 'services/Templates/TemplateQueries';
 import TemplateRepositoriesTable from 'Pages/Templates/TemplateDetails/components/Tables/TemplateRepositoriesTable';
 
 import type { ThProps } from '@patternfly/react-table';
@@ -67,6 +70,14 @@ export default function TemplateRepositoriesTab() {
     [activeSortIndex, activeSortDirection],
   );
 
+  const {
+    isLoading: isLoadingTemplate,
+    isFetching: isFetchingTemplate,
+    isError: isErrorTemplate,
+    error: templateError,
+    data: template,
+  } = useFetchTemplate(uuid as string);
+
   const {
     isLoading,
     isFetching,
@@ -88,7 +99,7 @@ export default function TemplateRepositoriesTab() {
     meta: { count = 0 },
   } = data;
 
-  const fetchingOrLoading = isFetching || isLoading;
+  const fetchingOrLoading = isFetching || isLoading || isLoadingTemplate || isFetchingTemplate;
   const loadingOrZeroCount = fetchingOrLoading || !count;
 
   const sortParams = (columnIndex: number): ThProps['sort'] => ({
@@ -104,12 +115,15 @@ export default function TemplateRepositoriesTab() {
     columnIndex,
   });
 
-  if (isLoading) {
+  if (isLoading || isLoadingTemplate) {
     return <Loader />;
   }
   if (isError) {
     throw error;
   }
+  if (isErrorTemplate) {
+    throw templateError;
+  }
 
   return (
     <Grid className={classes.mainContainer}>
@@ -141,6 +155,7 @@ export default function TemplateRepositoriesTab() {
         isFetchingOrLoading={fetchingOrLoading}
         isLoadingOrZeroCount={loadingOrZeroCount}
         snapshotList={snapshotList}
+        toBeDeletedSnapshots={template?.to_be_deleted_snapshots ?? []}
         clearSearch={() => setSearchQuery('')}
         perPage={perPage}
         sortParams={sortParams}

diff --git a/src/Pages/Templates/TemplatesTable/TemplatesTable.tsx b/src/Pages/Templates/TemplatesTable/TemplatesTable.tsx
@@ -3,6 +3,7 @@ import {
   Flex,
   FlexItem,
   Grid,
+  Icon,
   Pagination,
   PaginationVariant,
   Spinner,
@@ -38,6 +39,7 @@ import { DELETE_ROUTE, DETAILS_ROUTE, TEMPLATES_ROUTE } from 'Routes/constants';
 import useArchVersion from 'Hooks/useArchVersion';
 import { useTemplateList } from 'services/Templates/TemplateQueries';
 import StatusIcon from './components/StatusIcon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
 const useStyles = createUseStyles({
   mainContainer: {
@@ -174,7 +176,7 @@ const TemplatesTable = () => {
       : undefined;
 
   const columnHeaders: { title: string; width?: BaseCellProps['width'] }[] = [
-    { title: 'Name', width: 10 },
+    { title: 'Name', width: 15 },
     { title: 'Description' },
     { title: 'Architecture', width: 10 },
     { title: 'Version', width: 10 },
@@ -292,20 +294,42 @@ const TemplatesTable = () => {
                       use_latest,
                       last_update_snapshot_error,
                       last_update_task,
+                      to_be_deleted_snapshots,
                     }: TemplateItem,
                     index,
                   ) => (
                     <Tr key={uuid + index}>
                       <Td>
-                        <Button
-                          className={classes.leftPaddingZero}
-                          variant='link'
-                          onClick={() =>
-                            navigate(`${rootPath}/${TEMPLATES_ROUTE}/${uuid}/${DETAILS_ROUTE}`)
-                          }
-                        >
-                          {name}
-                        </Button>
+                        <Flex gap={{ default: 'gapXs' }}>
+                          <FlexItem>
+                            <Button
+                              className={classes.leftPaddingZero}
+                              variant='link'
+                              onClick={() =>
+                                navigate(`${rootPath}/${TEMPLATES_ROUTE}/${uuid}/${DETAILS_ROUTE}`)
+                              }
+                            >
+                              {name}
+                            </Button>
+                          </FlexItem>
+                          <Hide
+                            hide={!(to_be_deleted_snapshots && to_be_deleted_snapshots.length > 0)}
+                          >
+                            <FlexItem>
+                              <ConditionalTooltip
+                                id={`to_be_deleted_snapshot_warning_for_repo_${name}`}
+                                show={to_be_deleted_snapshots && to_be_deleted_snapshots.length > 0}
+                                position='right'
+                                content='This template contains snapshots that are going to be deleted in the next 14 days. At that time the template will be updated automatically to use the next available snapshot. Editing the template and selecting a more recent snapshot date will ensure the template does not change unexpectedly.'
+                                enableFlip
+                              >
+                                <Icon status='warning' isInline>
+                                  <ExclamationTriangleIcon />
+                                </Icon>
+                              </ConditionalTooltip>
+                            </FlexItem>
+                          </Hide>
+                        </Flex>
                       </Td>
                       <Td>{description}</Td>
                       <Td>{archesDisplay(arch)}</Td>

diff --git a/src/services/Templates/TemplateApi.ts b/src/services/Templates/TemplateApi.ts
@@ -31,6 +31,7 @@ export interface TemplateItem {
   description: string;
   repository_uuids: string[];
   snapshots: SnapshotItem[];
+  to_be_deleted_snapshots: SnapshotItem[];
   arch: string;
   version: string;
   date: string;

diff --git a/src/testingHelpers.tsx b/src/testingHelpers.tsx
@@ -294,6 +294,7 @@ export const defaultTemplateItem: TemplateItem = {
     '053603c7-6ef0-4abe-8542-feacb8f7d575',
   ],
   snapshots: [defaultSnapshotItem],
+  to_be_deleted_snapshots: [],
   use_latest: false,
   created_at: '2024-01-22T00:00:00-07:00',
   updated_at: '2024-01-22T00:00:00-07:00',
@@ -319,6 +320,7 @@ export const defaultTemplateItem2: TemplateItem = {
     '28b8d2b1-e4d6-4d8a-be12-1104601fb96e',
   ],
   snapshots: [defaultSnapshotItem],
+  to_be_deleted_snapshots: [defaultSnapshotItem],
   use_latest: false,
   created_at: '2024-01-22T00:00:00-07:00',
   updated_at: '2024-01-22T00:00:00-07:00',