Feat: re-use ModelConfirmation component from IDE page (#1155)

Author: mykalmax

web/client/src/context/context.ts

@@ -1,3 +1,4 @@
+import { type Confirmation } from '@components/modal/ModalConfirmation'
 import { ModelSQLMeshModel } from '@models/sqlmesh-model'
 import { create } from 'zustand'
 import {
@@ -14,11 +15,16 @@ import {
 import { isStringEmptyOrNil } from '~/utils'
 
 interface ContextStore {
+  showConfirmation: boolean
+  confirmations: Confirmation[]
   environment: ModelEnvironment
   environments: Set<ModelEnvironment>
   initialStartDate?: ContextEnvironmentStart
   initialEndDate?: ContextEnvironmentEnd
   models: Map<string, ModelSQLMeshModel>
+  setShowConfirmation: (showConfirmation: boolean) => void
+  addConfirmation: (confirmation: Confirmation) => void
+  removeConfirmation: () => void
   setModels: (models?: Model[]) => void
   isExistingEnvironment: (
     environment: ModelEnvironment | EnvironmentName,
@@ -42,11 +48,36 @@ const environments = new Set(ModelEnvironment.getDefaultEnvironments())
 const environment = environments.values().next().value
 
 export const useStoreContext = create<ContextStore>((set, get) => ({
+  showConfirmation: false,
+  confirmations: [],
   environment,
   environments,
   initialStartDate: undefined,
   initialEndDate: undefined,
   models: new Map(),
+  setShowConfirmation(showConfirmation) {
+    set(() => ({
+      showConfirmation,
+    }))
+  },
+  addConfirmation(confirmation) {
+    set(s => {
+      s.confirmations.push(confirmation)
+
+      return {
+        confirmations: Array.from(s.confirmations),
+      }
+    })
+  },
+  removeConfirmation() {
+    const s = get()
+
+    s.confirmations.shift()
+
+    set(() => ({
+      confirmations: Array.from(s.confirmations),
+    }))
+  },
   setModels(models = []) {
     const s = get()
 

web/client/src/library/components/button/Button.tsx

@@ -94,9 +94,9 @@ const SHAPE = new Map<ButtonShape, string>([
 
 const SIZE = new Map<ButtonSize, string>([
   [EnumSize.xs, `px-2 py-0 text-xs leading-2 border`],
-  [EnumSize.sm, `px-2 py-[0.125rem] text-xs leading-4 border-2`],
-  [EnumSize.md, `px-3 py-2 text-base leading-6 border-2`],
-  [EnumSize.lg, `px-4 py-3 text-lg border-4`],
+  [EnumSize.sm, `px-2 py-[0.125rem] text-xs leading-2 border-2`],
+  [EnumSize.md, `px-3 py-2 text-base leading-4 border-2`],
+  [EnumSize.lg, `px-4 py-3 text-lg leading-6 border-4`],
 ])
 
 const Button = makeButton(
@@ -131,6 +131,14 @@ function ButtonPlain(
       form={form}
       disabled={disabled}
       onClick={onClick}
+      onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          e.stopPropagation()
+
+          onClick?.(e as unknown as React.MouseEvent<HTMLButtonElement>)
+        }
+      }}
       className={className}
     >
       {children}

web/client/src/library/components/fileExplorer/FileExplorer.tsx

@@ -1,7 +1,5 @@
 import React, { type MouseEvent } from 'react'
 import clsx from 'clsx'
-import ModalConfirmation from '../modal/ModalConfirmation'
-import { Button } from '../button/Button'
 import Directory from './Directory'
 import { useStoreProject } from '@context/project'
 import * as ContextMenu from '@radix-ui/react-context-menu'
@@ -14,6 +12,8 @@ import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid'
 import SearchList from '@components/search/SearchList'
 import { type ModelFile } from '@models/file'
 import { EnumSize } from '~/types/enum'
+import { useStoreContext } from '@context/context'
+
 /* TODO:
   - add drag and drop files/directories from desktop
   - add copy and paste
@@ -28,12 +28,10 @@ const FileExplorer = function FileExplorer({
   const project = useStoreProject(s => s.project)
   const setSelectedFile = useStoreProject(s => s.setSelectedFile)
 
+  const addConfirmation = useStoreContext(s => s.addConfirmation)
+
   const {
     activeRange,
-    confirmation,
-    showConfirmation,
-    setShowConfirmation,
-    setConfirmation,
     removeArtifacts,
     setActiveRange,
     createDirectory,
@@ -46,7 +44,7 @@ const FileExplorer = function FileExplorer({
     }
 
     if (e.metaKey && e.key === 'Backspace' && activeRange.size > 0) {
-      setConfirmation({
+      addConfirmation({
         headline: 'Removing Selected Files/Directories',
         description: `Are you sure you want to remove ${activeRange.size} items?`,
         yesText: 'Yes, Remove',
@@ -116,57 +114,6 @@ const FileExplorer = function FileExplorer({
           <div className="ml-auto pl-5"></div>
         </ContextMenu.Item>
       </FileExplorer.ContextMenu>
-      <ModalConfirmation
-        show={showConfirmation}
-        onClose={() => {
-          setShowConfirmation(false)
-        }}
-      >
-        <ModalConfirmation.Main>
-          {confirmation?.headline != null && (
-            <ModalConfirmation.Headline>
-              {confirmation?.headline}
-            </ModalConfirmation.Headline>
-          )}
-          {confirmation?.description != null && (
-            <ModalConfirmation.Description>
-              {confirmation?.description}
-            </ModalConfirmation.Description>
-          )}
-          {confirmation?.details != null && (
-            <ModalConfirmation.Details details={confirmation?.details} />
-          )}
-        </ModalConfirmation.Main>
-        <ModalConfirmation.Actions>
-          <Button
-            className="font-bold"
-            size="md"
-            variant="danger"
-            onClick={(e: MouseEvent) => {
-              e.stopPropagation()
-
-              confirmation?.action?.()
-
-              setShowConfirmation(false)
-            }}
-          >
-            {confirmation?.yesText ?? 'Confirm'}
-          </Button>
-          <Button
-            size="md"
-            variant="alternative"
-            onClick={(e: MouseEvent) => {
-              e.stopPropagation()
-
-              confirmation?.cancel?.()
-
-              setShowConfirmation(false)
-            }}
-          >
-            {confirmation?.noText ?? 'Cancel'}
-          </Button>
-        </ModalConfirmation.Actions>
-      </ModalConfirmation>
     </div>
   )
 }

web/client/src/library/components/fileExplorer/context.tsx

@@ -19,12 +19,10 @@ import {
 } from '@utils/index'
 import { ModelFile } from '@models/file'
 import { useStoreEditor } from '@context/editor'
-import { type Confirmation } from '@components/modal/ModalConfirmation'
 import { type ResponseWithDetail } from '@api/instance'
+import { useStoreContext } from '@context/context'
 
 interface FileExplorer {
-  confirmation?: Confirmation
-  showConfirmation: boolean
   activeRange: Set<ModelArtifact>
   setActiveRange: (activeRange: Set<ModelArtifact>) => void
   selectArtifactsInRange: (to: ModelArtifact) => void
@@ -34,13 +32,9 @@ interface FileExplorer {
   removeArtifacts: (artifacts: Set<ModelArtifact>) => void
   removeArtifactWithConfirmation: (artifact: ModelArtifact) => void
   moveArtifacts: (artifacts: Set<ModelArtifact>, target: ModelDirectory) => void
-  setShowConfirmation: (show: boolean) => void
-  setConfirmation: (confirmation?: Confirmation) => void
 }
 
 export const FileExplorerContext = createContext<FileExplorer>({
-  confirmation: undefined,
-  showConfirmation: false,
   activeRange: new Set(),
   setActiveRange: () => {},
   selectArtifactsInRange: () => {},
@@ -50,8 +44,6 @@ export const FileExplorerContext = createContext<FileExplorer>({
   removeArtifacts: () => {},
   removeArtifactWithConfirmation: () => {},
   moveArtifacts: () => {},
-  setShowConfirmation: () => {},
-  setConfirmation: () => {},
 })
 
 export default function FileExplorerProvider({
@@ -64,17 +56,13 @@ export default function FileExplorerProvider({
   const setSelectedFile = useStoreProject(s => s.setSelectedFile)
   const setFiles = useStoreProject(s => s.setFiles)
 
+  const addConfirmation = useStoreContext(s => s.addConfirmation)
+
   const tab = useStoreEditor(s => s.tab)
   const closeTab = useStoreEditor(s => s.closeTab)
 
   const [isLoading, setIsLoading] = useState(false)
   const [activeRange, setActiveRange] = useState(new Set<ModelArtifact>())
-  const [confirmation, setConfirmation] = useState<Confirmation>()
-  const [showConfirmation, setShowConfirmation] = useState(false)
-
-  useEffect(() => {
-    setShowConfirmation(isNotNil(confirmation))
-  }, [confirmation])
 
   useEffect(() => {
     setSelectedFile(tab?.file)
@@ -266,34 +254,10 @@ export default function FileExplorerProvider({
   }
 
   function removeArtifactWithConfirmation(artifact: ModelArtifact): void {
-    let confirmation: Confirmation = {
-      headline: `Removing ${
-        artifact instanceof ModelDirectory ? 'Directory' : 'File'
-      }`,
-      description: `Are you sure you want to remove the ${
-        artifact instanceof ModelDirectory ? 'directory' : 'file'
-      } "${artifact.name}"?`,
-      yesText: 'Yes, Remove',
-      noText: 'No, Cancel',
-      action: () => {
-        if (artifact instanceof ModelDirectory) {
-          if (artifact.parent != null) {
-            removeArtifacts(new Set([artifact]))
-          }
-        }
-
-        if (artifact instanceof ModelFile) {
-          if (artifact.parent != null) {
-            removeArtifacts(new Set([artifact]))
-          }
-        }
-      },
-    }
-
     if (activeRange.has(artifact)) {
       // User selected multiple including current directory
       // so here we should prompt to delete all selected
-      confirmation = {
+      addConfirmation({
         headline: 'Removing Selected Files/Directories',
         description: `Are you sure you want to remove ${activeRange.size} items?`,
         yesText: 'Yes, Remove',
@@ -302,10 +266,24 @@ export default function FileExplorerProvider({
         action: () => {
           removeArtifacts(activeRange)
         },
-      }
+      })
+    } else {
+      addConfirmation({
+        headline: `Removing ${
+          artifact instanceof ModelDirectory ? 'Directory' : 'File'
+        }`,
+        description: `Are you sure you want to remove the ${
+          artifact instanceof ModelDirectory ? 'directory' : 'file'
+        } "${artifact.name}"?`,
+        yesText: 'Yes, Remove',
+        noText: 'No, Cancel',
+        action: () => {
+          if (isNotNil(artifact.parent)) {
+            removeArtifacts(new Set([artifact]))
+          }
+        },
+      })
     }
-
-    setConfirmation(confirmation)
   }
 
   function moveArtifacts(
@@ -362,7 +340,7 @@ export default function FileExplorerProvider({
     })
 
     if (isArrayNotEmpty(duplicates)) {
-      setConfirmation({
+      addConfirmation({
         headline: 'Moving Duplicates',
         description: `All duplicated names will be renamed!`,
         yesText: 'Yes, Rename',
@@ -394,8 +372,6 @@ export default function FileExplorerProvider({
   return (
     <FileExplorerContext.Provider
       value={{
-        confirmation,
-        showConfirmation,
         activeRange,
         createDirectory,
         createFile,
@@ -404,8 +380,6 @@ export default function FileExplorerProvider({
         removeArtifactWithConfirmation,
         moveArtifacts,
         selectArtifactsInRange,
-        setConfirmation,
-        setShowConfirmation,
         setActiveRange(activeRange) {
           setActiveRange(
             () =>

web/client/src/library/components/modal/ModalConfirmation.tsx

@@ -3,7 +3,8 @@ import Modal from './Modal'
 
 interface PropsModalConfirmation extends React.HTMLAttributes<HTMLElement> {
   show: boolean
-  onClose: () => void
+  onClose?: () => void
+  afterLeave?: () => void
 }
 
 export interface Confirmation {
@@ -15,6 +16,7 @@ export interface Confirmation {
   tagline?: string
   yesText: string
   noText: string
+  children?: React.ReactNode
 }
 
 export interface WithConfirmation {
@@ -25,11 +27,13 @@ function ModalConfirmation({
   show,
   children,
   onClose,
+  afterLeave,
 }: PropsModalConfirmation): JSX.Element {
   return (
     <Modal
       show={show}
       onClose={onClose}
+      afterLeave={afterLeave}
     >
       <Dialog.Panel className="w-[30rem] transform rounded-xl bg-theme text-left align-middle shadow-xl transition-all">
         {children}