-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: improve users and user groups routing
- Loading branch information
Showing
17 changed files
with
292 additions
and
199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 0 additions & 106 deletions
106
src/smart-components/access-management/users-and-user-groups.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
src/smart-components/access-management/users-and-user-groups/user-groups/UserGroupsView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { DataViewEventsProvider } from '@patternfly/react-data-view'; | ||
| import React from 'react'; | ||
| import GroupDetailsDrawer from './user-group-detail/GroupDetailsDrawer'; | ||
| import { TabContent } from '@patternfly/react-core'; | ||
| import UserGroupsTable from './UserGroupsTable'; | ||
| import { Group } from '../../../../redux/reducers/group-reducer'; | ||
|
|
||
| interface UserGroupsViewProps { | ||
| groupsRef?: React.Ref<HTMLElement>; | ||
| } | ||
|
|
||
| const UserGroupsView: React.FunctionComponent<UserGroupsViewProps> = ({ groupsRef }) => { | ||
| const [focusedGroup, setFocusedGroup] = React.useState<Group | undefined>(undefined); | ||
|
|
||
| return ( | ||
| <DataViewEventsProvider> | ||
| <GroupDetailsDrawer ouiaId="groups-details-drawer" focusedGroup={focusedGroup} setFocusedGroup={setFocusedGroup}> | ||
| <TabContent eventKey={1} id="groupsTab" ref={groupsRef} aria-label="Groups tab"> | ||
| <UserGroupsTable focusedGroup={focusedGroup} /> | ||
| </TabContent> | ||
| </GroupDetailsDrawer> | ||
| </DataViewEventsProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserGroupsView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...cess-management/GroupDetailsRolesView.tsx → ...er-group-detail/GroupDetailsRolesView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 4 additions & 4 deletions
8
...ement/GroupDetailsServiceAccountsView.tsx → ...etail/GroupDetailsServiceAccountsView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...cess-management/GroupDetailsUsersView.tsx → ...er-group-detail/GroupDetailsUsersView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
src/smart-components/access-management/users-and-user-groups/users-and-user-groups.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useEffect, useMemo } from 'react'; | ||
| import { useIntl } from 'react-intl'; | ||
| import { Outlet, useLocation } from 'react-router-dom'; | ||
| import { PageSection, PageSectionVariants, Tab, Tabs } from '@patternfly/react-core'; | ||
| import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; | ||
| import useAppNavigate from '../../../hooks/useAppNavigate'; | ||
| import pathnames from '../../../utilities/pathnames'; | ||
| import Messages from '../../../Messages'; | ||
|
|
||
| const UsersAndUserGroups: React.FunctionComponent = () => { | ||
| const intl = useIntl(); | ||
| const usersRef = React.createRef<HTMLElement>(); | ||
| const groupsRef = React.createRef<HTMLElement>(); | ||
|
|
||
| const navigate = useAppNavigate('/iam/access-management'); | ||
| const location = useLocation(); | ||
| const activeTabIndex = useMemo(() => Number(location.pathname.endsWith(pathnames['user-groups'].link)), [location.pathname]); | ||
|
|
||
| useEffect(() => { | ||
| location.pathname.endsWith(pathnames['users-and-user-groups'].link) && navigate(pathnames['users-new'].link, { replace: true }); | ||
| }, [location.pathname, navigate]); | ||
|
|
||
| const handleTabSelect = (_: React.MouseEvent<HTMLElement, MouseEvent>, key: string | number) => { | ||
| activeTabIndex !== Number(key) && | ||
| navigate((activeTabIndex ? pathnames['users-new'] : pathnames['user-groups']).link, { | ||
| replace: true, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <ContentHeader title={intl.formatMessage(Messages.usersAndUserGroups)} subtitle={intl.formatMessage(Messages.usersAndUserGroupsDescription)} /> | ||
| <PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited> | ||
| <Tabs | ||
| activeKey={activeTabIndex} | ||
| onSelect={handleTabSelect} | ||
| inset={{ | ||
| default: 'insetNone', | ||
| md: 'insetSm', | ||
| xl: 'insetLg', | ||
| }} | ||
| role="region" | ||
| > | ||
| <Tab eventKey={0} title={intl.formatMessage(Messages.users)} tabContentId="usersTab" tabContentRef={usersRef} ouiaId="users-tab-button" /> | ||
| <Tab | ||
| eventKey={1} | ||
| title={intl.formatMessage(Messages.userGroups)} | ||
| tabContentId="groupsTab" | ||
| tabContentRef={groupsRef} | ||
| ouiaId="user-groups-tab-button" | ||
| /> | ||
| </Tabs> | ||
| </PageSection> | ||
| <PageSection padding={{ default: 'noPadding' }}> | ||
| <Outlet | ||
| context={{ | ||
| [pathnames['users-new'].path]: { | ||
| usersRef, | ||
| }, | ||
| [pathnames['user-groups'].path]: { | ||
| groupsRef, | ||
| }, | ||
| }} | ||
| /> | ||
| </PageSection> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default UsersAndUserGroups; |
Oops, something went wrong.