Skip to content

Commit 8e71bf6

Browse files
DonOmalVindulaDonOmalVindula
committed
Add userstore dropdown
1 parent 58ff679 commit 8e71bf6

File tree

5 files changed

+281
-233
lines changed

5 files changed

+281
-233
lines changed

Diff for: ‎features/admin.roles.v2/components/edit-role/add-role-user-modal.tsx

+86-55
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { UIConstants } from "@wso2is/admin.core.v1/constants/ui-constants";
2121
import { UserBasicInterface, UserRoleInterface } from "@wso2is/admin.core.v1/models/users";
2222
import { useUsersList } from "@wso2is/admin.users.v1/api";
2323
import { UserManagementUtils } from "@wso2is/admin.users.v1/utils";
24+
import { UserStoreDropdownItem } from "@wso2is/admin.userstores.v1/models";
2425
import { getUserNameWithoutDomain } from "@wso2is/core/helpers";
2526
import { AlertLevels, IdentifiableComponentInterface, RolesInterface } from "@wso2is/core/models";
2627
import { addAlert } from "@wso2is/core/store";
@@ -39,7 +40,7 @@ import React, { FormEvent, FunctionComponent, ReactElement, useCallback, useEffe
3940
import { useTranslation } from "react-i18next";
4041
import { useDispatch } from "react-redux";
4142
import { Dispatch } from "redux";
42-
import { Grid, Modal } from "semantic-ui-react";
43+
import { Dropdown, DropdownProps, Grid, GridColumn, Modal } from "semantic-ui-react";
4344

4445
/**
4546
* Proptypes for the group users list component.
@@ -50,13 +51,15 @@ interface AddRoleUserModalProps extends IdentifiableComponentInterface {
5051
handleCloseAddNewUserModal: () => void;
5152
showAddNewUserModal: boolean;
5253
userstore: string;
54+
availableUserStores: UserStoreDropdownItem[];
5355
}
5456

5557
export const AddRoleUserModal: FunctionComponent<AddRoleUserModalProps> = (
5658
props: AddRoleUserModalProps
5759
): ReactElement => {
5860

5961
const {
62+
availableUserStores,
6063
[ "data-componentid" ]: componentId = "edit-role-users-add-user-modal",
6164
handleAddUserSubmit,
6265
handleCloseAddNewUserModal,
@@ -76,6 +79,7 @@ export const AddRoleUserModal: FunctionComponent<AddRoleUserModalProps> = (
7679
const [ userList, setUserList ] = useState<UserBasicInterface[]>([]);
7780
const [ selectedUsers, setSelectedUsers ] = useState<UserBasicInterface[]>([]);
7881
const [ searchQuery, setSearchQuery ] = useState<string>(null);
82+
const [ selectedUserstore, setSelectedUserStore ] = useState<string>(userstore);
7983

8084
/**
8185
* Fetch the user list.
@@ -90,7 +94,7 @@ export const AddRoleUserModal: FunctionComponent<AddRoleUserModalProps> = (
9094
0,
9195
searchQuery,
9296
null,
93-
userstore,
97+
selectedUserstore,
9498
null
9599
);
96100

@@ -231,63 +235,90 @@ export const AddRoleUserModal: FunctionComponent<AddRoleUserModalProps> = (
231235
}
232236
</Heading>
233237
</Modal.Header>
234-
<Modal.Content image>
235-
{ alert && alertComponent }
236-
<TransferComponent
237-
compact
238-
basic
239-
bordered
240-
className="one-column-selection"
241-
selectionComponent
242-
searchPlaceholder={ t("groups:edit.users.searchUsers") }
243-
isLoading={ isUserListFetchRequestLoading || isUserListFetchRequestValidating }
244-
handleHeaderCheckboxChange={ () => selectAllAssignedList() }
245-
isHeaderCheckboxChecked={ isSelectAllUsers }
246-
handleUnelectedListSearch={ (e: FormEvent<HTMLInputElement>, { value }: { value: string }) => {
247-
handleSearchFieldChange(e, value);
248-
} }
249-
showSelectAllCheckbox={ !isUserListFetchRequestLoading && userList.length > 0 }
250-
data-componentid={ `${ componentId }-transfer-component` }
251-
>
252-
<TransferList
238+
<Modal.Content>
239+
<Grid>
240+
{ alert && alertComponent }
241+
<TransferComponent
242+
compact
243+
basic
244+
bordered
245+
className="one-column-selection"
253246
selectionComponent
254-
isListEmpty={ isEmpty(userList) || userList.length <= 0 }
247+
searchPlaceholder={ t("groups:edit.users.searchUsers") }
255248
isLoading={ isUserListFetchRequestLoading || isUserListFetchRequestValidating }
256-
listType="unselected"
257-
selectAllCheckboxLabel={ t("groups:edit.users.selectAllUsers") }
258-
data-componentid={ `${ componentId }-unselected-transfer-list` }
259-
emptyPlaceholderContent={ t("roles:edit.users.placeholders.emptySearchResult") }
260-
emptyPlaceholderDefaultContent={ t("transferList:list."
261-
+ "emptyPlaceholders.default") }
249+
handleHeaderCheckboxChange={ () => selectAllAssignedList() }
250+
isHeaderCheckboxChecked={ isSelectAllUsers }
251+
handleUnelectedListSearch={ (e: FormEvent<HTMLInputElement>, { value }: { value: string }) => {
252+
handleSearchFieldChange(e, value);
253+
} }
254+
showSelectAllCheckbox={ !isUserListFetchRequestLoading && userList.length > 0 }
255+
data-componentid={ `${ componentId }-transfer-component` }
256+
leftActionPanel={ (
257+
<GridColumn width={ 1 }>
258+
<Dropdown
259+
fluid
260+
selection
261+
labeled
262+
options={ availableUserStores }
263+
data-testid="user-mgt-add-user-form-userstore-dropdown"
264+
name="userstore"
265+
disabled={ false }
266+
value={ selectedUserstore }
267+
onChange={
268+
(e: React.ChangeEvent<HTMLInputElement>, data: DropdownProps) => {
269+
setSelectedUserStore(data.value as string);
270+
}
271+
}
272+
tabIndex={ 1 }
273+
maxLength={ 60 }
274+
/>
275+
</GridColumn>
276+
) }
262277
>
263-
{
264-
userList?.map((user: UserBasicInterface, index: number) => {
265-
const resolvedGivenName: string = UserManagementUtils.resolveUserListSubheader(user);
266-
const resolvedUsername: string = getUserNameWithoutDomain(user?.userName);
278+
<TransferList
279+
selectionComponent
280+
isListEmpty={ isEmpty(userList) || userList.length <= 0 }
281+
isLoading={ isUserListFetchRequestLoading || isUserListFetchRequestValidating }
282+
listType="unselected"
283+
selectAllCheckboxLabel={ t("groups:edit.users.selectAllUsers") }
284+
data-componentid={ `${ componentId }-unselected-transfer-list` }
285+
emptyPlaceholderContent={ isEmpty(searchQuery)
286+
? t("roles:edit.users.placeholders.beginSearch")
287+
: t("roles:edit.users.placeholders.emptySearchResult") }
288+
emptyPlaceholderDefaultContent={ t("transferList:list."
289+
+ "emptyPlaceholders.default") }
290+
>
291+
{
292+
userList?.map((user: UserBasicInterface, index: number) => {
293+
const resolvedGivenName: string =
294+
UserManagementUtils.resolveUserListSubheader(user);
295+
const resolvedUsername: string = getUserNameWithoutDomain(user?.userName);
267296

268-
return (
269-
<TransferListItem
270-
handleItemChange={ () => handleItemCheckboxChange(user) }
271-
key={ index }
272-
listItem={ resolvedGivenName ?? resolvedUsername }
273-
listItemId={ user.id }
274-
listItemIndex={ index }
275-
isItemChecked={
276-
selectedUsers?.findIndex((selectedUser: UserBasicInterface) =>
277-
selectedUser.id === user.id) !== -1
278-
}
279-
showSecondaryActions={ false }
280-
showListSubItem={ true }
281-
listSubItem={ resolvedGivenName && (
282-
<Code compact withBackground={ false }>{ resolvedUsername }</Code>
283-
) }
284-
data-componentid={ `${ componentId }-unselected-transfer-list-item-${ index }` }
285-
/>
286-
);
287-
})
288-
}
289-
</TransferList>
290-
</TransferComponent>
297+
return (
298+
<TransferListItem
299+
handleItemChange={ () => handleItemCheckboxChange(user) }
300+
key={ index }
301+
listItem={ resolvedGivenName ?? resolvedUsername }
302+
listItemId={ user.id }
303+
listItemIndex={ index }
304+
isItemChecked={
305+
selectedUsers?.findIndex((selectedUser: UserBasicInterface) =>
306+
selectedUser.id === user.id) !== -1
307+
}
308+
showSecondaryActions={ false }
309+
showListSubItem={ true }
310+
listSubItem={ resolvedGivenName && (
311+
<Code compact withBackground={ false }>{ resolvedUsername }</Code>
312+
) }
313+
data-componentid={
314+
`${ componentId }-unselected-transfer-list-item-${ index }` }
315+
/>
316+
);
317+
})
318+
}
319+
</TransferList>
320+
</TransferComponent>
321+
</Grid>
291322
</Modal.Content>
292323
<Modal.Actions>
293324
<Grid>

Diff for: ‎features/admin.roles.v2/components/edit-role/edit-role-users.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -577,6 +577,7 @@ export const RoleUsersList: FunctionComponent<RoleUsersPropsInterface> = (
577577
handleCloseAddNewUserModal={ handleCloseAddNewUserModal }
578578
role={ role }
579579
userstore={ selectedUserStoreDomainName }
580+
availableUserStores={ availableUserStores }
580581
/>
581582
)
582583
}

Diff for: ‎modules/i18n/src/models/namespaces/roles-ns.ts

+1
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,7 @@ export interface rolesNS {
279279
heading: string;
280280
subHeading: string;
281281
placeholders: {
282+
beginSearch: string
282283
emptyPlaceholder: {
283284
action: string;
284285
title: string;

0 commit comments

Comments
 (0)