Files
gpustack-ui/src/pages/gpu-service/instances/forms/public-key-overlay.tsx
T

77 lines
2.0 KiB
TypeScript

import { PageAction } from '@/config';
import { ModalFooter, SubDrawer } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { useRef, useState } from 'react';
import { FormData as PublicKeyFormData } from '../../public-keys/config/types';
import GPUServicePublicKeyForm from '../../public-keys/forms';
import useCreateSshkey from '../../public-keys/services/use-create-sshkey';
import useOverlayLayout from '../hooks/use-overlay-layout';
interface PublicKeyOverlayProps {
open: boolean;
onCancel: () => void;
onSubmit: (values: PublicKeyFormData) => Promise<void> | void;
}
const PublicKeyOverlay: React.FC<PublicKeyOverlayProps> = ({
open,
onCancel,
onSubmit
}) => {
const intl = useIntl();
const [loading, setLoading] = useState(false);
const formRef = useRef<any>(null);
const { fetchData: createSshkey } = useCreateSshkey();
const { drawerWidth, getOverlayContainer } = useOverlayLayout(open);
const handleSubmit = () => {
formRef.current?.submit();
};
const handleCancel = () => {
formRef.current?.resetFields();
onCancel();
};
const handleFinish = async (values: PublicKeyFormData) => {
setLoading(true);
try {
await createSshkey({ data: values });
await onSubmit(values);
} finally {
setLoading(false);
}
};
return (
<SubDrawer
title={intl.formatMessage({ id: 'gpuservice.publicKey.add' })}
open={open}
width={drawerWidth}
onCancel={handleCancel}
getContainer={getOverlayContainer}
footer={
<ModalFooter
onOk={handleSubmit}
onCancel={handleCancel}
loading={loading}
style={{
padding: '16px 24px 24px',
display: 'flex',
justifyContent: 'flex-end'
}}
/>
}
>
<GPUServicePublicKeyForm
ref={formRef}
action={PageAction.CREATE}
open={open}
onFinish={handleFinish}
/>
</SubDrawer>
);
};
export default PublicKeyOverlay;