[Content] Create new item from one to many field

cypress/e2e/content/content.spec.js

@@ -536,5 +536,26 @@ describe("Content Specs", () => {
         2
       );
     });
+
+    it("can create & add new item", () => {
+      cy.get(
+        "#12-269a28-1bkm34 [data-cy='create-new-relational-item-button']"
+      ).click({
+        force: true,
+      });
+
+      cy.get("#12-d6e4c1d797-sjv628", { retries: 1 })
+        .find("input")
+        .type(`Test Item ${TIMESTAMP}`);
+      cy.get("#12-aaa5ce87e3-89whjq")
+        .find("textarea")
+        .first()
+        .type(`Test Item ${TIMESTAMP}`);
+      cy.getBySelector("CreateItemSaveButton").click();
+
+      cy.get("#12-269a28-1bkm34 [data-cy='active-relational-item']", {
+        retries: 1,
+      }).should("have.length", 3);
+    });
   });
 });

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

@@ -32,6 +32,7 @@ import { ResizableContainer } from "../../../../shell/components/ResizeableConta
 import { StagedChangesProvider } from "./views/ItemList/StagedChangesContext";
 import { SelectedItemsProvider } from "./views/ItemList/SelectedItemsContext";
 import { TableSortProvider } from "./views/ItemList/TableSortProvider";
+import { useParams } from "../../../../shell/hooks/useParams";
 
 // Makes sure that other apps using legacy theme does not get affected with the palette
 export let customTheme = createTheme(legacyTheme, {
@@ -101,6 +102,7 @@ export let customTheme = createTheme(legacyTheme, {
 export default function ContentEditor() {
   const navContent = useSelector((state) => state.navContent);
   const dispatch = useDispatch();
+  const [params] = useParams();
 
   const [loading, setLoading] = useState(true);
 
@@ -133,14 +135,17 @@ export default function ContentEditor() {
             </div>
           ) : (
             <section className={cx(styles.ContentEditor)}>
-              <ResizableContainer
-                id="contentNav"
-                defaultWidth={220}
-                minWidth={220}
-                maxWidth={360}
-              >
-                <ContentNav />
-              </ResizableContainer>
+              {params.get("isDialog") !== "true" && (
+                <ResizableContainer
+                  id="contentNav"
+                  defaultWidth={220}
+                  minWidth={220}
+                  maxWidth={360}
+                >
+                  <ContentNav />
+                </ResizableContainer>
+              )}
+
               <div className={cx(styles.Content)}>
                 <div className={styles.ContentWrap}>
                   <Switch>