Wizard: switch snapshot date in wizard to RFC3339

osbuild · Nov 14, 2024 · 7774e4a · 7774e4a
1 parent 7c99415
commit 7774e4a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 9 deletions.
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
@@ -471,7 +471,7 @@ export const ContentList = ({
       case useLatest:
         return 'Use latest';
       case !!snapshotDate:
-        return `State as of ${snapshotDate}`;
+        return `State as of ${yyyyMMddFormat(new Date(snapshotDate))}`;
       default:
         return '';
     }
@@ -498,7 +498,9 @@ export const ContentList = ({
                   headerContent={
                     useLatest
                       ? 'Repositories as of today'
-                      : `Repositories as of ${snapshotDate}`
+                      : `Repositories as of ${yyyyMMddFormat(
+                          new Date(snapshotDate)
+                        )}`
                   }
                   hasAutoWidth
                   minWidth="60rem"

diff --git a/src/Components/CreateImageWizard/steps/Snapshot/Snapshot.tsx b/src/Components/CreateImageWizard/steps/Snapshot/Snapshot.tsx
@@ -75,7 +75,9 @@ export default function Snapshot() {
               <DatePicker
                 id="snapshot-date-picker"
                 name="pick-snapshot-date"
-                value={snapshotDate}
+                value={
+                  snapshotDate ? yyyyMMddFormat(new Date(snapshotDate)) : ''
+                }
                 required
                 requiredDateOptions={{ isRequired: true }}
                 placeholder="YYYY-MM-DD"

diff --git a/src/Utilities/time.ts b/src/Utilities/time.ts
@@ -2,9 +2,9 @@ export const parseYYYYMMDDToDate = (val: string) =>
   val ? new Date(`${val}T00:00:00`) : new Date('');
 
 export const yyyyMMddFormat = (date: Date) =>
-  `${date.getFullYear()}-${(date.getMonth() + 1)
+  `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1)
     .toString()
-    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+    .padStart(2, '0')}-${date.getUTCDate().toString().padStart(2, '0')}`;
 
 export const toMonthAndYear = (dateString: string) => {
   const options: Intl.DateTimeFormatOptions = {

diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts
@@ -575,7 +575,13 @@ export const wizardSlice = createSlice({
       state.snapshotting.useLatest = action.payload;
     },
     changeSnapshotDate: (state, action: PayloadAction<string>) => {
-      state.snapshotting.snapshotDate = action.payload;
+      const yyyyMMDDRegex = /^\d{4}-\d{2}-\d{2}$/;
+      const date = new Date(action.payload);
+      if (action.payload === '') {
+        state.snapshotting.snapshotDate = action.payload;
+      } else if (yyyyMMDDRegex.test(action.payload) && !isNaN(date.getTime())) {
+        state.snapshotting.snapshotDate = date.toISOString();
+      }
     },
     changeCustomRepositories: (
       state,

diff --git a/src/test/Components/CreateImageWizard/steps/Snapshot/Snapshot.test.tsx b/src/test/Components/CreateImageWizard/steps/Snapshot/Snapshot.test.tsx
@@ -100,6 +100,14 @@ const clickContentDropdown = async () => {
 const getSnapshotMethodElement = async () =>
   await screen.findByRole('button', { name: /Snapshot method/i });
 
+const clickReset = async () => {
+  const user = userEvent.setup();
+  const resetButton = await screen.findByRole('button', {
+    name: /Reset/i,
+  });
+  await waitFor(async () => user.click(resetButton));
+};
+
 describe('repository snapshot tab - ', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -146,7 +154,8 @@ describe('repository snapshot tab - ', () => {
 
     // Check the date was passed correctly to the blueprint
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
-    blueprintRequest.image_requests[0].snapshot_date = '2024-04-22';
+    blueprintRequest.image_requests[0].snapshot_date =
+      '2024-04-22T00:00:00.000Z';
 
     const expectedRequest: CreateBlueprintRequest = {
       ...blueprintRequest,
@@ -197,6 +206,24 @@ describe('repository snapshot tab - ', () => {
     expect(bulkSelectCheckbox.closest('div')).toHaveClass('pf-m-disabled');
   });
 
+  test('button Reset works to empty the snapshot date', async () => {
+    await renderCreateMode();
+    await goToSnapshotStep();
+    await selectUseSnapshot();
+    await updateDatePickerWithValue('2024-04-22');
+    // Check the Next button is enabled
+    const nextBtn = await screen.findByRole('button', { name: /Next/i });
+    await waitFor(() => {
+      expect(nextBtn).toHaveAttribute('aria-disabled', 'false');
+    });
+    // Check the Next button is disabled after resetting the date
+    await clickReset();
+    await waitFor(() => {
+      expect(nextBtn).toHaveAttribute('aria-disabled', 'true');
+    });
+    await screen.findByText(/Date cannot be blank/i);
+  });
+
   test('select using bulk select works ', async () => {
     await renderCreateMode();
     await goToSnapshotStep();
@@ -217,7 +244,8 @@ describe('repository snapshot tab - ', () => {
 
     // Check the date was passed correctly to the blueprint
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
-    blueprintRequest.image_requests[0].snapshot_date = '2024-04-22';
+    blueprintRequest.image_requests[0].snapshot_date =
+      '2024-04-22T00:00:00.000Z';
 
     const expectedRequest: CreateBlueprintRequest = {
       ...blueprintRequest,
@@ -238,7 +266,7 @@ describe('repository snapshot tab - ', () => {
     await clickNext();
     await goToReviewStep();
     await clickRevisitButton();
-    await screen.findByRole('heading', { name: /Custom repositories/ });
+    await screen.findByRole('heading', { name: /Custom repositories/i });
   });
 });