Stage Release

cypress/e2e/blocks/pages/BlockPage.js

@@ -5,8 +5,8 @@ class BlockPage {
 
   createVariant(name) {
     this.createVariantButton.click();
-    cy.getBySelector("metaTitle-input").type(name);
-    cy.getBySelector("CreateItemSaveButton").click();
+    cy.getBySelector("variant-name-input").type(name);
+    cy.getBySelector("create-variant-confirm-button").click();
   }
 }
 

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

@@ -24,9 +24,16 @@ describe("All Blocks Tests", () => {
     AllBlocksPage.onboardingDialog.should("not.exist");
   });
 
-  it("creates new block", () => {
+  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", () => {
@@ -47,11 +54,12 @@ describe("All Blocks Tests", () => {
     cy.contains("Start Creating Variants Now").should("exist");
   });
 
-  it("creates a variant", () => {
+  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/schema/pages/SchemaPage.js

@@ -19,13 +19,32 @@ class SchemaPage {
     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();

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,38 +247,56 @@ 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>
-
-        <IconButton
-          size="small"
-          onClick={() => setRefresh(Date.now())}
-          sx={{
-            ml: 1,
-            mr: 0.5,
-          }}
-        >
-          <RefreshRounded />
-        </IconButton>
+        {!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>
+        )}
+        {isBlockItem ? (
+          <IconButton
+            size="small"
+            onClick={() => handleCopyClick(`${domain}${route}`)}
+            mr={0.25}
+          >
+            {isCopied ? <CheckRounded /> : <LinkRounded />}
+          </IconButton>
+        ) : (
+          <IconButton
+            size="small"
+            onClick={() => setRefresh(Date.now())}
+            sx={{
+              ml: 1,
+              mr: 0.5,
+            }}
+          >
+            <RefreshRounded />
+          </IconButton>
+        )}
         <IconButton
           size="small"
           onClick={(event) => setScaleAnchorEl(event.currentTarget)}
@@ -373,9 +393,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={{

src/apps/blocks/components/CreateVariantDialog.tsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Dialog,
+  Typography,
+  DialogTitle,
+  DialogContent,
+  InputLabel,
+  TextField,
+  DialogActions,
+} from "@mui/material";
+import { ModeEditRounded } from "@mui/icons-material";
+import { LoadingButton } from "@mui/lab";
+import { ContentModel } from "../../../shell/services/types";
+import { createItem, generateItem } from "../../../shell/store/content";
+import { useDispatch, useSelector } from "react-redux";
+import { selectSortedModelFields } from "../../content-editor/src/app/views/ItemCreate/ItemCreate";
+import { useHistory } from "react-router";
+import { useGetContentModelFieldsQuery } from "../../../shell/services/instance";
+
+export const CreateVariantDialog = ({
+  onClose,
+  model,
+}: {
+  onClose: () => void;
+  model: ContentModel;
+}) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const [variantName, setVariantName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { data: fields, isFetching: isFieldsLoading } =
+    useGetContentModelFieldsQuery(model?.ZUID);
+
+  const handleVariantCreate = async () => {
+    setIsLoading(true);
+    const initialData: { [key: string]: any } = fields?.reduce((accu, curr) => {
+      if (!curr.deletedAt) {
+        accu[curr.name] =
+          curr?.settings?.defaultValue !== null &&
+          curr?.settings?.defaultValue !== undefined
+            ? curr?.settings?.defaultValue
+            : null;
+      }
+      return accu;
+    }, {} as { [key: string]: any });
+    await dispatch(
+      generateItem(model?.ZUID, initialData, {
+        metaTitle: variantName,
+      })
+    );
+    const res = await dispatch(
+      createItem({
+        modelZUID: model.ZUID,
+        itemZUID: `new:${model.ZUID}`,
+        skipPathPartValidation: true,
+      })
+    );
+
+    // @ts-ignore
+    history.push(`/blocks/${model.ZUID}/${res.data.ZUID}`);
+    setIsLoading(false);
+    onClose();
+  };
+
+  return (
+    <Dialog open onClose={onClose} fullWidth maxWidth="xs">
+      <DialogTitle>
+        <Box
+          sx={{
+            backgroundColor: "deepOrange.100",
+            borderRadius: "100%",
+            width: "40px",
+            height: "40px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            mb: 1.5,
+          }}
+        >
+          <ModeEditRounded color="primary" />
+        </Box>
+        Create Variant of {model?.label}
+      </DialogTitle>
+      <DialogContent>
+        <InputLabel sx={{ mb: 0.5 }}>Variant Name</InputLabel>
+        <TextField
+          value={variantName}
+          onChange={(event) => setVariantName(event.target.value)}
+          fullWidth
+          data-cy="variant-name-input"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="inherit">
+          Cancel
+        </Button>
+        <LoadingButton
+          disabled={!variantName || isFieldsLoading}
+          onClick={handleVariantCreate}
+          loading={isLoading}
+          variant="contained"
+          data-cy="create-variant-confirm-button"
+        >
+          Create
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+};