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
2e37911
commit f55fb3e
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; |
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 @@ | ||
| export enum ProjectsFilterOptions { | ||
| name = 'Name', | ||
| user = 'User', | ||
| } | ||
|
|
||
| export const projectsFilterOptions = { | ||
| [ProjectsFilterOptions.name]: 'Name', | ||
| [ProjectsFilterOptions.user]: 'User', | ||
| }; | ||
|
|
||
| export type ProjectsFilterDataType = Record<ProjectsFilterOptions, string | undefined>; | ||
|
|
||
| export const initialProjectsFilterData: ProjectsFilterDataType = { | ||
| [ProjectsFilterOptions.name]: '', | ||
| [ProjectsFilterOptions.user]: '', | ||
| }; | ||
|
|
||
| export const FindAdministratorOptions = [ | ||
| 'The person who gave you your username', | ||
| 'Someone in your IT department or Help desk (at a company or school)', | ||
| 'The person who manages your email service or web site (in a small business or club)', | ||
| ]; |