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,39 +396,29 @@ 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}
           options={[
             ...prependedPolicies.map((p) => ({
               label: intl.formatMessage({ id: p.labelId }),
+              description: intl.formatMessage({ id: p.tipsId ?? p.labelId }),
               value: p.policyValue
             })),
             {
               label: intl.formatMessage({
                 id: 'models.accessSettings.authed'
               }),
+              description: intl.formatMessage({
+                id: 'models.accessSettings.authed.tips'
+              }),
               value: 'authed'
             },
             allowedUsersOverride
@@ -439,32 +426,52 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
                   label: intl.formatMessage({
                     id: allowedUsersOverride.labelId
                   }),
+                  description: intl.formatMessage({
+                    id:
+                      allowedUsersOverride.tipsId ??
+                      'models.accessSettings.allowedUsers.tips'
+                  }),
                   value: allowedUsersOverride.policyValue
                 }
               : {
                   label: intl.formatMessage({
                     id: 'models.accessSettings.allowedUsers'
                   }),
+                  description: intl.formatMessage({
+                    id: 'models.accessSettings.allowedUsers.tips'
+                  }),
                   value: ALLOWED_PRINCIPALS_POLICY
                 },
             {
               label: intl.formatMessage({
                 id: 'models.accessSettings.public'
               }),
+              description: intl.formatMessage({
+                id: 'models.accessSettings.public.desc'
+              }),
               value: 'public'
             }
           ]}
-          ></Radio.Group>
+        />
       </Form.Item>
-        {allowedUsersOverride?.Action &&
+      {allowedUsersOverride?.Action && accessPolicy === overridePolicyValue && (
-          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