Skip to content

Commit

Permalink
fix: confirm btn is not visible in modals gh-93.
Browse files Browse the repository at this point in the history 
perf: change document card font size.
perf: document card btn style.
fix: document card btn translation text.
  • Loading branch information
@riccox
riccox authored Nov 4, 2023
1 parent e8200cc commit 8f30187
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 73 deletions.
62 changes: 42 additions & 20 deletions src/components/Document/list.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 }));
Expand All @@ -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')}
>
Expand All @@ -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>
Expand Down
40 changes: 30 additions & 10 deletions src/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]);

Expand Down
45 changes: 32 additions & 13 deletions src/components/Settings/config/detail/arrayInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -67,26 +67,45 @@ 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]
);

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}
Expand Down
41 changes: 30 additions & 11 deletions src/components/Settings/config/detail/synonyms.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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]
Expand Down
38 changes: 29 additions & 9 deletions src/pages/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]
Expand Down
40 changes: 30 additions & 10 deletions src/pages/key/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]
Expand Down

1 comment on commit 8f30187

@vercel
Copy link

@vercel vercel bot commented on 8f30187 Nov 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

meilisearch-ui – ./

meilisearch-ui-git-main-riccoxie.vercel.app
meilisearch-ui-riccoxie.vercel.app
meilisearch-ui.vercel.app
meilisearch-ui.riccox.com

Please sign in to comment.