Wizard: switch snapshot date in wizard to RFC3339

src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx

@@ -478,7 +478,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 '';
     }
@@ -505,7 +505,9 @@ export const ContentList = ({
                   headerContent={
                     useLatest
                       ? 'Repositories as of today'
-                      : `Repositories as of ${snapshotDate}`
+                      : `Repositories as of ${yyyyMMddFormat(
+                          new Date(snapshotDate)
+                        )}`
                   }
                   hasAutoWidth
                   minWidth="60rem"

src/Components/CreateImageWizard/steps/Snapshot/Snapshot.tsx

@@ -18,10 +18,6 @@ import {
   changeUseLatest,
   changeSnapshotDate,
 } from '../../../../store/wizardSlice';
-import {
-  parseYYYYMMDDToDate,
-  yyyyMMddFormat,
-} from '../../../../Utilities/time';
 import { isSnapshotDateValid } from '../../validators';
 
 export default function Snapshot() {
@@ -75,12 +71,10 @@ export default function Snapshot() {
               <DatePicker
                 id="snapshot-date-picker"
                 name="pick-snapshot-date"
-                value={snapshotDate}
+                value={snapshotDate ? snapshotDate.split('T')[0] : ''}
                 required
                 requiredDateOptions={{ isRequired: true }}
                 placeholder="YYYY-MM-DD"
-                dateParse={parseYYYYMMDDToDate}
-                dateFormat={yyyyMMddFormat}
                 validators={[
                   (date: Date) => {
                     if (!isSnapshotDateValid(date)) {

src/store/wizardSlice.ts

@@ -663,7 +663,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();
+      }
     },
     importCustomRepositories: (
       state,

src/test/Components/CreateImageWizard/steps/Snapshot/Snapshot.test.tsx

@@ -104,6 +104,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();
@@ -150,7 +158,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,
@@ -201,6 +210,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();
@@ -221,7 +248,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,
@@ -242,7 +270,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 });
   });
 });