Create Users list details drawer

[CodyWMitchell]

Description

Create Users list details drawer

RHCLOUD-34258

---

Screenshots

---

Checklist ☑️

• PR only fixes one issue or story
• Change reviewed for extraneous code
• UI best practices adhered to
• Commits squashed and meaningfully named
• All PR checks pass locally (build, lint, test, E2E)

• (Optional) QE: Needs QE attention (OUIA changed, perceived impact to tests, no test coverage)
• (Optional) QE: Has been mentioned
• (Optional) UX: Needs UX attention (end user UX modified, missing designs)
• (Optional) UX: Has been mentioned

[karelhala]

/retest

[fhlavac]

Suggested change

	const { groups } = useSelector((state: RBACStore) => ({
	groups: state.groupReducer?.groups?.data || [],
	}));
	const groups = useSelector((state: RBACStore) => state.groupReducer?.groups?.data || []);

[fhlavac]

Suggested change

	const { roles } = useSelector((state: RBACStore) => ({
	roles: state.roleReducer?.roles?.data || [],
	}));
	const roles = useSelector((state: RBACStore) => state.roleReducer?.roles?.data || []);

[fhlavac]

Suggested change

	const fetchData = useCallback(
	(apiProps: { username: string }) => {
	const { username } = apiProps;
	dispatch(fetchRoles({ ...mappedProps({ username }), usesMetaInURL: true, system: false }));
	},
	[dispatch]
	);
	useEffect(() => {
	fetchData({
	username: userId,
	});
	}, [fetchData, userId]);
	const fetchData = useCallback(() => {
	dispatch(fetchRoles({ ...mappedProps({ username: userId }), usesMetaInURL: true, system: false }));
	}, [dispatch, userId]);
	useEffect(() => {
	fetchData();
	}, [fetchData]);

[fhlavac]

Suggested change

	const fetchData = useCallback(
	(apiProps: { username: string }) => {
	const { username } = apiProps;
	dispatch(fetchGroups({ ...mappedProps({ username }), usesMetaInURL: true, system: false }));
	},
	[dispatch]
	);
	useEffect(() => {
	fetchData({
	username: userId,
	});
	}, [fetchData, userId]);
	const fetchData = useCallback(() => {
	dispatch(fetchGroups({ ...mappedProps({ username: userId }), usesMetaInURL: true, system: false }));
	}, [dispatch, userId]);
	useEffect(() => {
	fetchData();
	}, [fetchData]);

[fhlavac]

I made myself a note to add support for className in DataView element

[fhlavac]

Suggested change

	<DrawerCloseButton onClick={() => onClose()} />
	<DrawerCloseButton onClick={onClose} />

[karelhala]

/retest

[fhlavac]

It might be better to break this file into multiple ones to not have multiple components there

[fhlavac]

@CodyWMitchell this should help with the Konflux failure #1690

[karelhala]

/retest

[karelhala]

/retest

[CodyWMitchell]

/retest

[fhlavac]

this is probably not enough.
As mentioned in the DW extension's example isClickable, onRowClick and isRowSelected should be passed
https://react-data-view-pr-data-view-14.surge.sh/extensions/data-view/events-context

Now, the drawer does not hide when you click the row again and the opened row is not focused when clicked. Also the cursor is not a pointer

[CodyWMitchell]

updated to use the events-context! 👍
Now the row hides when clicked again, cursor is a pointer, and clicking the actions/checkbox does not trigger the drawer to open. 🎉

[fhlavac]

Looks good! 🎉