fix: custom apikey

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

@@ -32,13 +32,12 @@ const AllowModelsForm: React.FC<{
   const [modelList, setModelList] = useState<{ key: string; title: string }[]>(
     []
   );
-  const [queryParams, setQueryParams] = useState<Global.SearchParams>({
-    page: -1
-  });
 
   const getModelList = async () => {
     try {
-      const res = await queryMyModels(queryParams);
+      const res = await queryMyModels({
+        page: -1
+      });
       const options = res.items.map((item) => item.name);
       if (action === PageAction.EDIT && currentData) {
         const list = new Set([
@@ -57,6 +56,11 @@ const AllowModelsForm: React.FC<{
   const handleAllowTypeChange = (e: any) => {
     const value = e.target.value;
     onValuesChange?.({ allowed_type: value }, form.getFieldsValue());
+    if (value === 'management') {
+      form.setFieldsValue({ scope: ['management'] });
+    } else {
+      form.setFieldsValue({ scope: ['inference'] });
+    }
   };
 
   useEffect(() => {
@@ -66,7 +70,7 @@ const AllowModelsForm: React.FC<{
   return (
     <div>
       <Divider></Divider>
-      <Label>{intl.formatMessage({ id: 'apikeys.table.bindModels' })}</Label>
+      <Label>{intl.formatMessage({ id: 'apikeys.access.permissions' })}</Label>
       <Form.Item
         name="allowed_type"
         initialValue="all"
@@ -75,6 +79,12 @@ const AllowModelsForm: React.FC<{
         <Radio.Group
           onChange={handleAllowTypeChange}
           options={[
+            {
+              label: intl.formatMessage({
+                id: 'apikeys.accessScope.management'
+              }),
+              value: 'management'
+            },
             {
               label: intl.formatMessage({ id: 'apikeys.models.all' }),
               value: 'all'
@@ -88,7 +98,7 @@ const AllowModelsForm: React.FC<{
       </Form.Item>
       <Form.Item
         name="allowed_model_names"
-        hidden={allowedType === 'all'}
+        hidden={allowedType === 'all' || allowedType === 'management'}
         rules={[
           {
             required: allowedType === 'custom',

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

@@ -16,17 +16,7 @@ const APIKeyForm: React.FC<{
   onValuesChange?: (changedValues: any, allValues: any) => void;
 }> = ({ action, currentData, onValuesChange }) => {
   const intl = useIntl();
-
-  const optionRender = (option: any) => {
-    return (
-      <span className="flex-center gap-4">
-        {option.label}
-        {option.data.description && (
-          <span className="text-tertiary">[{option.data.description}]</span>
-        )}
-      </span>
-    );
-  };
+  const keyType = Form.useWatch('key_type') as FormData['key_type'];
 
   return (
     <>
@@ -51,28 +41,7 @@ const APIKeyForm: React.FC<{
           required
         ></SealInput.Input>
       </Form.Item>
-      {action === PageAction.CREATE && (
-        <Form.Item<FormData> name="custom">
-          <Password
-            trim
-            autoComplete="new-password"
-            label={intl.formatMessage({ id: 'playground.params.custom' })}
-          ></Password>
-        </Form.Item>
-      )}
-      <Form.Item<FormData>
-        name="scope"
-        normalize={(value) => (value ? [value] : [])}
-        getValueProps={(value) => ({
-          value: Array.isArray(value) ? value[0] : value
-        })}
-      >
-        <SealSelect
-          optionRender={optionRender}
-          options={accessScopeOptions}
-          label={intl.formatMessage({ id: 'models.table.accessScope' })}
-        ></SealSelect>
-      </Form.Item>
+
       <Form.Item<FormData>
         name="expires_in"
         rules={[
@@ -102,6 +71,63 @@ const APIKeyForm: React.FC<{
           label={intl.formatMessage({ id: 'common.table.description' })}
         ></SealInput.TextArea>
       </Form.Item>
+      {action === PageAction.CREATE && (
+        <>
+          <Form.Item<FormData> name="key_type" initialValue="auto">
+            <SealSelect
+              options={[
+                {
+                  label: intl.formatMessage({ id: 'apikeys.type.auto' }),
+                  value: 'auto'
+                },
+                {
+                  label: intl.formatMessage({ id: 'apikeys.type.custom' }),
+                  value: 'custom'
+                }
+              ]}
+              label={intl.formatMessage({ id: 'common.table.type' })}
+            ></SealSelect>
+          </Form.Item>
+          {keyType === 'custom' && (
+            <Form.Item<FormData>
+              name="custom"
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage(
+                    { id: 'common.form.rule.input' },
+                    {
+                      name: intl.formatMessage({
+                        id: 'apikeys.table.key'
+                      })
+                    }
+                  )
+                }
+              ]}
+            >
+              <Password
+                trim
+                required
+                autoComplete="new-password"
+                label={intl.formatMessage({ id: 'apikeys.table.key' })}
+              ></Password>
+            </Form.Item>
+          )}
+        </>
+      )}
+      <Form.Item<FormData>
+        name="scope"
+        hidden
+        normalize={(value) => (value ? [value] : [])}
+        getValueProps={(value) => ({
+          value: Array.isArray(value) ? value[0] : value
+        })}
+      >
+        <SealSelect
+          options={accessScopeOptions}
+          label={intl.formatMessage({ id: 'models.table.accessScope' })}
+        ></SealSelect>
+      </Form.Item>
       <AllowModelsForm
         currentData={currentData}
         action={action}

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

@@ -113,12 +113,12 @@ const AddModal: React.FC<AddModalProps> = ({
 
   const handleOnOk = async (formdata: FormData) => {
     try {
-      console.log('formdata=========', formdata);
       setLoading(true);
       const data = {
         ..._.omit(formdata, ['allowed_type']),
         allowed_model_names:
-          formdata.allowed_type === 'all'
+          formdata.allowed_type === 'all' ||
+          formdata.allowed_type === 'management'
             ? []
             : formdata.allowed_model_names || []
       };
@@ -183,9 +183,12 @@ const AddModal: React.FC<AddModalProps> = ({
       form.setFieldsValue({
         name: currentData.name,
         description: currentData.description,
+        scope: currentData.scope,
         allowed_type: currentData.allowed_model_names?.length
           ? 'custom'
-          : 'all',
+          : currentData.scope?.includes('management')
+            ? 'management'
+            : 'all',
         expires_in: parseExpireValue(currentData as ListItem),
         allowed_model_names: currentData.allowed_model_names || []
       });
@@ -269,7 +272,7 @@ const AddModal: React.FC<AddModalProps> = ({
           onFinish={handleOnOk}
           preserve={false}
           initialValues={{
-            scope: ['*']
+            scope: ['inference']
           }}
         >
           {!showKey && (