feat(llmodels): use CardRadioGroup for access scope selection

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

@@ -6,7 +6,7 @@ import { getGPUStackPlugin } from '@/plugins';
 import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import {
   AlertBlockInfo,
-  TooltipList,
+  CardRadioGroup,
   Transfer as TransferInner
 } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
@@ -17,8 +17,6 @@ import {
   Empty,
   Flex,
   Form,
-  Radio,
-  RadioChangeEvent,
   Tooltip
 } from 'antd';
 import {
@@ -82,7 +80,8 @@ const Label = styled.div`
   gap: 4px;
   font-weight: 500;
   margin-bottom: 16px;
-  font-size: 14px;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
 `;
 
 interface AccessControlFormProps {
@@ -231,9 +230,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
     }
   };
 
-  const handleOnPolicyChange = async (e: RadioChangeEvent) => {
+  const handleOnPolicyChange = async (policy: string) => {
-    console.log('policy changed:', e.target.value);
-    const policy = e.target.value;
     if (policy === ALLOWED_PRINCIPALS_POLICY) {
       form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
     } else {
@@ -399,72 +396,82 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
             : undefined
       }}
     >
-      <Label>
+      <Label>{intl.formatMessage({ id: 'models.table.accessScope' })}</Label>
-        {intl.formatMessage({ id: 'models.table.accessScope' })}
-        <Tooltip
-          title={
-            <TooltipList
-              list={buildAccessScopeTips(
-                allowedUsersOverride,
-                prependedPolicies
-              )}
-            ></TooltipList>
-          }
-        >
-          <QuestionCircleOutlined />
-        </Tooltip>
-      </Label>
 
-      <Flex
+      <Form.Item<AccessControlFormData>
-        align="center"
+        name="access_policy"
-        justify="space-between"
+        style={{
-        style={{ marginBottom: 16, height: 40 }}
+          marginBottom: 16
+        }}
       >
-        <Form.Item<AccessControlFormData> name="access_policy" noStyle>
+        <CardRadioGroup
-          <Radio.Group
+          onChange={handleOnPolicyChange}
-            onChange={handleOnPolicyChange}
+          options={[
-            options={[
+            ...prependedPolicies.map((p) => ({
-              ...prependedPolicies.map((p) => ({
+              label: intl.formatMessage({ id: p.labelId }),
-                label: intl.formatMessage({ id: p.labelId }),
+              description: intl.formatMessage({ id: p.tipsId ?? p.labelId }),
-                value: p.policyValue
+              value: p.policyValue
-              })),
+            })),
-              {
+            {
-                label: intl.formatMessage({
+              label: intl.formatMessage({
-                  id: 'models.accessSettings.authed'
+                id: 'models.accessSettings.authed'
-                }),
+              }),
-                value: 'authed'
+              description: intl.formatMessage({
-              },
+                id: 'models.accessSettings.authed.tips'
-              allowedUsersOverride
+              }),
-                ? {
+              value: 'authed'
-                    label: intl.formatMessage({
+            },
-                      id: allowedUsersOverride.labelId
+            allowedUsersOverride
-                    }),
+              ? {
-                    value: allowedUsersOverride.policyValue
+                  label: intl.formatMessage({
-                  }
+                    id: allowedUsersOverride.labelId
-                : {
+                  }),
-                    label: intl.formatMessage({
+                  description: intl.formatMessage({
-                      id: 'models.accessSettings.allowedUsers'
+                    id:
-                    }),
+                      allowedUsersOverride.tipsId ??
-                    value: ALLOWED_PRINCIPALS_POLICY
+                      'models.accessSettings.allowedUsers.tips'
-                  },
+                  }),
-              {
+                  value: allowedUsersOverride.policyValue
-                label: intl.formatMessage({
+                }
-                  id: 'models.accessSettings.public'
+              : {
-                }),
+                  label: intl.formatMessage({
-                value: 'public'
+                    id: 'models.accessSettings.allowedUsers'
-              }
+                  }),
-            ]}
+                  description: intl.formatMessage({
-          ></Radio.Group>
+                    id: 'models.accessSettings.allowedUsers.tips'
-        </Form.Item>
+                  }),
-        {allowedUsersOverride?.Action &&
+                  value: ALLOWED_PRINCIPALS_POLICY
-          accessPolicy === overridePolicyValue && (
+                },
-            <allowedUsersOverride.Action
+            {
-              form={form}
+              label: intl.formatMessage({
-              routeId={currentData?.id}
+                id: 'models.accessSettings.public'
-              action={action}
+              }),
-            />
+              description: intl.formatMessage({
-          )}
+                id: 'models.accessSettings.public.desc'
-      </Flex>
+              }),
+              value: 'public'
+            }
+          ]}
+        />
+      </Form.Item>
+      {allowedUsersOverride?.Action && accessPolicy === overridePolicyValue && (
+        <Flex
+          justify="space-between"
+          align="center"
+          style={{ marginBottom: 8 }}
+        >
+          <Label style={{ marginBottom: 0 }}>
+            {intl.formatMessage({
+              id: 'models.accessSettings.grantedPrincipals'
+            })}
+          </Label>
+          <allowedUsersOverride.Action
+            form={form}
+            routeId={currentData?.id}
+            action={action}
+          />
+        </Flex>
+      )}
       {accessPolicy === 'public' && (
         <div style={{ marginBlock: '16px 12px' }}>
           <AlertBlockInfo