Schedule content item publish revamp (#2678)

Dependent on zesty-io/material#98


![image](https://github.com/zesty-io/manager-ui/assets/28705606/e736d0a5-09b0-42f0-9ae3-ac5c632c8429)

![image](https://github.com/zesty-io/manager-ui/assets/28705606/0d87d2c5-e515-4777-950e-ed7973a3b0e2)

Closes #2428

---------

Co-authored-by: Stuart Runyan <shrunyan@gmail.com>

cypress/e2e/content/actions.spec.js

@@ -1,3 +1,13 @@
+import moment from "moment";
+
+const yesterdayTimestamp = moment()
+  .hour(0)
+  .minute(0)
+  .second(0)
+  .millisecond(0)
+  .subtract(1, "day")
+  .format("x");
+
 describe("Actions in content editor", () => {
   const timestamp = Date.now();
 
@@ -80,48 +90,42 @@ describe("Actions in content editor", () => {
     cy.getBySelector("PublishButton").should("exist");
   });
 
-  // TODO: fix race condition so schedule publish will work
-  it.skip("Schedules a Publish for an item", () => {
-    // TODO: remove reload when UI state is consistent
-    cy.reload();
+  it("Schedules a Publish for an item", () => {
+    cy.waitOn("/v1/content/models*", () => {
+      cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta");
+    });
+
+    cy.getBySelector("PublishMenuButton").click();
+    cy.getBySelector("PublishScheduleButton").click({ force: true });
+    cy.getBySelector("SchedulePublishButton").click();
+    cy.getBySelector("ContentScheduledIndicator").should("exist");
+  });
+
+  it("Unschedules a Publish for an item", () => {
     cy.getBySelector("PublishMenuButton").click();
     cy.getBySelector("PublishScheduleButton").click();
-    // select date and time
-    cy.get(".form-control").first().click();
-    cy.get(".flatpickr-calendar.open .flatpickr-next-month").click();
-    cy.get(".flatpickr-calendar.open .flatpickr-day:not(.prevMonthDay)")
-      .first()
-      .click();
-    cy.get(".flatpickr-calendar.open .flatpickr-confirm").click();
-    cy.get("[data-cy=SchedulePublishButton]").click();
-    cy.contains("Scheduled version").should("exist");
-    cy.get("#SchedulePublishClose").click();
+    cy.getBySelector("UnschedulePublishButton").click();
+    cy.getBySelector("ContentScheduledIndicator").should("not.exist");
   });
 
   it("Only allows future dates to be scheduled for publish", () => {
     cy.waitOn("/v1/content/models*", () => {
-      cy.visit("/content/6-556370-8sh47g/7-82a5c7ffb0-07vj1c");
+      cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta");
     });
 
     cy.getBySelector("PublishMenuButton").click();
     cy.getBySelector("PublishScheduleButton").click();
-    // cy.get(
-    //   ".ModalAligner--ptdt- .MuiOutlinedInput-root .MuiInputAdornment-root .MuiButtonBase-root"
-    // ).click();
-    cy.getBySelector("SchedulePublishDate").find("button").click();
+    cy.getBySelector("PublishScheduleModal")
+      .find("[data-cy='datePickerInputField']")
+      .click();
 
     cy.get(
-      '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-root button[aria-label="Previous month"]'
+      '.MuiPickersArrowSwitcher-root button[aria-label="Previous month"]'
     ).should("be.disabled");
     cy.get(
-      '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-root button[aria-label="Next month"]'
+      '.MuiPickersArrowSwitcher-root button[aria-label="Next month"]'
     ).should("not.be.disabled");
-  });
-
-  it.skip("Unschedules a Publish for an item", () => {
-    cy.getBySelector("PublishMenuButton").click();
-    cy.getBySelector("PublishScheduleButton").click();
-    cy.get("#SchedulePublishClose").click();
+    cy.getBySelector("CancelSchedulePublishButton").click({ force: true });
   });
 
   it("Fills in default values for a new item", () => {

package.json

@@ -59,7 +59,7 @@
     "@tinymce/tinymce-react": "^4.3.0",
     "@welldone-software/why-did-you-render": "^6.1.1",
     "@zesty-io/core": "1.10.0",
-    "@zesty-io/material": "^0.13.0",
+    "@zesty-io/material": "^0.13.1",
     "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",

src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx

@@ -29,9 +29,12 @@ import {
   useGetContentItemQuery,
   useGetContentModelFieldsQuery,
 } from "../../../../../../shell/services/instance";
-import { ScheduleFlyout } from "../ItemEdit/components/Header/ItemVersioning/ScheduleFlyout";
 import { Error } from "../../components/Editor/Field/FieldShell";
-import { ContentModelField } from "../../../../../../shell/services/types";
+import {
+  ContentItemWithDirtyAndPublishing,
+  ContentModelField,
+} from "../../../../../../shell/services/types";
+import { SchedulePublish } from "../../../../../../shell/components/SchedulePublish";
 
 export type ActionAfterSave =
   | ""
@@ -341,19 +344,20 @@ export const ItemCreate = () => {
           </Box>
         </Stack>
       </Box>
-      <ScheduleFlyout
-        isOpen={!isLoadingNewItem && isScheduleDialogOpen}
-        item={newItemData}
-        dispatch={dispatch}
-        toggleOpen={() => setIsScheduleDialogOpen(false)}
-        onScheduled={() => {
-          setIsScheduleDialogOpen(false);
-
-          if (willRedirect) {
-            history.push(`/content/${modelZUID}/${newItemData?.meta?.ZUID}`);
-          }
-        }}
-      />
+      {isScheduleDialogOpen && !isLoadingNewItem && (
+        <SchedulePublish
+          item={newItemData as ContentItemWithDirtyAndPublishing}
+          onClose={() => setIsScheduleDialogOpen(false)}
+          onPublishNow={() => handlePublish(newItemZUID)}
+          onScheduleSuccess={() => {
+            setIsScheduleDialogOpen(false);
+
+            if (willRedirect) {
+              history.push(`/content/${modelZUID}/${newItemData?.meta?.ZUID}`);
+            }
+          }}
+        />
+      )}
     </WithLoader>
   );
 };

src/apps/content-editor/src/app/views/ItemEdit/Meta/Meta.js

@@ -1,5 +1,4 @@
 import { Header } from "../components/Header";
-import { ItemVersioning } from "../components/Header/ItemVersioning";
 
 import { ItemSettings } from "./ItemSettings";
 import { DataSettings } from "./ItemSettings/DataSettings";