Feature: Content app sidebar redesign (#2197)

* task: changed global menu style

* task: adjust instance menu style

* task: remove white bg

* task: convert usage of theme to getTheme

* task: created reusable appsidebar component

* task: added subheader components

* task: fixed hover color

* task: fixed list item height

* task: change spacing

* task: wire button click routing

* task: only allow scrolling for children

* task: updated scrollbar color and only scroll children

* task: nav tree

* task: convert nav to tsx

* task: added todo

* task: added other navs

* task: create new nav tree component based off of mui treeview

* task: update styling for nav tree item

* task: fixed tree actions icon colors

* task: icon button bgcolor

* task: add module augmentation for new icon button size

* task: item select style

* task: css nesting

* task: create nav tree item type

* task: fix layout when screen is small

* task: styling update

* task: change from getTheme to light or dark theme imports

* task: replace treeview arrow icons

* task: change nav tree item selected width

* task: added rtk query and logic to get nav items

* task: map chilren to parents

* task: split nav items

* task: cleanup

* task: dynamic width calculate

* task: revert to using theme instead of lightTheme import

* task: added hidden items accordion

* task: wire nav item click

* task: wire collapse tree

* task: wire search filter

* task: auto scroll down when hidden items are collapsed

* task: change to scopedcssbaseline

* chore: local material-ui

* task: add new content modal

* task: sort models

* Add Resizable container component

* remove log

* add comment

* task: invalidate content nav data on item create, delete and edit

* task: update create content item style

* task: set selected nav item even for nested urls

* task: fixed nested item depth

* task: add type limiter to create item dialog

* task: wire per item create

* task: fixed highlighting of nested items inside dataset and templateset

* task: add reorder modal

* task: invalidate nav items on content reorder

* task: refresh nav data on link edit/delete

* task: create hide/unhide item modal

* task: wire hide/unhide

* task: skip nav fetch when user role fails

* task: prevent page from loading when nav data is fails to fetch

* task: error handling

* task: remove tooltip

* task: added releases as subpage

* task: fixed active highlighting for releases subpage

* task: revert removal

* task: update build tree logic

* task: delete old nav tree

* task: use new nav tree

* fix: fixed reorder bug

* task: added tooltips

* task: integrate resizable component to app sidebar

* task: added nav error state

* task: layout fixes

* task: prevent text selection when dragging

* task: delete old content nav

* chore: cleanup

* fix: fixed undefined url

* task: version bump

* task: added id

* task: moved naverror outside

* task: removed unneccessary prop

* task: removed usememo

* ResizeableContainer updates

* remove user select

* task: comment fixes

* task: change nav item + button flow

* task: hide subroutes when user filters items

* task: limit height and create on click

* task: icon change

* task: changed to regular button

* task: vqa fixes

* task: moved pages header

* task: overflow fix

* task: moved back header comp

* task: cypress tests

* resize updates

* task: update tooltip delay

* task: hide releases

* task: refresh nav content data on model create/delete

* task: expand all navs by default

* task: use custom icon button that can look like a contained button

* fix: items not collapsing at times

* task: added debounce on item filtering

* fix: uncollapsable datasets in page category

* task: moved header inside app bar

* fix: memoize tree item

* task: missing pb

* task: added separate memoized value for filtered content, moved where actions is being placed

* task: version bump material-ui

* task: refetch nav data on mount

---------

Co-authored-by: Andres <[email protected]>
Co-authored-by: Stuart Runyan <[email protected]>

Author: 3 people

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-lock.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.9.0",
     "chart.js": "^3.8.0",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",

package.json

@@ -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

public/images/notFoundTransparent.png

@@ -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/ContentEditor.js

@@ -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>
+  );
+};