[Content] Content item Redirects tab

cypress/e2e/content/redirects.spec.js

@@ -0,0 +1,62 @@
+const NOW = new Date().getTime();
+
+describe("Content item redirects", () => {
+  before(() => {
+    // Create a new redirect
+    cy.waitOn("/v1/web/redirects", () => {
+      cy.visit("/redirects");
+    });
+
+    cy.intercept("/v1/web/redirects").as("redirects");
+    cy.getBySelector("RedirectActionCreateButton").click();
+    cy.getBySelector("RedirectsFieldPath")
+      .find("input")
+      .type(`/test-redirect/${NOW}`);
+    cy.getBySelector("RedirectsSearchFieldInputField").find("input").click();
+    cy.wait(2000);
+    cy.getBySelector("RedirectsSearchFieldInputField")
+      .find("input")
+      .type("all field types{downArrow}{enter}");
+    cy.getBySelector("RedirectsCreateButton").click();
+    cy.wait("@redirects");
+  });
+
+  it("should show redirects for a content item", () => {
+    cy.waitOn("/v1/content/models*", () => {
+      cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19/redirects");
+    });
+
+    cy.contains(`/test-redirect/${NOW}`, { timeout: 10000 }).should("exist");
+  });
+
+  it("should be able to edit a redirect", () => {
+    cy.intercept("/v1/web/redirects").as("redirects");
+    cy.contains(`/test-redirect/${NOW}`)
+      .parent()
+      .within(() => {
+        cy.get(".MuiDataGrid-actionsCell button").click();
+      });
+    cy.getBySelector("EditRedirect").click();
+    cy.getBySelector("RedirectsFieldPath").find("input").type(`/updated`);
+    cy.getBySelector("RedirectsCreateButton").click({ timeout: 10000 });
+
+    cy.wait("@redirects");
+
+    cy.contains(`/test-redirect/${NOW}/updated`, { timeout: 10000 }).should(
+      "exist"
+    );
+  });
+
+  it("should be able to delete a redirect", () => {
+    cy.intercept("/v1/web/redirects").as("redirects");
+    cy.get(".MuiDataGrid-actionsCell button").last().click();
+    cy.getBySelector("DeleteRedirect").click();
+    cy.getBySelector("ConfirmDeleteRedirect").click();
+
+    cy.wait("@redirects").then(() => {
+      cy.get(".MuiDataGrid-cell")
+        .contains(`/test-redirect/${NOW}/updated`, { timeout: 10000 })
+        .should("not.exist");
+    });
+  });
+});

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

@@ -54,7 +54,11 @@ import { FreestyleWrapper } from "./FreestyleWrapper";
 import { Meta } from "./Meta";
 import { FieldError } from "../../components/Editor/FieldError";
 import { AIGeneratorProvider } from "../../../../../../shell/components/withAi/AIGeneratorProvider";
-import { fetchItemPublishings } from "../../../../../../shell/store/content";
+import {
+  fetchItemPublishings,
+} from "../../../../../../shell/store/content";
+import { Redirects } from "../Redirects";
+import RedirectsDialogContextProvider from "../../../../../seo/src/app/components/RedirectsDialogProvider";
 
 const selectItemHeadTags = createSelector(
   (state) => state.headTags,
@@ -661,6 +665,15 @@ export default function ItemEdit() {
                   path="/content/:modelZUID/:itemZUID/freestyle"
                   render={() => <FreestyleWrapper />}
                 />
+                <Route
+                  exact
+                  path="/content/:modelZUID/:itemZUID/redirects"
+                  render={() => (
+                    <RedirectsDialogContextProvider>
+                      <Redirects />
+                    </RedirectsDialogContextProvider>
+                  )}
+                />
               </Switch>
             </Box>
           </DuoModeContext.Provider>

src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/index.tsx

@@ -25,6 +25,7 @@ import {
   ContentCopyRounded,
   WebRounded,
 } from "@mui/icons-material";
+import { ShuffleVariant } from "@zesty-io/material";
 import { useSelector } from "react-redux";
 import { AppState } from "../../../../../../../../shell/store/types";
 import { ItemEditHeaderActions } from "./ItemEditHeaderActions";
@@ -52,6 +53,11 @@ const tabs = [
     icon: QueryStatsRounded,
     value: "meta",
   },
+  {
+    label: "Redirects",
+    icon: ShuffleVariant,
+    value: "redirects",
+  },
   {
     label: "Analytics",
     icon: BarChartRounded,

src/apps/content-editor/src/app/views/Redirects/DeleteRedirectModal.tsx

@@ -0,0 +1,211 @@
+import { useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Typography,
+  Box,
+  Stack,
+  Button,
+  DialogActions,
+  Link,
+} from "@mui/material";
+import { DeleteRounded, Description, HiveRounded } from "@mui/icons-material";
+import { LoadingButton } from "@mui/lab";
+import { useDispatch } from "react-redux";
+
+import { useDomain } from "../../../../../../shell/hooks/use-domain";
+import { useDeleteRedirectMutation } from "../../../../../../shell/services/instance";
+import { notify } from "../../../../../../shell/store/notifications";
+import { RedirectsTargetType } from "../../../../../../shell/services/types";
+
+const HTTP_CODE_OPTIONS = {
+  301: "301 - Permanent Redirect",
+  302: "302 - Temporary Redirect",
+} as const;
+
+type DeleteRedirectModalProps = {
+  targetPath: string;
+  incomingPath: string;
+  ZUID: string;
+  httpCode: number;
+  targetType: RedirectsTargetType;
+  onClose: () => void;
+};
+export const DeleteRedirectModal = ({
+  targetPath,
+  incomingPath,
+  ZUID,
+  httpCode,
+  targetType,
+  onClose,
+}: DeleteRedirectModalProps) => {
+  const domain = useDomain();
+  const dispatch = useDispatch();
+  const [
+    deleteRedirect,
+    { isLoading: isDeletingRedirect, isSuccess: isRedirectDeleted },
+  ] = useDeleteRedirectMutation();
+
+  useEffect(() => {
+    if (isRedirectDeleted) {
+      onClose();
+      dispatch(
+        notify({
+          message: `Redirect Deleted: ${incomingPath}`,
+          kind: "error",
+        })
+      );
+    }
+  }, [isRedirectDeleted]);
+
+  const handleDelete = () => {
+    deleteRedirect({ ZUID });
+  };
+
+  return (
+    <Dialog
+      open
+      slotProps={{
+        paper: {
+          sx: {
+            maxWidth: 480,
+          },
+        },
+      }}
+      onClose={onClose}
+    >
+      <DialogTitle>
+        <Stack gap={1.5}>
+          <Box
+            sx={{
+              backgroundColor: "red.100",
+              borderRadius: "100%",
+              width: "40px",
+              height: "40px",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <DeleteRounded color="error" />
+          </Box>
+          <Box>
+            <Box mb={1}>
+              <Typography variant="h5" display="inline" fontWeight={700}>
+                Delete Redirect:&nbsp;
+              </Typography>
+              <Typography variant="h5" display="inline">
+                {incomingPath}
+              </Typography>
+            </Box>
+            <Typography variant="body2" color="text.secondary">
+              Deleting this redirect will remove it immediately from your site.
+              This action cannot be undone.
+            </Typography>
+          </Box>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <Typography variant="body2" fontWeight={700} mb={2.5}>
+          More details
+        </Typography>
+        <Stack width="100%" border={1} borderColor="border" borderRadius={2}>
+          <Stack direction="row" height={54} alignItems="center" px={2}>
+            <Typography
+              variant="body2"
+              fontWeight={700}
+              sx={{ flexBasis: 160 }}
+            >
+              HTTP Code
+            </Typography>
+            <Typography variant="body2" sx={{ flex: 1 }}>
+              {HTTP_CODE_OPTIONS[httpCode as keyof typeof HTTP_CODE_OPTIONS]}
+            </Typography>
+          </Stack>
+          <Stack
+            direction="row"
+            height={54}
+            alignItems="center"
+            borderTop={1}
+            borderBottom={1}
+            borderColor="border"
+            px={2}
+          >
+            <Typography
+              variant="body2"
+              fontWeight={700}
+              sx={{ flexBasis: 160 }}
+            >
+              Redirect Type
+            </Typography>
+            <RedirectType type={targetType} />
+          </Stack>
+          <Stack direction="row" height={54} alignItems="center" px={2}>
+            <Typography
+              variant="body2"
+              fontWeight={700}
+              sx={{ flexBasis: 160 }}
+            >
+              Redirect Target
+            </Typography>
+            <Link
+              variant="body2"
+              href={`${domain}${targetPath}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{ flex: 1 }}
+            >
+              {targetPath}
+            </Link>
+          </Stack>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="text"
+          color="inherit"
+          onClick={onClose}
+          disabled={isDeletingRedirect}
+        >
+          Cancel
+        </Button>
+        <LoadingButton
+          data-cy="ConfirmDeleteRedirect"
+          variant="contained"
+          color="error"
+          onClick={handleDelete}
+          loading={isDeletingRedirect}
+        >
+          Delete Forever
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const RedirectType = ({ type }: { type: RedirectsTargetType }) => {
+  if (type === "path") {
+    return (
+      <Stack direction="row" alignItems="center" gap={1.5}>
+        <HiveRounded fontSize="small" color="action" />
+        <Typography variant="body2" sx={{ flex: 1 }}>
+          Wildcard
+        </Typography>
+      </Stack>
+    );
+  }
+
+  if (type === "page") {
+    return (
+      <Stack direction="row" alignItems="center" gap={1.5}>
+        <Description fontSize="small" color="action" />
+        <Typography variant="body2" sx={{ flex: 1 }}>
+          Internal
+        </Typography>
+      </Stack>
+    );
+  }
+
+  return <></>;
+};