Fixed the import-export 'Not null columns' and User Management issue #7884

web/pgadmin/tools/import_export/static/js/import_export.ui.js

@@ -220,13 +220,15 @@ export default class ImportExportSchema extends BaseUISchema {
         id: 'icolumns',
         label: gettext('NOT NULL columns'),
         group: gettext('Columns'),
-        type: 'select',
         deps: ['format', 'is_import'],
-        options: obj.notNullColOptions,
+        type: () => ({
-        optionsReloadBasis: obj.notNullColOptions.length,
+          type: 'select',
-        controlProps: {
+          options: obj.notNullColOptions,
-          multiple: true, allowClear: true, placeholder: gettext('Not null columns...'),
+          optionsReloadBasis: obj.notNullColOptions.length,
-        },
+          controlProps: {
+            multiple: true, allowClear: true, placeholder: gettext('Not null columns...'),
+          },
+        }),
         disabled:function(state){
           return (state?.format != 'csv' || !state?.is_import);
         },

web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx

@@ -31,7 +31,7 @@ const StyledBox = styled(Box)(() => ({
 }));
 
 class UserManagementCollection extends BaseUISchema {
-  constructor(authSources, roleOptions) {
+  constructor() {
     super({
       id: undefined,
       username: undefined,
@@ -46,8 +46,14 @@ class UserManagementCollection extends BaseUISchema {
 
     this.authOnlyInternal = (current_user['auth_sources'].length  == 1 &&
       current_user['auth_sources'].includes(AUTH_METHODS['INTERNAL']));
-    this.authSources = authSources;
+  }
-    this.roleOptions = roleOptions;
+
+  setAuthSources(src) {
+    this.authSources = src;
+  }
+
+  setRoleOptions(src) {
+    this.roleOptions = src;
   }
 
   get idAttribute() {
@@ -113,13 +119,17 @@ class UserManagementCollection extends BaseUISchema {
           return obj.isEditable(state) && state.auth_source != AUTH_METHODS['INTERNAL'];
         }
       }, {
-        id: 'role', label: gettext('Role'), cell: 'select',
+        id: 'role', label: gettext('Role'),
-        options: obj.roleOptions, minWidth: 95, width: 95,
+        cell: () => ({
-        controlProps: {
+          cell: 'select',
-          allowClear: false,
+          options: obj.roleOptions,
-          openOnEnter: false,
+          controlProps: {
-          first_empty: false,
+            allowClear: false,
-        },
+            openOnEnter: false,
+            first_empty: false,
+          },
+        }),
+        minWidth: 95, width: 95,
         editable: (state)=> {
           return obj.isEditable(state);
         }
@@ -238,12 +248,20 @@ class UserManagementCollection extends BaseUISchema {
 }
 
 class UserManagementSchema extends BaseUISchema {
-  constructor(authSources, roleOptions) {
+  constructor() {
     super({refreshBrowserTree: false});
-    this.userManagementCollObj = new UserManagementCollection(authSources, roleOptions);
+    this.userManagementCollObj = new UserManagementCollection();
     this.changeOwnership = false;
   }
 
+  setAuthSources(src) {
+    this.userManagementCollObj.setAuthSources(src);
+  }
+
+  setRoleOptions(src) {
+    this.userManagementCollObj.setRoleOptions(src);
+  }
+
   deleteUser(deleteRow) {
     pgAdmin.Browser.notifier.confirm(
       gettext('Delete user?'),
@@ -317,8 +335,8 @@ function UserManagementDialog({onClose}) {
   const [authSources, setAuthSources] = React.useState([]);
   const [roles, setRoles] = React.useState([]);
   const api = getApiInstance();
-
+  const schema = React.useRef(null);
-  const fetchData = async ()=>{
+  const fetchData = async () => {
     try {
       api.get(url_for('user_management.auth_sources'))
         .then(res=>{
@@ -340,7 +358,7 @@ function UserManagementDialog({onClose}) {
     }
   };
 
-  React.useEffect(()=>{
+  React.useEffect(() => {
     fetchData();
   }, []);
 
@@ -382,28 +400,32 @@ function UserManagementDialog({onClose}) {
     value: m.value,
   }));
 
-  if(authSourcesOptions.length <= 0) {
+  const roleOptions = roles.map((m) => ({
-    return <></>;
-  }
-
-  const roleOptions = roles.map((m)=>({
     label: m.name,
     value: m.id,
   }));
 
+  if (!schema.current)
+    schema.current = new UserManagementSchema();
+
+  if(authSourcesOptions.length <= 0) {
+    return <></>;
+  }
+
   if(roleOptions.length <= 0) {
     return <></>;
   }
 
+  schema.current.setAuthSources(authSourcesOptions);
+  schema.current.setRoleOptions(roleOptions);
+
   const onDialogHelp = () => {
-    window.open(url_for('help.static', { 'filename': 'user_management.html' }), 'pgadmin_help');
+    window.open(
+      url_for('help.static', { 'filename': 'user_management.html' }),
+      'pgadmin_help'
+    );
   };
 
-  const schema = React.useRef(null);
-
-  if (!schema.current)
-    schema.current = new UserManagementSchema(authSourcesOptions, roleOptions);
-
   return <StyledBox><SchemaView
     formType={'dialog'}
     getInitData={()=>{ return new Promise((resolve, reject)=>{