Chore/resolve stage conflicts 3 (#2903)

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

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.15.2",
+    "@zesty-io/material": "^0.15.3",
     "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",

src/apps/content-editor/src/app/components/APIEndpoints.tsx

@@ -0,0 +1,89 @@
+import { useSelector } from "react-redux";
+import { useParams } from "react-router";
+import {
+  MenuList,
+  MenuItem,
+  ListItemIcon,
+  Typography,
+  Chip,
+} from "@mui/material";
+import { DesignServicesRounded, VisibilityRounded } from "@mui/icons-material";
+
+import { AppState } from "../../../../../shell/store/types";
+import { ContentItem } from "../../../../../shell/services/types";
+import { useGetDomainsQuery } from "../../../../../shell/services/accounts";
+import { ApiType } from "../../../../schema/src/app/components/ModelApi";
+
+type APIEndpointsProps = {
+  type: Extract<ApiType, "quick-access" | "site-generators">;
+};
+export const APIEndpoints = ({ type }: APIEndpointsProps) => {
+  const { itemZUID } = useParams<{
+    itemZUID: string;
+  }>();
+  const item = useSelector(
+    (state: AppState) => state.content[itemZUID] as ContentItem
+  );
+  const instance = useSelector((state: AppState) => state.instance);
+  const { data: domains } = useGetDomainsQuery();
+
+  const apiTypeEndpointMap: Partial<Record<ApiType, string>> = {
+    "quick-access": `/-/instant/${itemZUID}.json`,
+    "site-generators": item ? `/${item?.web?.path}/?toJSON` : "/?toJSON",
+  };
+
+  const liveDomain = domains?.find((domain) => domain.branch == "live");
+
+  return (
+    <MenuList>
+      <MenuItem
+        onClick={() => {
+          window.open(
+            // @ts-expect-error config not typed
+            `${CONFIG.URL_PREVIEW_PROTOCOL}${instance.randomHashID}${CONFIG.URL_PREVIEW}${apiTypeEndpointMap[type]}`,
+            "_blank"
+          );
+        }}
+      >
+        <ListItemIcon>
+          <DesignServicesRounded />
+        </ListItemIcon>
+        <Typography
+          variant="inherit"
+          noWrap
+          sx={{
+            width: 172,
+          }}
+        >
+          {/* @ts-expect-error config not typed */}
+          {`${instance.randomHashID}${CONFIG.URL_PREVIEW}${apiTypeEndpointMap[type]}`}
+        </Typography>
+        <Chip size="small" label="Dev" />
+      </MenuItem>
+      {liveDomain && (
+        <MenuItem
+          onClick={() => {
+            window.open(
+              `https://${liveDomain.domain}${apiTypeEndpointMap[type]}`,
+              "_blank"
+            );
+          }}
+        >
+          <ListItemIcon>
+            <VisibilityRounded />
+          </ListItemIcon>
+          <Typography
+            variant="inherit"
+            noWrap
+            sx={{
+              width: 172,
+            }}
+          >
+            {`${liveDomain.domain}${apiTypeEndpointMap[type]}`}
+          </Typography>
+          <Chip size="small" label="Prod" />
+        </MenuItem>
+      )}
+    </MenuList>
+  );
+};

src/apps/content-editor/src/app/components/FieldTypeMedia.tsx

@@ -26,7 +26,7 @@ import {
 } from "@mui/icons-material";
 import { alpha } from "@mui/material/styles";
 import { CompactView, Modal, Login } from "@bynder/compact-view";
-import { Bynder } from "@zesty-io/material";
+import { Bynder, FileReplace } from "@zesty-io/material";
 
 import {
   useGetBinsQuery,
@@ -43,6 +43,8 @@ import styles from "../../../../media/src/app/components/Thumbnail/Loading.less"
 import cx from "classnames";
 import { FileTypePreview } from "../../../../media/src/app/components/FileModal/FileTypePreview";
 import { useGetInstanceSettingsQuery } from "../../../../../shell/services/instance";
+import { ReplaceFileModal } from "../../../../media/src/app/components/FileModal/ReplaceFileModal";
+import { showReportDialog } from "@sentry/react";
 
 type FieldTypeMediaProps = {
   images: string[];
@@ -597,6 +599,7 @@ const MediaItem = ({
     skip: imageZUID?.substr(0, 4) === "http",
   });
   const [showRenameFileModal, setShowRenameFileModal] = useState(false);
+  const [isReplaceFileModalOpen, setIsReplaceFileModalOpen] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
   const [isCopiedZuid, setIsCopiedZuid] = useState(false);
   const [newFilename, setNewFilename] = useState("");
@@ -757,6 +760,7 @@ const MediaItem = ({
             <FileTypePreview
               src={isURL ? imageZUID : data?.url}
               filename={isURL ? imageZUID : data?.filename}
+              updatedAt={data?.updated_at}
               isMediaThumbnail
             />
           )}
@@ -794,7 +798,7 @@ const MediaItem = ({
           )}
           <Box display="flex" gap={1} justifyContent="flex-end">
             {!isBynderAsset || (isBynderAsset && isBynderSessionValid) ? (
-              <Tooltip title="Replace File" placement="bottom" enterDelay={800}>
+              <Tooltip title="Swap File" placement="bottom" enterDelay={800}>
                 <IconButton
                   size="small"
                   onClick={(event: any) => {
@@ -861,6 +865,18 @@ const MediaItem = ({
                   <ListItemText>Rename</ListItemText>
                 </MenuItem>
               )}
+              <MenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setAnchorEl(null);
+                  setIsReplaceFileModalOpen(true);
+                }}
+              >
+                <ListItemIcon>
+                  <FileReplace />
+                </ListItemIcon>
+                <ListItemText>Replace File</ListItemText>
+              </MenuItem>
               {!isURL && !isBynderAsset && (
                 <MenuItem
                   onClick={(event) => {
@@ -914,6 +930,13 @@ const MediaItem = ({
           extension={fileExtension(data.filename)}
         />
       )}
+      {isReplaceFileModalOpen && (
+        <ReplaceFileModal
+          originalFile={data}
+          onClose={() => setIsReplaceFileModalOpen(false)}
+          onCancel={() => setIsReplaceFileModalOpen(false)}
+        />
+      )}
     </>
   );
 };