Merge pull request #814 from prismicio/dev-070

[v0.6.1] Bug Fixes

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

@@ -34,6 +34,22 @@ describe("Create Slices", () => {
     cy.getInputByLabel("Variation ID*").type("bar");
 
     cy.get("#variation-add").submit();
+
+    cy.contains("button", "Simulate Slice").should("have.attr", "disabled");
+    cy.contains("button", "Simulate Slice").realHover();
+    cy.get("#simulator-button-tooltip").should("be.visible");
+    cy.get("#simulator-button-tooltip").should(
+      "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",
       `/${lib}/${editedSliceName}/bar`
@@ -47,6 +63,12 @@ describe("Create Slices", () => {
 
     cy.contains("Save to File System").click();
 
+    cy.contains("button", "Simulate Slice").should("not.have.attr", "disabled");
+    cy.contains("button", "Update screenshot").should(
+      "not.have.attr",
+      "disabled"
+    );
+
     // simulator
 
     simulatorPage.setup();
@@ -88,4 +110,30 @@ describe("Create Slices", () => {
       .its("content.text")
       .should("equal", "🎉");
   });
+
+  it("allows drag n drop to the top position", () => {
+    // inspired by https://github.com/atlassian/react-beautiful-dnd/blob/master/cypress/integration/reorder.spec.js
+    // could not get it to work with mouse events
+
+    // TODO: use faster fixtures
+    cy.createSlice(lib, sliceId, sliceName);
+
+    cy.get('ul[data-cy="slice-non-repeatable-zone"] > li')
+      .eq(1)
+      .contains("Description");
+
+    cy.get("[data-rbd-draggable-id='list-item-description'] button")
+      .first()
+      .focus()
+      .trigger("keydown", { keyCode: 32 });
+    cy.get("[data-rbd-draggable-id='list-item-description'] button")
+      .first()
+      .trigger("keydown", { keyCode: 38, force: true })
+      .wait(1 * 1000)
+      .trigger("keydown", { keyCode: 32, force: true });
+
+    cy.get('ul[data-cy="slice-non-repeatable-zone"] > li')
+      .eq(0)
+      .contains("Description");
+  });
 });

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

@@ -3,7 +3,7 @@ import { SliceCard } from "../../pages/slices/sliceCard";
 import { SlicePage } from "../../pages/slices/slicePage";
 import { Menu } from "../../pages/Menu";
 
-describe("I am an existing SM user and I want to upload screenshots on variations of an existing Slice", () => {
+describe.skip("I am an existing SM user and I want to upload screenshots on variations of an existing Slice", () => {
   const random = Date.now();
 
   const slice = {

cypress/support/e2e.js

@@ -20,3 +20,5 @@ import "./commands";
 // require('./commands')
 
 import "./assertions";
+
+import "cypress-real-events";

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "cypress": "^12.1.0",
     "cypress-localstorage-commands": "^1.7.0",
+    "cypress-real-events": "^1.7.6",
     "cypress-wait-until": "^1.7.2",
     "start-server-and-test": "^1.14.0"
   },

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slicemachine/client",
-  "version": "1.1.16",
+  "version": "1.1.17-dev-070.11",
   "main": "./build/index.js",
   "engines": {
     "node": ">=14"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@prismicio/types-internal": "^1.5.3",
-    "@slicemachine/core": "1.1.16",
+    "@slicemachine/core": "1.1.17-dev-070.11",
     "axios": "^0.27.2",
     "form-data": "^3.0.0",
     "fp-ts": "^2.11.5",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slicemachine/core",
-  "version": "1.1.16",
+  "version": "1.1.17-dev-070.11",
   "private": false,
   "main": "./build/index.js",
   "engines": {

packages/init/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slicemachine/init",
-  "version": "1.1.16",
+  "version": "1.1.17-dev-070.11",
   "description": "The easiest way to add Slice Machine to your project",
   "license": "MIT",
   "bin": {
@@ -21,8 +21,8 @@
   "dependencies": {
     "@hapi/hapi": "^20.2.0",
     "@prismicio/types-internal": "^1.5.3",
-    "@slicemachine/client": "1.1.16",
-    "@slicemachine/core": "1.1.16",
+    "@slicemachine/client": "1.1.17-dev-070.11",
+    "@slicemachine/core": "1.1.17-dev-070.11",
     "adm-zip": "^0.5.9",
     "analytics-node": "^6.0.0",
     "axios": "^0.24.0",

packages/slice-machine/.eslintrc.js

@@ -23,4 +23,8 @@ module.exports = {
     "eslint-config-prettier",
   ],
   ignorePatterns: ["build", "templates", "**/tests/**", "helpers/**"],
+  rules: {
+    "@typescript-eslint/prefer-nullish-coalescing": "warn",
+    "@typescript-eslint/strict-boolean-expressions": "warn",
+  },
 };

packages/slice-machine/components/AuthInstructions/index.js

@@ -22,7 +22,7 @@ const AuthInstructions = () => (
           borderBottom: (t) => `1px solid ${t.colors?.borders}`,
         }}
       >
-        <Heading as="h3">Login to Prismic</Heading>
+        <Heading as="h3">Log in to Prismic</Heading>
       </Flex>
     )}
   >

packages/slice-machine/components/ChangesEmptyPage/AuthErrorPage.tsx

@@ -25,10 +25,10 @@ export const AuthErrorPage = () => {
           Could not access your repository
         </Text>
         <Text sx={{ fontSize: "13px", lineHeight: "24px" }}>
-          You need to login to Prismic in order to push your changes.
+          You need to log in to Prismic in order to push your changes.
         </Text>
         <Button sx={{ mt: "24px" }} onClick={() => openLoginModal()}>
-          Login to Prismic
+          Log in to Prismic
         </Button>
       </Flex>
     </Flex>

packages/slice-machine/components/FormFields/Array.js

@@ -31,7 +31,7 @@ const FormFieldArray = ({
       refs.current[len - 1].focus();
     }
     setPrevLen(len);
-  }, [refs.current.length]);
+  }, [refs.current.length, focusOnNewEntry, prevLen]);
 
   return (
     <Fragment>

packages/slice-machine/components/FormFields/CheckboxControl.js

@@ -1,21 +1,26 @@
 import { useState, useEffect } from "react";
-import { useFormikContext } from "formik";
 
 import { FormFieldCheckbox } from "./";
 
+/**
+ * This components allows to set/unset the value of an arbitrary field via checking/unchecking the box
+ *
+ * field: the controlled Formik field that we want to manipulate
+ * label: a function of text displayed next to the checkbox. Can be either a string or a function
+ * controlledValue: the value of the field being controlled
+ * setControlledValue: function to update the value of the controlled value in Formik
+ * buildControlledValue: function to build the new value based on the current controlled value and the state of the checkbox
+ *
+ */
 const CheckboxControl = ({
   field,
-  helpers,
   label,
   defaultValue,
   onChange,
-  getFieldControl,
-  setControlFromField,
+  controlledValue,
+  setControlledValue,
+  buildControlledValue,
 }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const { values } = useFormikContext();
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-  const fieldControl = getFieldControl(values);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
   const [isChecked, setCheck] = useState(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
@@ -24,13 +29,15 @@ const CheckboxControl = ({
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    helpers.setValue(
-      setControlFromField
-        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-call
-          setControlFromField(fieldControl, isChecked)
-        : fieldControl
-    );
-  }, [isChecked, fieldControl]);
+    buildControlledValue
+      ? // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        setControlledValue(buildControlledValue(controlledValue))
+      : // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        setControlledValue(buildControlledValue);
+    // Adding the missing dependency to this hook triggers an infinite loop
+    // We decided to leave it for now, waiting for a bigger refactor
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isChecked, controlledValue, buildControlledValue]);
 
   return (
     <FormFieldCheckbox
@@ -44,7 +51,7 @@ const CheckboxControl = ({
       onChange={(value) => setCheck(value) && onChange && onChange(value)}
       label={
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-        typeof label === "function" ? label(fieldControl, isChecked) : label
+        typeof label === "function" ? label(controlledValue, isChecked) : label
       }
     />
   );

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

@@ -77,7 +77,7 @@ const LoginModal: React.FunctionComponent = () => {
       closeModals();
     } catch (e) {
       stopLoadingLogin();
-      openToaster("Logging fail", ToasterType.ERROR);
+      openToaster("Login failed", ToasterType.ERROR);
     }
   };
 
@@ -157,7 +157,7 @@ const LoginModal: React.FunctionComponent = () => {
             {isLoginLoading ? (
               <Spinner color="#FFF" size={16} />
             ) : (
-              <>Signin to Prismic</>
+              <>Log in to Prismic</>
             )}
           </Button>
         </Flex>