feat(FOROME-1100): extract same component

src/components/solution-control/solution-change-dialog/index.ts

@@ -0,0 +1,3 @@
+export * from './solution-change-dialog'
+export * from './solution-modify-dialog'
+export * from './solution-delete-dialog'

src/components/solution-control/solution-change-dialog/solution-change-dialog.interfaces.ts

@@ -0,0 +1,18 @@
+export interface ISolutionChangeDialogProps {
+  isOpen?: boolean
+  onClose: () => void
+  onApply: () => void
+  message: string
+  title: string
+  cancelText: string
+  applyText: string
+}
+
+export interface ISolutionChangeModalProps
+  extends Omit<
+    ISolutionChangeDialogProps,
+    'message' | 'title' | 'cancelText' | 'applyText'
+  > {
+  solutionName?: string
+  controlName: string
+}

src/components/solution-control/solution-change-dialog/solution-change-dialog.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+
+import { Dialog } from '@ui/dialog'
+import { ISolutionChangeDialogProps } from './solution-change-dialog.interfaces'
+
+export const SolutionChangeDialog: FC<ISolutionChangeDialogProps> = ({
+  isOpen,
+  onClose,
+  onApply,
+  applyText,
+  cancelText,
+  message,
+  title,
+}) => {
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={onClose}
+      onApply={onApply}
+      title={title}
+      cancelText={cancelText}
+      applyText={applyText}
+    >
+      <p>{message}</p>
+    </Dialog>
+  )
+}

src/components/solution-control/solution-change-dialog/solution-delete-dialog.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import { t } from '@i18n'
+import { SolutionChangeDialog } from '@components/solution-control/solution-change-dialog/solution-change-dialog'
+import { ISolutionChangeModalProps } from '@components/solution-control/solution-change-dialog/solution-change-dialog.interfaces'
+
+export const SolutionDeleteDialog: FC<ISolutionChangeModalProps> = ({
+  solutionName,
+  controlName,
+  ...rest
+}) => (
+  <SolutionChangeDialog
+    message={t('solutionControl.deleteDialog.message', {
+      controlName,
+      solutionName,
+    })}
+    title={t('solutionControl.deleteDialog.title', { controlName })}
+    cancelText={t('solutionControl.deleteDialog.cancel', { controlName })}
+    applyText={t('solutionControl.deleteDialog.confirm', { controlName })}
+    {...rest}
+  />
+)

src/components/solution-control/solution-change-dialog/solution-modify-dialog.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import { t } from '@i18n'
+import { SolutionChangeDialog } from '@components/solution-control/solution-change-dialog/solution-change-dialog'
+import { ISolutionChangeModalProps } from '@components/solution-control/solution-change-dialog/solution-change-dialog.interfaces'
+
+export const SolutionModifyDialog: FC<ISolutionChangeModalProps> = ({
+  solutionName,
+  controlName,
+  ...rest
+}) => (
+  <SolutionChangeDialog
+    message={t('solutionControl.modifyDialog.message', {
+      controlName,
+      solutionName,
+    })}
+    title={t('solutionControl.modifyDialog.title', { controlName })}
+    cancelText={t('solutionControl.modifyDialog.cancel', { controlName })}
+    applyText={t('solutionControl.modifyDialog.confirm', { controlName })}
+    {...rest}
+  />
+)

src/components/solution-control/solution-control.tsx

@@ -2,12 +2,14 @@ import { ReactElement, useEffect, useState } from 'react'
 
 import { useModal } from '@core/hooks/use-modal'
 import { usePopover } from '@core/hooks/use-popover'
+import {
+  SolutionDeleteDialog,
+  SolutionModifyDialog,
+} from '@components/solution-control/solution-change-dialog'
 import { SolutionControlPopover } from '@components/solution-control/solution-control-popover'
-import { SolutionModifyDialog } from '@components/solution-control/solution-modify-dialog'
 import { ISolutionEntryDescription } from '@service-providers/common'
 import { SolutionControlButton } from './solution-control-button'
 import { SolutionCreateDialog } from './solution-create-dialog'
-import { SolutionDeleteDialog } from './solution-delete-dialog'
 
 interface ISolutionControlProps {
   className?: string
@@ -57,6 +59,21 @@ export const SolutionControl = ({
     }
   }, [isPopoverOpen, selectedProp])
 
+  const onModifyDialog = () => {
+    closeModifyDialog()
+    modifyDialog.solutionName && onModify(modifyDialog.solutionName)
+  }
+
+  const onDeleteDialog = () => {
+    closeDeleteDialog()
+    deleteDialog.solutionName && onDelete(deleteDialog.solutionName)
+  }
+
+  const onCreateDialog = (solutionName: string) => {
+    closeCreateDialog()
+    onCreate(solutionName)
+  }
+
   return (
     <>
       <SolutionControlButton
@@ -88,35 +105,21 @@ export const SolutionControl = ({
       <SolutionModifyDialog
         {...modifyDialog}
         onClose={closeModifyDialog}
-        onModify={() => {
-          closeModifyDialog()
-          const name = modifyDialog.solutionName
-          if (name) {
-            onModify(name)
-          }
-        }}
+        onApply={onModifyDialog}
         controlName={controlName}
       />
       <SolutionDeleteDialog
         {...deleteDialog}
         onClose={closeDeleteDialog}
-        onDelete={() => {
-          closeDeleteDialog()
-          if (deleteDialog.solutionName) {
-            onDelete(deleteDialog.solutionName)
-          }
-        }}
+        onApply={onDeleteDialog}
         controlName={controlName}
       />
       <SolutionCreateDialog
         {...createDialog}
         solutions={solutions}
         onClose={closeCreateDialog}
         controlName={controlName}
-        onCreate={solutionName => {
-          closeCreateDialog()
-          onCreate(solutionName)
-        }}
+        onCreate={onCreateDialog}
       />
     </>
   )