feat(slice-machine-ui): update Slice Builder layout

cypress/e2e/slices/00-create.cy.js

@@ -31,8 +31,7 @@ describe("Create Slices", () => {
 
     // add a variation
 
-    cy.get("button").contains("Default").click();
-    cy.contains("+ Add new variation").click();
+    cy.contains("button", "Add a new variation").click();
 
     cy.getInputByLabel("Variation name*").type("foo");
     cy.getInputByLabel("Variation ID*").clear();
@@ -47,20 +46,12 @@ describe("Create Slices", () => {
       "contain",
       "Save your work in order to simulate",
     );
-    cy.contains("button", "Update screenshot").should("have.attr", "disabled");
-    cy.contains("button", "Update screenshot").realHover();
-    cy.get("#update-screenshot-button-tooltip").should("be.visible");
-    cy.get("#update-screenshot-button-tooltip").should(
-      "contain",
-      "Save your work in order to update the screenshot",
-    );
 
     cy.location("pathname", { timeout: 20000 }).should(
       "eq",
       `/slices/${lib}/${sliceName}/bar`,
     );
-    cy.get("button").contains("foo").click();
-    cy.contains("Default").click();
+    cy.contains("a", "Default").click();
     cy.location("pathname", { timeout: 20000 }).should(
       "eq",
       `/slices/${lib}/${sliceName}/default`,
@@ -69,10 +60,6 @@ describe("Create Slices", () => {
     cy.contains("Save").click();
 
     cy.contains("button", "Simulate").should("not.have.attr", "disabled");
-    cy.contains("button", "Update screenshot").should(
-      "not.have.attr",
-      "disabled",
-    );
 
     // simulator
 

cypress/e2e/user-flows/scenario_custom_screenshots.cy.js

@@ -71,11 +71,13 @@ describe("I am an existing SM user and I want to upload screenshots on variation
   });
 
   it("Error displayed when non-image files are uploaded", () => {
+    const variationName = "Error handling";
+
     sliceBuilder.goTo(slice.library, slice.name);
-    sliceBuilder.addVariation("Error handling");
+    sliceBuilder.addVariation(variationName);
     sliceBuilder.save();
 
-    sliceBuilder.openScreenshotModal();
+    new SliceCard(slice.name, variationName).openScreenshotModal();
     cy.contains("Select file").selectFile(
       {
         contents: Cypress.Buffer.from("this is not an image"),

cypress/helpers/slices.js

@@ -121,7 +121,6 @@ function addFieldToSlice(elements, fieldType, fieldName, fieldId) {
  * @param {string} variationName Name of the variation.
  */
 export function addVariationToSlice(variationName) {
-  sliceBuilder.variationsDropdown.click({ force: true });
   sliceBuilder.addVariationButton.click();
 
   addVariationModal.root.within(() => {

cypress/pages/slices/sliceBuilder.js

@@ -35,12 +35,8 @@ class SliceBuilder extends BaseBuilder {
     return cy.get("[data-cy=add-Repeatable-field]");
   }
 
-  get variationsDropdown() {
-    return cy.get("[aria-label='Expand variations']");
-  }
-
   get addVariationButton() {
-    return cy.contains("button", "Add new variation");
+    return cy.contains("button", "Add a new variation");
   }
 
   goTo(sliceLibrary, sliceName, variation = "default") {
@@ -50,17 +46,6 @@ class SliceBuilder extends BaseBuilder {
     return this;
   }
 
-  openScreenshotModal() {
-    cy.contains("Update screenshot").click();
-    return this;
-  }
-
-  openVariationModal() {
-    cy.get("[aria-label='Expand variations']").parent().click();
-    cy.contains("Add new variation").click();
-    return this;
-  }
-
   changeToVariation(startVariation, targetVariation) {
     cy.get("button").contains(startVariation).click();
     cy.contains(targetVariation).click();
@@ -103,8 +88,7 @@ class SliceBuilder extends BaseBuilder {
    * @param {string} variationName Name of the variation.
    */
   addVariation(variationName) {
-    cy.get("[aria-label='Expand variations']").click({ force: true });
-    cy.contains("button", "Add new variation").click();
+    cy.contains("button", "Add a new variation").click();
 
     cy.get("[aria-modal]").within(() => {
       cy.getInputByLabel("Variation name*").type(variationName);

cypress/pages/slices/sliceCard.js

@@ -1,6 +1,9 @@
 export class SliceCard {
-  constructor(sliceName) {
-    this.root = `[aria-label="${sliceName} slice card"]`;
+  constructor(sliceName, variationName) {
+    this.root =
+      variationName !== undefined
+        ? `[aria-label="${sliceName} ${variationName} slice card"]`
+        : `[aria-label^="${sliceName}"][aria-label$="slice card"]`;
   }
 
   get content() {
@@ -12,7 +15,8 @@ export class SliceCard {
   }
 
   openScreenshotModal() {
-    cy.get(this.root).contains("Update screenshot").click();
+    cy.get(this.root).find('[aria-haspopup="menu"]').click();
+    cy.contains("Update screenshot").click();
     return this;
   }
 }

packages/slice-machine/components/ScreenshotPreview/index.tsx

@@ -9,11 +9,9 @@ const MemoedImage = memo<{ src: string | undefined }>(({ src }) => (
 interface ScreenshotPreviewProps {
   src?: string;
   sx: { height: string | number } & ThemeUIStyleObject;
-  hideMissingWarning?: boolean;
 }
 
 export const ScreenshotPreview: React.FC<ScreenshotPreviewProps> = ({
-  hideMissingWarning = false,
   src,
   sx,
 }) => {
@@ -32,23 +30,19 @@ export const ScreenshotPreview: React.FC<ScreenshotPreviewProps> = ({
         ...sx,
       }}
     >
-      {hideMissingWarning ? null : (
-        <>
-          {src !== undefined ? (
-            <MemoedImage src={src} />
-          ) : (
-            <Text
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-              }}
-            >
-              <MdInfoOutline />
-              You have no screenshot yet.
-            </Text>
-          )}
-        </>
+      {src !== undefined ? (
+        <MemoedImage src={src} />
+      ) : (
+        <Text
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <MdInfoOutline />
+          You have no screenshot yet.
+        </Text>
       )}
     </Flex>
   );

packages/slice-machine/components/Simulator/components/Header/index.tsx

@@ -1,16 +1,15 @@
 import router from "next/router";
 import { Text, Flex, Switch, Label } from "theme-ui";
 
-import VarationsPopover from "@lib/builders/SliceBuilder/Header/VariationsPopover";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-
 import { Button } from "@components/Button";
+import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover";
+import * as Links from "@components/Simulator/components/Header/links";
 import SliceMachineLogo from "@src/icons/SliceMachineLogo";
 import { useSelector } from "react-redux";
 import { selectSavingMock } from "@src/modules/simulator";
 
-import * as Links from "@lib/builders/SliceBuilder/links";
 import { SliceMachineStoreType } from "@src/redux/type";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { VariationSM } from "@lib/models/common/Slice";
 
 const redirect = (
@@ -80,7 +79,7 @@ const Header: React.FunctionComponent<PropTypes> = ({
         >
           {slice.model.name}
         </Text>
-        <VarationsPopover
+        <VariationsPopover
           defaultValue={variation}
           variations={slice.model.variations}
           onChange={(v) => redirect(slice, v, true)}

packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,5 +1,3 @@
-import { Box } from "theme-ui";
-
 import { ensureDnDDestination } from "@lib/utils";
 import { transformKeyAccessor } from "@utils/str";
 
@@ -10,6 +8,7 @@ import * as Widgets from "@lib/models/common/widgets";
 import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
 
 import { DropResult } from "react-beautiful-dnd";
+import { List } from "@src/components/List";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
 
@@ -118,7 +117,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
   };
 
   return (
-    <>
+    <List>
       <Zone
         zoneType="slice"
         tabId={undefined}
@@ -145,7 +144,6 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         dataCy="slice-non-repeatable-zone"
         isRepeatableCustomType={undefined}
       />
-      <Box mt={4} />
       <Zone
         zoneType="slice"
         tabId={undefined}
@@ -171,7 +169,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         dataCy="slice-repeatable-zone"
         isRepeatableCustomType={undefined}
       />
-    </>
+    </List>
   );
 };