fix: apikey model access

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

@@ -4,10 +4,11 @@ import useAppUtils from '@/hooks/use-app-utils';
 import SelectPanel from '@/pages/_components/select-panel';
 import { queryMyModels } from '@/pages/llmodels/apis';
 import { useIntl } from '@umijs/max';
-import { Divider, Form, Radio } from 'antd';
+import { Checkbox, Divider, Form, Radio } from 'antd';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { ListItem } from '../../config/types';
+import { accessScopeOptions } from '../../config';
+import { FormData, ListItem } from '../../config/types';
 
 const Label = styled.div`
   font-weight: 500;
@@ -29,6 +30,7 @@ const AllowModelsForm: React.FC<{
     form
   ) as string[];
   const allowedType = Form.useWatch('allowed_type', form);
+  const scope = Form.useWatch('scope', form) as string[];
   const [modelList, setModelList] = useState<{ key: string; title: string }[]>(
     []
   );
@@ -56,11 +58,10 @@ 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'] });
-    }
+  };
+
+  const handleOnScopeChange = (checkedValues: any) => {
+    console.log('checkedValues', form.getFieldValue('allowed_type'));
   };
 
   useEffect(() => {
@@ -71,61 +72,82 @@ const AllowModelsForm: React.FC<{
     <div>
       <Divider></Divider>
       <Label>{intl.formatMessage({ id: 'apikeys.access.permissions' })}</Label>
-      <Form.Item
-        name="allowed_type"
-        initialValue="all"
-        style={{ marginBottom: 8 }}
-      >
-        <Radio.Group
-          onChange={handleAllowTypeChange}
-          options={[
-            {
-              label: intl.formatMessage({
-                id: 'apikeys.accessScope.management'
-              }),
-              value: 'management'
-            },
-            {
-              label: intl.formatMessage({ id: 'apikeys.models.all' }),
-              value: 'all'
-            },
-            {
-              label: intl.formatMessage({ id: 'apikeys.models.selected' }),
-              value: 'custom'
-            }
-          ]}
-        ></Radio.Group>
+      <Form.Item<FormData> name="scope" style={{ marginBottom: 8 }}>
+        <Checkbox.Group
+          options={accessScopeOptions.map((item) => ({
+            label: intl.formatMessage({ id: item.label }),
+            value: item.value
+          }))}
+          onChange={handleOnScopeChange}
+        ></Checkbox.Group>
       </Form.Item>
-      <Form.Item
-        name="allowed_model_names"
-        hidden={allowedType === 'all' || allowedType === 'management'}
-        rules={[
-          {
-            required: allowedType === 'custom',
-            message: getRuleMessage(
-              'select',
-              intl.formatMessage({ id: 'models.table.models' })
-            )
-          }
-        ]}
-      >
-        <SelectPanel
-          height={300}
-          searchPlaceholder={intl.formatMessage({ id: 'common.filter.name' })}
-          options={modelList}
-          selectedKeys={allowedModelNames || []}
-          notFoundContent={intl.formatMessage({
-            id: 'apikeys.models.noModelsFound'
-          })}
-          onSelectChange={(selectedKeys) => {
-            form.setFieldsValue({ allowed_model_names: selectedKeys });
-            onValuesChange?.(
-              { allowed_model_names: selectedKeys },
-              form.getFieldsValue()
-            );
+      {scope?.includes('inference') && (
+        <div
+          style={{
+            padding: '12px',
+            backgroundColor: 'var(--ant-color-fill-quaternary)',
+            borderRadius: 4
           }}
-        />
-      </Form.Item>
+        >
+          <Form.Item name="allowed_type" noStyle>
+            <Radio.Group
+              onChange={handleAllowTypeChange}
+              options={[
+                {
+                  label: intl.formatMessage({ id: 'apikeys.models.all' }),
+                  value: 'all'
+                },
+                {
+                  label: intl.formatMessage({ id: 'apikeys.models.selected' }),
+                  value: 'custom'
+                }
+              ]}
+            ></Radio.Group>
+          </Form.Item>
+          {allowedType === 'custom' && (
+            <Form.Item
+              name="allowed_model_names"
+              style={{ marginBottom: 0, marginTop: 12 }}
+              rules={[
+                {
+                  required: allowedType === 'custom',
+                  message: getRuleMessage(
+                    'select',
+                    intl.formatMessage({ id: 'models.table.models' })
+                  )
+                }
+              ]}
+            >
+              <SelectPanel
+                height={300}
+                styles={{
+                  container: {
+                    backgroundColor: 'var(--ant-color-bg-container) !important'
+                  },
+                  header: {
+                    backgroundColor: 'var(--ant-color-bg-container) !important'
+                  }
+                }}
+                searchPlaceholder={intl.formatMessage({
+                  id: 'common.filter.name'
+                })}
+                options={modelList}
+                selectedKeys={allowedModelNames || []}
+                notFoundContent={intl.formatMessage({
+                  id: 'apikeys.models.noModelsFound'
+                })}
+                onSelectChange={(selectedKeys) => {
+                  form.setFieldsValue({ allowed_model_names: selectedKeys });
+                  onValuesChange?.(
+                    { allowed_model_names: selectedKeys },
+                    form.getFieldsValue()
+                  );
+                }}
+              />
+            </Form.Item>
+          )}
+        </div>
+      )}
     </div>
   );
 };