Merge branch 'master' into api-test-cosmetics

.changeset/purple-knives-cough.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Alerted the user before canceling the createItemModal form.

demo-projects/blog/package.json

@@ -14,7 +14,7 @@
     "start": "cross-env NODE_ENV=production keystone start"
   },
   "dependencies": {
-    "@apollo/client": "^3.1.1",
+    "@apollo/client": "^3.1.2",
     "@arch-ui/layout": "^0.2.13",
     "@arch-ui/typography": "^0.0.17",
     "@emotion/core": "^10.0.28",

demo-projects/meetup/package.json

@@ -14,7 +14,7 @@
     "start": "cross-env NODE_ENV=production keystone start"
   },
   "dependencies": {
-    "@apollo/client": "^3.1.1",
+    "@apollo/client": "^3.1.2",
     "@emotion/core": "^10.0.28",
     "@keystonejs/adapter-mongoose": "^9.0.1",
     "@keystonejs/app-admin-ui": "^7.2.0",

package.json

@@ -38,7 +38,7 @@
     "heroku-postbuild": "yarn build && yarn workspace @keystonejs/demo-project-blog build"
   },
   "dependencies": {
-    "@apollo/client": "^3.1.1",
+    "@apollo/client": "^3.1.2",
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/helper-module-imports": "^7.8.3",

packages/app-admin-ui/client/components/CreateItemModal.js

@@ -16,6 +16,7 @@ import { useToasts } from 'react-toast-notifications';
 
 import { Button, LoadingButton } from '@arch-ui/button';
 import Drawer from '@arch-ui/drawer';
+import Confirm from '@arch-ui/confirm';
 import {
   arrayToObject,
   captureSuspensePromises,
@@ -50,6 +51,7 @@ const CreateItemModal = ({ prefillData = {}, onClose, onCreate, viewOnSave }) =>
   const { list, closeCreateItemModal, isCreateItemModalOpen } = useList();
 
   const [item, setItem] = useState(list.getInitialItemData({ prefill: prefillData }));
+  const [isConfirmOpen, setConfirmOpen] = useState(false);
   const [validationErrors, setValidationErrors] = useState({});
   const [validationWarnings, setValidationWarnings] = useState({});
 
@@ -129,16 +131,41 @@ const CreateItemModal = ({ prefillData = {}, onClose, onCreate, viewOnSave }) =>
     }
   });
 
-  const _onClose = () => {
-    if (loading) return;
+  // Identifies if the user has changed the initial data in the form.
+  const hasFormDataChanged = () => {
+    const data = arrayToObject(creatable, 'path');
+    let hasChanged = false;
+    const initialData = list.getInitialItemData({ prefill: prefillData });
+    const initialValues = getValues(data, initialData);
+    const currentValues = getValues(data, item);
+    for (const path of Object.keys(currentValues)) {
+      if (data[path].hasChanged(initialValues, currentValues)) {
+        hasChanged = true;
+        break;
+      }
+    }
+    return hasChanged;
+  };
+
+  const _createItemModalClose = () => {
     closeCreateItemModal();
     setItem(list.getInitialItemData({}));
-    const data = arrayToObject(creatable, 'path', field => field.serialize(item));
     if (onClose) {
+      const data = arrayToObject(creatable, 'path', field => field.serialize(item));
       onClose(data);
     }
   };
 
+  const _onClose = () => {
+    if (loading) return;
+    if (hasFormDataChanged()) {
+      // Ask for user confirmation before canceling.
+      setConfirmOpen(true);
+      return;
+    }
+    _createItemModalClose();
+  };
+
   const _onKeyDown = event => {
     if (event.defaultPrevented) return;
     switch (event.key) {
@@ -244,10 +271,36 @@ const CreateItemModal = ({ prefillData = {}, onClose, onCreate, viewOnSave }) =>
               ));
             }}
           </Render>
+          <ConfirmModal
+            isOpen={isConfirmOpen}
+            onConfirm={() => {
+              setConfirmOpen(false);
+              _createItemModalClose();
+            }}
+            onCancel={() => setConfirmOpen(false)}
+          />
         </Suspense>
       </div>
     </Drawer>
   );
 };
 
+const ConfirmModal = ({ isOpen, onConfirm, onCancel }) => {
+  return (
+    <Confirm isOpen={isOpen}>
+      <p style={{ marginTop: 0 }}>
+        All of your form data will be lost. Are you sure you want to cancel?
+      </p>
+      <footer>
+        <Button appearance="danger" variant="ghost" onClick={onConfirm}>
+          Ok
+        </Button>
+        <Button variant="subtle" onClick={onCancel}>
+          Cancel
+        </Button>
+      </footer>
+    </Confirm>
+  );
+};
+
 export default CreateItemModal;

packages/app-admin-ui/package.json

@@ -8,7 +8,7 @@
     "node": ">=10.0.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.1.1",
+    "@apollo/client": "^3.1.2",
     "@arch-ui/alert": "^0.0.17",
     "@arch-ui/badge": "^0.0.16",
     "@arch-ui/button": "^0.0.20",

packages/fields/package.json

@@ -12,7 +12,7 @@
     "node": ">=10.0.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.1.1",
+    "@apollo/client": "^3.1.2",
     "@arch-ui/alert": "^0.0.17",
     "@arch-ui/button": "^0.0.20",
     "@arch-ui/controls": "^0.1.8",

packages/server-side-graphql-client/README.md

@@ -159,10 +159,8 @@ keystone.createList('User', {
 });
 
 const dummyUsers = [
-  {
-    data: { name: 'user1', email: '[email protected]' },
-    data: { name: 'user2', email: '[email protected]' },
-  },
+  { data: { name: 'user1', email: '[email protected]' } },
+  { data: { name: 'user2', email: '[email protected]' } },
 ];
 
 const addUsers = async () => {
@@ -325,8 +323,8 @@ const updateUsers = async (updateUsers) => {
 }
 
 updateUsers([
-  {id: '123', data: {name: 'newName1'},
-  {id: '456', data: {name: 'newName2'}
+  { id: '123', data: { name: 'newName1' } },
+  { id: '456', data: { name: 'newName2' } }
 ]);
 ```
 

test-projects/basic/cypress/integration/create-buttons_spec.js

@@ -75,4 +75,21 @@ describe('Home page', () => {
       cy.contains('div', `Create ${text} Dialog`).should('not.exist');
     });
   });
+
+  it('Ensure Create Modal triggers a confirmation dialog when form data is filled, and user hits cancel button', () => {
+    cy.visit('/admin/users');
+
+    cy.get('#list-page-create-button').click({ force: true });
+    cy.get('#ks-input-name').type('Aman', {
+      force: true,
+    });
+    cy.contains('div', `Create User Dialog`)
+      .contains('button', 'Cancel')
+      .click({ force: true });
+
+    cy.get('div[role="alertdialog"]')
+      .contains('button', 'Cancel')
+      .click({ force: true });
+    cy.contains('div', `Create User Dialog`).should('exist');
+  });
 });

yarn.lock

@@ -70,10 +70,10 @@
     tslib "^1.10.0"
     zen-observable "^0.8.14"
 
-"@apollo/client@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.1.1.tgz#7d57d037be8ee93694fbf82579f703e635c836c1"
-  integrity sha512-c5DxrU81p0B5BsyBXm+5uPJqLCX2epnBsd87PXfRwzDLbp/NiqnWp6a6c5vT5EV2LwJuCq1movmKthoy0gFb0w==
+"@apollo/client@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.1.2.tgz#e384f691706c46aef4d9234b63a03ccc06e9c33c"
+  integrity sha512-GaA/J0CDSSNe0HVm1abeOIJA3M4fs9Ih7wF2z1AI2SLqv5TBLvwBxh0+0+jCSntPZ3gnDQvR7MHjmXota5V1LQ==
   dependencies:
     "@types/zen-observable" "^0.8.0"
     "@wry/context" "^0.5.2"