-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add /groups/%id route and the page component
Implements https://issues.redhat.com/browse/ESSNTL-3726.
- Loading branch information
Showing
8 changed files
with
197 additions
and
1 deletion.
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
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,35 @@ | ||
import { Breadcrumb, BreadcrumbItem, Skeleton } from '@patternfly/react-core'; | ||
import { | ||
PageHeader, | ||
PageHeaderTitle | ||
} from '@redhat-cloud-services/frontend-components'; | ||
import React from 'react'; | ||
import { useSelector } from 'react-redux'; | ||
import { Link, useParams } from 'react-router-dom'; | ||
import { routes } from '../../Routes'; | ||
|
||
const GroupDetailHeader = () => { | ||
const { uninitialized, loading, data } = useSelector((state) => state.groupDetail); | ||
const { groupId } = useParams(); | ||
|
||
const nameOrId = uninitialized || loading ? ( | ||
<Skeleton width="250px" screenreaderText="Loading group details" /> | ||
) : ( | ||
// in case of error, render just id from URL | ||
data?.name || groupId | ||
); | ||
|
||
return ( | ||
<PageHeader> | ||
<Breadcrumb> | ||
<BreadcrumbItem> | ||
<Link to={routes.groups}>Groups</Link> | ||
</BreadcrumbItem> | ||
<BreadcrumbItem isActive>{nameOrId}</BreadcrumbItem> | ||
</Breadcrumb> | ||
<PageHeaderTitle title={nameOrId} /> | ||
</PageHeader> | ||
); | ||
}; | ||
|
||
export default GroupDetailHeader; |
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,20 @@ | ||
import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core'; | ||
import { InvalidObject } from '@redhat-cloud-services/frontend-components'; | ||
import React from 'react'; | ||
import { useSelector } from 'react-redux'; | ||
|
||
const GroupDetailInfo = () => { | ||
const { uninitialized, loading } = useSelector((state) => state.groupDetail); | ||
|
||
// TODO: implement according to mocks | ||
|
||
return ( | ||
<EmptyState> | ||
<EmptyStateBody> | ||
{uninitialized || loading ? <Spinner /> : <InvalidObject />} | ||
</EmptyStateBody> | ||
</EmptyState> | ||
); | ||
}; | ||
|
||
export default GroupDetailInfo; |
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,22 @@ | ||
import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core'; | ||
import React from 'react'; | ||
import { useSelector } from 'react-redux'; | ||
import NoSystemsEmptyState from './NoSystemsEmptyState'; | ||
|
||
const GroupDetailSystems = () => { | ||
const { uninitialized, loading } = useSelector((state) => state.groupDetail); | ||
|
||
// TODO: integrate the inventory table | ||
|
||
return (uninitialized || loading ? | ||
<EmptyState> | ||
<EmptyStateBody> | ||
<Spinner /> | ||
</EmptyStateBody> | ||
</EmptyState> | ||
: <NoSystemsEmptyState /> | ||
|
||
); | ||
}; | ||
|
||
export default GroupDetailSystems; |
60 changes: 60 additions & 0 deletions
60
src/components/InventoryGroupDetail/InventoryGroupDetail.js
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,60 @@ | ||
import React, { useEffect } from 'react'; | ||
import { useParams } from 'react-router-dom'; | ||
import useChrome from '@redhat-cloud-services/frontend-components/useChrome'; | ||
import { useDispatch, useSelector } from 'react-redux'; | ||
import { fetchGroupDetail } from '../../store/inventory-actions'; | ||
import { PageSection, Tab, Tabs, TabTitleText } from '@patternfly/react-core'; | ||
import { useState } from 'react'; | ||
import GroupDetailHeader from './GroupDetailHeader'; | ||
import GroupDetailSystems from './GroupDetailSystems'; | ||
import GroupDetailInfo from './GroupDetailInfo'; | ||
|
||
const InventoryGroupDetail = () => { | ||
const dispatch = useDispatch(); | ||
const { data } = useSelector((state) => state.groupDetail); | ||
const chrome = useChrome(); | ||
|
||
const { groupId } = useParams(); | ||
|
||
useEffect(() => { | ||
dispatch(fetchGroupDetail(groupId)); | ||
}, []); | ||
|
||
useEffect(() => { | ||
// if available, change ID to the group's name in the window title | ||
chrome.updateDocumentTitle( | ||
`${data?.name || groupId} - Inventory Groups | Red Hat Insights` | ||
); | ||
}, [data]); | ||
|
||
const [activeTabKey, setActiveTabKey] = useState(0); | ||
|
||
return ( | ||
<React.Fragment> | ||
<GroupDetailHeader /> | ||
<PageSection variant='light' type='tabs'> | ||
<Tabs | ||
activeKey={activeTabKey} | ||
onSelect={(event, value) => setActiveTabKey(value)} | ||
aria-label="Group tabs" | ||
role="region" | ||
inset={{ default: 'insetMd' }} // add extra space before the first tab (according to mocks) | ||
> | ||
<Tab eventKey={0} title={<TabTitleText>Systems</TabTitleText>} aria-label="Group systems tab"> | ||
<PageSection> | ||
<GroupDetailSystems /> | ||
</PageSection> | ||
</Tab> | ||
<Tab eventKey={1} title={<TabTitleText>Group info</TabTitleText>} aria-label="Group info tab"> | ||
<PageSection> | ||
<GroupDetailInfo /> | ||
</PageSection> | ||
</Tab> | ||
</Tabs> | ||
|
||
</PageSection> | ||
</React.Fragment> | ||
); | ||
}; | ||
|
||
export default InventoryGroupDetail; |
42 changes: 42 additions & 0 deletions
42
src/components/InventoryGroupDetail/NoSystemsEmptyState.js
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,42 @@ | ||
import React from 'react'; | ||
import { | ||
Button, | ||
EmptyState, | ||
EmptyStateBody, | ||
EmptyStateIcon, | ||
EmptyStateSecondaryActions, | ||
Title | ||
} from '@patternfly/react-core'; | ||
import { ExternalLinkAltIcon, PlusCircleIcon } from '@patternfly/react-icons'; | ||
|
||
import { global_palette_black_600 as globalPaletteBlack600 } from '@patternfly/react-tokens/dist/js/global_palette_black_600'; | ||
|
||
const NoSystemsEmptyState = () => { | ||
return ( | ||
<EmptyState | ||
data-ouia-component-id="empty-state" | ||
data-ouia-component-type="PF4/EmptyState" | ||
data-ouia-safe={true} | ||
> | ||
<EmptyStateIcon icon={PlusCircleIcon} color={globalPaletteBlack600.value} /> | ||
<Title headingLevel="h4" size="lg"> | ||
No systems added | ||
</Title> | ||
<EmptyStateBody> | ||
To manage systems more effectively, add systems to the group. | ||
</EmptyStateBody> | ||
<Button variant="primary" onClick={() => {}}>Add systems</Button> | ||
<EmptyStateSecondaryActions> | ||
<Button | ||
variant="link" | ||
icon={<ExternalLinkAltIcon />} | ||
iconPosition="right" | ||
// TODO: component={(props) => <a href='' {...props} />} | ||
> | ||
Learn more about system groups | ||
</Button> | ||
</EmptyStateSecondaryActions> | ||
</EmptyState> | ||
);}; | ||
|
||
export default NoSystemsEmptyState; |
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,3 @@ | ||
import InventoryGroupDetail from './InventoryGroupDetail'; | ||
|
||
export default InventoryGroupDetail; |
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,3 @@ | ||
import InventoryGroupDetail from '../components/InventoryGroupDetail'; | ||
|
||
export default InventoryGroupDetail; |