feat(access-control): render principals Add button in host holder slot

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

@@ -15,6 +15,7 @@ import {
   Dropdown,
   DropdownProps,
   Empty,
+  Flex,
   Form,
   Radio,
   RadioChangeEvent,
@@ -80,9 +81,8 @@ const Label = styled.div`
   align-items: center;
   gap: 4px;
   font-weight: 500;
-  margin-block: 8px 12px;
+  margin-bottom: 16px;
   font-size: 14px;
-  color: var(--ant-color-text-tertiary);
 `;
 
 interface AccessControlFormProps {
@@ -107,6 +107,14 @@ type AllowedUsersOverride = {
     routeId?: number;
     action: PageActionType;
   }>;
+  // Optional trigger (e.g. an "Add" button) rendered by the host in its
+  // own layout slot while `Field` renders the body. Same props as Field
+  // so the plugin can gate visibility on action/routeId.
+  Action?: React.ComponentType<{
+    form: any;
+    routeId?: number;
+    action: PageActionType;
+  }>;
 };
 
 // Extra policy entries prepended to the radio list (rendered before
@@ -407,41 +415,56 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
         </Tooltip>
       </Label>
 
-      <Form.Item<AccessControlFormData> name="access_policy" noStyle>
+      <Flex
-        <Radio.Group
+        align="center"
-          onChange={handleOnPolicyChange}
+        justify="space-between"
-          style={{ marginBottom: 12 }}
+        style={{ marginBottom: 16, height: 40 }}
-          options={[
+      >
-            ...prependedPolicies.map((p) => ({
+        <Form.Item<AccessControlFormData> name="access_policy" noStyle>
-              label: intl.formatMessage({ id: p.labelId }),
+          <Radio.Group
-              value: p.policyValue
+            onChange={handleOnPolicyChange}
-            })),
+            options={[
-            {
+              ...prependedPolicies.map((p) => ({
-              label: intl.formatMessage({ id: 'models.accessSettings.authed' }),
+                label: intl.formatMessage({ id: p.labelId }),
-              value: 'authed'
+                value: p.policyValue
-            },
+              })),
-            allowedUsersOverride
+              {
-              ? {
+                label: intl.formatMessage({
-                  label: intl.formatMessage({
+                  id: 'models.accessSettings.authed'
-                    id: allowedUsersOverride.labelId
+                }),
-                  }),
+                value: 'authed'
-                  value: allowedUsersOverride.policyValue
+              },
-                }
+              allowedUsersOverride
-              : {
+                ? {
-                  label: intl.formatMessage({
+                    label: intl.formatMessage({
-                    id: 'models.accessSettings.allowedUsers'
+                      id: allowedUsersOverride.labelId
-                  }),
+                    }),
-                  value: ALLOWED_PRINCIPALS_POLICY
+                    value: allowedUsersOverride.policyValue
-                },
+                  }
-            {
+                : {
-              label: intl.formatMessage({
+                    label: intl.formatMessage({
-                id: 'models.accessSettings.public'
+                      id: 'models.accessSettings.allowedUsers'
-              }),
+                    }),
-              value: 'public'
+                    value: ALLOWED_PRINCIPALS_POLICY
-            }
+                  },
-          ]}
+              {
-        ></Radio.Group>
+                label: intl.formatMessage({
-      </Form.Item>
+                  id: 'models.accessSettings.public'
+                }),
+                value: 'public'
+              }
+            ]}
+          ></Radio.Group>
+        </Form.Item>
+        {allowedUsersOverride?.Action &&
+          accessPolicy === overridePolicyValue && (
+            <allowedUsersOverride.Action
+              form={form}
+              routeId={currentData?.id}
+              action={action}
+            />
+          )}
+      </Flex>
       {accessPolicy === 'public' && (
         <div style={{ marginBlock: '16px 12px' }}>
           <AlertBlockInfo
@@ -449,6 +472,13 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
             message={intl.formatMessage({
               id: 'models.accessSettings.public.tips'
             })}
+            overlayScrollerProps={{
+              styles: {
+                wrapper: {
+                  paddingLeft: 0
+                }
+              }
+            }}
           ></AlertBlockInfo>
         </div>
       )}

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

@@ -130,7 +130,9 @@ const AccessControlModal: React.FC<
             <AlertBlockInfo
               type="warning"
               style={{ marginBottom: 16 }}
-              contentStyle={{ paddingInline: 0 }}
+              contentStyle={{
+                paddingInline: 0
+              }}
               message={intl.formatMessage({
                 id: 'models.button.accessSettings.tips'
               })}