refactor: add instance modal

src/pages/gpu-service/instances/components/add-modal.tsx

@@ -1,9 +1,32 @@
 import { PageActionType } from '@/config/types';
-import { ModalFooter } from '@gpustack/core-ui';
+import Separator from '@/pages/llmodels/components/separator';
+import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useRef } from 'react';
-import FormDrawer from '../../../_components/form-drawer';
+import styled from 'styled-components';
 import { FormData, ListItem } from '../config/types';
 import GPUServiceInstanceForm from '../forms';
+import { TemplateSelector } from '../forms/template-overlay';
+import InstanceTypeList from './instance-type-list';
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  min-height: 0;
+`;
+
+const ColWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  max-width: 33.33%;
+  min-height: 0;
+`;
+
+const FormWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  max-width: 33.33%;
+  min-height: 0;
+`;
 
 type AddModalProps = {
   title: string;
@@ -40,33 +63,61 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   return (
-    <FormDrawer
+    <GSDrawer
       title={title}
       open={open}
-      onCancel={handleCancel}
-      onSubmit={handleSubmit}
-      width={600}
-      push={{ distance: 24 }}
-      footer={
-        <ModalFooter
-          onOk={handleSubmit}
-          onCancel={handleCancel}
-          style={{
-            padding: '16px 24px 8px',
-            display: 'flex',
-            justifyContent: 'flex-end'
-          }}
-        />
-      }
+      onClose={handleCancel}
+      destroyOnHidden={true}
+      closeIcon={false}
+      mask={{
+        closable: false
+      }}
+      keyboard={false}
+      styles={{
+        wrapper: { width: 'calc(100vw - 220px)' },
+        body: { overflowY: 'hidden' }
+      }}
+      footer={false}
     >
-      <GPUServiceInstanceForm
-        ref={form}
-        action={action}
-        currentData={data}
-        onFinish={onFinish}
-        open={open}
-      />
-    </FormDrawer>
+      <Container>
+        <ColWrapper>
+          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+            <InstanceTypeList />
+          </ColumnWrapper>
+          <Separator></Separator>
+        </ColWrapper>
+        <ColWrapper>
+          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+            <TemplateSelector></TemplateSelector>
+          </ColumnWrapper>
+          <Separator></Separator>
+        </ColWrapper>
+        <FormWrapper>
+          <ColumnWrapper
+            styles={{ container: { paddingBlock: 0 } }}
+            footer={
+              <ModalFooter
+                onOk={handleSubmit}
+                onCancel={handleCancel}
+                style={{
+                  padding: '16px 24px 8px',
+                  display: 'flex',
+                  justifyContent: 'flex-end'
+                }}
+              />
+            }
+          >
+            <GPUServiceInstanceForm
+              ref={form}
+              action={action}
+              currentData={data}
+              onFinish={onFinish}
+              open={open}
+            />
+          </ColumnWrapper>
+        </FormWrapper>
+      </Container>
+    </GSDrawer>
   );
 };