From 8f301872183fdb4cc8711750fac3907467a3f65b Mon Sep 17 00:00:00 2001
From: Ricco Xie <ricco@riccox.com>
Date: Sat, 4 Nov 2023 18:20:58 +0800
Subject: [PATCH] fix: confirm btn is not visible in modals gh-93.

perf: change document card font size.
perf: document card btn style.
fix: document card btn translation text.
---
 src/components/Document/list.tsx              | 62 +++++++++++++------
 src/components/Header/index.tsx               | 40 +++++++++---
 .../Settings/config/detail/arrayInput.tsx     | 45 ++++++++++----
 .../Settings/config/detail/synonyms.tsx       | 41 ++++++++----
 src/pages/dashboard.tsx                       | 38 +++++++++---
 src/pages/key/index.tsx                       | 40 +++++++++---
 6 files changed, 193 insertions(+), 73 deletions(-)

diff --git a/src/components/Document/list.tsx b/src/components/Document/list.tsx
index 285efd2..d960651 100644
--- a/src/components/Document/list.tsx
+++ b/src/components/Document/list.tsx
@@ -1,4 +1,4 @@
-import { openConfirmModal } from '@mantine/modals';
+import { modals } from '@mantine/modals';
 import { useMeiliClient } from '@/src/hooks/useMeiliClient';
 import { showTaskErrorNotification, showTaskSubmitNotification } from '@/src/utils/text';
 import { toast } from '@/src/utils/toast';
@@ -62,24 +62,43 @@ export const DocumentList = ({ docs = [], showIndex = false, refetchDocs }: Prop
       const pk = doc.primaryKey;
       console.debug('onClickDocumentDel', 'pk', pk);
       if (pk) {
-        openConfirmModal({
+        const modalId = 'deleteDocumentModal';
+        modals.open({
+          modalId,
           title: t('delete_document'),
           centered: true,
           children: (
-            <p>
-              {t('delete.tip') + ' '}
-              <strong>
-                {/* @ts-ignore */}
-                document ({pk}: {doc.content[pk]}) in index {doc.indexId}
-              </strong>
-              ?
-            </p>
+            <div className="flex flex-col gap-6">
+              <p>
+                {t('delete.tip') + ' '}
+                <strong>
+                  {/* @ts-ignore */}
+                  document ({pk}: {doc.content[pk]}) in index {doc.indexId}
+                </strong>
+                ?
+              </p>
+              <div className="flex gap-3">
+                <button
+                  className="btn sm solid danger flex-1"
+                  onClick={() => {
+                    // @ts-ignore
+                    removeDocumentsMutation.mutate({ indexId: doc.indexId, docId: [doc.content[pk]] });
+                    modals.close(modalId);
+                  }}
+                >
+                  {t('confirm')}
+                </button>
+                <button
+                  className="btn sm solid bw flex-1"
+                  onClick={() => {
+                    modals.close(modalId);
+                  }}
+                >
+                  {t('cancel')}
+                </button>
+              </div>
+            </div>
           ),
-          labels: { confirm: t('confirm'), cancel: t('cancel') },
-          onConfirm: () => {
-            // @ts-ignore
-            removeDocumentsMutation.mutate({ indexId: doc.indexId, docId: [doc.content[pk]] });
-          },
         });
       } else {
         toast.error(t('delete.require_primaryKey', { indexId: doc.indexId }));
@@ -101,7 +120,10 @@ export const DocumentList = ({ docs = [], showIndex = false, refetchDocs }: Prop
   const list = useMemo(() => {
     return docs.map((d, i) => {
       return (
-        <div className={` rounded-xl p-4 bg-brand-1 odd:bg-opacity-20 even:bg-opacity-10 group relative`} key={i}>
+        <div
+          className={`text-xs rounded-xl p-4 bg-brand-1 odd:bg-opacity-20 even:bg-opacity-10 group relative`}
+          key={i}
+        >
           <div
             className={clsx(`absolute right-3 top-3 opacity-95 badge outline sm bw cornered`, !showIndex && 'hidden')}
           >
@@ -118,11 +140,11 @@ export const DocumentList = ({ docs = [], showIndex = false, refetchDocs }: Prop
           <div
             className={`absolute right-0 bottom-0 opacity-95 invisible group-hover:visible p-2 flex items-center gap-2`}
           >
-            <button className={'btn xs font-normal outline info'} onClick={() => onClickDocumentUpdate(d)}>
-              {t('update')}
+            <button className={'btn xs light info'} onClick={() => onClickDocumentUpdate(d)}>
+              {t('common:update')}
             </button>
-            <button className={'btn xs font-normal outline danger'} onClick={() => onClickDocumentDel(d)}>
-              {t('delete')}
+            <button className={'btn xs light danger'} onClick={() => onClickDocumentDel(d)}>
+              {t('common:delete')}
             </button>
           </div>
         </div>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index ea2e0fb..7e47092 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -18,7 +18,7 @@ import { MeiliSearch, Version } from 'meilisearch';
 import { useQuery } from '@tanstack/react-query';
 import { useInstanceStats } from '@/src/hooks/useInstanceStats';
 import _ from 'lodash';
-import { openConfirmModal } from '@mantine/modals';
+import { modals } from '@mantine/modals';
 import { getTimeText, showTaskSubmitNotification } from '@/src/utils/text';
 import { validateKeysRouteAvailable } from '@/src/utils/conn';
 import { useNavigatePreCheck } from '@/src/hooks/useRoutePreCheck';
@@ -80,17 +80,37 @@ export const Header: FC<Props> = ({ client, className }) => {
   }, [clipboard, currentInstance?.host]);
 
   const onClickDump = useCallback(() => {
-    openConfirmModal({
+    const modalId = 'createDumpModal';
+    modals.open({
+      modalId,
       title: t('instance:dump.dialog.title'),
       centered: true,
-      children: <p>{t('instance:dump.dialog.tip', { name: currentInstance.name })}</p>,
-      labels: { confirm: t('confirm'), cancel: t('cancel') },
-      confirmProps: { color: 'orange' },
-      onConfirm: () => {
-        client.createDump().then((value) => {
-          showTaskSubmitNotification(value);
-        });
-      },
+      children: (
+        <div className="flex flex-col gap-6">
+          <p>{t('instance:dump.dialog.tip', { name: currentInstance.name })}</p>
+          <div className="flex gap-3">
+            <button
+              className="btn sm solid warn flex-1"
+              onClick={() => {
+                client.createDump().then((value) => {
+                  showTaskSubmitNotification(value);
+                });
+                modals.close(modalId);
+              }}
+            >
+              {t('confirm')}
+            </button>
+            <button
+              className="btn sm solid bw flex-1"
+              onClick={() => {
+                modals.close(modalId);
+              }}
+            >
+              {t('cancel')}
+            </button>
+          </div>
+        </div>
+      ),
     });
   }, [client, currentInstance.name, t]);
 
diff --git a/src/components/Settings/config/detail/arrayInput.tsx b/src/components/Settings/config/detail/arrayInput.tsx
index d27396c..eb5a213 100644
--- a/src/components/Settings/config/detail/arrayInput.tsx
+++ b/src/components/Settings/config/detail/arrayInput.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useForm } from 'react-hook-form';
 import { IconPlus, IconCircleMinus, IconArrowUp, IconArrowDown } from '@tabler/icons-react';
 import { PropsWithoutRef, useCallback, useMemo, useState } from 'react';
-import { openConfirmModal } from '@mantine/modals';
+import { modals } from '@mantine/modals';
 import _ from 'lodash';
 import { arrayMove } from '@/src/utils/array';
 import { useTranslation } from 'react-i18next';
@@ -67,18 +67,37 @@ export function ArrayInput<V extends string>({
   const onClickItemDel = useCallback(
     (index: number) => {
       console.debug('🚀 ~ file: ArrayInput onClickItemDel', index);
-
-      openConfirmModal({
-        title: t('setting.index.config.remove_this.item'),
+      const modalId = 'removeItemModal';
+      modals.open({
+        modalId,
+        title: t('setting.index.config.remove_this_item'),
         centered: true,
-        children: <p>{t('setting.index.config.are_you_sure_you_want_to_remove_item', { item: array[index] })}</p>,
-        labels: { confirm: t('confirm'), cancel: t('cancel') },
-        confirmProps: { color: 'red' },
-        onConfirm: async () => {
-          const updated = _.without(array, array[index]);
-          setArray(updated);
-          onMutation(updated);
-        },
+        children: (
+          <div className="flex flex-col gap-6">
+            <p>{t('setting.index.config.are_you_sure_you_want_to_remove_item', { item: array[index] })}</p>{' '}
+            <div className="flex gap-3">
+              <button
+                className="btn sm solid danger flex-1"
+                onClick={() => {
+                  const updated = _.without(array, array[index]);
+                  setArray(updated);
+                  onMutation(updated);
+                  modals.close(modalId);
+                }}
+              >
+                {t('confirm')}
+              </button>
+              <button
+                className="btn sm solid bw flex-1"
+                onClick={() => {
+                  modals.close(modalId);
+                }}
+              >
+                {t('cancel')}
+              </button>
+            </div>
+          </div>
+        ),
       });
     },
     [array, onMutation, t]
@@ -86,7 +105,7 @@ export function ArrayInput<V extends string>({
 
   return useMemo(
     () => (
-      <div className={clsx(className, 'flex flex-col gap-2')}>
+      <div className={clsx(className, 'flex flex-col gap-6')}>
         {(isAdding ? array : defaultValue).map((item, i) => (
           <div
             key={i}
diff --git a/src/components/Settings/config/detail/synonyms.tsx b/src/components/Settings/config/detail/synonyms.tsx
index 571e3c3..8e73df1 100644
--- a/src/components/Settings/config/detail/synonyms.tsx
+++ b/src/components/Settings/config/detail/synonyms.tsx
@@ -5,7 +5,7 @@ import { FC, useCallback, useEffect, useMemo, useReducer } from 'react';
 import { IndexSettingConfigComponentProps } from '../..';
 import _ from 'lodash';
 import { IconCircleMinus, IconEdit, IconPlus } from '@tabler/icons-react';
-import { openConfirmModal } from '@mantine/modals';
+import { modals } from '@mantine/modals';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -74,17 +74,36 @@ export const Synonyms: FC<IndexSettingConfigComponentProps> = ({ client, classNa
   const onClickItemDel = useCallback(
     (key: string) => {
       console.debug('🚀 ~ file: Synonyms onClickItemDel', key);
-
-      openConfirmModal({
-        title: t('setting.index.config.remove_this.item'),
+      const modalId = 'removeItemModal';
+      modals.open({
+        modalId,
+        title: t('setting.index.config.remove_this_item'),
         centered: true,
-        children: <p>{t('setting.index.config.are_you_sure_you_want_to_remove_item', { item: key })}</p>,
-        labels: { confirm: t('confirm'), cancel: t('cancel') },
-        confirmProps: { color: 'red' },
-        onConfirm: async () => {
-          const updated = _.omit(query.data, [key]);
-          mutation.mutate(updated);
-        },
+        children: (
+          <div className="flex flex-col gap-6">
+            <p>{t('setting.index.config.are_you_sure_you_want_to_remove_item', { item: key })}</p>{' '}
+            <div className="flex gap-3">
+              <button
+                className="btn sm solid danger flex-1"
+                onClick={() => {
+                  const updated = _.omit(query.data, [key]);
+                  mutation.mutate(updated);
+                  modals.close(modalId);
+                }}
+              >
+                {t('confirm')}
+              </button>
+              <button
+                className="btn sm solid bw flex-1"
+                onClick={() => {
+                  modals.close(modalId);
+                }}
+              >
+                {t('cancel')}
+              </button>
+            </div>
+          </div>
+        ),
       });
     },
     [mutation, t, query.data]
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 8e93c3c..3da66fa 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -6,7 +6,7 @@ import { Footer } from '@/src/components/Footer';
 import { useForm } from '@mantine/form';
 import { IconBooks, IconCirclePlus, IconCircleX, IconKey, IconListCheck, IconPencilMinus } from '@tabler/icons-react';
 import { testConnection, validateKeysRouteAvailable } from '@/src/utils/conn';
-import { openConfirmModal } from '@mantine/modals';
+import { modals } from '@mantine/modals';
 import { getTimeText } from '@/src/utils/text';
 import _ from 'lodash';
 import { useNavigatePreCheck } from '@/src/hooks/useRoutePreCheck';
@@ -110,18 +110,38 @@ function Dashboard() {
 
   const onClickRemoveInstance = useCallback(
     (ins: Instance) => {
-      openConfirmModal({
+      const modalId = 'removeInsModal';
+      modals.open({
+        modalId,
         title: t('instance.remove.title'),
         centered: true,
         children: (
-          <p>
-            {t('instance.remove.tip')} ({ins.name})?
-          </p>
+          <div className="flex flex-col gap-6">
+            <p>
+              {t('instance.remove.tip')} ({ins.name})?
+            </p>
+            <div className="flex gap-3">
+              <button
+                className="btn sm solid danger flex-1"
+                onClick={() => {
+                  removeInstance(ins.id);
+
+                  modals.close(modalId);
+                }}
+              >
+                {t('confirm')}
+              </button>
+              <button
+                className="btn sm solid bw flex-1"
+                onClick={() => {
+                  modals.close(modalId);
+                }}
+              >
+                {t('cancel')}
+              </button>
+            </div>
+          </div>
         ),
-        labels: { confirm: t('confirm'), cancel: t('cancel') },
-        onConfirm: () => {
-          removeInstance(ins.id);
-        },
       });
     },
     [removeInstance, t]
diff --git a/src/pages/key/index.tsx b/src/pages/key/index.tsx
index 74b4d71..63c8292 100644
--- a/src/pages/key/index.tsx
+++ b/src/pages/key/index.tsx
@@ -15,7 +15,7 @@ import { IconCheck, IconCopy } from '@tabler/icons-react';
 import { Footer } from '@/src/components/Footer';
 import { useForm } from '@mantine/form';
 import { useIndexes } from '@/src/hooks/useIndexes';
-import { openConfirmModal } from '@mantine/modals';
+import { modals } from '@mantine/modals';
 import { toast } from '@/src/utils/toast';
 import { useCurrentInstance } from '@/src/hooks/useCurrentInstance';
 import { useTranslation } from 'react-i18next';
@@ -100,17 +100,37 @@ function Keys() {
 
   const onClickDelKey = useCallback(
     (key: Key) => {
-      openConfirmModal({
+      const modalId = 'delKeyModal';
+      modals.open({
+        modalId,
         title: t('delete.title'),
         centered: true,
-        children: <p>{t('delete.tip')}</p>,
-        labels: { confirm: t('confirm'), cancel: t('cancel') },
-        confirmProps: { color: 'red' },
-        onConfirm: () => {
-          client.deleteKey(key.uid).finally(() => {
-            refreshKeys();
-          });
-        },
+        children: (
+          <div className="flex flex-col gap-6">
+            <p>{t('delete.tip')}</p>
+            <div className="flex gap-3">
+              <button
+                className="btn sm solid danger flex-1"
+                onClick={() => {
+                  client.deleteKey(key.uid).finally(() => {
+                    refreshKeys();
+                  });
+                  modals.close(modalId);
+                }}
+              >
+                {t('confirm')}
+              </button>
+              <button
+                className="btn sm solid bw flex-1"
+                onClick={() => {
+                  modals.close(modalId);
+                }}
+              >
+                {t('cancel')}
+              </button>
+            </div>
+          </div>
+        ),
       });
     },
     [client, refreshKeys, t]