root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: access form

Browse Source
This commit is contained in:
jialin
2026-02-03 18:21:08 +08:00
parent e8e982559d
commit 5fcdf4ea00
22 changed files with 372 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/label-selector/autocomplete-item.tsx
+9 -3
View File
@@ -38,7 +38,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
}) => {
const intl = useIntl();
const [open, setOpen] = useState(false);
const { options } = useLabelSelectorContext();
const { options, placeholder = [] } = useLabelSelectorContext();
const keyOptions = useMemo(() => {
return options?.filter(
@@ -98,7 +98,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
options={keyOptions}
disabled={disabled}
checkStatus="success"
label={intl.formatMessage({ id: 'common.input.key' })}
label={
placeholder?.[0] ||
intl.formatMessage({ id: 'common.input.key' })
}
value={label.key}
onChange={handleOnKeyChange}
onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
@@ -113,7 +116,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
options={valueOptions}
disabled={disabled}
checkStatus={label.value ? 'success' : ''}
label={intl.formatMessage({ id: 'common.input.value' })}
label={
placeholder?.[1] ||
intl.formatMessage({ id: 'common.input.value' })
}
value={label.value}
onChange={handleOnValueChange}
onBlur={(e: any) => onBlur?.(e, 'value')}
src/components/label-selector/context.ts
+1
View File
@@ -6,6 +6,7 @@ interface LabelSelectorContextProps {
value: string | number;
children?: { label: string; value: string | number }[];
}>;
placeholder?: string[];
currentData?: Record<string, any>;
}
src/components/label-selector/index.tsx
+4 -1
View File
@@ -10,6 +10,7 @@ interface LabelSelectorProps {
description?: React.ReactNode;
disabled?: boolean;
isAutoComplete?: boolean;
enablePaste?: boolean;
onChange?: (labels: Record<string, any>) => void;
onBlur?: (e: any, type: string, index: number) => void;
onDelete?: (index: number) => void;
@@ -24,7 +25,8 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
label,
btnText,
description,
isAutoComplete
isAutoComplete,
enablePaste = true
}) => {
const intl = useIntl();
const [labelsData, setLabelsData] = useState({});
@@ -73,6 +75,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
e: React.ClipboardEvent<HTMLTextAreaElement>,
index: number
) => {
if (!enablePaste) return;
const clipboardText = e.clipboardData.getData('text');
if (!clipboardText || clipboardText.indexOf('=') === -1) return;
e.preventDefault();
src/components/label-selector/inner.tsx
+1 -8
View File
@@ -1,6 +1,5 @@
import { useIntl } from '@umijs/max';
import _ from 'lodash';
import React, { useEffect } from 'react';
import React from 'react';
import AutoCompleteItem from './autocomplete-item';
import LabelItem from './label-item';
import Wrapper from './wrapper';
@@ -33,12 +32,6 @@ const Inner: React.FC<LabelSelectorProps> = ({
description,
isAutoComplete
}) => {
const intl = useIntl();
useEffect(() => {
console.log('labels changed in Inner', labels);
}, [labels]);
const updateLabels = (list: { key: string; value: string }[]) => {
const newLabels = _.reduce(
list,
src/components/label-selector/label-item.tsx
-1
View File
@@ -1,5 +1,4 @@
import SealInput from '@/components/seal-form/seal-input';
import { Global } from '@/config/global';
import { MinusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Tooltip } from 'antd';
src/pages/_components/transfer.tsx
+3 -3
View File
@@ -6,10 +6,10 @@ import styled from 'styled-components';
type TransferKey = string | number | bigint;
const TransferWrap = styled.div`
.ant-transfer-list {
.ant-transfer-section {
width: 100%;
height: 300px;
.ant-transfer-list-header-dropdown {
.anticon-more {
display: none;
}
.ant-input-outlined {
@@ -18,7 +18,7 @@ const TransferWrap = styled.div`
border-radius: 4px;
}
}
.ant-transfer-operation {
.ant-transfer-actions {
margin: 0 16px;
gap: 12px;
.ant-btn-icon-only {
src/pages/maas-provider/forms/advance-config.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import { maasProviderType } from '../config';
import ProxyConfig from './proxy_config';
import ProxyConfig from './proxy-config';
const AdvanceConfig: React.FC<{
action: PageActionType;
src/pages/maas-provider/forms/index.tsx
+2 -2
View File
@@ -15,7 +15,7 @@ import {
} from 'react';
import { maasProviderType } from '../config';
import FormContext from '../config/form-context';
import { MaasProviderItem as ListItem } from '../config/types';
import { FormData, MaasProviderItem as ListItem } from '../config/types';
import AccessToken from './access-token';
import AdvanceConfig from './advance-config';
import Basic from './basic';
@@ -26,7 +26,7 @@ interface ProviderFormProps {
action: PageActionType;
provider?: maasProviderType;
currentData?: ListItem; // Used when action is EDIT
onFinish: (values: FormData) => void;
onFinish: (values: FormData) => Promise<void>;
}
const TABKeysMap = {
src/pages/maas-provider/forms/proxy_config.tsx → src/pages/maas-provider/forms/proxy-config.tsx
View File
src/pages/model-access/components/access-points.tsx
+9 -8
View File
@@ -19,6 +19,7 @@ interface ProviderModelProps {
dataList: any[];
provider: string;
providerId: number;
onSelect: (val: any, record: any) => void;
}
interface AccessItemProps {
@@ -32,6 +33,12 @@ export const childActionList = [
label: 'common.button.viewlog',
icon: <IconFont type="icon-logs" />
},
{
key: 'fallback',
label: 'Fallback settings',
localel: false,
icon: <IconFont type="icon-captive_portal" />
},
{
key: 'delete',
label: 'common.button.delete',
@@ -95,20 +102,14 @@ const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
);
};
const AccessPoints: React.FC<ProviderModelProps> = ({ dataList }) => {
const AccessPoints: React.FC<ProviderModelProps> = ({ dataList, onSelect }) => {
console.log('AccessPoints dataList:', dataList);
return (
<div>
{Array(2)
.fill(1)
.map((item, index) => (
<AccessItem
data={item}
key={index}
onSelect={(val, record) => {
console.log('Selected action:', val, 'on record:', record);
}}
></AccessItem>
<AccessItem data={item} key={index} onSelect={onSelect}></AccessItem>
))}
</div>
);
src/pages/model-access/components/add-access-modal.tsx
+4 -7
View File
@@ -3,15 +3,13 @@ import FormDrawer from '@/pages/_components/form-drawer';
import React, { useRef } from 'react';
import { FormData, AccessItem as ListItem } from '../config/types';
import { maasProviderType } from '../config';
import ProviderForm from '../forms';
import ModelAccessForm from '../forms';
type AddModalProps = {
title: string;
action: PageActionType;
open: boolean;
currentData?: ListItem; // Used when action is EDIT
provider: maasProviderType | null;
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -19,7 +17,6 @@ const AddProvider: React.FC<AddModalProps> = ({
title,
action,
open,
provider,
currentData,
onOk,
onCancel
@@ -30,7 +27,7 @@ const AddProvider: React.FC<AddModalProps> = ({
form.current?.submit();
};
const handleOk = async (data: FormData) => {
const onFinish = async (data: FormData) => {
onOk({
...data
});
@@ -49,11 +46,11 @@ const AddProvider: React.FC<AddModalProps> = ({
onSubmit={handleSubmit}
width={600}
>
<ProviderForm
<ModelAccessForm
ref={form}
action={action}
currentData={currentData}
onFinish={handleOk}
onFinish={onFinish}
/>
</FormDrawer>
);
src/pages/model-access/components/fallback-modal.tsx
+50
View File
@@ -0,0 +1,50 @@
import FormDrawer from '@/pages/_components/form-drawer';
import React, { useRef } from 'react';
import { FormData, AccessItem as ListItem } from '../config/types';
import FallbackSettings from '../forms/fallback-settings';
type AddModalProps = {
title: string;
open: boolean;
currentData?: ListItem; // Used when action is EDIT
onOk: (values: FormData) => void;
onCancel: () => void;
};
const AddProvider: React.FC<AddModalProps> = ({
title,
open,
currentData,
onOk,
onCancel
}) => {
const form = useRef<any>(null);
const handleSubmit = () => {
form.current?.submit();
};
const onFinish = async (data: FormData) => {
onOk({
...data
});
};
const handleCancel = () => {
form.current?.resetFields();
onCancel();
};
return (
<FormDrawer
title={title}
open={open}
onCancel={handleCancel}
onSubmit={handleSubmit}
width={600}
>
<FallbackSettings currentData={currentData} onFinish={onFinish} />
</FormDrawer>
);
};
export default AddProvider;
src/pages/model-access/config/types.ts
+8 -1
View File
@@ -7,6 +7,13 @@ export interface AccessItem {
export interface FormData {
name: string;
category: string;
description: string;
categories: any[];
meta: Record<string, any>;
endpoints: {
provider_model_name: string;
weight: number;
model_id: number;
provider_id: number;
}[];
}
src/pages/model-access/forms/basic.tsx
+6 -2
View File
@@ -1,6 +1,6 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { categoryOptions } from '@/pages/llmodels/config';
import { modelCategories } from '@/pages/llmodels/config';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { FormData } from '../config/types';
@@ -14,7 +14,11 @@ const Basic = () => {
<SealInput.Input required label={'Model Name'} />
</Form.Item>
<Form.Item name="category">
<SealSelect options={categoryOptions} label="Category"></SealSelect>
<SealSelect
options={modelCategories}
label="Category"
allowNull
></SealSelect>
</Form.Item>
<Form.Item name="description">
<SealInput.TextArea
src/pages/model-access/forms/endpoints.tsx
+60 -24
View File
@@ -1,36 +1,72 @@
import SealInput from '@/components/seal-form/seal-input';
import LabelSelector from '@/components/label-selector';
import { LabelSelectorContext } from '@/components/label-selector/context';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import { FormData } from '../config/types';
const Endpoints = () => {
const intl = useIntl();
const form = Form.useFormInstance<FormData>();
const endpoints = Form.useWatch('endpoints', form);
const handleEndpointsChange = (labels: Record<string, any>) => {
form.setFieldValue('endpoints', labels);
};
return (
<>
<Form.Item name="name" data-field="endpoints">
<SealInput.Input
required
label={intl.formatMessage({
id: 'common.table.name'
})}
/>
</Form.Item>
<Form.Item name="provider" hidden>
<SealInput.Input
label={intl.formatMessage({
id: 'providers.table.providerName'
})}
/>
</Form.Item>
<Form.Item name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<LabelSelectorContext.Provider
value={{
placeholder: ['Model', 'Weight'],
options: [
{
label: 'max_token_len',
value: 'max_token_len'
},
{
label: 'max_context_len',
value: 'max_context_len'
}
]
}}
>
<Form.Item
name="endpoints"
data-field="endpoints"
rules={[
({ getFieldValue }) => ({
validator(rule, value) {
if (_.keys(value).length > 0) {
if (_.some(_.keys(value), (k: string) => !value[k])) {
return Promise.reject(
intl.formatMessage(
{
id: 'common.validate.value'
},
{
name: intl.formatMessage({
id: 'models.form.selector'
})
}
)
);
}
}
return Promise.resolve();
}
})
]}
>
<LabelSelector
isAutoComplete
label={'Endpoints'}
labels={endpoints}
btnText="Add Endpoint"
onChange={handleEndpointsChange}
></LabelSelector>
</Form.Item>
</LabelSelectorContext.Provider>
</>
);
};
src/pages/model-access/forms/fallback-settings.tsx
+49
View File
@@ -0,0 +1,49 @@
import SealInput from '@/components/seal-form/seal-input';
import { Checkbox, Form, Typography } from 'antd';
const FallbackSettings: React.FC<{
currentData?: any;
onFinish: (data: any) => void;
}> = ({ currentData, onFinish }) => {
const [form] = Form.useForm();
return (
<Form
form={form}
onFinish={onFinish}
initialValues={currentData}
layout="vertical"
>
<Form.Item name="name">
<SealInput.Input disabled label="Model Name"></SealInput.Input>
</Form.Item>
<Form.Item name="endpoint">
<SealInput.Input disabled label="Endpoint"></SealInput.Input>
</Form.Item>
<Form.Item name="endpoint">
<SealInput.Input disabled label="Endpoint Target"></SealInput.Input>
</Form.Item>
<Form.Item name="fallback_endpoint">
<Typography.Title
level={5}
style={{ fontSize: 14, fontWeight: 500, marginBottom: 16 }}
>
Fallback Status
</Typography.Title>
<Checkbox.Group
options={[
{
label: '4xx',
value: '4xx'
},
{
label: '5xx',
value: '5xx'
}
]}
/>
</Form.Item>
</Form>
);
};
export default FallbackSettings;
src/pages/model-access/forms/index.tsx
+7 -11
View File
@@ -6,8 +6,7 @@ import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { maasProviderType } from '../config';
import { AccessItem as ListItem } from '../config/types';
import { FormData, AccessItem as ListItem } from '../config/types';
import Basic from './basic';
import Endpoints from './endpoints';
import MetaData from './meta-data';
@@ -15,9 +14,8 @@ import MetaData from './meta-data';
interface ProviderFormProps {
ref?: any;
action: PageActionType;
provider?: maasProviderType;
currentData?: ListItem; // Used when action is EDIT
onFinish: (values: FormData) => void;
onFinish: (values: FormData) => Promise<void>;
}
const TABKeysMap = {
@@ -27,8 +25,8 @@ const TABKeysMap = {
ADVANCED: 'advanced'
};
const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
const { action, provider, currentData, onFinish } = props;
const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
const { action, currentData, onFinish } = props;
const intl = useIntl();
const { getScrollElementScrollableHeight } = useWrapperContext();
const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
@@ -86,7 +84,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
}}
getScrollElementScrollableHeight={getScrollElementScrollableHeight}
>
<Form form={form}>
<Form form={form} onFinish={onFinish}>
<Basic />
<CollapsePanel
activeKey={activeKey}
@@ -103,9 +101,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
key: TABKeysMap.ENDPOINTS,
label: 'Endpoints',
forceRender: true,
children: (
<Endpoints action={action} provider={provider}></Endpoints>
)
children: <Endpoints></Endpoints>
}
]}
></CollapsePanel>
@@ -114,4 +110,4 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
);
});
export default ProviderForm;
export default AccessForm;
src/pages/model-access/forms/meta-data.tsx
+59 -24
View File
@@ -1,36 +1,71 @@
import SealInput from '@/components/seal-form/seal-input';
import LabelSelector from '@/components/label-selector';
import { LabelSelectorContext } from '@/components/label-selector/context';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import { FormData } from '../config/types';
const MetaData = () => {
const intl = useIntl();
const form = Form.useFormInstance<FormData>();
const metadata = Form.useWatch('meta', form);
const handleMetadataChange = (labels: Record<string, any>) => {
form.setFieldValue('meta', labels);
};
return (
<>
<Form.Item name="name" data-field="metadata">
<SealInput.Input
required
label={intl.formatMessage({
id: 'common.table.name'
})}
/>
</Form.Item>
<Form.Item name="provider" hidden>
<SealInput.Input
label={intl.formatMessage({
id: 'providers.table.providerName'
})}
/>
</Form.Item>
<Form.Item name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
<LabelSelectorContext.Provider
value={{
options: [
{
label: 'max_token_len',
value: 'max_token_len'
},
{
label: 'max_context_len',
value: 'max_context_len'
}
]
}}
>
<Form.Item
name="meta"
data-field="metadata"
rules={[
({ getFieldValue }) => ({
validator(rule, value) {
if (_.keys(value).length > 0) {
if (_.some(_.keys(value), (k: string) => !value[k])) {
return Promise.reject(
intl.formatMessage(
{
id: 'common.validate.value'
},
{
name: intl.formatMessage({
id: 'models.form.selector'
})
}
)
);
}
}
return Promise.resolve();
}
})
]}
>
<LabelSelector
isAutoComplete
label={'Metadatas'}
labels={metadata}
btnText="Add Metadata"
onChange={handleMetadataChange}
></LabelSelector>
</Form.Item>
</LabelSelectorContext.Provider>
</>
);
};
src/pages/model-access/hooks/use-create-access.ts
+14 -10
View File
@@ -1,37 +1,41 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useState } from 'react';
import { maasProviderType } from '../config';
import { AccessItem as ListItem } from '../config/types';
const useCreateAccess = (options: { refresh: () => void }) => {
const useCreateAccess = (options?: { refresh: () => void }) => {
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData?: ListItem;
title: string;
provider: maasProviderType | null;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: null
title: ''
});
const openModal = (action: PageActionType, currentData?: ListItem) => {
const openModal = (
action: PageActionType,
title: string,
currentData?: ListItem
) => {
setOpenModalStatus({
...openModalStatus,
open: true,
action,
currentData,
title: action === PageAction.CREATE ? 'Create Access' : 'Edit Access'
title: title
});
};
const closeModal = () => {
setOpenModalStatus({ ...openModalStatus, open: false });
options.refresh();
setOpenModalStatus({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
};
return {
src/pages/model-access/hooks/use-fallback-settings.ts
+49
View File
@@ -0,0 +1,49 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useState } from 'react';
import { AccessItem as ListItem } from '../config/types';
const useFallbackSettings = (options?: { refresh: () => void }) => {
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData?: ListItem;
title: string;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
const openModal = (
action: PageActionType,
title: string,
currentData?: ListItem
) => {
setOpenModalStatus({
open: true,
action,
currentData,
title: title
});
};
const closeModal = () => {
setOpenModalStatus({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
};
return {
openFallbackSettingsModalStatus: openModalStatus,
setOpenFallbackSettingsModalStatus: setOpenModalStatus,
openFallbackSettingsModal: openModal,
closeFallbackSettingsModal: closeModal
};
};
export default useFallbackSettings;
src/pages/model-access/index.tsx
+33 -31
View File
@@ -26,11 +26,13 @@ import {
} from './apis';
import AccessPoints from './components/access-points';
import AddAccessModal from './components/add-access-modal';
import FallbackModal from './components/fallback-modal';
import { maasProviderOptions } from './config';
import { mockDataList } from './config/mock';
import { FormData, AccessItem as ListItem } from './config/types';
import useAccessColumns from './hooks/use-access-columns';
import useCreateAccess from './hooks/use-create-access';
import useFallbackSettings from './hooks/use-fallback-settings';
const Accesses: React.FC = () => {
const {
@@ -57,17 +59,20 @@ const Accesses: React.FC = () => {
const { handleExpandChange, handleExpandAll, expandedRowKeys } =
useExpandedRowKeys(expandAtom);
const intl = useIntl();
const { openAccessModalStatus, openAccessModal, closeAccessModal } =
useCreateAccess();
const {
openAccessModalStatus,
setOpenAccessModalStatus,
openAccessModal,
closeAccessModal
} = useCreateAccess({
refresh: handleSearch
});
openFallbackSettingsModalStatus,
openFallbackSettingsModal,
closeFallbackSettingsModal
} = useFallbackSettings();
const handleClickDropdown = () => {
openAccessModal('create');
openAccessModal(
PageAction.CREATE,
intl.formatMessage({ id: 'accesses.button.add' })
);
};
const handleModalOk = async (data: FormData) => {
@@ -82,39 +87,25 @@ const Accesses: React.FC = () => {
});
}
fetchData();
setOpenAccessModalStatus({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: null
});
closeAccessModal();
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {}
};
const handleModalCancel = () => {
console.log('handleModalCancel');
setOpenAccessModalStatus({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: '',
provider: null
});
closeAccessModal();
};
const handleEditProvider = (row: ListItem) => {
setOpenAccessModalStatus({
open: true,
action: PageAction.EDIT,
currentData: row,
title: intl.formatMessage(
openAccessModal(
PageAction.EDIT,
intl.formatMessage(
{ id: 'clusters.edit.cluster' },
{ cluster: row.name }
),
provider: row.provider
});
row
);
};
const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
@@ -154,6 +145,12 @@ const Accesses: React.FC = () => {
handleTableChange({}, {}, order, { action: 'sort' });
};
const onChildSelect = useMemoizedFn((val: any, record: any) => {
if (val === 'fallback') {
openFallbackSettingsModal(PageAction.EDIT, 'Fallback Settings', record);
}
});
const renderChildren = (
list: any,
options: { parent?: any; [key: string]: any }
@@ -163,6 +160,7 @@ const Accesses: React.FC = () => {
dataList={list}
provider={options.parent?.provider}
providerId={options.parent?.id}
onSelect={onChildSelect}
/>
);
};
@@ -173,7 +171,6 @@ const Accesses: React.FC = () => {
<>
<PageBox>
<FilterBar
actionType="dropdown"
showSelect={false}
marginBottom={22}
marginTop={30}
@@ -243,7 +240,6 @@ const Accesses: React.FC = () => {
</TableContext.Provider>
</PageBox>
<AddAccessModal
provider={openAccessModalStatus.provider}
open={openAccessModalStatus.open}
action={openAccessModalStatus.action}
title={openAccessModalStatus.title}
@@ -251,6 +247,12 @@ const Accesses: React.FC = () => {
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddAccessModal>
<FallbackModal
title={openFallbackSettingsModalStatus.title}
open={openFallbackSettingsModalStatus.open}
onCancel={closeFallbackSettingsModal}
onOk={closeFallbackSettingsModal}
></FallbackModal>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);