feat(FR-1727): customizing optional text in form (#4712)

resolves #4711 (FR-1727)

This PR enhances the form field labeling by explicitly marking optional fields with "(optional)" text instead of using the default Ant Design approach. The changes include:

1. Updated the `requiredMark` configuration in `BAIConfigProvider` to display "(optional)" text for non-required fields
2. Added a new translation key "Optional" across all language files
3. Improved the layout of the Resource Preset Setting form by:
   - Using vertical layout for better readability
   - Adding consistent styling for input fields
   - Removing unnecessary Row/Col structure

These changes make it clearer to users which fields are optional vs. required in forms throughout the application.

![CleanShot 2025-11-26 at 12.50.59@2x.png](https://app.graphite.com/user-attachments/assets/4d77b838-bdcd-4eac-9680-9af3e524b7d5.png)

**Checklist:** (if applicable)

- [ ] 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/DefaultProviders.tsx

@@ -15,7 +15,7 @@ import { StyleProvider, createCache } from '@ant-design/cssinjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSessionStorageState, useUpdateEffect } from 'ahooks';
 import { App, AppProps, theme, Typography } from 'antd';
-import { BAIConfigProvider } from 'backend.ai-ui';
+import { BAIConfigProvider, BAIText } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import 'dayjs/locale/de';
 import 'dayjs/locale/el';
@@ -208,6 +208,8 @@ const DefaultProvidersForWebComponent: React.FC<DefaultProvidersProps> = ({
 }) => {
   const cache = useMemo(() => createCache(), []);
   const [lang] = useCurrentLanguage();
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
 
   const [userCustomThemeConfig] = useBAISettingUserState('custom_theme_config');
   const [isThemePreviewMode] = useSessionStorageState('isThemePreviewMode', {
@@ -287,7 +289,22 @@ const DefaultProvidersForWebComponent: React.FC<DefaultProvidersProps> = ({
                       }}
                       clientPromise={backendaiClientPromise}
                       form={{
-                        requiredMark: 'optional',
+                        requiredMark: (label, { required }) => (
+                          <>
+                            {label}
+                            {!required && (
+                              <BAIText
+                                type="secondary"
+                                style={{
+                                  marginLeft: token.marginXXS,
+                                  wordBreak: 'keep-all',
+                                }}
+                              >
+                                {`(${t('general.Optional')})`}
+                              </BAIText>
+                            )}
+                          </>
+                        ),
                       }}
                       anonymousClientFactory={createAnonymousBackendaiClient}
                     >
@@ -355,6 +372,8 @@ export const DefaultProvidersForReactRoot: React.FC<
   Partial<DefaultProvidersProps>
 > = ({ children }) => {
   const [lang] = useCurrentLanguage();
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
   const { isDarkMode } = useThemeMode();
 
   const [userCustomThemeConfig] = useBAISettingUserState('custom_theme_config');
@@ -408,7 +427,22 @@ export const DefaultProvidersForReactRoot: React.FC<
               clientPromise={backendaiClientPromise}
               anonymousClientFactory={createAnonymousBackendaiClient}
               form={{
-                requiredMark: 'optional',
+                requiredMark: (label, { required }) => (
+                  <>
+                    {label}
+                    {!required && (
+                      <BAIText
+                        type="secondary"
+                        style={{
+                          marginLeft: token.marginXXS,
+                          wordBreak: 'keep-all',
+                        }}
+                      >
+                        {`(${t('general.Optional')})`}
+                      </BAIText>
+                    )}
+                  </>
+                ),
               }}
             >
               <QueryParamProvider adapter={ReactRouter6Adapter}>

react/src/components/ResourcePresetSettingModal.tsx

@@ -14,7 +14,7 @@ import { useResourceSlots, useResourceSlotsDetails } from '../hooks/backendai';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import DynamicUnitInputNumber from './DynamicUnitInputNumber';
 import ResourceGroupSelect from './ResourceGroupSelect';
-import { App, Col, Form, FormInstance, Input, InputNumber, Row } from 'antd';
+import { App, Form, FormInstance, Input, InputNumber } from 'antd';
 import { BAIModal, BAIModalProps } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { Fragment, useRef } from 'react';
@@ -295,104 +295,96 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
             />
           </Form.Item>
         )}
-        <Form.Item label={t('resourcePreset.ResourcePreset')} required>
-          <Row gutter={16}>
-            {_.map(
-              _.chunk(_.keys(resourceSlots), 2),
-              (resourceSlotKeys, index) => (
-                <Fragment key={index}>
-                  {_.map(resourceSlotKeys, (resourceSlotKey) => (
-                    <Col
-                      span={12}
-                      key={resourceSlotKey}
-                      style={{ alignSelf: 'end' }}
-                    >
-                      <Form.Item
-                        label={
+        <Form.Item
+          label={t('resourcePreset.ResourcePreset')}
+          required
+          layout="vertical"
+        >
+          {_.map(
+            _.chunk(_.keys(resourceSlots), 2),
+            (resourceSlotKeys, index) => (
+              <Fragment key={index}>
+                {_.map(resourceSlotKeys, (resourceSlotKey) => (
+                  <Form.Item
+                    label={
+                      _.get(mergedResourceSlots, resourceSlotKey)
+                        ?.description || resourceSlotKey
+                    }
+                    name={['resource_slots', resourceSlotKey]}
+                    rules={[
+                      _.includes(['cpu', 'mem'], resourceSlotKey)
+                        ? {
+                            required: true,
+                            message: t('data.explorer.ValueRequired'),
+                          }
+                        : {},
+                      {
+                        validator(__, value) {
+                          if (
+                            value &&
+                            _.includes(resourceSlotKey, 'mem') &&
+                            // @ts-ignore
+                            convertToBinaryUnit(value, 'p').number >
+                              // @ts-ignore
+                              convertToBinaryUnit('300p', 'p').number
+                          ) {
+                            return Promise.reject(
+                              new Error(
+                                'Memory size should be less than 300 PiB',
+                              ),
+                            );
+                          }
+                          return Promise.resolve();
+                        },
+                      },
+                    ]}
+                  >
+                    {_.includes(resourceSlotKey, 'mem') ? (
+                      <DynamicUnitInputNumber style={{ width: '100%' }} />
+                    ) : (
+                      <InputNumber
+                        stringMode
+                        min={resourceSlotKey === 'cpu' ? 1 : 0}
+                        step={_.includes(resourceSlotKey, '.shares') ? 0.1 : 1}
+                        addonAfter={
                           _.get(mergedResourceSlots, resourceSlotKey)
-                            ?.description || resourceSlotKey
+                            ?.display_unit
                         }
-                        name={['resource_slots', resourceSlotKey]}
-                        rules={[
-                          _.includes(['cpu', 'mem'], resourceSlotKey)
-                            ? {
-                                required: true,
-                                message: t('data.explorer.ValueRequired'),
-                              }
-                            : {},
-                          {
-                            validator(__, value) {
-                              if (
-                                value &&
-                                _.includes(resourceSlotKey, 'mem') &&
-                                // @ts-ignore
-                                convertToBinaryUnit(value, 'p').number >
-                                  // @ts-ignore
-                                  convertToBinaryUnit('300p', 'p').number
-                              ) {
-                                return Promise.reject(
-                                  new Error(
-                                    'Memory size should be less than 300 PiB',
-                                  ),
-                                );
-                              }
-                              return Promise.resolve();
-                            },
-                          },
-                        ]}
-                      >
-                        {_.includes(resourceSlotKey, 'mem') ? (
-                          <DynamicUnitInputNumber />
-                        ) : (
-                          <InputNumber
-                            stringMode
-                            min={resourceSlotKey === 'cpu' ? 1 : 0}
-                            step={
-                              _.includes(resourceSlotKey, '.shares') ? 0.1 : 1
-                            }
-                            addonAfter={
-                              _.get(mergedResourceSlots, resourceSlotKey)
-                                ?.display_unit
-                            }
-                            style={{ width: '100%' }}
-                          />
-                        )}
-                      </Form.Item>
-                    </Col>
-                  ))}
-                </Fragment>
-              ),
-            )}
-            <Col span={12} style={{ alignSelf: 'end' }}>
-              <Form.Item
-                label={t('resourcePreset.SharedMemory')}
-                name="shared_memory"
-                dependencies={[['resource_slots', 'mem']]}
-                rules={[
-                  ({ getFieldValue }) => ({
-                    validator(__, value) {
-                      if (
-                        value &&
-                        getFieldValue('resource_slots')?.mem &&
-                        (convertToBinaryUnit(
-                          getFieldValue('resource_slots')?.mem,
-                          '',
-                        )?.number ?? 0) <
-                          (convertToBinaryUnit(value, '')?.number ?? 0)
-                      ) {
-                        return Promise.reject(
-                          t('resourcePreset.MemoryShouldBeLargerThanSHMEM'),
-                        );
-                      }
-                      return Promise.resolve();
-                    },
-                  }),
-                ]}
-              >
-                <DynamicUnitInputNumber max="7.999p" />
-              </Form.Item>
-            </Col>
-          </Row>
+                        style={{ width: '100%' }}
+                      />
+                    )}
+                  </Form.Item>
+                ))}
+              </Fragment>
+            ),
+          )}
+          <Form.Item
+            label={t('resourcePreset.SharedMemory')}
+            name="shared_memory"
+            dependencies={[['resource_slots', 'mem']]}
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(__, value) {
+                  if (
+                    value &&
+                    getFieldValue('resource_slots')?.mem &&
+                    (convertToBinaryUnit(
+                      getFieldValue('resource_slots')?.mem,
+                      '',
+                    )?.number ?? 0) <
+                      (convertToBinaryUnit(value, '')?.number ?? 0)
+                  ) {
+                    return Promise.reject(
+                      t('resourcePreset.MemoryShouldBeLargerThanSHMEM'),
+                    );
+                  }
+                  return Promise.resolve();
+                },
+              }),
+            ]}
+          >
+            <DynamicUnitInputNumber max="7.999p" style={{ width: '100%' }} />
+          </Form.Item>
         </Form.Item>
       </Form>
     </BAIModal>

resources/i18n/de.json

@@ -706,6 +706,7 @@
     "NavigateToDetailPage": "Zur Detailseite gehen",
     "NewPassword": "Neues Kennwort",
     "None": "Keine",
+    "Optional": "Optional",
     "Password": "Passwort",
     "RemainingLoginSessionTime": "Zeit bis zur automatischen Abmeldung",
     "ResourceGroup": "Ressourcengruppe",

resources/i18n/el.json

@@ -703,6 +703,7 @@
     "NavigateToDetailPage": "Μεταβείτε στη σελίδα λεπτομερειών",
     "NewPassword": "νέος κωδικός πρόσβασης",
     "None": "Κανένα",
+    "Optional": "Προαιρετικό",
     "Password": "Κωδικός πρόσβασης",
     "RemainingLoginSessionTime": "Χρόνος μέχρι την αυτόματη αποσύνδεση",
     "ResourceGroup": "Ομάδα πόρων",

resources/i18n/en.json

@@ -711,6 +711,7 @@
     "NavigateToDetailPage": "Go to the details page",
     "NewPassword": "New Password",
     "None": "None",
+    "Optional": "optional",
     "Password": "Password",
     "RemainingLoginSessionTime": "Time until auto logout",
     "ResourceGroup": "Resource Group",

resources/i18n/es.json

@@ -706,6 +706,7 @@
     "NavigateToDetailPage": "Ir a la página de detalles",
     "NewPassword": "Nueva contraseña",
     "None": "Ninguno",
+    "Optional": "opcional",
     "Password": "Contraseña",
     "RemainingLoginSessionTime": "Tiempo hasta el cierre de sesión automático",
     "ResourceGroup": "Grupo de recursos",

resources/i18n/fi.json

@@ -706,6 +706,7 @@
     "NavigateToDetailPage": "Siirry yksityiskohtien sivulle",
     "NewPassword": "Uusi salasana",
     "None": "Ei ole",
+    "Optional": "valinnainen",
     "Password": "Salasana",
     "RemainingLoginSessionTime": "Aika automaattiseen uloskirjautumiseen asti",
     "ResourceGroup": "Resurssiryhmä",

resources/i18n/fr.json

@@ -706,6 +706,7 @@
     "NavigateToDetailPage": "Aller à la page de détails",
     "NewPassword": "nouveau mot de passe",
     "None": "Aucun",
+    "Optional": "facultatif",
     "Password": "Mot de passe",
     "RemainingLoginSessionTime": "Délai avant déconnexion automatique",
     "ResourceGroup": "Groupe de ressources",

resources/i18n/id.json

@@ -705,6 +705,7 @@
     "NavigateToDetailPage": "Buka halaman detail",
     "NewPassword": "Kata Sandi Baru",
     "None": "Tidak ada",
+    "Optional": "opsional",
     "Password": "Kata sandi",
     "RemainingLoginSessionTime": "Waktu Hingga Keluar Otomatis",
     "ResourceGroup": "Grup Sumber Daya",

resources/i18n/it.json

@@ -705,6 +705,7 @@
     "NavigateToDetailPage": "Vai alla pagina dei dettagli",
     "NewPassword": "nuova password",
     "None": "Nessuno",
+    "Optional": "opzionale",
     "Password": "Parola d'ordine",
     "RemainingLoginSessionTime": "Tempo fino alla disconnessione automatica",
     "ResourceGroup": "Gruppo di risorse",