chore: model access statement

src/pages/llmodels/components/access-control-modal/form.tsx

@@ -1,7 +1,6 @@
-import CheckboxField from '@/components/seal-form/checkbox-field';
 import TransferInner from '@/pages/_components/transfer';
 import { queryUsersList } from '@/pages/users/apis';
-import { Form } from 'antd';
+import { Empty, Form, Radio } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import styled from 'styled-components';
 import { queryModelAccessUserList } from '../../apis';
@@ -11,9 +10,9 @@ type TransferKey = string | number | bigint;
 
 const Label = styled.div`
   font-weight: 500;
-  margin-bottom: 16px;
-  margin-top: 16px;
+  margin-block: 8px 12px;
   font-size: 14px;
+  color: var(--ant-color-text-tertiary);
 `;
 
 interface AccessControlFormProps {
@@ -40,7 +39,8 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
       const res = await queryUsersList(query);
       const options = res.items.map((item) => ({
         title: item.username,
-        key: item.id
+        key: item.id,
+        is_admin: item.is_admin
       }));
       console.log('options', options);
       setTotalPages(res.pagination.totalPage);
@@ -86,7 +86,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
         const keys = res.items.map((item) => item.id);
         setTargetKeys(keys);
         form.setFieldsValue({
-          set_public: res.items.length > 0,
+          set_public: currentData.public,
           users: res.items.map((item) => ({ id: item.id }))
         });
       });
@@ -105,43 +105,56 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
       clearOnDestroy={true}
       scrollToFirstError={true}
       initialValues={{
-        public: true
+        set_public: true
       }}
     >
-      <Form.Item<AccessControlFormData>
-        valuePropName="checked"
-        name="set_public"
-        style={{ marginBottom: 24, paddingLeft: 6 }}
-      >
-        <CheckboxField
-          description="Only authorized users can access"
-          label={'Restricted'}
-        ></CheckboxField>
+      <Label>Access Scope</Label>
+      <Form.Item<AccessControlFormData> name="set_public" noStyle>
+        <Radio.Group
+          style={{ marginBottom: 12 }}
+          options={[
+            { label: 'All users', value: true },
+            { label: 'Selected users', value: false }
+          ]}
+        ></Radio.Group>
       </Form.Item>
-      {setPublic && (
+      {!setPublic && (
         <>
-          <Label>User Select</Label>
-          <Form.Item<AccessControlFormData>
-            name="users"
-            rules={[
-              {
-                required: true,
-                message: 'Please select at least one user'
-              }
-            ]}
-          >
+          <Label>User Selection</Label>
+          <Form.Item<AccessControlFormData> name="users">
             <TransferInner
-              total={100}
               dataSource={userList}
               targetKeys={targetKeys}
-              showSelectAll
               pagination={false}
-              titles={['Available Users', 'Users with Access']}
+              titles={['All Users', 'Selected Users']}
+              locale={{
+                notFoundContent: [
+                  <Empty
+                    key="all"
+                    description="No users found"
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  />,
+                  <Empty
+                    key="selected"
+                    description="No users selected"
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  />
+                ]
+              }}
               showSearch={{
                 placeholder: 'Filter by username'
               }}
-              render={(item) => item.title}
-              selectAllLabels={[]}
+              filterOption={(inputValue, item) =>
+                item.title.toLowerCase().includes(inputValue.toLowerCase())
+              }
+              render={(item) => (
+                <span className="flex-center gap-8">
+                  <span>{item.title}</span>
+                  <span className="text-tertiary">
+                    {item.is_admin ? '(Admin)' : ''}
+                  </span>
+                </span>
+              )}
               onSearch={onSearch}
               onChange={handleOnChange}
             />

src/pages/llmodels/components/access-control-modal/index.tsx

@@ -18,11 +18,10 @@ const AccessControlModal: React.FC<
   };
 
   const handleOnFinish = async (values: AccessControlFormData) => {
-    console.log('onFinish', values);
     try {
       const data = {
-        set_public: !values.set_public,
-        users: values.users || []
+        set_public: values.set_public,
+        users: values.set_public ? [] : values.users || []
       };
       await updateModelAccessUser({
         id: currentData?.id as number,

src/pages/llmodels/components/table-list.tsx

@@ -467,7 +467,7 @@ const Models: React.FC<ModelsProps> = ({
 
       if (val === 'accessControl') {
         setOpenAccessControlModal({
-          title: 'Edit Access Control',
+          title: 'Access Settings',
           action: PageAction.EDIT,
           currentData: row,
           open: true

src/pages/llmodels/config/button-actions.ts

@@ -62,7 +62,7 @@ export const ActionList: ActionItem[] = [
     icon: icons.ApiOutlined
   },
   {
-    label: 'Access Control',
+    label: 'Access Settings',
     key: 'accessControl',
     icon: icons.Private
   },

src/pages/llmodels/config/types.ts

@@ -24,6 +24,7 @@ export interface ListItem {
   local_path?: string;
   created_at: string;
   updated_at: string;
+  public?: boolean;
   gpu_selector?: {
     gpu_ids: string[];
   };