Merge "fix: fix multi role select in transfer component"

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 }) => ({
+          onRow={onRow}
-            onClick: () => {
-              if (itemDisabled || listDisabled) return;
-              onItemSelect(key, !listSelectedKeys.includes(key));
-            },
-          })}
         />
       );
     }}
@@ -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());
+};