Fix select UI (#5780)

* fix repo api permission value * fix transfer repo dialog select * fix create repo dialog select template or storage * fix data type check and text
haiwen · Nov 21, 2023 · eefbc64 · eefbc64
1 parent 589b2ac
commit eefbc64
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/frontend/src/components/dialog/create-repo-dialog.js b/frontend/src/components/dialog/create-repo-dialog.js
@@ -25,6 +25,14 @@ class CreateRepoDialog extends React.Component {
       library_template: libraryTemplates.length ? libraryTemplates[0] : '',
       isSubmitBtnActive: false,
     };
+    this.templateOptions = [];
+    this.storageOptions = [];
+    if (Array.isArray(libraryTemplates) && libraryTemplates.length) {
+      this.templateOptions = libraryTemplates.map((item) => { return {value: item, label: item}; });
+    }
+    if (Array.isArray(storages) && storages.length) {
+      this.storageOptions = storages.map((item) => { return {value: item.id, label: item.name}; });
+    }
   }
 
   handleRepoNameChange = (e) => {
@@ -191,9 +199,10 @@ class CreateRepoDialog extends React.Component {
               <FormGroup>
                 <Label>{gettext('Template')}</Label>
                 <SeahubSelect
-                  defaultValue={{value: libraryTemplates[0], label: libraryTemplates[0]}}
-                  options={libraryTemplates.map((item, index) => { return {value: item, label: item}; })}
+                  defaultValue={this.templateOptions[0]}
+                  options={this.templateOptions}
                   onChange={this.handlelibraryTemplatesInputChange}
+                  value={this.templateOptions.find(opt => opt.value === this.state.library_template) || null}
                 />
               </FormGroup>
             )}
@@ -202,9 +211,10 @@ class CreateRepoDialog extends React.Component {
               <FormGroup>
                 <Label>{gettext('Storage Backend')}</Label>
                 <SeahubSelect
-                  defaultValue={{value: storages[0].id, label: storages[0].name}}
-                  options={storages.map((item, index) => { return {value: item.id, label: item.name}; })}
+                  defaultValue={this.storageOptions[0]}
+                  options={this.storageOptions}
                   onChange={this.handleStorageInputChange}
+                  value={this.storageOptions.find(opt => opt.value === this.state.storage_id) || null}
                 />
               </FormGroup>
             )}

diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -93,7 +93,7 @@ const propTypes = {
   folderPath: PropTypes.string,
 };
 
-class LibSubFolderSerGroupPermissionDialog extends React.Component {
+class LibSubFolderSetGroupPermissionDialog extends React.Component {
 
   constructor(props) {
     super(props);
@@ -363,6 +363,6 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
   }
 }
 
-LibSubFolderSerGroupPermissionDialog.propTypes = propTypes;
+LibSubFolderSetGroupPermissionDialog.propTypes = propTypes;
 
-export default LibSubFolderSerGroupPermissionDialog;
+export default LibSubFolderSetGroupPermissionDialog;
diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
@@ -87,6 +87,7 @@ class TransferDialog extends React.Component {
               placeholder={gettext('Select a department')}
               options={this.options}
               onChange={this.handleSelectChange}
+              value={this.state.selectedOption}
             />
           }
           {isPro && canTransferToDept &&

diff --git a/frontend/src/components/select-editor/repo-api-token-permission-editor.js b/frontend/src/components/select-editor/repo-api-token-permission-editor.js
@@ -70,6 +70,7 @@ class RepoAPITokenPermissionEditor extends React.Component {
             placeholder={optionTranslation}
             onChange={this.onPermissionChanged}
             captureMenuScroll={false}
+            value={this.options.find(opt => opt.value === currentPermission) || null}
           />
         }
       </div>

diff --git a/frontend/src/components/user-select.js b/frontend/src/components/user-select.js
@@ -14,7 +14,7 @@ const propTypes = {
   onSelectChange: PropTypes.func.isRequired,
   isMulti: PropTypes.bool.isRequired,
   className: PropTypes.string,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
 class UserSelect extends React.Component {