Allow CollectionMover to display API errors (#40700)

* HELP

* Help delivered

* allow entityPicker to display api errors

---------

Co-authored-by: Nick Fitzpatrick <nickfitz.582@gmail.com>

frontend/src/metabase/collections/components/MoveCollectionModal/MoveCollectionModal.tsx

@@ -75,9 +75,9 @@ export const MoveCollectionModal = ({
   return (
     <MoveCollectionModalView
       collection={collection}
-      onMove={(source, destination) =>
-        dispatch(Collections.actions.setCollection(source, destination))
-      }
+      onMove={async (source, destination) => {
+        await dispatch(Collections.actions.setCollection(source, destination));
+      }}
       onClose={onClose}
     />
   );

frontend/src/metabase/common/components/CollectionPicker/components/CollectionPickerModal.tsx

@@ -54,19 +54,19 @@ export const CollectionPickerModal = ({
   }>();
 
   const handleItemSelect = useCallback(
-    (item: CollectionPickerItem) => {
+    async (item: CollectionPickerItem) => {
       if (options.hasConfirmButtons) {
         setSelectedItem(item);
       } else {
-        onChange(item);
+        await onChange(item);
       }
     },
     [onChange, options],
   );
 
-  const handleConfirm = () => {
+  const handleConfirm = async () => {
     if (selectedItem) {
-      onChange(selectedItem);
+      await onChange(selectedItem);
     }
   };
 

frontend/src/metabase/common/components/EntityPicker/components/EntityPickerModal/ButtonBar.tsx

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { t } from "ttag";
 
 import { color } from "metabase/lib/colors";
-import { Button, Flex } from "metabase/ui";
+import { Button, Flex, Text } from "metabase/ui";
 
 export const ButtonBar = ({
   onConfirm,
@@ -19,6 +19,7 @@ export const ButtonBar = ({
   confirmButtonText?: string;
   cancelButtonText?: string;
 }) => {
+  const [error, setError] = useState<string | null>(null);
   useEffect(() => {
     const handleEnter = (e: KeyboardEvent) => {
       if (canConfirm && e.key === "Enter") {
@@ -34,12 +35,18 @@ export const ButtonBar = ({
   return (
     <Flex
       justify="space-between"
+      align="center"
       p="md"
       style={{
         borderTop: `1px solid ${color("border")}`,
       }}
     >
       <Flex gap="md">{actionButtons}</Flex>
+      {error && (
+        <Text color="error" px="md" lh="1rem">
+          {error}
+        </Text>
+      )}
       <Flex gap="md">
         <Button onClick={onCancel} type="button">
           {cancelButtonText ?? t`Cancel`}
@@ -47,7 +54,14 @@ export const ButtonBar = ({
         <Button
           ml={1}
           variant="filled"
-          onClick={onConfirm}
+          onClick={async () => {
+            try {
+              setError(null);
+              await onConfirm();
+            } catch (e: any) {
+              setError(e?.data?.message ?? t`An error occurred`);
+            }
+          }}
           disabled={!canConfirm}
         >
           {confirmButtonText ?? t`Select`}

frontend/src/metabase/containers/MoveModal.tsx

@@ -39,7 +39,7 @@ export const MoveModal = ({
         id: initialCollectionId,
         model: "collection",
       }}
-      onChange={newCollection => onMove({ id: newCollection.id })}
+      onChange={async newCollection => await onMove({ id: newCollection.id })}
       options={{
         showSearch: true,
         allowCreateNew: true,