fix: fix multi role select in transfer component

1. Update Transfer component to support custom table onRow func
2. Fix the trigger to select the row when click select in project manage user form
3. Fix the trigger to select the row when click select in project manage user group form
4. Fix the trigger to select the project when click select in create user page
5. Fix multi select filter the inputed role name in project manage user form
6. Fix multi select filter the inputed role name in project manage user group form
7. Fix multi select filter the inputed role name in create user page

Change-Id: I0ee4a3db3e923384cf62c44e1801cabfca887217

src/components/FormItem/Transfer/index.jsx

@@ -24,6 +24,8 @@ const TableTransfer = ({
   rightColumns,
   pageSize,
   loading,
+  onRowLeft,
+  onRowRight,
   ...restProps
 }) => (
   <Transfer {...restProps} showSelectAll={false}>
@@ -36,6 +38,7 @@ const TableTransfer = ({
       disabled: listDisabled,
     }) => {
       const columns = direction === 'left' ? leftColumns : rightColumns;
+      const currentOnRow = direction === 'left' ? onRowLeft : onRowRight;
 
       const rowSelection = {
         getCheckboxProps: (item) => ({
@@ -59,6 +62,15 @@ const TableTransfer = ({
         pageSize,
       };
 
+      const onRowDefault = ({ key, disabled: itemDisabled }) => ({
+        onClick: () => {
+          if (itemDisabled || listDisabled) return;
+          onItemSelect(key, !listSelectedKeys.includes(key));
+        },
+      });
+
+      const onRow = currentOnRow || onRowDefault;
+
       return (
         <Table
           loading={loading}
@@ -68,12 +80,7 @@ const TableTransfer = ({
           pagination={pagination}
           size="small"
           style={{ pointerEvents: listDisabled ? 'none' : null }}
-          onRow={({ key, disabled: itemDisabled }) => ({
-            onClick: () => {
-              if (itemDisabled || listDisabled) return;
-              onItemSelect(key, !listSelectedKeys.includes(key));
-            },
-          })}
+          onRow={onRow}
         />
       );
     }}
@@ -94,6 +101,8 @@ export default class Index extends Component {
     value: PropTypes.array,
     pageSize: PropTypes.number,
     loading: PropTypes.bool,
+    onRowLeft: PropTypes.func,
+    onRowRight: PropTypes.func,
   };
 
   static defaultProps = {
@@ -154,6 +163,8 @@ export default class Index extends Component {
       titles,
       pageSize,
       loading,
+      onRowLeft,
+      onRowRight,
     } = this.props;
     const { targetKeys } = this.state;
     return (
@@ -170,6 +181,8 @@ export default class Index extends Component {
           leftColumns={leftTableColumns}
           rightColumns={rightTableColumns}
           loading={loading}
+          onRowLeft={onRowLeft}
+          onRowRight={onRowRight}
         />
       </>
     );

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

@@ -23,6 +23,7 @@ import {
   nameDomainColumns,
   transferFilterOption,
 } from 'resources/keystone/domain';
+import { roleFilterOption } from 'resources/keystone/role';
 
 export class ManageUser extends ModalAction {
   static id = 'management-user';
@@ -136,6 +137,7 @@ export class ManageUser extends ModalAction {
         mode="multiple"
         options={this.userRolesList(id)}
         defaultValue={this.defaultRoles(id)}
+        filterOption={roleFilterOption}
         onChange={(value, option) => {
           this.onSelectChange(value, option, id);
         }}
@@ -204,6 +206,7 @@ export class ManageUser extends ModalAction {
         filterOption: transferFilterOption,
         wrapperCol: this.wrapperCol,
         loading: this.userStore.list.isLoading,
+        onRowRight: () => null,
       },
     ];
   }

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

@@ -23,6 +23,7 @@ import {
   nameDomainColumns,
   transferFilterOption,
 } from 'resources/keystone/domain';
+import { roleFilterOption } from 'resources/keystone/role';
 
 export class ManageUserGroup extends ModalAction {
   static id = 'manage-group-group';
@@ -124,6 +125,7 @@ export class ManageUserGroup extends ModalAction {
         mode="multiple"
         options={this.groupRolesList(groupId)}
         defaultValue={this.defaultRoles(groupId)}
+        filterOption={roleFilterOption}
         onChange={(value, option) => {
           this.onSubChange(value, option, groupId);
         }}
@@ -204,6 +206,7 @@ export class ManageUserGroup extends ModalAction {
         onChange: this.onChangeUserGroup,
         wrapperCol: this.wrapperCol,
         loading: this.userGroupStore.list.isLoading,
+        onRowRight: () => null,
       },
     ];
   }

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

@@ -32,6 +32,7 @@ import {
   nameDomainColumns,
   transferFilterOption,
 } from 'resources/keystone/domain';
+import { roleFilterOption } from 'resources/keystone/role';
 
 export class Create extends FormAction {
   constructor(props) {
@@ -167,6 +168,7 @@ export class Create extends FormAction {
         mode="multiple"
         options={this.projectRolesList(projectId)}
         defaultValue={this.defaultRoles()}
+        filterOption={roleFilterOption}
         onChange={(value, option) => {
           this.onSelectChange(value, option, projectId);
         }}
@@ -330,6 +332,7 @@ export class Create extends FormAction {
         onChange: this.onChangeProject,
         filterOption: transferFilterOption,
         loading: this.projectStore.list.isLoading,
+        onRowRight: () => null,
       },
       {
         name: 'select_user_group',

src/resources/keystone/role.js

@@ -19,3 +19,8 @@ export const editable = (item) => {
   }
   return true;
 };
+
+export const roleFilterOption = (inputValue, options) => {
+  const { label = '' } = options;
+  return label.toLowerCase().includes((inputValue || '').toLowerCase());
+};