Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updates for projects view filter toolbar
- Loading branch information
1 parent
8b1334a
commit 9d117fb
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
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,41 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| Text, | ||
| TextContent, | ||
| TextContentProps, | ||
| TextList, | ||
| TextListItem, | ||
| } from '@patternfly/react-core'; | ||
|
|
||
| type PopoverListContentProps = TextContentProps & { | ||
| leadText?: React.ReactNode; | ||
| listHeading?: React.ReactNode; | ||
| listItems: React.ReactNode[]; | ||
| }; | ||
|
|
||
| const ContentText: React.FC<{ children: React.ReactNode }> = ({ children }) => ( | ||
| <Text component="small" style={{ color: 'var(--Text---pf-v5-global--Color--100)' }}> | ||
| {children} | ||
| </Text> | ||
| ); | ||
|
|
||
| const PopoverListContent: React.FC<PopoverListContentProps> = ({ | ||
| leadText, | ||
| listHeading, | ||
| listItems, | ||
| ...props | ||
| }) => ( | ||
| <TextContent {...props}> | ||
| {leadText ? <ContentText>{leadText}</ContentText> : null} | ||
| {listHeading ? <Text component="h4">{listHeading}</Text> : null} | ||
| <TextList> | ||
| {listItems.map((item, index) => ( | ||
| <TextListItem key={index}> | ||
| <ContentText>{item}</ContentText> | ||
| </TextListItem> | ||
| ))} | ||
| </TextList> | ||
| </TextContent> | ||
| ); | ||
|
|
||
| export default PopoverListContent; | ||
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
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,96 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| Button, | ||
| Icon, | ||
| Popover, | ||
| SearchInput, | ||
| ToolbarGroup, | ||
| ToolbarItem, | ||
| } from '@patternfly/react-core'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'; | ||
| import PopoverListContent from '~/components/PopoverListContent'; | ||
| import FilterToolbar from '~/components/FilterToolbar'; | ||
| import { | ||
| FindAdministratorOptions, | ||
| ProjectsFilterDataType, | ||
| projectsFilterOptions, | ||
| ProjectsFilterOptions, | ||
| } from '~/pages/projects/screens/projects/const'; | ||
| import NewProjectButton from './NewProjectButton'; | ||
|
|
||
| type ProjectsToolbarProps = { | ||
| allowCreate: boolean; | ||
| filterData: ProjectsFilterDataType; | ||
| onFilterUpdate: (key: string, value?: string | { label: string; value: string }) => void; | ||
| onClearFilters: () => void; | ||
| }; | ||
|
|
||
| const ProjectsToolbar: React.FC<ProjectsToolbarProps> = ({ | ||
| allowCreate, | ||
| filterData, | ||
| onFilterUpdate, | ||
| onClearFilters, | ||
| }) => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <FilterToolbar<keyof typeof projectsFilterOptions> | ||
| data-testid="projects-table-toolbar" | ||
| filterOptions={projectsFilterOptions} | ||
| filterOptionRenders={{ | ||
| [ProjectsFilterOptions.name]: ({ onChange, ...props }) => ( | ||
| <SearchInput | ||
| {...props} | ||
| aria-label="Filter by name" | ||
| placeholder="Filter by name" | ||
| onChange={(_event, value) => onChange(value)} | ||
| /> | ||
| ), | ||
| [ProjectsFilterOptions.user]: ({ onChange, ...props }) => ( | ||
| <SearchInput | ||
| {...props} | ||
| aria-label="Filter by user" | ||
| placeholder="Filter by user" | ||
| onChange={(_event, value) => onChange(value)} | ||
| /> | ||
| ), | ||
| }} | ||
| filterData={filterData} | ||
| onClearFilters={onClearFilters} | ||
| onFilterUpdate={onFilterUpdate} | ||
| > | ||
| <ToolbarGroup> | ||
| <ToolbarItem> | ||
| {allowCreate ? ( | ||
| <NewProjectButton | ||
| onProjectCreated={(projectName) => navigate(`/projects/${projectName}`)} | ||
| /> | ||
| ) : ( | ||
| <Popover | ||
| minWidth="400px" | ||
| headerContent="Need another project?" | ||
| bodyContent={ | ||
| <PopoverListContent | ||
| data-testid="projects-admin-help-content" | ||
| leadText="To request a new project, contact your administrator." | ||
| listHeading="Your administrator might be:" | ||
| listItems={FindAdministratorOptions} | ||
| /> | ||
| } | ||
| > | ||
| <Button data-testid="projects-empty-admin-help" variant="link"> | ||
| <Icon isInline aria-label="More info"> | ||
| <OutlinedQuestionCircleIcon /> | ||
| </Icon> | ||
| <span className="pf-v5-u-ml-xs">Need another project?</span> | ||
| </Button> | ||
| </Popover> | ||
| )} | ||
| </ToolbarItem> | ||
| </ToolbarGroup> | ||
| </FilterToolbar> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProjectsToolbar; |
Oops, something went wrong.