Feature: Content app sidebar redesign

cypress/e2e/content/navigation.spec.js

@@ -6,33 +6,35 @@ describe("Navigation through content editor", () => {
   });
 
   it("Opens homepage item", () => {
-    cy.get("#MainNavigation li a").contains("Homepage").click();
+    cy.getBySelector("pages_nav")
+      .find("li p[aria-label='Homepage']")
+      .should("exist")
+      .click();
     cy.get("#12-0c3934-8dz720").should("exist");
   });
 
   it("Opens the reorder nav modal", () => {
-    cy.get("#ReorderNavButton").click();
+    cy.getBySelector("reorder_nav").should("exist").click();
     cy.get(".ModalAligner--ptdt- article main ul.sort--taGo4").should("exist");
     cy.get(".ModalAligner--ptdt-.Open--M5j6S button.Close--kVpCO").click();
   });
 
   it("Creates a new item from the menu", () => {
-    cy.get("#MainNavigation").then((content) => {
-      if (!content.is(":visible")) {
-        cy.get("[data-cy=contentNavButton]").click();
-        cy.get(".CreateItemDropdown").find(".MuiSelect-select").click();
-        cy.get("[role=presentation]").find('[data-value="link"]').click();
-        cy.get("#CreateLinkButton").should("exist");
-      } else {
-        cy.get(".CreateItemDropdown").find(".MuiSelect-select").click();
-        cy.get("[role=presentation]").find('[data-value="link"]').click();
-        cy.get('[data-value="link"]').click();
-        cy.get("#CreateLinkButton").should("exist");
-      }
-    });
+    cy.getBySelector("create_new_content_item").should("exist").click();
+    cy.getBySelector("create_new_content_item_dialog").should("exist");
+    cy.getBySelector("create_new_content_item_input")
+      .find("input")
+      .type("cypress");
+    cy.get(".MuiAutocomplete-listbox .MuiAutocomplete-option")
+      .first()
+      .should("exist")
+      .click();
+    cy.getBySelector("create_new_content_item_btn").click();
+    cy.location("pathname").should("eq", "/content/6-0c960c-d1n0kx/new");
   });
 
-  it("Check Content Nav Collapsed functionality", () => {
+  // To be re-added on another release
+  it.skip("Check Content Nav Collapsed functionality", () => {
     cy.get("[data-cy=contentNavButton]")
       .siblings("div")
       .then((btn) => {
@@ -48,7 +50,8 @@ describe("Navigation through content editor", () => {
       });
   });
 
-  it("Check Content Nav Collapse persist when clicking on other Applications ", () => {
+  // To be re-added on another release
+  it.skip("Check Content Nav Collapse persist when clicking on other Applications ", () => {
     cy.get("[data-cy=contentNavButton]")
       .siblings("div")
       .then((btn) => {

package.json

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

src/apps/content-editor/src/app/ContentEditor.js

@@ -12,22 +12,23 @@ import { fetchNav } from "../store/navContent";
 
 import { AppLink } from "@zesty-io/core/AppLink";
 import { WithLoader } from "@zesty-io/core/WithLoader";
-import { ContentNav } from "./components/Nav";
+import { ContentNav } from "./components/ContentNav";
 
-import { Dashboard } from "./views/Dashboard";
 import { ItemList } from "./views/ItemList";
 import { ItemEdit } from "./views/ItemEdit";
 import { ItemCreate } from "./views/ItemCreate";
 import { LinkCreate } from "./views/LinkCreate";
 import { LinkEdit } from "./views/LinkEdit";
 import { NotFound } from "./views/NotFound";
 import { CSVImport } from "./views/CSVImport";
+import ReleaseApp from "../../../release/src";
 
 // Vendor styles for codemirror, prosemirror and flatpickr
 import "@zesty-io/core/vendor.css";
 
 import styles from "./ContentEditor.less";
 import Analytics from "./views/Analytics";
+import { ResizableContainer } from "../../../../shell/components/ResizeableContainer";
 
 // Makes sure that other apps using legacy theme does not get affected with the palette
 let customTheme = createTheme(legacyTheme, {
@@ -95,7 +96,6 @@ let customTheme = createTheme(legacyTheme, {
 });
 
 export default function ContentEditor() {
-  const contentModels = useSelector((state) => state.models);
   const navContent = useSelector((state) => state.navContent);
   const ui = useSelector((state) => state.ui);
   const dispatch = useDispatch();
@@ -139,13 +139,14 @@ export default function ContentEditor() {
                   : ""
               )}
             >
-              <ContentNav
-                data-cy="contentNav"
-                dispatch={dispatch}
-                models={contentModels}
-                nav={navContent}
-              />
-
+              <ResizableContainer
+                id="contentNav"
+                defaultWidth={300}
+                minWidth={220}
+                maxWidth={360}
+              >
+                <ContentNav />
+              </ResizableContainer>
               <div
                 className={cx(
                   styles.Content,
@@ -154,6 +155,7 @@ export default function ContentEditor() {
               >
                 <div className={styles.ContentWrap}>
                   <Switch>
+                    {/* <Route path="/content/releases" component={ReleaseApp} /> */}
                     <Route exact path="/content" component={Analytics} />
                     <Route
                       exact

src/apps/content-editor/src/app/ContentEditor.less

@@ -13,15 +13,17 @@
 }
 
 .ContentEditor {
-  height: calc(100vh - 40px);
-  display: grid;
+  // height: calc(100vh - 40px);
+  height: 100%;
+  display: flex;
   grid-template-columns: 60px 1fr;
   position: relative;
 
   .Content {
     overflow: hidden;
     border-left: 1px solid #f2f4f7;
     z-index: 1;
+    width: 100%;
 
     .ContentWrap {
       display: flex;

src/apps/content-editor/src/app/components/ContentNav/NavError.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+import { Box, Typography } from "@mui/material";
+
+import notFound from "../../../../../../../public/images/notFoundTransparent.png";
+
+interface Props {
+  navName: string;
+}
+export const NavError: FC<Props> = ({ navName }) => {
+  return (
+    <Box p={1.5} textAlign="center">
+      <img src={notFound} alt="Not Found" style={{ width: 112, height: 110 }} />
+      <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+        We're sorry we are unable to load your {navName}. Please refresh your
+        page and try again.
+      </Typography>
+    </Box>
+  );
+};