feat(component): Add ConfirmIconButton and update file card delete button (#287)

Author: myty

src/components/confirm-icon-button.tsx

@@ -0,0 +1,49 @@
+import { ConfirmationDialog } from "components/confirmation-dialog";
+import { IconButton } from "components/icon-button";
+import { IconButtonProps as EvergreenIconButtonProps } from "evergreen-ui";
+import React, { ForwardedRef, forwardRef, useCallback, useState } from "react";
+
+interface ConfirmIconButtonProps extends EvergreenIconButtonProps {
+    confirmationDescription?: string;
+    confirmationTitle?: string;
+    onClick?: () => void;
+}
+
+const ConfirmIconButton: React.FC<ConfirmIconButtonProps> = forwardRef(
+    (props: ConfirmIconButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+        const { confirmationDescription, confirmationTitle, onClick, ...rest } =
+            props;
+
+        const [isConfirming, setIsConfirming] = useState<boolean>(false);
+
+        const handleConfirmation = useCallback(
+            (close: () => void) => {
+                onClick?.();
+                close();
+            },
+            [onClick]
+        );
+
+        return (
+            <React.Fragment>
+                <IconButton
+                    onClick={() => setIsConfirming(true)}
+                    ref={ref}
+                    {...rest}
+                />
+                {isConfirming &&
+                    confirmationDescription != null &&
+                    confirmationTitle != null && (
+                        <ConfirmationDialog
+                            alertDescription={confirmationDescription}
+                            alertTitle={confirmationTitle}
+                            onCloseComplete={() => setIsConfirming(false)}
+                            onConfirm={handleConfirmation}
+                        />
+                    )}
+            </React.Fragment>
+        );
+    }
+);
+
+export { ConfirmIconButton };

src/components/files/file-card.tsx

@@ -18,6 +18,7 @@ import { useBoolean } from "utils/hooks/use-boolean";
 import { FileSettingsDialog } from "components/files/file-settings-dialog";
 import { Flex } from "components/flex";
 import { IconButton } from "components/icon-button";
+import { ConfirmIconButton } from "components/confirm-icon-button";
 
 interface FileCardProps
     extends Omit<EvergreenFileCardProps, "name" | "sizeInBytes" | "type"> {
@@ -92,9 +93,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
                     onClick={handleOpenDialog}
                     type="button"
                 />
-                <IconButton
+                <ConfirmIconButton
                     appearance="minimal"
                     color={colors.gray600}
+                    confirmationDescription="After deleting this file, it will not be available for future and current projects."
+                    confirmationTitle="Are you sure?"
                     icon={TrashIcon}
                     isLoading={isLoading}
                     marginLeft="auto"