Show a confirmation modal on reset changes and move reset changes but…

…ton to next to the right (#7562)

.changeset/calm-snakes-grow.md

@@ -0,0 +1,5 @@
+---
+'@keystone-6/core': patch
+---
+
+The reset changes button on the item view now presents a confirmation modal before resetting changes and it has been moved to the right of the bottom bar so it is next to the delete button.

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx

@@ -554,31 +554,63 @@ const Toolbar = memo(function Toolbar({
         zIndex: 20,
       }}
     >
+      <Button
+        isDisabled={!hasChangedFields}
+        isLoading={loading}
+        weight="bold"
+        tone="active"
+        onClick={onSave}
+      >
+        Save changes
+      </Button>
       <Stack align="center" across gap="small">
-        <Button
-          isDisabled={!hasChangedFields}
-          isLoading={loading}
-          weight="bold"
-          tone="active"
-          onClick={onSave}
-        >
-          Save changes
-        </Button>
         {hasChangedFields ? (
-          <Button weight="none" onClick={onReset}>
-            Reset changes
-          </Button>
+          <ResetChangesButton onReset={onReset} />
         ) : (
           <Text weight="medium" paddingX="large" color="neutral600">
             No changes
           </Text>
         )}
+        {deleteButton}
       </Stack>
-      {deleteButton}
     </div>
   );
 });
 
+function ResetChangesButton(props: { onReset: () => void }) {
+  const [isConfirmModalOpen, setConfirmModalOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <Button
+        weight="none"
+        onClick={() => {
+          setConfirmModalOpen(true);
+        }}
+      >
+        Reset changes
+      </Button>
+      <AlertDialog
+        actions={{
+          confirm: {
+            action: () => props.onReset(),
+            label: 'Reset changes',
+          },
+          cancel: {
+            action: () => setConfirmModalOpen(false),
+            label: 'Cancel',
+          },
+        }}
+        isOpen={isConfirmModalOpen}
+        title="Are you sure you want to reset changes?"
+        tone="negative"
+      >
+        {null}
+      </AlertDialog>
+    </Fragment>
+  );
+}
+
 const ColumnLayout = (props: HTMLAttributes<HTMLDivElement>) => {
   const { spacing } = useTheme();