Merge branch 'master' of github.com:zesty-io/manager-ui into fix/seve…

…ral-global-search-fixes
zesty-io · Jan 2, 2024 · f30fa5b · f30fa5b
2 parents c5fa65e + 77c61de
commit f30fa5b
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 42 deletions.
diff --git a/cypress/e2e/content/actions.spec.js b/cypress/e2e/content/actions.spec.js
@@ -57,27 +57,27 @@ describe("Actions in content editor", () => {
     cy.get("[data-cy=toast]").contains("Saved a new ");
   });
 
-  // TODO: get publishing working in Dev environment
-  it.skip("Publishes an item", () => {
-    cy.get("#PublishButton").click();
-    cy.contains("Published version", { timeout: 5000 }).should("exist");
-    cy.get("#PublishButton").should("be.disabled");
-    // TODO: fix race condition
-    // TODO: fix isScheduled/isPublished race condition so it never appears as isScheduled here
-    // cy.get("#PublishScheduleButton").should("be.disabled");
+  it("Publishes an item", () => {
+    cy.getBySelector("PublishButton").click();
+    cy.getBySelector("ConfirmPublishModal").should("exist");
+    cy.getBySelector("ConfirmPublishButton").click();
+
+    cy.intercept("GET", "**/publishings").as("publish");
+    cy.wait("@publish");
+
+    cy.getBySelector("ContentPublishedIndicator").should("exist");
   });
 
-  // TODO: get publishing working in Dev environment
-  it.skip("Unpublishes an item", () => {
-    // go to Content Tab
-    cy.get("[data-cy=SubApp]").click();
-    cy.get("article.Unpublish").click();
-    // TODO: fix race condition so unpublish will not be disabled
-    // cy.get("#UnpublishItemButton").should.not("be.disabled");
-    cy.get("#UnpublishItemButton").click({ force: true });
-    cy.contains("Unpublished Item", {
-      timeout: 5000,
-    }).should("exist");
+  it("Unpublishes an item", () => {
+    cy.getBySelector("ContentPublishedIndicator").should("exist");
+    cy.getBySelector("PublishMenuButton").click();
+    cy.getBySelector("UnpublishContentButton").click({ force: true });
+    cy.getBySelector("ConfirmUnpublishButton").click();
+
+    cy.intercept("GET", "**/publishings").as("publish");
+    cy.wait("@publish");
+
+    cy.getBySelector("PublishButton").should("exist");
   });
 
   // TODO: fix race condition so schedule publish will work

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@tinymce/tinymce-react": "^3.12.6",
     "@welldone-software/why-did-you-render": "^6.1.1",
     "@zesty-io/core": "1.9.1",
-    "@zesty-io/material": "^0.12.0",
+    "@zesty-io/material": "^0.12.1",
     "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",

diff --git a/src/apps/active-preview/Preview.js b/src/apps/active-preview/Preview.js
@@ -180,6 +180,28 @@ export function Preview(props) {
     setAnchorEl(null);
   };
 
+  const handleOpenInNewTab = () => {
+    const newTab = window.open(
+      `${CONFIG.URL_MANAGER_PROTOCOL}${instance.ZUID}${CONFIG.URL_MANAGER}/active-preview`,
+      "_blank"
+    );
+
+    if (newTab) {
+      newTab.addEventListener("load", () => {
+        newTab.postMessage(
+          {
+            source: "zesty",
+            route,
+            settings,
+            version,
+            dirty,
+          },
+          window.location.origin
+        );
+      });
+    }
+  };
+
   if (!domain) {
     return (
       <Box
@@ -341,12 +363,7 @@ export function Preview(props) {
             mr: 0.5,
           }}
           size="small"
-          onClick={() =>
-            window.open(
-              `${CONFIG.URL_MANAGER_PROTOCOL}${instance.ZUID}${CONFIG.URL_MANAGER}/active-preview`,
-              "_blank"
-            )
-          }
+          onClick={handleOpenInNewTab}
         >
           <OpenInNewRounded />
         </IconButton>

diff --git a/...s/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ConfirmPublishModal.tsx b/...s/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ConfirmPublishModal.tsx
@@ -0,0 +1,72 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Box,
+  Stack,
+} from "@mui/material";
+import CloudUploadRoundedIcon from "@mui/icons-material/CloudUploadRounded";
+
+type ConfirmPublishModal = {
+  contentTitle: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+export const ConfirmPublishModal = ({
+  contentTitle,
+  onCancel,
+  onConfirm,
+}: ConfirmPublishModal) => {
+  return (
+    <Dialog
+      open
+      data-cy="ConfirmPublishModal"
+      PaperProps={{ sx: { width: 480 } }}
+    >
+      <DialogTitle component="div" sx={{ pb: 1 }}>
+        <Stack
+          height={40}
+          width={40}
+          bgcolor="green.100"
+          borderRadius="50%"
+          justifyContent="center"
+          alignItems="center"
+          marginBottom={1.5}
+        >
+          <CloudUploadRoundedIcon color="success" />
+        </Stack>
+        <Box>
+          <Typography fontWeight={700} variant="h5" display="inline">
+            Publish Content Item:
+          </Typography>{" "}
+          <Typography variant="h5" display="inline">
+            {contentTitle}?
+          </Typography>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Typography variant="body2" color="text.secondary">
+          This will make the item immediately available on all of your
+          platforms. You can always unpublish this item later if needed.
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="text" color="inherit" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="success"
+          sx={{ color: "common.white" }}
+          onClick={onConfirm}
+          data-cy="ConfirmPublishButton"
+        >
+          Publish Item
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/...content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx b/...content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx
@@ -17,6 +17,7 @@ import {
 } from "../../../../../../../../shell/services/instance";
 import { useHistory, useParams } from "react-router";
 import { useEffect, useState } from "react";
+
 import {
   ContentItem,
   Publishing,
@@ -42,6 +43,7 @@ import { ScheduleFlyout } from "../Header/ItemVersioning/ScheduleFlyout";
 import { UnpublishDialog } from "./UnpublishDialog";
 import { usePermission } from "../../../../../../../../shell/hooks/use-permissions";
 import { ContentItemWithDirtyAndPublishing } from ".";
+import { ConfirmPublishModal } from "./ConfirmPublishModal";
 
 const ITEM_STATES = {
   dirty: "dirty",
@@ -72,6 +74,8 @@ export const ItemEditHeaderActions = ({
   const [scheduledPublishDialogOpen, setScheduledPublishDialogOpen] =
     useState(false);
   const [scheduleAfterSave, setScheduleAfterSave] = useState(false);
+  const [isConfirmPublishModalOpen, setIsConfirmPublishModalOpen] =
+    useState(false);
   const item = useSelector(
     (state: AppState) =>
       state.content[itemZUID] as ContentItemWithDirtyAndPublishing
@@ -104,7 +108,7 @@ export const ItemEditHeaderActions = ({
       setPublishAfterSave(true);
       onSave();
     } else {
-      handlePublish();
+      setIsConfirmPublishModalOpen(true);
     }
   });
 
@@ -162,7 +166,7 @@ export const ItemEditHeaderActions = ({
       activePublishing?.version !== item?.meta.version &&
       !saving
     ) {
-      handlePublish();
+      setIsConfirmPublishModalOpen(true);
       setPublishAfterSave(false);
     }
   }, [item, publishAfterSave, saving, activePublishing]);
@@ -284,13 +288,14 @@ export const ItemEditHeaderActions = ({
                     setPublishAfterSave(true);
                     onSave();
                   } else {
-                    handlePublish();
+                    setIsConfirmPublishModalOpen(true);
                   }
                 }}
                 loading={publishing || publishAfterSave || isFetching}
                 color="success"
                 variant="contained"
                 id="PublishButton"
+                data-cy="PublishButton"
               >
                 {itemState === ITEM_STATES.dirty ? "Save & Publish" : "Publish"}
               </LoadingButton>
@@ -311,7 +316,13 @@ export const ItemEditHeaderActions = ({
               </Button>
             </ButtonGroup>
           ) : (
-            <Box display="flex" alignItems="center" pl="10px" pr="4px">
+            <Box
+              data-cy="ContentPublishedIndicator"
+              display="flex"
+              alignItems="center"
+              pl="10px"
+              pr="4px"
+            >
               <Box display="flex" gap={1} alignItems="center">
                 <CheckCircleRounded fontSize="small" color="success" />
                 <Typography
@@ -324,6 +335,7 @@ export const ItemEditHeaderActions = ({
                 </Typography>
               </Box>
               <IconButton
+                data-cy="PublishMenuButton"
                 size="small"
                 onClick={(e) => {
                   setPublishMenu(e.currentTarget);
@@ -389,7 +401,7 @@ export const ItemEditHeaderActions = ({
         setScheduleAfterSave={setScheduleAfterSave}
         setUnpublishDialogOpen={setUnpublishDialogOpen}
         setScheduledPublishDialogOpen={setScheduledPublishDialogOpen}
-        handlePublish={handlePublish}
+        handlePublish={() => setIsConfirmPublishModalOpen(true)}
       />
       {unpublishDialogOpen && (
         <UnpublishDialog
@@ -405,6 +417,16 @@ export const ItemEditHeaderActions = ({
         dispatch={dispatch}
         toggleOpen={() => setScheduledPublishDialogOpen(false)}
       />
+      {isConfirmPublishModalOpen && (
+        <ConfirmPublishModal
+          contentTitle={item?.web?.metaTitle}
+          onCancel={() => setIsConfirmPublishModalOpen(false)}
+          onConfirm={() => {
+            setIsConfirmPublishModalOpen(false);
+            handlePublish();
+          }}
+        />
+      )}
     </>
   );
 };
@@ -471,6 +493,9 @@ const PublishingMenu = ({
 
           onClose();
         }}
+        data-cy={
+          itemState === ITEM_STATES.published ? "UnpublishContentButton" : ""
+        }
       >
         <ListItemIcon>
           {itemState === ITEM_STATES.dirty ? (

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishDialog.tsx b/src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/UnpublishDialog.tsx
@@ -55,6 +55,7 @@ export const UnpublishDialog = ({
           Cancel
         </Button>
         <LoadingButton
+          data-cy="ConfirmUnpublishButton"
           variant="contained"
           color="error"
           aria-label="Delete Button"

diff --git a/src/apps/media/src/app/components/FileModal/OTFEditor.tsx b/src/apps/media/src/app/components/FileModal/OTFEditor.tsx
@@ -18,6 +18,7 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import RotateRightRoundedIcon from "@mui/icons-material/RotateRightRounded";
 import { FlipHorizontal, FlipVertical } from "@zesty-io/material";
 import BlurOnRoundedIcon from "@mui/icons-material/BlurOnRounded";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import CheckIcon from "@mui/icons-material/Check";
 import { isEmpty, omitBy } from "lodash";
 

diff --git a/src/apps/media/src/app/components/Header.tsx b/src/apps/media/src/app/components/Header.tsx
@@ -333,7 +333,7 @@ export const Header = ({
           <Stack
             direction="row"
             justifyContent="space-between"
-            alignItems="baseline"
+            alignItems="center"
           >
             <Stack gap={0.25}>
               {showBreadcrumbs && id && <MediaBreadcrumbs id={id} />}

diff --git a/src/shell/store/content.js b/src/shell/store/content.js
@@ -860,8 +860,8 @@ function parsePublishState(records) {
       If `publishAt` is set but unpublishAt is not you only need to determine if `nowGMT` is after `publishAt`. a.k.a is it live
       If both `publishAt` and `unpublishAt` are set you need determine all 3 states.
     **/
-    const nowGMT = moment.utc();
-    const publishAtGMT = moment(record.publishAt);
+    const nowGMT = moment.utc().startOf("minute");
+    const publishAtGMT = moment(record.publishAt).startOf("minute");
     const unpublishAtGMT = moment(record.unpublishAt);
 
     // Current time is before publishAt so it is scheduled