Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MAT-7099: result page icons #384

Merged
merged 3 commits into from
Nov 29, 2024
Merged

MAT-7099: result page icons #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4055f6e
MAT-7099 result page icons
ethankaplan Nov 25, 2024
7a38447
Merge branch 'develop' into MAT-7099
ethankaplan Nov 27, 2024
d908af5
MAT-7099 remove unused code
ethankaplan Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 3 additions & 13 deletions src/CqlBuilderPanel/codesSection/codesSubSection/codeSubSection/ResultsSection.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ describe("Results Section component", () => {
expect(resultsContent).toBeInTheDocument();
let applyBtn;
await act(async () => {
applyBtn = await findByTestId(resultsContent, "select-action-0_apply");
applyBtn = await findByTestId(resultsContent, "apply-code-0");
expect(applyBtn).toBeDefined();
userEvent.click(applyBtn);
});
Expand All @@ -95,7 +95,7 @@ describe("Results Section component", () => {
expect(resultsContent).toBeInTheDocument();
let applyBtn;
await act(async () => {
applyBtn = await findByTestId(resultsContent, "select-action-0_apply");
applyBtn = await findByTestId(resultsContent, "apply-code-0");
expect(applyBtn).toBeDefined();
userEvent.click(applyBtn);
});
Expand Down Expand Up @@ -125,12 +125,6 @@ describe("Results Section component", () => {
"DoNotDisturbOnIcon"
);

await waitFor(() => {
const selectButton = screen.getByTestId(`select-action-0_apply`);
expect(selectButton).toBeInTheDocument();
userEvent.click(selectButton);
});

const editButton = screen.getByTestId(`edit-code-0`);
expect(editButton).toBeInTheDocument();

Expand Down Expand Up @@ -158,11 +152,7 @@ describe("Results Section component", () => {
{ ...mockCode, status: CodeStatus.NA },
"DoNotDisturbOnIcon"
);
await waitFor(() => {
const selectButton = screen.getByTestId(`select-action-0_apply`);
expect(selectButton).toBeInTheDocument();
userEvent.click(selectButton);
});

const editButton = screen.getByTestId(`edit-code-0`);
userEvent.click(editButton);
await waitFor(() => {
Expand Down
83 changes: 36 additions & 47 deletions src/CqlBuilderPanel/codesSection/codesSubSection/codeSubSection/ResultsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import DoDisturbOutlinedIcon from "@mui/icons-material/DoDisturbOutlined";
import DoNotDisturbOnIcon from "@mui/icons-material/DoNotDisturbOn";
import ExpandingSection from "../../../../common/ExpandingSection";
import ControlPointIcon from "@mui/icons-material/ControlPoint";
import BorderColorOutlinedIcon from "@mui/icons-material/BorderColorOutlined";

import {
useReactTable,
Expand All @@ -15,7 +17,6 @@ import {
import { Code, CodeStatus } from "../../../../api/useTerminologyServiceApi";
import ToolTippedIcon from "../../../../toolTippedIcon/ToolTippedIcon";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Popover } from "@madie/madie-design-system/dist/react";
import "./ResultsSection.scss";
import EditCodeDetailsDialog from "../common/EditCodeDetailsDialog";

Expand All @@ -41,9 +42,6 @@ export default function ResultsSection({
code,
handleApplyCode,
}: ResultSectionProps) {
const [optionsOpen, setOptionsOpen] = useState<boolean>(false);
const [anchorEl, setAnchorEl] = useState(null);
const [selectedReferenceId, setSelectedReferenceId] = useState<string>(null);
const [selectedCodeDetails, setSelectedCodeDetails] =
useState<ResultsColumnRow>(null);
const [openEditCodeDialog, setOpenEditCodeDialog] = useState<boolean>(false);
Expand All @@ -52,18 +50,9 @@ export default function ResultsSection({
selectedId,
event: React.MouseEvent<HTMLButtonElement>
) => {
setOptionsOpen(true);
setSelectedReferenceId(selectedId);
setAnchorEl(event.currentTarget);
setSelectedCodeDetails(table.getRow(selectedId).original);
};

const handleClose = () => {
setOptionsOpen(false);
setSelectedReferenceId(null);
setAnchorEl(null);
};

const data = [code];
const columns = useMemo<ColumnDef<ResultsColumnRow>[]>(
() => [
Expand Down Expand Up @@ -91,19 +80,38 @@ export default function ResultsSection({
header: "",
accessorKey: "apply",
cell: (row: any) => (
<div className="inline-flex gap-x-2">
<button
className="action-button"
onClick={(e) => handleOpen(row.cell.row.id, e)}
tw="text-blue-600 hover:text-blue-900"
data-testid={`select-action-${row.cell.id}`}
aria-label={`select-action-${row.cell.id}`}
<div className="inline-flex gap-x-2" style={{ width: "max-content" }}>
<ToolTippedIcon
tooltipMessage="Edit"
buttonProps={{
"data-testid": `edit-code-${row.cell.row.id}`,
"aria-label": `edit-code-${row.cell.row.id}`,
size: "small",
onClick: (e) => {
setSelectedCodeDetails(
table.getRow(row.cell.row.id).original
);
handleEditCode();
},
}}
>
<BorderColorOutlinedIcon color="primary" />
</ToolTippedIcon>
<ToolTippedIcon
tooltipMessage="Apply"
buttonProps={{
"data-testid": `apply-code-${row.cell.row.id}`,
"aria-label": `apply-code-${row.cell.row.id}`,
size: "small",
onClick: (e) => {
const selectedCode = table.getRow(row.cell.row.id).original;
setSelectedCodeDetails(selectedCode);
handleApplyCodeInner(selectedCode);
},
}}
>
<div className="action">Select</div>
<div className="chevron-container">
<ExpandMoreIcon />
</div>
</button>
<ControlPointIcon color="primary" />
</ToolTippedIcon>
</div>
),
},
Expand All @@ -116,17 +124,15 @@ export default function ResultsSection({
columns,
getCoreRowModel: getCoreRowModel(),
});
const handleApplyCodeInner = () => {
handleApplyCode(selectedCodeDetails);
setOptionsOpen(false);
const handleApplyCodeInner = (selectedCode) => {
handleApplyCode(selectedCode);
};

const toggleEditCodeDialogState = () => {
setOpenEditCodeDialog(!open);
};

const handleEditCode = () => {
setOptionsOpen(false);
setOpenEditCodeDialog(true);
};

Expand Down Expand Up @@ -207,24 +213,7 @@ export default function ResultsSection({
))
)}
</tbody>
<Popover
optionsOpen={optionsOpen}
anchorEl={anchorEl}
ethankaplan marked this conversation as resolved.
Show resolved Hide resolved
handleClose={handleClose}
canEdit={true}
editViewSelectOptionProps={{
label: "Apply",
toImplementFunction: () => handleApplyCodeInner(),
dataTestId: `apply-code-${selectedReferenceId}`,
}}
otherSelectOptionProps={[
{
label: "Edit",
toImplementFunction: () => handleEditCode(),
dataTestId: `edit-code-${selectedReferenceId}`,
},
]}
/>
<ControlPointIcon color="primary" />
</table>
<EditCodeDetailsDialog
selectedCodeDetails={selectedCodeDetails}
Expand Down
Loading