style: allowed models ux

config/routes.ts

@@ -70,7 +70,6 @@ export default [
     name: 'models',
     path: '/models',
     key: 'models',
-    access: 'canSeeAdmin',
     routes: [
       {
         path: '/models',
@@ -103,7 +102,7 @@ export default [
         icon: 'icon-models',
         selectedIcon: 'icon-models-filled',
         defaultIcon: 'icon-models',
-        access: 'canSeeAdmin',
+        access: 'canSeeUser',
         component: './llmodels/user-models'
       },
       {

src/access.ts

@@ -4,8 +4,15 @@ export default (initialState: { currentUser?: Global.UserInfo }) => {
     initialState.currentUser &&
     initialState.currentUser.is_admin
   );
+  const canSeeUser = !!(
+    initialState &&
+    initialState.currentUser &&
+    !initialState.currentUser.is_admin
+  );
+
   return {
     canSeeAdmin,
+    canSeeUser,
     canDelete: true,
     canLogin: true
   };

src/locales/en-US/apikeys.ts

@@ -11,5 +11,6 @@ export default {
   'apikeys.form.expiration.7days': '7 days',
   'apikeys.form.expiration.1month': '1 month',
   'apikeys.form.expiration.6months': '6 months',
-  'apikeys.form.expiration.never': 'No expiration'
+  'apikeys.form.expiration.never': 'No expiration',
+  'apikeys.table.bindModels': 'Allowed Models'
 };

src/locales/ja-JP/apikeys.ts

@@ -11,5 +11,6 @@ export default {
   'apikeys.form.expiration.7days': '7日間',
   'apikeys.form.expiration.1month': '1ヶ月',
   'apikeys.form.expiration.6months': '6ヶ月',
-  'apikeys.form.expiration.never': '無期限'
+  'apikeys.form.expiration.never': '無期限',
+  'apikeys.table.bindModels': '許可されたモデル'
 };

src/locales/ru-RU/apikeys.ts

@@ -11,5 +11,6 @@ export default {
   'apikeys.form.expiration.7days': '7 дней',
   'apikeys.form.expiration.1month': '1 месяц',
   'apikeys.form.expiration.6months': '6 месяцев',
-  'apikeys.form.expiration.never': 'Без срока действия'
+  'apikeys.form.expiration.never': 'Без срока действия',
+  'apikeys.table.bindModels': 'Разрешенные модели'
 };

src/locales/zh-CN/apikeys.ts

@@ -10,5 +10,6 @@ export default {
   'apikeys.form.expiration.7days': '7天',
   'apikeys.form.expiration.1month': '1个月',
   'apikeys.form.expiration.6months': '6个月',
-  'apikeys.form.expiration.never': '永不过期'
+  'apikeys.form.expiration.never': '永不过期',
+  'apikeys.table.bindModels': '绑定模型'
 };

src/pages/_components/transfer.tsx

@@ -1,12 +1,18 @@
-import { Transfer, TransferProps } from 'antd';
+import { MoreOutlined } from '@ant-design/icons';
+import { Pagination, Transfer, TransferProps } from 'antd';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 type TransferKey = string | number | bigint;
 
+const PaginationWrapper = styled.div`
+  padding: 4px 16px;
+`;
+
 const TransferWrap = styled.div`
   .ant-transfer-list {
     width: 100%;
-    height: 300px;
+    height: 360px;
   }
   .ant-transfer-list-content {
     .ant-transfer-list-content-item {
@@ -27,13 +33,48 @@ const TransferWrap = styled.div`
 `;
 
 interface TransferInnerProps extends TransferProps {
+  total?: number;
+  perPage?: number;
+  onPageChange?: (page: number, perPage?: number) => void;
   dataSource?: Array<{ key: TransferKey; title: string }>;
   targetKeys?: TransferKey[];
 }
 const TransferInner: React.FC<TransferInnerProps> = (props) => {
+  const [page, setPage] = useState(1);
+  const { onPageChange, total, perPage = 30 } = props;
+
+  const handleOnPageChange = (page: number, perPage?: number) => {
+    setPage(page);
+    onPageChange?.(page, perPage);
+  };
+
+  const renderFooter = (TransferProps: any, { direction }: any) => {
+    if (direction === 'left' && total && total > perPage!) {
+      return (
+        <PaginationWrapper>
+          <Pagination
+            simple={{ readOnly: true }}
+            size="small"
+            total={total}
+            onChange={handleOnPageChange}
+            pageSize={perPage}
+            current={page}
+            showSizeChanger={false}
+          />
+        </PaginationWrapper>
+      );
+    }
+    return null;
+  };
+
   return (
     <TransferWrap>
-      <Transfer {...props}></Transfer>
+      <Transfer
+        {...props}
+        selectionsIcon={
+          <MoreOutlined style={{ fontSize: 14, marginBottom: 3 }} />
+        }
+      ></Transfer>
     </TransferWrap>
   );
 };

src/pages/api-keys/apis/index.ts

@@ -17,6 +17,13 @@ export async function createApisKey(params: { data: FormData }) {
   });
 }
 
+export async function updateApisKey(id: number, params: { data: FormData }) {
+  return request<ListItem>(`${APIS_KEYS_API}/${id}`, {
+    method: 'PUT',
+    data: params.data
+  });
+}
+
 export async function deleteApisKey(id: number) {
   return request(`${APIS_KEYS_API}/${id}`, {
     method: 'DELETE'

src/pages/api-keys/components/add-apikey-modal/allow-models.tsx

@@ -39,7 +39,9 @@ const AllowModelsForm: React.FC = () => {
         }}
         render={(item) => item.title}
         titles={['Available Models', 'Allowed Models']}
-        showSearch
+        showSearch={{
+          placeholder: 'Filter by model name'
+        }}
         filterOption={(inputValue, item) =>
           item.title.toLowerCase().includes(inputValue.toLowerCase())
         }

src/pages/api-keys/components/add-apikey-modal/form.tsx

@@ -0,0 +1,67 @@
+import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import { expirationOptions } from '../../config';
+import { FormData } from '../../config/types';
+import AllowModelsForm from './allow-models';
+
+const APIKeyForm: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <Form.Item<FormData>
+        name="name"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: intl.formatMessage({ id: 'common.table.name' })
+              }
+            )
+          }
+        ]}
+      >
+        <SealInput.Input
+          label={intl.formatMessage({ id: 'common.table.name' })}
+          required
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="expires_in"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.select' },
+              {
+                name: intl.formatMessage({
+                  id: 'apikeys.form.expiretime'
+                })
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          options={expirationOptions}
+          label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
+          required
+        ></SealSelect>
+      </Form.Item>
+      <AllowModelsForm></AllowModelsForm>
+      <Form.Item<FormData> name="description" rules={[{ required: false }]}>
+        <SealInput.TextArea
+          scaleSize={true}
+          label={intl.formatMessage({ id: 'common.table.description' })}
+        ></SealInput.TextArea>
+      </Form.Item>
+    </>
+  );
+};
+
+export default APIKeyForm;

src/pages/api-keys/components/add-apikey-modal/index.tsx

@@ -2,17 +2,17 @@ import CopyButton from '@/components/copy-button';
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { Button, Form, Tag } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { createApisKey } from '../../apis';
+import { createApisKey, updateApisKey } from '../../apis';
 import { expirationOptions } from '../../config';
 import { FormData, ListItem } from '../../config/types';
 import AllowModelsForm from './allow-models';
+import APIKeyForm from './form';
 
 type AddModalProps = {
   title: string;
@@ -43,6 +43,13 @@ const AddModal: React.FC<AddModalProps> = ({
         expires_in: 1
       });
     }
+    if (action === PageAction.EDIT && currentData && open) {
+      form.setFieldsValue({
+        name: currentData.name,
+        description: currentData.description,
+        allowed_model_names: currentData.allowed_model_names || []
+      });
+    }
   };
 
   useEffect(() => {
@@ -67,16 +74,29 @@ const AddModal: React.FC<AddModalProps> = ({
     return res;
   };
 
+  const createAPIKey = async (data: FormData) => {
+    const params = {
+      ...data,
+      expires_in: getExpireValue(data.expires_in)
+    };
+    const res = await createApisKey({ data: params });
+    setAPIKeyValue(res.value);
+    setShowKey(true);
+  };
+
+  const updateAPIKey = async (data: FormData) => {
+    await updateApisKey(currentData?.id as number, { data });
+    onOk();
+  };
+
   const handleOnOk = async (data: FormData) => {
     try {
       setLoading(true);
-      const params = {
+      if (action === PageAction.CREATE) {
-        ...data,
+        await createAPIKey(data);
-        expires_in: getExpireValue(data.expires_in)
+      } else if (action === PageAction.EDIT && currentData?.id) {
-      };
+        await updateAPIKey(data);
-      const res = await createApisKey({ data: params });
+      }
-      setAPIKeyValue(res.value);
-      setShowKey(true);
       setLoading(false);
     } catch (error) {
       setLoading(false);
@@ -109,7 +129,7 @@ const AddModal: React.FC<AddModalProps> = ({
       closeIcon={false}
       maskClosable={false}
       keyboard={false}
-      width={600}
+      width={700}
       styles={{}}
       footer={
         !showKey ? (
@@ -126,60 +146,9 @@ const AddModal: React.FC<AddModalProps> = ({
       }
     >
       <Form name="addAPIKey" form={form} onFinish={handleOnOk} preserve={false}>
-        {!showKey ? (
+        {action === PageAction.EDIT && <AllowModelsForm></AllowModelsForm>}
-          <>
+        {!showKey && action === PageAction.CREATE && <APIKeyForm></APIKeyForm>}
-            <Form.Item<FormData>
+        {showKey && action === PageAction.CREATE && (
-              name="name"
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage(
-                    { id: 'common.form.rule.input' },
-                    {
-                      name: intl.formatMessage({ id: 'common.table.name' })
-                    }
-                  )
-                }
-              ]}
-            >
-              <SealInput.Input
-                label={intl.formatMessage({ id: 'common.table.name' })}
-                required
-              ></SealInput.Input>
-            </Form.Item>
-            <Form.Item<FormData>
-              name="expires_in"
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage(
-                    { id: 'common.form.rule.select' },
-                    {
-                      name: intl.formatMessage({
-                        id: 'apikeys.form.expiretime'
-                      })
-                    }
-                  )
-                }
-              ]}
-            >
-              <SealSelect
-                options={expirationOptions}
-                label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
-                required
-              ></SealSelect>
-            </Form.Item>
-            <AllowModelsForm></AllowModelsForm>
-            <Form.Item<FormData>
-              name="description"
-              rules={[{ required: false }]}
-            >
-              <SealInput.TextArea
-                label={intl.formatMessage({ id: 'common.table.description' })}
-              ></SealInput.TextArea>
-            </Form.Item>
-          </>
-        ) : (
           <Form.Item>
             <div>
               <Tag

src/pages/api-keys/config/types.ts

@@ -6,6 +6,7 @@ export interface ListItem {
   created_at: string;
   updated_at: string;
   expires_at: string;
+  allowed_model_names: string[];
 }
 
 export interface FormData {

src/pages/api-keys/hooks/use-keys-columns.tsx

@@ -16,7 +16,7 @@ interface ColumnsHookProps {
 
 const actionList: Global.ActionItem[] = [
   {
-    label: 'common.button.edit',
+    label: 'Edit Allowed Models',
     key: 'edit',
     icon: icons.EditOutlined
   },
@@ -60,6 +60,17 @@ const useModelsColumns = ({
           </AutoTooltip>
         )
       },
+      {
+        title: intl.formatMessage({ id: 'apikeys.table.bindModels' }),
+        dataIndex: 'allowed_model_names',
+        key: 'allowed_model_names',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string[], record: ListItem) => (
+          <AutoTooltip ghost>{text?.join(', ')}</AutoTooltip>
+        )
+      },
       {
         title: intl.formatMessage({ id: 'common.table.description' }),
         dataIndex: 'description',

src/pages/api-keys/index.tsx

@@ -58,7 +58,7 @@ const APIKeys: React.FC = () => {
   const handleEditKey = (record: ListItem) => {
     setOpenAddModal({
       open: true,
-      title: 'Edit API Key',
+      title: 'Edit Allowed Models',
       action: PageAction.EDIT,
       currentData: record
     });
@@ -79,7 +79,6 @@ const APIKeys: React.FC = () => {
   };
 
   const handleModalCancel = () => {
-    console.log('handleModalCancel');
     setOpenAddModal({
       open: false,
       title: '',

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

@@ -1,4 +1,3 @@
-import IconFont from '@/components/icon-font';
 import CheckboxField from '@/components/seal-form/checkbox-field';
 import TransferInner from '@/pages/_components/transfer';
 import { queryUsersList } from '@/pages/users/apis';
@@ -33,7 +32,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
   );
   const [queryParams, setQueryParams] = useState<Global.SearchParams>({
     page: 1,
-    perPage: 30
+    perPage: 100
   });
 
   const getUserList = async (query: Global.SearchParams) => {
@@ -62,6 +61,10 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
     form.setFieldsValue({ users });
   };
 
+  const onSearch = (dir: 'left' | 'right', value: string) => {
+    console.log('search:', dir, value);
+  };
+
   useImperativeHandle(ref, () => ({
     submit: () => {
       form.submit();
@@ -116,28 +119,34 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
         ></CheckboxField>
       </Form.Item>
       {setPublic && (
-        <Form.Item<AccessControlFormData>
+        <>
-          name="users"
+          <Label>User Select</Label>
-          rules={[
+          <Form.Item<AccessControlFormData>
-            {
+            name="users"
-              required: true,
+            rules={[
-              message: 'Please select at least one user'
+              {
-            }
+                required: true,
-          ]}
+                message: 'Please select at least one user'
-        >
+              }
-          <TransferInner
+            ]}
-            dataSource={userList}
+          >
-            targetKeys={targetKeys}
+            <TransferInner
-            showSelectAll
+              total={100}
-            showSearch
+              dataSource={userList}
-            pagination={totalPages > 1}
+              targetKeys={targetKeys}
-            titles={['Available Users', 'Users with Access']}
+              showSelectAll
-            render={(item) => item.title}
+              pagination={false}
-            selectAllLabels={[]}
+              titles={['Available Users', 'Users with Access']}
-            selectionsIcon={<IconFont type="icon-down"></IconFont>}
+              showSearch={{
-            onChange={handleOnChange}
+                placeholder: 'Filter by username'
-          />
+              }}
-        </Form.Item>
+              render={(item) => item.title}
+              selectAllLabels={[]}
+              onSearch={onSearch}
+              onChange={handleOnChange}
+            />
+          </Form.Item>
+        </>
       )}
     </Form>
   );

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

@@ -45,7 +45,7 @@ const AccessControlModal: React.FC<
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
-      width={600}
+      width={700}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }