-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #393 from MeasureAuthoringTool/feature/MAT-8276/up…
…date-share-icon-and-shared-with-popup-screen MAT-8276: update share popup screen
- Loading branch information
Showing
5 changed files
with
208 additions
and
26 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
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
56 changes: 56 additions & 0 deletions
56
src/components/PageHeader/shareAction/ShareAction.test.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,56 @@ | ||
| import * as React from "react"; | ||
| import { fireEvent, render, screen, waitFor } from "@testing-library/react"; | ||
| import { Measure, MeasureSet, Model } from "@madie/madie-models"; | ||
| import ShareAction from "./ShareAction"; | ||
|
|
||
| const mockUser = "test user"; | ||
| jest.mock("@madie/madie-util", () => ({ | ||
| useOktaTokens: () => ({ | ||
| getUserName: () => mockUser, | ||
| }), | ||
| })); | ||
|
|
||
| const mockMeasureSet = { | ||
| cmsId: "124", | ||
| measureSetId: "1-2-3-4", | ||
| owner: mockUser, | ||
| } as unknown as MeasureSet; | ||
|
|
||
| const qdmMeasure = { | ||
| model: Model.QDM_5_6, | ||
| measureSet: mockMeasureSet, | ||
| measureSetId: "1-2-3-4", | ||
| } as Measure; | ||
|
|
||
| const qiCoreMeasure = { | ||
| model: Model.QICORE, | ||
| measureSet: { ...mockMeasureSet, cmsId: null }, | ||
| measureSetId: "1-2-3-4", | ||
| measureMetaData: { draft: true }, | ||
| } as unknown as Measure; | ||
|
|
||
| describe("ShareAction", () => { | ||
| it("Should display menu items when the share action btn is clicked and call associated onClick method when menu item is clicked", () => { | ||
| const onClick = jest.fn(); | ||
| render(<ShareAction onClick={onClick} />); | ||
|
|
||
| const shareButton = screen.getByTestId("share-action-btn"); | ||
|
|
||
| expect(shareButton).not.toBeDisabled(); | ||
|
|
||
| fireEvent.click(shareButton); | ||
|
|
||
| const shareWithMenuItem = screen.getByTestId("Share With-option"); | ||
| const unsharehMenuItem = screen.getByTestId("Unshare-option"); | ||
|
|
||
| expect(shareWithMenuItem).toBeInTheDocument(); | ||
| expect(unsharehMenuItem).toBeInTheDocument(); | ||
|
|
||
| fireEvent.click(screen.getByRole("menuitem", { name: "Share With" })); | ||
| expect(onClick).toHaveBeenCalledWith("Share With"); | ||
|
|
||
| fireEvent.click(shareButton); | ||
| fireEvent.click(screen.getByRole("menuitem", { name: "Unshare" })); | ||
| expect(onClick).toHaveBeenCalledWith("Unshare"); | ||
| }); | ||
| }); |
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,61 @@ | ||
| import React from "react"; | ||
| import { IconButton, Menu, MenuItem } from "@mui/material"; | ||
| import ShareIcon from "./ShareIcon"; | ||
| import { blue } from "@mui/material/colors"; | ||
|
|
||
| export enum SharedOptions { | ||
| SHARE_WITH = "Share With", | ||
| UNSHARE = "Unshare", | ||
| } | ||
|
|
||
| const options = [SharedOptions.SHARE_WITH, SharedOptions.UNSHARE]; | ||
|
|
||
| interface PropTypes { | ||
| onClick: (option: string) => void; | ||
| } | ||
|
|
||
| const ShareAction = (props: PropTypes) => { | ||
| const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); | ||
| const open = Boolean(anchorEl); | ||
|
|
||
| const handleClick = (event: React.MouseEvent<HTMLElement>) => { | ||
| setAnchorEl(event.currentTarget); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setAnchorEl(null); | ||
| }; | ||
|
|
||
| const handleMenuItemClick = (option: string) => { | ||
| handleClose(); | ||
|
|
||
| props.onClick(option); | ||
| }; | ||
|
|
||
| return ( | ||
| <span> | ||
| <IconButton onClick={handleClick} data-testid="share-action-btn"> | ||
| <ShareIcon color={blue[500]} /> | ||
| </IconButton> | ||
|
|
||
| <Menu | ||
| anchorEl={anchorEl} | ||
| open={open} | ||
| onClose={handleClose} | ||
| data-testid="share-menu" | ||
| > | ||
| {options.map((option) => ( | ||
| <MenuItem | ||
| data-testid={`${option}-option`} | ||
| key={option} | ||
| onClick={() => handleMenuItemClick(option)} | ||
| > | ||
| {option} | ||
| </MenuItem> | ||
| ))} | ||
| </Menu> | ||
| </span> | ||
| ); | ||
| }; | ||
|
|
||
| export default ShareAction; |
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 React from "react"; | ||
|
|
||
| const ShareIcon = ({ color }) => { | ||
| return ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 20 20" | ||
| fill={color} | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M11.1021 0.0414415C11.3637 -0.0553504 11.658 0.0210169 11.8395 0.232836L19.8395 9.56612C20.0535 9.81577 20.0535 10.1842 19.8395 10.4338L11.8395 19.7671C11.658 19.9789 11.3637 20.0553 11.1021 19.9585C10.8404 19.8617 10.6667 19.6122 10.6667 19.3333L10.6667 13.3454C8.97742 13.4083 7.3773 13.7271 5.89523 14.5324C4.22509 15.4399 2.64408 16.9984 1.25709 19.6429C1.10854 19.9261 0.779777 20.064 0.473652 19.9714C0.167527 19.8787 -0.0296969 19.5818 0.0036683 19.2637C0.253401 16.8829 1.2318 13.7691 3.05345 11.2332C4.77275 8.83982 7.28405 6.91364 10.6667 6.68863L10.6667 0.666695C10.6667 0.387712 10.8404 0.138233 11.1021 0.0414415ZM12 2.46886L12 7.33332C12 7.70151 11.7015 7.99999 11.3333 7.99999C8.1625 7.99999 5.79655 9.69998 4.13634 12.0111C3.26411 13.2254 2.59951 14.5933 2.13108 15.9342C3.10155 14.8008 4.1487 13.9639 5.25866 13.3608C7.19832 12.3069 9.26912 12 11.3333 12C11.7015 12 12 12.2984 12 12.6666L12 17.5311L18.4553 9.99997L12 2.46886Z" | ||
| fill={color} | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default ShareIcon; |