Project Details Page - Allow Edit and View Details #3286
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
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,100 @@ | ||
| import * as React from 'react'; | ||
| import { Dropdown, DropdownItem, MenuToggle, DropdownList } from '@patternfly/react-core'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { getDashboardMainContainer } from '~/utilities/utils'; | ||
| import { AccessReviewResourceAttributes, ProjectKind } from '~/k8sTypes'; | ||
| import { useAccessReview } from '~/api'; | ||
| import DeleteProjectModal from '~/pages/projects/screens/projects/DeleteProjectModal'; | ||
| import ManageProjectModal from '~/pages/projects/screens/projects/ManageProjectModal'; | ||
|
|
||
| const projectEditAccessReview: AccessReviewResourceAttributes = { | ||
| group: 'project.openshift.io', | ||
| resource: 'projectrequests', | ||
| verb: 'update', | ||
| }; | ||
|
|
||
| const projectDeleteAccessReview: AccessReviewResourceAttributes = { | ||
| group: 'project.openshift.io', | ||
| resource: 'projectrequests', | ||
| verb: 'delete', | ||
| }; | ||
|
|
||
| type Props = { | ||
| project: ProjectKind; | ||
| }; | ||
|
|
||
| const ProjectActions: React.FC<Props> = ({ project }) => { | ||
| const navigate = useNavigate(); | ||
| const [canEdit, editRbacLoaded] = useAccessReview({ | ||
| ...projectEditAccessReview, | ||
| namespace: project.metadata.name, | ||
| }); | ||
| const [canDelete, deleteRbacLoaded] = useAccessReview({ | ||
| ...projectDeleteAccessReview, | ||
| namespace: project.metadata.name, | ||
| }); | ||
| const [open, setOpen] = React.useState(false); | ||
| const [deleteOpen, setDeleteOpen] = React.useState(false); | ||
| const [editOpen, setEditOpen] = React.useState(false); | ||
|
|
||
| if (!editRbacLoaded || !deleteRbacLoaded || (!canEdit && !canDelete)) { | ||
| return null; | ||
| } | ||
|
|
||
| const DropdownComponent = ( | ||
| <Dropdown | ||
| onOpenChange={setOpen} | ||
| onSelect={() => setOpen(false)} | ||
| toggle={(toggleRef) => ( | ||
| <MenuToggle | ||
| aria-label="Actions" | ||
| data-testid="project-actions" | ||
| variant="secondary" | ||
| ref={toggleRef} | ||
| onClick={() => { | ||
| setOpen(!open); | ||
| }} | ||
| > | ||
| Actions | ||
| </MenuToggle> | ||
| )} | ||
| isOpen={open} | ||
| popperProps={{ position: 'right', appendTo: getDashboardMainContainer() }} | ||
| > | ||
| <DropdownList> | ||
| {canEdit ? ( | ||
| <DropdownItem data-testid="edit-project-action" onClick={() => setEditOpen(true)}> | ||
| Edit project | ||
| </DropdownItem> | ||
| ) : null} | ||
| {canDelete ? ( | ||
| <DropdownItem data-testid="delete-project-action" onClick={() => setDeleteOpen(true)}> | ||
| Delete project | ||
| </DropdownItem> | ||
| ) : null} | ||
| </DropdownList> | ||
| </Dropdown> | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {DropdownComponent} | ||
| {editOpen ? ( | ||
| <ManageProjectModal editProjectData={project} onClose={() => setEditOpen(false)} /> | ||
| ) : null} | ||
| {deleteOpen ? ( | ||
| <DeleteProjectModal | ||
| deleteData={project} | ||
| onClose={(deleted) => { | ||
| setDeleteOpen(false); | ||
| if (deleted) { | ||
| navigate('/projects'); | ||
| } | ||
| }} | ||
| /> | ||
| ) : null} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProjectActions; | ||
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Based on the mocks, should there be a divider between these "Edit" and "Delete" dropdown items?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jenny-s51 - We don't have design guidelines for action menus yet. When I look at other areas of the product, there are pages in the dashboard that consistently display a divider above Delete. But there are places where we have just Edit and Delete in a menu without a divider (Workbenches and Permissions list items in the Project details page).
The only guidelines I see on this topic within PF are under Menu > Red text menu:
We aren't using this variant on the Delete menu action (and maybe we should consider that when we draft guidelines), but the point about separating destructive menu items from the non-destructive menu items is the piece that I think is relevant here. I think this recommendation should apply regardless of how many menu items there are. So I am in favor of implementing the UI as designed in this case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jenny-s51 @jgiardino Looking around the UI, I see:
I can add it here but it would be mostly inconsistent. I would suggest UX file an issue to make all of the menus consistent and we address all of them at once.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jeff-phillips-18 @jenny-s51 @jgiardino I agree with Jeff. I’d prefer to create a separate issue once we have the menu guidelines ready to update the styling for all menus at once and ensure consistency. For now, I’d vote to drop the divider from the implementation of the Project Details action.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your clarity here @jgiardino. Filing a separate ticket to make all of these menus consistent sounds like a good plan @jeff-phillips-18 @simrandhaliw.