chore(FR-402): unify the require mark style for form items in the webui (#4360)

resolves #3048 (FR-402)

This PR centralizes the `requiredMark="optional"` configuration by moving it from individual Form components to the global ConfigProvider in DefaultProviders. This approach:

1. Adds the form configuration to ConfigProvider in both DefaultProvidersForWebComponent and DefaultProvidersForReactRoot
2. Removes redundant `requiredMark="optional"` props from individual Form components across multiple files
3. Maintains consistent form styling throughout the application

**Checklist:**

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: nowgnuesLee

react/src/components/AutoScalingRuleEditorModal.tsx

@@ -251,7 +251,6 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
       <Form
         ref={formRef}
         layout={'vertical'}
-        requiredMark={'optional'}
         initialValues={
           autoScalingRule
             ? {

react/src/components/Chat/CustomModelForm.tsx

@@ -57,7 +57,6 @@ const CustomModelForm: React.FC<CustomModelFormProps> = ({
         ref={formRef}
         layout="horizontal"
         size="small"
-        requiredMark="optional"
         style={{ flex: 1 }}
         key={endpointUrl}
         initialValues={{

react/src/components/ContainerRegistryEditorModal.tsx

@@ -202,7 +202,6 @@ const ContainerRegistryEditorModal: React.FC<
       <Form
         ref={formRef}
         layout="vertical"
-        requiredMark="optional"
         initialValues={
           containerRegistry
             ? {

react/src/components/DefaultProviders.tsx

@@ -256,6 +256,9 @@ const DefaultProvidersForWebComponent: React.FC<DefaultProvidersProps> = ({
                           : theme.defaultAlgorithm,
                       }}
                       clientPromise={backendaiClientPromise}
+                      form={{
+                        requiredMark: 'optional',
+                      }}
                       anonymousClientFactory={createAnonymousBackendaiClient}
                     >
                       <App {...commonAppProps}>
@@ -356,6 +359,9 @@ export const DefaultProvidersForReactRoot: React.FC<
               csp={{ nonce: globalThis.baiNonce }}
               clientPromise={backendaiClientPromise}
               anonymousClientFactory={createAnonymousBackendaiClient}
+              form={{
+                requiredMark: 'optional',
+              }}
             >
               <App {...commonAppProps}>
                 {/* <StyleProvider container={shadowRoot} cache={cache}> */}

react/src/components/FolderCreateModal.tsx

@@ -49,10 +49,6 @@ const useStyles = createStyles(({ css }) => ({
       align-items: start;
       padding-left: var(--token-paddingSM);
     }
-    .ant-form-item .ant-form-item-label > label {
-      flex-direction: row-reverse !important;
-      gap: var(--token-paddingXS);
-    }
     .ant-form-item-control {
       padding-right: var(--token-paddingSM);
     }

react/src/components/ImportFromHuggingFaceModal.tsx

@@ -250,12 +250,7 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
         destroyOnClose
         {...baiModalProps}
       >
-        <Form
-          ref={formRef}
-          preserve={false}
-          layout="vertical"
-          requiredMark="optional"
-        >
+        <Form ref={formRef} preserve={false} layout="vertical">
           <Form.Item label="Hugging Face URL" required>
             <Space.Compact style={{ width: '100%' }}>
               <Form.Item

react/src/components/ImportNotebook.tsx

@@ -23,7 +23,7 @@ const ImportNotebook: React.FC<FormProps> = (props) => {
   const webuiNavigate = useWebUINavigate();
   useSuspendedBackendaiClient();
   return (
-    <Form ref={formRef} layout="inline" requiredMark="optional" {...props}>
+    <Form ref={formRef} layout="inline" {...props}>
       <Form.Item
         name="url"
         label={t('import.NotebookURL')}

react/src/components/InviteFolderSettingModal.tsx

@@ -166,7 +166,6 @@ const InviteFolderSettingModal: React.FC<InviteFolderSettingModalProps> = ({
         <Form
           ref={inviteFormRef}
           initialValues={{ name: undefined, permission: 'ro' }}
-          requiredMark={false}
         >
           <Descriptions title={t('data.folders.InviteUsers')}>
             <Descriptions.Item>
@@ -202,6 +201,7 @@ const InviteFolderSettingModal: React.FC<InviteFolderSettingModalProps> = ({
                   name="permission"
                   label={t('data.Permission')}
                   style={{ marginBottom: 0 }}
+                  required
                 >
                   <Select
                     options={[

react/src/components/KeypairResourcePolicySettingModal.tsx

@@ -304,7 +304,6 @@ const KeypairResourcePolicySettingModal: React.FC<
         requiredMark={false}
         ref={formRef}
         layout="vertical"
-        // requiredMark="optional"
         initialValues={initialValues}
         preserve={false}
       >

react/src/components/ManageAppsModal.tsx

@@ -205,7 +205,6 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
         layout="vertical"
         autoComplete="off"
         initialValues={{ apps: servicePorts }}
-        requiredMark={false}
       >
         <BAIFlex direction="column">
           <Form.List name="apps">
@@ -247,6 +246,7 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
                         {...field}
                         name={[field.name, 'port']}
                         noStyle
+                        required
                         rules={[
                           {
                             validator: (rules, rawValue) => {