chore: bump @gpustack/core-ui to v1.0.42

package.json

@@ -17,7 +17,7 @@
     "@ant-design/pro-components": "3.1.0-0",
     "@antv/g6": "^5.0.51",
     "@braintree/sanitize-url": "^7.1.1",
-    "@gpustack/core-ui": "^1.0.40",
+    "@gpustack/core-ui": "^1.0.42",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/tasks": "^0.11.6",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^7.1.1
         version: 7.1.2
       '@gpustack/core-ui':
-        specifier: ^1.0.40
-        version: 1.0.40(czdvzceysqw7iv6pct2ucnb23e)
+        specifier: ^1.0.42
+        version: 1.0.42(czdvzceysqw7iv6pct2ucnb23e)
       '@huggingface/gguf':
         specifier: ^0.1.7
         version: 0.1.18
@@ -281,7 +281,7 @@ importers:
         version: 9.1.7
       less-loader:
         specifier: ^12.2.0
-        version: 12.3.2(less@4.6.4)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
+        version: 12.3.2(less@4.1.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14))
       lint-staged:
         specifier: ^15.2.2
         version: 15.5.2
@@ -1481,8 +1481,8 @@ packages:
     resolution: {integrity: sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==, tarball: https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz}
     deprecated: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
 
-  '@gpustack/core-ui@1.0.40':
-    resolution: {integrity: sha512-Ahd5GcKOulaU32gX//jIZJOWEgr2W1s6jS8UtRTsxZ53UPzBoKkfUnwyWkB2WBUSjvk4lntxvoC4kDefKXbd9w==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.40.tgz}
+  '@gpustack/core-ui@1.0.42':
+    resolution: {integrity: sha512-upMClTHU+xAqd8dlx0w1S9XWHlog5g1hcOCulTk2rmMXqgl66QHfqhEFhJnWIGe1xc8tEj6rW3r5Sirif+qswA==, tarball: https://registry.npmjs.org/@gpustack/core-ui/-/core-ui-1.0.42.tgz}
     peerDependencies:
       '@ant-design/icons': ^6.1.0
       '@ant-design/pro-components': 3.1.0-0
@@ -10802,7 +10802,7 @@ snapshots:
 
   '@formatjs/intl-utils@2.3.0': {}
 
-  '@gpustack/core-ui@1.0.40(czdvzceysqw7iv6pct2ucnb23e)':
+  '@gpustack/core-ui@1.0.42(czdvzceysqw7iv6pct2ucnb23e)':
     dependencies:
       '@ant-design/icons': 6.2.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@ant-design/pro-components': 3.1.0-0(antd@6.3.7(date-fns@2.30.0)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -16496,6 +16496,12 @@ snapshots:
       less: 4.1.3
       webpack: 5.106.2(lightningcss@1.22.1)(postcss@8.5.14)
 
+  less-loader@12.3.2(less@4.1.3)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)):
+    dependencies:
+      less: 4.1.3
+    optionalDependencies:
+      webpack: 5.106.2(lightningcss@1.22.1)(postcss@8.5.14)
+
   less-loader@12.3.2(less@4.6.4)(webpack@5.106.2(lightningcss@1.22.1)(postcss@8.5.14)):
     dependencies:
       less: 4.6.4

src/config/theme/light.ts

@@ -51,6 +51,9 @@ export default {
       withDescriptionPadding: '12px 16px',
       withDescriptionIconSize: 18
     },
+    Card: {
+      headerHeight: 50
+    },
     Menu: {
       iconSize: 16,
       iconMarginInlineEnd: 12,

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) => {
-    console.log('policy changed:', e.target.value);
-    const policy = e.target.value;
+  const handleOnPolicyChange = async (policy: string) => {
     if (policy === ALLOWED_PRINCIPALS_POLICY) {
       form.setFieldsValue({ users: formDataCacheRef.current?.users || [] });
     } else {
@@ -399,72 +396,82 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
             : undefined
       }}
     >
-      <Label>
-        {intl.formatMessage({ id: 'models.table.accessScope' })}
-        <Tooltip
-          title={
-            <TooltipList
-              list={buildAccessScopeTips(
-                allowedUsersOverride,
-                prependedPolicies
-              )}
-            ></TooltipList>
-          }
-        >
-          <QuestionCircleOutlined />
-        </Tooltip>
-      </Label>
+      <Label>{intl.formatMessage({ id: 'models.table.accessScope' })}</Label>
 
-      <Flex
-        align="center"
-        justify="space-between"
-        style={{ marginBottom: 16, height: 40 }}
+      <Form.Item<AccessControlFormData>
+        name="access_policy"
+        style={{
+          marginBottom: 16
+        }}
       >
-        <Form.Item<AccessControlFormData> name="access_policy" noStyle>
-          <Radio.Group
-            onChange={handleOnPolicyChange}
-            options={[
-              ...prependedPolicies.map((p) => ({
-                label: intl.formatMessage({ id: p.labelId }),
-                value: p.policyValue
-              })),
-              {
-                label: intl.formatMessage({
-                  id: 'models.accessSettings.authed'
-                }),
-                value: 'authed'
-              },
-              allowedUsersOverride
-                ? {
-                    label: intl.formatMessage({
-                      id: allowedUsersOverride.labelId
-                    }),
-                    value: allowedUsersOverride.policyValue
-                  }
-                : {
-                    label: intl.formatMessage({
-                      id: 'models.accessSettings.allowedUsers'
-                    }),
-                    value: ALLOWED_PRINCIPALS_POLICY
-                  },
-              {
-                label: intl.formatMessage({
-                  id: 'models.accessSettings.public'
-                }),
-                value: 'public'
-              }
-            ]}
-          ></Radio.Group>
-        </Form.Item>
-        {allowedUsersOverride?.Action &&
-          accessPolicy === overridePolicyValue && (
-            <allowedUsersOverride.Action
-              form={form}
-              routeId={currentData?.id}
-              action={action}
-            />
-          )}
-      </Flex>
+        <CardRadioGroup
+          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
+              ? {
+                  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'
+            }
+          ]}
+        />
+      </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