Stable Release (#3131)

Created by Github action

cypress/e2e/blocks/pages/AllBlocksPage.js

@@ -0,0 +1,37 @@
+class AllBlocksPage {
+  visit() {
+    cy.visit("/blocks");
+  }
+
+  get createBlockButton() {
+    return cy.getBySelector("create-block-button");
+  }
+
+  get onboardingDialog() {
+    return cy.getBySelector("onboarding-dialog");
+  }
+
+  get onboardingNextButton() {
+    return cy.getBySelector("onboarding-next-button");
+  }
+
+  get createModelDialog() {
+    return cy.getBySelector("create-model-dialog");
+  }
+
+  get searchBlocksInput() {
+    return cy.getBySelector("search-blocks-input");
+  }
+
+  clickOnboardingNextButton() {
+    this.onboardingNextButton.click();
+  }
+
+  createBlock(name) {
+    this.createBlockButton.click();
+    cy.getBySelector("create-model-display-name-input").type(name);
+    cy.getBySelector("create-model-submit-button").click();
+  }
+}
+
+export default new AllBlocksPage();

cypress/e2e/blocks/pages/BlockPage.js

@@ -0,0 +1,13 @@
+class BlockPage {
+  get createVariantButton() {
+    return cy.getBySelector("create-variant-button");
+  }
+
+  createVariant(name) {
+    this.createVariantButton.click();
+    cy.getBySelector("variant-name-input").type(name);
+    cy.getBySelector("create-variant-confirm-button").click();
+  }
+}
+
+export default new BlockPage();

cypress/e2e/blocks/tests/blocks.spec.js

@@ -0,0 +1,65 @@
+import AllBlocksPage from "../pages/AllBlocksPage";
+import BlockPage from "../pages/BlockPage";
+import SchemaPage from "../../schema/pages/SchemaPage";
+
+const CypressTestBlock = "Cypress Test Block";
+const CypressTestVariant = "Cypress Test Variant";
+
+describe("All Blocks Tests", () => {
+  before(() => {
+    AllBlocksPage.visit();
+  });
+
+  after(() => {
+    SchemaPage.visit();
+    SchemaPage.deleteModel(CypressTestBlock);
+  });
+
+  it("should show and traverse onboarding flow", () => {
+    AllBlocksPage.onboardingDialog.should("be.visible");
+    const totalSteps = 4;
+    for (let i = 0; i < totalSteps; i++) {
+      AllBlocksPage.clickOnboardingNextButton();
+    }
+    AllBlocksPage.onboardingDialog.should("not.exist");
+  });
+
+  it("creates new block with default values", () => {
+    AllBlocksPage.createBlock(CypressTestBlock);
+    cy.contains(CypressTestBlock).should("exist");
+    SchemaPage.visit();
+    SchemaPage.addSingleLineTextFieldWithDefaultValue(
+      CypressTestBlock,
+      "Foo",
+      "Default Foo"
+    );
+    AllBlocksPage.visit();
+  });
+
+  it("searches for a block", () => {
+    AllBlocksPage.searchBlocksInput.type(CypressTestBlock);
+    cy.contains(CypressTestBlock).should("exist");
+  });
+
+  it("shows no results when no blocks are found", () => {
+    AllBlocksPage.searchBlocksInput.find("input").clear();
+    AllBlocksPage.searchBlocksInput.type("Non Existent Block");
+    cy.contains(
+      "Your search “Non Existent Block” could not find any results"
+    ).should("exist");
+  });
+
+  it("navigates to block detail page", () => {
+    cy.contains(CypressTestBlock).click();
+    cy.contains("Start Creating Variants Now").should("exist");
+  });
+
+  it("creates a variant with default values", () => {
+    cy.contains(CypressTestBlock).click();
+    BlockPage.createVariant(CypressTestVariant);
+    cy.contains(
+      new RegExp(`${CypressTestBlock}:\\s*${CypressTestVariant}`)
+    ).should("exist");
+    cy.get('input[name="foo"]').should("have.value", "Default Foo");
+  });
+});

cypress/e2e/content/meta.spec.js

@@ -80,27 +80,6 @@ describe("Content Meta", () => {
     cy.get("[data-cy=toast]").contains("Created Item");
   });
 
-  it("Does validate meta description for non-dataset items", () => {
-    cy.waitOn("/v1/content/models*", () => {
-      cy.waitOn("/v1/env/nav", () => {
-        cy.waitOn("/v1/search/items*", () => {
-          cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19/meta");
-        });
-      });
-    });
-
-    cy.getBySelector("metaDescription", { timeout: 10000 })
-      .find("textarea")
-      .first()
-      .type("test");
-    cy.getBySelector("metaDescription")
-      .find("textarea")
-      .first()
-      .type("{selectall}{del}");
-    cy.get("#SaveItemButton").click();
-    cy.getBySelector("FieldErrorsList").should("exist");
-  });
-
   it("Auto applies page parent when creating an item", () => {
     cy.waitOn("/v1/content/models*", () => {
       cy.waitOn("/v1/env/nav", () => {

cypress/e2e/schema/models.spec.js

@@ -1,4 +1,6 @@
 const SEARCH_TERM = `cypress ${Date.now()}`;
+const TIMESTAMP = Date.now();
+
 describe("Schema: Models", () => {
   before(() => {
     cy.waitOn("/v1/content/models*", () => {
@@ -31,9 +33,9 @@ describe("Schema: Models", () => {
       .find("input")
       .should("have.value", "cypress_test_model");
 
-    cy.contains("Select Model Parent").next().click();
+    cy.contains("Model Parent").next().click();
 
-    cy.contains("Select Model Parent")
+    cy.contains("Model Parent")
       .next()
       .type("Cypress test (Group with visible fields in list)");
 
@@ -118,4 +120,28 @@ describe("Schema: Models", () => {
       .eq(1)
       .contains("Model parenting itself");
   });
+
+  it("Can create a block model", () => {
+    cy.waitOn("/v1/content/models*", () => {
+      cy.visit("/schema");
+    });
+
+    cy.getBySelector(`create-model-button-all-models`).click();
+    cy.contains("Block Model").click();
+    cy.contains("Next").click();
+    cy.contains("Display Name").next().type(`Block Test Model ${TIMESTAMP}`);
+    cy.contains("Reference ID")
+      .next()
+      .find("input")
+      .should("have.value", `block_test_model_${TIMESTAMP}`);
+
+    cy.contains("Description").next().type("Block test model description");
+    cy.get(".MuiDialog-container").within(() => {
+      cy.contains("Create Model").click();
+    });
+    cy.intercept("POST", "/models");
+    cy.intercept("GET", "/models");
+
+    cy.contains(`Block Test Model ${TIMESTAMP}`).should("exist");
+  });
 });

cypress/e2e/schema/pages/SchemaPage.js

@@ -0,0 +1,50 @@
+class SchemaPage {
+  visit() {
+    cy.visit("/schema");
+  }
+
+  get modelHeaderMenuButton() {
+    return cy.getBySelector("model-header-menu");
+  }
+
+  get modelMenuDeleteButton() {
+    return cy.getBySelector("delete-model-menu-button");
+  }
+
+  get deleteModelConfirmationInput() {
+    return cy.getBySelector("delete-model-confirmation-input");
+  }
+
+  get deleteModelConfirmationButton() {
+    return cy.getBySelector("delete-model-confirmation-button");
+  }
+
+  get addFieldButton() {
+    return cy.getBySelector("AddFieldBtn");
+  }
+
+  get rulesTabButton() {
+    return cy.getBySelector("RulesTabBtn");
+  }
+
+  deleteModel(name) {
+    cy.contains(name).click();
+    this.modelHeaderMenuButton.click();
+    this.modelMenuDeleteButton.click();
+    this.deleteModelConfirmationInput.type(name);
+    this.deleteModelConfirmationButton.click();
+  }
+
+  addSingleLineTextFieldWithDefaultValue(modelName, fieldName, defaultValue) {
+    cy.contains(modelName).click();
+    this.addFieldButton.click();
+    cy.contains("Single Line Text").click();
+    cy.getBySelector("FieldFormInput_label").type(fieldName);
+    this.rulesTabButton.click();
+    cy.getBySelector("DefaultValueCheckbox").click();
+    cy.getBySelector("DefaultValueInput").type(defaultValue);
+    cy.getBySelector("FieldFormAddFieldBtn").click();
+  }
+}
+
+export default new SchemaPage();

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

src/apps/active-preview/Preview.js

@@ -92,6 +92,8 @@ export function Preview(props) {
   });
   const [hasErrors, setHasErrors] = useState(false);
 
+  const isBlockItem = route?.startsWith("/-/block/");
+
   // Track initial version sent. We use this to make a determination
   // on whether current content has changed or the different version was
   // picked for previewing
@@ -245,28 +247,36 @@ export function Preview(props) {
   return (
     <>
       <Box bgcolor="grey.100" display="flex" alignItems="center" p={1}>
-        <IconButton
-          size="small"
-          onClick={() => handleCopyClick(`${domain}${route}`)}
-          mr={0.25}
-        >
-          {isCopied ? <CheckRounded /> : <LinkRounded />}
-        </IconButton>
-
-        <Link
-          href={`${domain}${route}`}
-          target="_blank"
-          noWrap
-          sx={{
-            direction: "rtl",
-            display: "block",
-            flex: "1",
-            textAlign: "left",
-          }}
-        >
-          {`${domain}${route}`}
-        </Link>
-
+        {!isBlockItem ? (
+          <>
+            <IconButton
+              size="small"
+              onClick={() => handleCopyClick(`${domain}${route}`)}
+              mr={0.25}
+            >
+              {isCopied ? <CheckRounded /> : <LinkRounded />}
+            </IconButton>
+            <Link
+              href={`${domain}${route}`}
+              target="_blank"
+              noWrap
+              sx={{
+                direction: "rtl",
+                display: "block",
+                flex: "1",
+                textAlign: "left",
+              }}
+            >
+              {`${domain}${route}`}
+            </Link>
+          </>
+        ) : (
+          <Box flex={1}>
+            <Typography variant="body2" fontWeight={600}>
+              Preview
+            </Typography>
+          </Box>
+        )}
         <IconButton
           size="small"
           onClick={() => setRefresh(Date.now())}
@@ -277,6 +287,15 @@ export function Preview(props) {
         >
           <RefreshRounded />
         </IconButton>
+        {isBlockItem && (
+          <IconButton
+            size="small"
+            onClick={() => handleCopyClick(`${domain}${route}`)}
+            mr={0.25}
+          >
+            {isCopied ? <CheckRounded /> : <LinkRounded />}
+          </IconButton>
+        )}
         <IconButton
           size="small"
           onClick={(event) => setScaleAnchorEl(event.currentTarget)}
@@ -373,9 +392,11 @@ export function Preview(props) {
         >
           <OpenInNewRounded />
         </IconButton>
-        <IconButton size="small" onClick={() => sendMessage("close")}>
-          <CloseRounded />
-        </IconButton>
+        {!isBlockItem && (
+          <IconButton size="small" onClick={() => sendMessage("close")}>
+            <CloseRounded />
+          </IconButton>
+        )}
       </Box>
       <Box
         sx={{