fix: list-input, labels-selector form

src/pages/backends/forms/basic.tsx

@@ -18,11 +18,6 @@ const BasicForm = () => {
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
   const { action, backendSource } = useFormContext();
-  const defaultEnvs = Form.useWatch('default_env', form);
-
-  const handleEnviromentVarsChange = (labels: Record<string, any>) => {
-    form.setFieldValue('default_env', labels);
-  };
 
   useEffect(() => {
     if (action === PageAction.CREATE) {
@@ -93,10 +88,6 @@ const BasicForm = () => {
         rules={[{ required: false }]}
       >
         <ListInput
-          dataList={form.getFieldValue('default_backend_param') || []}
-          onChange={(data: string[]) => {
-            form.setFieldValue('default_backend_param', data);
-          }}
           btnText={intl.formatMessage({ id: 'backend.form.addParameter' })}
           label={intl.formatMessage({
             id: 'backend.form.defaultBackendParameters'
@@ -108,9 +99,7 @@ const BasicForm = () => {
           label={intl.formatMessage({
             id: 'backend.form.defaultEnvironment'
           })}
-          labels={defaultEnvs}
           btnText={intl.formatMessage({ id: 'common.button.vars' })}
-          onChange={handleEnviromentVarsChange}
         ></LabelSelector>
       </Form.Item>
 

src/pages/backends/forms/versions-config.tsx

@@ -142,25 +142,6 @@ const VersionsForm: React.FC<AddModalProps> = ({
     setDefaultVersion(value);
   };
 
-  const handleEnviromentVarsChange = (
-    envs: Record<string, any>,
-    name: number
-  ) => {
-    const versions = form.getFieldValue('version_configs') || [];
-    const updatedVersions = versions.map((version: any, idx: number) => {
-      if (idx === name) {
-        return {
-          ...version,
-          env: {
-            ...envs
-          }
-        };
-      }
-      return version;
-    });
-    form.setFieldValue('version_configs', updatedVersions);
-  };
-
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
 
@@ -407,11 +388,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                       label={intl.formatMessage({
                         id: 'models.form.env'
                       })}
-                      labels={versionConfigs?.[name]?.env}
                       btnText={intl.formatMessage({ id: 'common.button.vars' })}
-                      onChange={(envs) =>
-                        handleEnviromentVarsChange(envs, name)
-                      }
                     ></LabelSelector>
                   </Form.Item>
                 </CollapseContainer>

src/pages/benchmark/forms/labels.tsx

@@ -5,14 +5,8 @@ import _ from 'lodash';
 import { FormData } from '../config/types';
 
 const LabelsForm: React.FC = () => {
-  const form = Form.useFormInstance();
-  const labels = Form.useWatch('labels', form);
   const intl = useIntl();
 
-  const handleLabelsChange = (labels: object) => {
-    form.setFieldValue('labels', labels);
-  };
-
   return (
     <Form.Item<FormData>
       name="labels"
@@ -44,9 +38,7 @@ const LabelsForm: React.FC = () => {
         label={intl.formatMessage({
           id: 'resources.table.labels'
         })}
-        labels={labels}
         btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-        onChange={handleLabelsChange}
       ></LabelSelector>
     </Form.Item>
   );

src/pages/cluster-management/components/pool-form.tsx

@@ -179,7 +179,6 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
   const [form] = Form.useForm();
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
-  const labels = Form.useWatch('labels', form);
   const title = Form.useWatch('name', form);
   const [instanceSpec, setInstanceSpec] = useState<Record<string, any>>({});
 
@@ -481,7 +480,6 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
           >
             <LabelSelector
               label={intl.formatMessage({ id: 'resources.table.labels' })}
-              labels={labels || {}}
               btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
             ></LabelSelector>
           </Form.Item>

src/pages/llmodels/forms/advance-config.tsx

@@ -19,7 +19,6 @@ import BackendParametersList from './backend-parameters-list';
 const AdvanceConfig = () => {
   const intl = useIntl();
   const form = Form.useFormInstance();
-  const EnviromentVars = Form.useWatch('env', form);
   const backend = Form.useWatch('backend', form);
   const modelRouteEnable = Form.useWatch('enable_model_route', form);
   const {
@@ -36,10 +35,6 @@ const AdvanceConfig = () => {
     return flatBackendOptions?.find((item) => item.value === backend);
   }, [backend, flatBackendOptions]);
 
-  const handleEnviromentVarsChange = (labels: Record<string, any>) => {
-    form.setFieldValue('env', labels);
-  };
-
   const onSelectorChange = (field: string, allowEmpty?: boolean) => {
     const workerSelector = form.getFieldValue(field);
     // check if all keys have values
@@ -86,11 +81,9 @@ const AdvanceConfig = () => {
           label={intl.formatMessage({
             id: 'models.form.env'
           })}
-          labels={EnviromentVars}
           btnText={intl.formatMessage({ id: 'common.button.vars' })}
           onBlur={handleEnvSelectorOnBlur}
           onDelete={handleDeleteEnvSelector}
-          onChange={handleEnviromentVarsChange}
         ></LabelSelector>
       </Form.Item>
       {(backend === backendOptionsMap.custom ||

src/pages/llmodels/forms/backend-parameters-list.tsx

@@ -24,10 +24,6 @@ const BackendParametersList: React.FC = () => {
     return _.get(BackendParameters, backend, []);
   }, [backend]);
 
-  const handleBackendParametersChange = (list: string[]) => {
-    form.setFieldValue('backend_parameters', list);
-  };
-
   const handleBackendParametersOnBlur = () => {
     onValuesChange?.({}, form.getFieldsValue());
   };
@@ -51,8 +47,6 @@ const BackendParametersList: React.FC = () => {
         label={intl.formatMessage({
           id: 'models.form.backend_parameters'
         })}
-        dataList={form.getFieldValue('backend_parameters') || []}
-        onChange={handleBackendParametersChange}
         onBlur={handleBackendParametersOnBlur}
         onDelete={handleDeleteBackendParameters}
         options={paramsConfig}

src/pages/llmodels/forms/schedule-type.tsx

@@ -76,7 +76,6 @@ const ScheduleTypeForm: React.FC = () => {
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const scheduleType = Form.useWatch('scheduleType', form);
-  const workerSelector = Form.useWatch('worker_selector', form);
   const GPUsPerReplicas = Form.useWatch(
     ['gpu_selector', 'gpus_per_replica'],
     form
@@ -126,10 +125,6 @@ const ScheduleTypeForm: React.FC = () => {
     }
   };
 
-  const handleWorkerLabelsChange = (labels: Record<string, any>) => {
-    form.setFieldValue('worker_selector', labels);
-  };
-
   const handleSelectorOnBlur = () => {
     onSelectorChange('worker_selector');
   };
@@ -295,8 +290,6 @@ const ScheduleTypeForm: React.FC = () => {
                 label={intl.formatMessage({
                   id: 'resources.form.workerSelector'
                 })}
-                labels={workerSelector}
-                onChange={handleWorkerLabelsChange}
                 onBlur={handleSelectorOnBlur}
                 onDelete={handleDeleteWorkerSelector}
                 description={

src/pages/model-routes/forms/meta-data.tsx

@@ -41,10 +41,6 @@ const MetaData = () => {
   const form = Form.useFormInstance<FormData>();
   const icon = Form.useWatch(['meta', 'icon'], form);
 
-  const handleMetadataChange = (list: string[], field: string) => {
-    form.setFieldValue(['meta', field], list);
-  };
-
   const handleUpdateImageList = (fileList: any[]) => {
     if (fileList.length === 0) {
       return;
@@ -122,24 +118,18 @@ const MetaData = () => {
         <ListInput
           label={intl.formatMessage({ id: 'resources.form.label' })}
           btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-          dataList={[]}
-          onChange={(list: string[]) => handleMetadataChange(list, 'tags')}
         ></ListInput>
       </Form.Item>
       <Form.Item<FormData> name={['meta', 'licenses']} data-field="metadata">
         <ListInput
           label={intl.formatMessage({ id: 'routes.form.metadata.license' })}
           btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-          dataList={[]}
-          onChange={(list: string[]) => handleMetadataChange(list, 'licenses')}
         ></ListInput>
       </Form.Item>
       <Form.Item<FormData> name={['meta', 'languages']} data-field="metadata">
         <ListInput
           label={intl.formatMessage({ id: 'routes.form.metadata.languages' })}
           btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-          dataList={[]}
-          onChange={(list: string[]) => handleMetadataChange(list, 'languages')}
         ></ListInput>
       </Form.Item>
       <Form.Item<FormData> name={['meta', 'icon']} data-field="metadata">

src/pages/resources/components/update-labels.tsx

@@ -28,11 +28,6 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
   const { open, onCancel, data, onOk } = props || {};
   const intl = useIntl();
   const [form] = Form.useForm();
-  const labels = Form.useWatch('labels', form);
-
-  const handleLabelsChange = (labels: object) => {
-    form.setFieldValue('labels', labels);
-  };
 
   const handleSumit = () => {
     form.submit();
@@ -105,9 +100,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
             label={intl.formatMessage({
               id: 'resources.table.labels'
             })}
-            labels={labels}
             btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-            onChange={handleLabelsChange}
           ></LabelSelector>
         </Form.Item>
       </Form>

tsconfig.json

@@ -17,7 +17,11 @@
     "paths": {
       "@/*": ["./src/*"],
       "@@/*": ["./src/.umi/*"],
-      "@@test/*": ["./src/.umi-test/*"]
+      "@@test/*": ["./src/.umi-test/*"],
+      "@gpustack/gpustack-ui-enterprise": [
+        "../gpustack-ui-enterprise/src/index.ts"
+      ],
+      "@gpustack/gpustack-ui-enterprise/*": ["../gpustack-ui-enterprise/src/*"]
     }
   },
   "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"]