fix: Update user create form style

1. Update style in user create form
2. Refactor pathname check in list page
3. Fix project role when remove project in user create form && project manage user form
4. Add loading style to Transfer component

Change-Id: I6eddf27a096aa35236430595d8329782ae5b6ed1

src/components/FormItem/Transfer/index.jsx

@@ -23,6 +23,7 @@ const TableTransfer = ({
   leftColumns,
   rightColumns,
   pageSize,
+  loading,
   ...restProps
 }) => (
   <Transfer {...restProps} showSelectAll={false}>
@@ -60,6 +61,7 @@ const TableTransfer = ({
 
       return (
         <Table
+          loading={loading}
           rowSelection={rowSelection}
           columns={columns}
           dataSource={filteredItems}
@@ -91,6 +93,7 @@ export default class Index extends Component {
     // eslint-disable-next-line react/no-unused-prop-types
     value: PropTypes.array,
     pageSize: PropTypes.number,
+    loading: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -101,6 +104,7 @@ export default class Index extends Component {
     onChange: null,
     value: [],
     pageSize: 5,
+    loading: false,
   };
 
   constructor(props) {
@@ -149,6 +153,7 @@ export default class Index extends Component {
       filterOption,
       titles,
       pageSize,
+      loading,
     } = this.props;
     const { targetKeys } = this.state;
     return (
@@ -164,6 +169,7 @@ export default class Index extends Component {
           filterOption={filterOption}
           leftColumns={leftTableColumns}
           rightColumns={rightTableColumns}
+          loading={loading}
         />
       </>
     );

src/containers/List/index.jsx

@@ -136,6 +136,11 @@ export default class BaseList extends React.Component {
     return '';
   }
 
+  get path() {
+    const { location: { pathname = '' } = {} } = this.props;
+    return pathname || '';
+  }
+
   get inDetailPage() {
     const { detail } = this.props;
     return !!detail;

src/locales/en.json

@@ -1348,10 +1348,10 @@
   "Manage User Group": "Manage User Group",
   "Manage host": "Manage host",
   "Manage user": "Manage user",
+  "Manage user group": "Manage user group",
   "Manageable": "Manageable",
   "Management": "Management",
   "Management Reason": "Management Reason",
-  "Manager user group": "Manager user group",
   "Manu": "Manu",
   "Manual backup": "Manual backup",
   "Manual input": "Manual input",

src/locales/zh.json

@@ -975,7 +975,7 @@
   "Get {name} error.": "获取{name}失败。",
   "Ghana": "加纳",
   "Gibraltar": "直布罗陀",
-  "Gigabytes (GiB)": "",
+  "Gigabytes (GiB)": "容量 (GiB)",
   "Given IP": "指定IP",
   "Glance": "",
   "Global Setting": "平台配置",
@@ -1099,7 +1099,7 @@
   "Image ID": "镜像ID",
   "Image Info": "镜像信息",
   "Image Name": "镜像名称",
-  "Image Pending Upload": "",
+  "Image Pending Upload": "镜像待上传",
   "Image Pull Policy": "镜像拉取策略",
   "Image Size": "镜像大小",
   "Image Snapshot Pending": "镜像快照等待上传",
@@ -1348,10 +1348,10 @@
   "Manage User Group": "管理用户组",
   "Manage host": "管理主机",
   "Manage user": "管理用户",
+  "Manage user group": "管理用户组",
   "Manageable": "可管理",
   "Management": "维护",
   "Management Reason": "维护原因",
-  "Manager user group": "管理用户组",
   "Manu": "手动",
   "Manual backup": "手动备份",
   "Manual input": "手动输入",
@@ -1777,7 +1777,7 @@
   "Provisioning Status": "配置状态",
   "Public": "公有",
   "Public Access": "公开访问",
-  "Public Address": "",
+  "Public Address": "公共地址",
   "Public Image": "公有镜像",
   "Public Key": "公钥",
   "Published In": "",

src/pages/compute/containers/Instance/index.jsx

@@ -55,30 +55,21 @@ export class Instance extends Base {
     if (!this.inDetailPage) {
       return false;
     }
-    const {
+    return this.path.includes('server-group');
-      match: { path },
-    } = this.props;
-    return path.indexOf('server-group') >= 0;
   }
 
   get inHostDetailPage() {
     if (!this.inDetailPage) {
       return false;
     }
-    const {
+    return this.path.includes('hypervisors');
-      match: { path },
-    } = this.props;
-    return path.indexOf('hypervisors') >= 0;
   }
 
   get inFlavorDetailPage() {
     if (!this.inDetailPage) {
       return false;
     }
-    const {
+    return this.path.includes('flavor');
-      match: { path },
-    } = this.props;
-    return path.indexOf('flavor') >= 0;
   }
 
   get isFilterByBackend() {

src/pages/identity/containers/Project/actions/ManageUser.jsx

@@ -24,7 +24,7 @@ import {
   transferFilterOption,
 } from 'resources/keystone/domain';
 
-export class ManagerUser extends ModalAction {
+export class ManageUser extends ModalAction {
   static id = 'management-user';
 
   static title = t('Manage User');
@@ -148,7 +148,7 @@ export class ManagerUser extends ModalAction {
     if (value.length && option.length) {
       userRoles[userId] = value;
     } else {
-      userRoles[userId] = {};
+      userRoles[userId] = [];
     }
     this.setState({ userRoles });
   };
@@ -203,6 +203,7 @@ export class ManagerUser extends ModalAction {
         onChange: this.onChangeUser,
         filterOption: transferFilterOption,
         wrapperCol: this.wrapperCol,
+        loading: this.userStore.list.isLoading,
       },
     ];
   }
@@ -237,4 +238,4 @@ export class ManagerUser extends ModalAction {
   };
 }
 
-export default inject('rootStore')(observer(ManagerUser));
+export default inject('rootStore')(observer(ManageUser));

src/pages/identity/containers/Project/actions/ManageUserGroup.jsx

@@ -24,21 +24,21 @@ import {
   transferFilterOption,
 } from 'resources/keystone/domain';
 
-export class ManageGroupGroup extends ModalAction {
+export class ManageUserGroup extends ModalAction {
   static id = 'manage-group-group';
 
   static title = t('Manage User Group');
 
   async init() {
     this.state.groupRoles = this.getInitRoleMap();
-    this.groupGroupStore = new GroupStore();
+    this.userGroupStore = new GroupStore();
     this.store = globalRoleStore;
     this.getRoleList();
     this.getGroupGroup();
   }
 
   get name() {
-    return t('Manager user group');
+    return t('Manage user group');
   }
 
   getInitRoleMap() {
@@ -50,7 +50,7 @@ export class ManageGroupGroup extends ModalAction {
   }
 
   getGroupGroup() {
-    this.groupGroupStore.fetchList();
+    this.userGroupStore.fetchList();
   }
 
   getRoleList() {
@@ -80,7 +80,7 @@ export class ManageGroupGroup extends ModalAction {
   }
 
   get groupList() {
-    return (this.groupGroupStore.list.data || []).map((it) => ({
+    return (this.userGroupStore.list.data || []).map((it) => ({
       ...it,
       key: it.id,
     }));
@@ -187,6 +187,7 @@ export class ManageGroupGroup extends ModalAction {
         oriTargetKeys: groups ? Object.keys(groups) : [],
         filterOption: transferFilterOption,
         wrapperCol: this.wrapperCol,
+        loading: this.userGroupStore.list.isLoading,
       },
     ];
   }
@@ -221,4 +222,4 @@ export class ManageGroupGroup extends ModalAction {
   };
 }
 
-export default inject('rootStore')(observer(ManageGroupGroup));
+export default inject('rootStore')(observer(ManageUserGroup));

src/pages/identity/containers/User/actions/Create.jsx

@@ -155,7 +155,7 @@ export class Create extends FormAction {
     if (value.length && option.length) {
       projectRoles[projectId] = value;
     } else {
-      projectRoles[projectId] = {};
+      projectRoles[projectId] = [];
     }
     this.setState({ projectRoles });
   };
@@ -225,14 +225,22 @@ export class Create extends FormAction {
   get formItems() {
     const { more } = this.state;
     const labelCol = {
-      xs: { span: 5 },
+      xs: { span: 4 },
-      sm: { span: 6 },
+      sm: { span: 5 },
+    };
+    const wrapperCol = {
+      xs: { span: 16 },
+      sm: { span: 15 },
+    };
+    const cols = {
+      labelCol,
+      wrapperCol,
+      colNum: 2,
     };
     const domainFormItem = getDomainFormItem(this);
     const currentDomainFormItem = {
       ...domainFormItem,
-      labelCol,
+      ...cols,
-      colNum: 2,
     };
     return [
       {
@@ -242,8 +250,7 @@ export class Create extends FormAction {
         validator: this.checkName,
         extra: t('User name can not be duplicated'),
         required: true,
-        labelCol,
+        ...cols,
-        colNum: 2,
         maxLength: 30,
       },
       {
@@ -252,8 +259,7 @@ export class Create extends FormAction {
         type: 'input',
         required: true,
         validator: emailValidate,
-        labelCol,
+        ...cols,
-        colNum: 2,
       },
       {
         name: 'password',
@@ -261,8 +267,7 @@ export class Create extends FormAction {
         type: 'input-password',
         required: true,
         otherRule: getPasswordOtherRule('password'),
-        labelCol,
+        ...cols,
-        colNum: 2,
       },
       {
         name: 'phone',
@@ -270,8 +275,7 @@ export class Create extends FormAction {
         type: 'phone',
         required: true,
         validator: phoneNumberValidate,
-        labelCol,
+        ...cols,
-        colNum: 2,
       },
       {
         name: 'confirmPassword',
@@ -280,8 +284,7 @@ export class Create extends FormAction {
         required: true,
         dependencies: ['password'],
         otherRule: getPasswordOtherRule('confirmPassword'),
-        labelCol,
+        ...cols,
-        colNum: 2,
       },
       currentDomainFormItem,
       {
@@ -291,23 +294,20 @@ export class Create extends FormAction {
         optionType: 'default',
         options: statusTypes,
         required: true,
-        labelCol,
+        ...cols,
-        colNum: 2,
       },
       {
         name: 'description',
         label: t('Description'),
         type: 'textarea',
-        labelCol,
+        ...cols,
-        colNum: 2,
       },
       {
         name: 'real_name',
         label: t('Real Name'),
         type: 'input',
         required: true,
-        labelCol,
+        ...cols,
-        colNum: 2,
         maxLength: 30,
       },
       {
@@ -329,6 +329,7 @@ export class Create extends FormAction {
         hidden: !more,
         onChange: this.onChangeProject,
         filterOption: transferFilterOption,
+        loading: this.projectStore.list.isLoading,
       },
       {
         name: 'select_user_group',
@@ -340,15 +341,15 @@ export class Create extends FormAction {
         showSearch: true,
         hidden: !more,
         filterOption: transferFilterOption,
+        loading: this.userGroupStore.list.isLoading,
       },
     ];
   }
 
   onSubmit = async (values) => {
-    const { domain } = this.state;
+    const { projectRoles } = this.state;
     values.defaultRole = this.projectRoleList[0].id;
-    values.projectRoles = this.state.projectRoles;
+    values.projectRoles = projectRoles;
-    values.domain_id = domain;
     const { confirmPassword, more, ...rest } = values;
     return this.store.create(rest);
   };

src/pages/identity/containers/User/index.jsx

@@ -34,31 +34,19 @@ export class User extends Base {
   }
 
   get inDomainDetail() {
-    const {
+    return this.inDetailPage && this.path.includes('domain-admin/detail');
-      match: { path },
-    } = this.props;
-    return this.inDetailPage && path.includes('domain-admin/detail');
   }
 
   get inProjectDetail() {
-    const {
+    return this.inDetailPage && this.path.includes('project-admin/detail');
-      match: { path },
-    } = this.props;
-    return this.inDetailPage && path.includes('project-admin/detail');
   }
 
   get inUserGroupDetail() {
-    const {
+    return this.inDetailPage && this.path.includes('identity/user-group');
-      match: { path },
-    } = this.props;
-    return this.inDetailPage && path.includes('identity/user-group');
   }
 
   get inRoleDetail() {
-    const {
+    return this.inDetailPage && this.path.includes('identity/role-admin');
-      match: { path },
-    } = this.props;
-    return this.inDetailPage && path.includes('identity/role-admin');
   }
 
   getBaseColumns() {

src/pages/identity/containers/UserGroup/actions/ManageUser.jsx

@@ -119,6 +119,7 @@ export class ManageUser extends ModalAction {
         disabled: false,
         showSearch: true,
         filterOption: transferFilterOption,
+        loading: this.userStore.list.isLoading,
       },
     ];
   }

src/pages/network/containers/VirtualAdapter/index.jsx

@@ -27,29 +27,19 @@ export class VirtualAdapter extends Base {
   }
 
   get isInstanceDetail() {
-    const {
+    return (
-      match: { path },
+      this.inDetailPage &&
-    } = this.props;
+      (this.path.includes('compute/instance') ||
-    if (
+        this.path.includes('management/recycle-bin'))
-      path.indexOf('compute/instance') >= 0 ||
+    );
-      path.indexOf('management/recycle-bin') >= 0
-    ) {
-      return true;
-    }
-    return false;
   }
 
   get isNetworkDetail() {
-    const {
+    return (
-      match: { path },
+      this.inDetailPage &&
-    } = this.props;
+      (this.path.includes('networks/detail') ||
-    if (
+        this.path.includes('networks-admin/detail'))
-      path.indexOf('networks/detail') >= 0 ||
+    );
-      path.indexOf('networks-admin/detail') >= 0
-    ) {
-      return true;
-    }
-    return false;
   }
 
   get isFilterByBackend() {

src/pages/user-center/containers/Credentials/index.jsx

@@ -28,10 +28,7 @@ export class Credentials extends Base {
   }
 
   get isUserDetail() {
-    const {
+    return this.inDetailPage && this.path.includes('user-admin/detail');
-      match: { path },
-    } = this.props;
-    return path.indexOf('user-admin/detail') >= 0;
   }
 
   updateFetchParamsByPage = (params) => {