dyrector-io · m8vago · Jul 25, 2023 · Jul 24, 2023 · Jul 24, 2023 · Jul 25, 2023
@@ -100,29 +100,38 @@ const EditNodeCard = (props: EditNodeCardProps) => {
     onNodeEdited(newNode)
   }
 
-  const  =>
-    confirmTokenRevoke(async () => {
-      const res = await fetch(nodeTokenApiUrl(node.id), {
-        method: 'DELETE',
-      })
-
-      if (!res.ok) {
-        handleApiError(res)
-        return
-      }
+  const  () => {
+    const confirmed = await confirmTokenRevoke({
+      title: t('tokens:areYouSureRevoke'),
+      confirmText: t('tokens:revoke'),
+      confirmColor: 'bg-error-red',
+    })
 
-      const newNode = {
-        ...node,
-        status: 'unreachable',
-        version: null,
-        hasToken: false,
-        install: null,
-      } as NodeDetails
+    if (!confirmed) {
+      return
+    }
 
-      setNode(newNode)
-      onNodeEdited(newNode)
+    const res = await fetch(nodeTokenApiUrl(node.id), {
+      method: 'DELETE',
     })
 
+    if (!res.ok) {
+      handleApiError(res)
+      return
+    }
+
+    const newNode = {
+      ...node,
+      status: 'unreachable',
+      version: null,
+      hasToken: false,
+      install: null,
+    } as NodeDetails
+
+    setNode(newNode)
+    onNodeEdited(newNode)
+  }
+
   const  NodeType): void => {
     setNode({
       ...node,
@@ -295,13 +304,7 @@ const EditNodeCard = (props: EditNodeCardProps) => {
         </div>
       </div>
 
-      <DyoConfirmationModal
-        config={revokeModalConfig}
-        title={t('tokens:areYouSureRevoke')}
-        confirmText={t('tokens:revoke')}
-        className="w-1/4"
-        confirmColor="bg-error-red"
-      />
+      <DyoConfirmationModal config={revokeModalConfig} className="w-1/4" />
     </>
   )
 }

@@ -172,10 +172,11 @@ const useNodeDetailsState = (options: NodeDetailsStateOptions): [NodeDetailsStat
   }
 
   const  (container: Container) => {
-    const confirmed = await confirm(null, {
+    const confirmed = await confirm({
       title: t('areYouSure'),
       description: t('areYouSureDeleteName', { name: containerPrefixNameOf(container.id) }),
       confirmText: t('delete'),
+      confirmColor: 'bg-error-red',
     })
 
     if (!confirmed) {

@@ -22,11 +22,19 @@ const ProjectVersionsSection = (props: ProjectVersionsSectionProps) => {
 
   const [modalConfig, confirmSetAsDefault] = useConfirmation()
 
-  const  Version) =>
-    confirmSetAsDefault(() => onSetAsDefault(version), {
+  const  (version: Version) => {
+    const confirmed = await confirmSetAsDefault({
+      title: t('common:areYouSure'),
       description: t('setNameAsDefault', version),
     })
 
+    if (!confirmed) {
+      return
+    }
+
+    onSetAsDefault(version)
+  }
+
   return versions.length ? (
     <>
       <DyoWrap>
@@ -43,7 +51,7 @@ const ProjectVersionsSection = (props: ProjectVersionsSectionProps) => {
         ))}
       </DyoWrap>
 
+      <DyoConfirmationModal config={modalConfig} />
     </>
   ) : (
     <DyoHeading element="h3" className="text-md text-center text-light-eased pt-32">

@@ -304,9 +304,11 @@ const useDeploymentState = (options: DeploymentStateOptions): [DeploymentState,
   }
 
   const  () => {
-    const confirmed = await confirm(null, {
+    const confirmed = await confirm({
       title: t('common:areYouSure'),
       description: t('tokens:areYouSureRevoke'),
+      confirmText: t('tokens:revoke'),
+      confirmColor: 'bg-error-red',
    })
 
     if (!confirmed) {

@@ -34,6 +34,7 @@ const EditImageCard = (props: EditImageCardProps) => {
     imagesState,
     imagesActions,
     sock: versionSock,
+    t,
   })
 
   const editorState = useItemEditorState(editor, versionSock, image.id)
@@ -78,14 +79,7 @@ const EditImageCard = (props: EditImageCardProps) => {
         </div>
       </DyoCard>
 
-      <DyoConfirmationModal
-        config={state.deleteModal}
-        title={t('common:areYouSureDeleteName', { name: image.name })}
-        description={t('common:proceedYouLoseAllDataToName', { name: image.name })}
-        confirmText={t('common:delete')}
-        className="w-1/4"
-        confirmColor="bg-error-red"
-      />
+      <DyoConfirmationModal config={state.deleteModal} className="w-1/4" />
     </>
   )
 }

@@ -11,6 +11,7 @@ import {
   WS_TYPE_PATCH_IMAGE,
 } from '@app/models'
 import WebSocketClientEndpoint from '@app/websockets/websocket-client-endpoint'
+import { Translate } from 'next-translate'
 import { useRef, useState } from 'react'
 import { selectTagsOfImage, VerionState, VersionActions } from '../use-version-state'
 
@@ -34,10 +35,11 @@ export type ImageEditorStateOptions = {
   imagesState: VerionState
   imagesActions: VersionActions
   sock: WebSocketClientEndpoint
+  t: Translate
 }
 
 const useImageEditorState = (options: ImageEditorStateOptions): [ImageEditorState, ImageEditorActions] => {
-  const { image, imagesState, imagesActions, sock } = options
+  const { image, imagesState, imagesActions, sock, t } = options
 
   const [deleteModal, confirmDelete] = useConfirmation()
   const [parseError, setParseError] = useState<string>(null)
@@ -69,12 +71,22 @@ const useImageEditorState = (options: ImageEditorStateOptions): [ImageEditorStat
     })
   }
 
-  const deleteImage = () =>
-    confirmDelete(() =>
-      sock.send(WS_TYPE_DELETE_IMAGE, {
-        imageId: image.id,
-      } as DeleteImageMessage),
-    )
+  const deleteImage = async () => {
+    const confirmed = await confirmDelete({
+      title: t('common:areYouSureDeleteName', { name: image.name }),
+      description: t('common:proceedYouLoseAllDataToName', { name: image.name }),
+      confirmText: t('common:delete'),
+      confirmColor: 'bg-error-red',
+    })
+
+    if (!confirmed) {
+      return
+    }
+
+    sock.send(WS_TYPE_DELETE_IMAGE, {
+      imageId: image.id,
+    } as DeleteImageMessage)
+  }
 
   return [
     {

@@ -114,7 +114,7 @@ const VersionDeploymentsSection = (props: VersionDeploymentsSectionProps) => {
   const [confirmModalConfig, confirm] = useConfirmation()
 
   const  (deployment: DeploymentByVersion) => {
-    const confirmed = await confirm(null, {
+    const confirmed = await confirm({
       title: t('common:areYouSure'),
       description: t('deployments:areYouSureDeployNodePrefix', {
         node: deployment.node.name,
@@ -136,7 +136,7 @@ const VersionDeploymentsSection = (props: VersionDeploymentsSectionProps) => {
   }
 
   const  (deployment: DeploymentByVersion) => {
-    const confirmed = await confirm(null, {
+    const confirmed = await confirm({
       title: t('common:areYouSure'),
       description:
         deployment.status === 'successful'

@@ -41,17 +41,22 @@ const VersionViewList = (props: VersionViewListProps) => {
     clsx('pr-6 text-center', defaultItemClass),
   ]
 
-  const  VersionImage) =>
-    confirmDelete(
-      () =>
-        state.versionSock.send(WS_TYPE_DELETE_IMAGE, {
-          imageId: item.id,
-        } as DeleteImageMessage),
-      {
-        title: t('common:areYouSureDeleteName', { name: item.config.name }),
-        description: t('common:proceedYouLoseAllDataToName', { name: item.config.name }),
-      },
-    )
+  const  (item: VersionImage) => {
+    const confirmed = await confirmDelete({
+      title: t('common:areYouSureDeleteName', { name: item.config.name }),
+      description: t('common:proceedYouLoseAllDataToName', { name: item.config.name }),
+      confirmText: t('common:delete'),
+      confirmColor: 'bg-error-red',
+    })
+
+    if (!confirmed) {
+      return
+    }
+
+    state.versionSock.send(WS_TYPE_DELETE_IMAGE, {
+      imageId: item.id,
+    } as DeleteImageMessage)
+  }
 
   const  VersionImage) => {
     setTagsModalTarget(it)
@@ -107,14 +112,7 @@ const VersionViewList = (props: VersionViewListProps) => {
         />
       </DyoCard>
 
-      <DyoConfirmationModal
-        config={deleteModal}
-        title={t('common:areYouSureDeleteName')}
-        description={t('common:proceedYouLoseAllDataToName')}
-        confirmText={t('common:delete')}
-        className="w-1/4"
-        confirmColor="bg-error-red"
-      />
+      <DyoConfirmationModal config={deleteModal} className="w-1/4" />
 
       {!tagsModalTarget ? null : (
         <DyoModal

@@ -82,6 +82,21 @@ export const DetailsPageMenu = (props: React.PropsWithChildren<DetailsPageMenuPr
 
   const texts = propsTexts ?? {}
 
+  const deleteClick = async () => {
+    const confirmed = await confirmDelete({
+      title: deleteModalTitle,
+      description: deleteModalDescription,
+      confirmText: texts.delete ?? t('delete'),
+      confirmColor: 'bg-error-red',
+    })
+
+    if (!confirmed) {
+      return
+    }
+
+    onDelete()
+  }
+
   return !editing ? (
     <>
       {disableEditing ? null : (
@@ -91,11 +106,7 @@ export const DetailsPageMenu = (props: React.PropsWithChildren<DetailsPageMenuPr
       )}
 
       {!onDelete ? null : (
-        <DyoButton
-          className={clsx(onAdd ? 'mx-2' : 'ml-2', 'px-6')}
-          color="bg-error-red"
-           => confirmDelete(onDelete)}
-        >
+        <DyoButton className={clsx(onAdd ? 'mx-2' : 'ml-2', 'px-6')} color="bg-error-red" >
           {texts.delete ?? t('delete')}
         </DyoButton>
       )}
@@ -106,16 +117,7 @@ export const DetailsPageMenu = (props: React.PropsWithChildren<DetailsPageMenuPr
         </DyoButton>
       )}
 
-      {!onDelete ? null : (
-        <DyoConfirmationModal
-          config={deleteModalConfig}
-          title={deleteModalTitle}
-          description={deleteModalDescription}
-          confirmText={texts.delete ?? t('delete')}
-          className="w-1/4"
-          confirmColor="bg-error-red"
-        />
-      )}
+      {!onDelete ? null : <DyoConfirmationModal config={deleteModalConfig} className="w-1/4" />}
     </>
   ) : (
     <>

@@ -29,12 +29,14 @@ const UserRoleAction = (props: UserRoleActionProps) => {
   const handleApiError = defaultApiErrorHandler(t)
 
   const  (updatedRole: UserRole, promote: boolean) => {
-    const confirmed = await confirmRoleUpdate(null, {
+    const confirmed = await confirmRoleUpdate({
+      title: t('common:areYouSure'),
       description: t('confirmRoleAction', {
         action: t(promote ? 'promote' : 'demote'),
         user: user.name !== '' ? user.name : user.email,
         role: t(`common:role.${updatedRole}`),
       }),
+      confirmColor: 'bg-warning-orange',
     })
 
     if (!confirmed) {
@@ -81,12 +83,7 @@ const UserRoleAction = (props: UserRoleActionProps) => {
         />
       ) : null}
 
-      <DyoConfirmationModal
-        config={roleUpdateModalConfig}
-        title={t('common:areYouSure')}
-        className="w-1/4"
-        confirmColor="bg-warning-orange"
-      />
+      <DyoConfirmationModal config={roleUpdateModalConfig} className="w-1/4" />
     </div>
   )
 }