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.

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

fix(SILVA-558): opening details prompt modal #471

Merged
merged 11 commits into from
Nov 18, 2024
27 changes: 27 additions & 0 deletions frontend/src/__test__/components/ComingSoonModal.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
//vite test for the ComingSoonModal component
import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import ComingSoonModal from '../../components/ComingSoonModal';

describe('ComingSoonModal', () => {
it('renders the modal', () => {
render(<ComingSoonModal openingDetails="123" setOpeningDetails={vi.fn()} />);
expect(screen.getByText('Coming Soon')).toBeInTheDocument();
expect(screen.getByText('An opening details page is in development.')).toBeInTheDocument();
});

it('renders the modal with the correct opening ID', () => {
render(<ComingSoonModal openingDetails="1234" setOpeningDetails={vi.fn()} />);
expect(screen.getByText('Opening ID: 1234')).toBeInTheDocument();
});

it('calls the setOpeningDetails function when the modal is closed', async() => {
const setOpeningDetails = vi.fn();
render(<ComingSoonModal openingDetails="123" setOpeningDetails={setOpeningDetails} />);
const closeButton = screen.getByRole('button', { name: 'Close' });
await closeButton.click();
expect(setOpeningDetails).toHaveBeenCalled();
});

});
26 changes: 26 additions & 0 deletions frontend/src/components/ComingSoonModal/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Modal } from "@carbon/react";
interface IComingSoonModal {
openingDetails: string;
setOpeningDetails: (openingDetails: string) => void;
}

const ComingSoonModal: React.FC<IComingSoonModal> = ({
openingDetails,
setOpeningDetails,
}) => {
return (
<Modal
open={openingDetails.length > 0}
onRequestClose={() => setOpeningDetails("")}
passiveModal
modalHeading="Coming Soon"
modalLabel={`Opening ID: ${openingDetails}`}
>
<p className="modal-subtext">An opening details page is in development.</p> <br/>
<p className="modal-subtext">
{` Until it's available, search for ${openingDetails} in RESULTS to view the opening details.`}
</p>
</Modal>
);
};
export default ComingSoonModal;
7 changes: 7 additions & 0 deletions frontend/src/components/ComingSoonModal/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
@use '@carbon/type';

.modal-subtext {
@include type.type-style('body-02');
font-size: 14px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ import {
Row,
Column,
MenuItemDivider,
Modal,
ActionableNotification
} from "@carbon/react";
import * as Icons from "@carbon/icons-react";
import StatusTag from "../../../StatusTag";
Expand All @@ -46,6 +44,7 @@ import { usePostViewedOpening } from "../../../../services/queries/dashboard/das
import { useNotification } from '../../../../contexts/NotificationProvider';
import TruncatedText from "../../../TruncatedText";
import FriendlyDate from "../../../FriendlyDate";
import ComingSoonModal from "../../../ComingSoonModal";


interface ISearchScreenDataTable {
Expand Down Expand Up @@ -85,7 +84,7 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
const [openDownload, setOpenDownload] = useState(false);
const [selectedRows, setSelectedRows] = useState<string[]>([]); // State to store selected rows
const [toastText, setToastText] = useState<string | null>(null);
const [openingDetails, setOpeningDetails] = useState(false);
const [openingDetails, setOpeningDetails] = useState('');
const { mutate: markAsViewedOpening, isError, error } = usePostViewedOpening();
const navigate = useNavigate();

Expand Down Expand Up @@ -134,7 +133,7 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
// Call the mutation to mark as viewed
markAsViewedOpening(openingId, {
onSuccess: () => {
setOpeningDetails(true)
setOpeningDetails(openingId.toString());
},
onError: (err: any) => {
// Display error notification (UI needs to be designed for this)
Expand Down Expand Up @@ -316,7 +315,9 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
<TableRow>
{headers.map((header) =>
header.selected ? (
<TableHeader key={header.key} data-testid={header.header}>{header.header}</TableHeader>
<TableHeader key={header.key} data-testid={header.header}>
{header.header}
</TableHeader>
) : null
)}
</TableRow>
Expand All @@ -326,24 +327,29 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
rows.map((row: any, i: number) => (
<TableRow
key={row.openingId + i.toString()}
onClick={() => {
//add the api call to send the viewed opening
handleRowClick(row.openingId);
}}
>
{headers.map((header) =>
header.selected ? (
<TableCell
ref={(el: never) => (cellRefs.current[i] = el)}
key={header.key}
className={header.key === "actions" && showSpatial ? "p-0" : null}
onClick={() => {
if(header.key !== "actions")
handleRowClick(row.openingId);
}
className={
header.key === "actions" && showSpatial ? "p-0" : null
}
onClick={() => {
if (header.key !== "actions")
handleRowClick(row.openingId);
}}
>
{header.key === "statusDescription" ? (
<StatusTag code={row[header.key]} />
) : header.key === "actions" ? (
<CheckboxGroup
labelText=""
labelText=""
orientation="horizontal"
className="align-items-center justify-content-start"
>
Expand All @@ -355,7 +361,17 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
align="bottom-left"
autoAlign
>
<div className="mb-2 mx-2">
<div
className="mb-2 mx-2"
onClick={(e) => e.stopPropagation()}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleRowSelectionChanged(row.openingId);
}
}}
>
<Checkbox
id={`checkbox-label-${row.openingId}`}
data-testid={`checkbox-${row.openingId}`}
Expand Down Expand Up @@ -403,10 +419,15 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
</OverflowMenu>
</CheckboxGroup>
) : header.header === "Category" ? (
<TruncatedText
text={row["categoryCode"] + " - " + row["categoryDescription"]}
parentWidth={cellWidths[i]} />
) : header.key === 'disturbanceStartDate' ? (
<TruncatedText
text={
row["categoryCode"] +
" - " +
row["categoryDescription"]
}
parentWidth={cellWidths[i]}
/>
) : header.key === "disturbanceStartDate" ? (
<FriendlyDate date={row[header.key]} />
) : (
row[header.key]
Expand Down Expand Up @@ -453,12 +474,9 @@ const SearchScreenDataTable: React.FC<ISearchScreenDataTable> = ({
/>
)}

<Modal
open={openingDetails}
onRequestClose={() => setOpeningDetails(false)}
passiveModal
modalHeading="We are working hard to get this feature asap, unfortunately you cannot view the opening details from SILVA atm."
modalLabel="Opening Details"
<ComingSoonModal
openingDetails={openingDetails}
setOpeningDetails={setOpeningDetails}
/>
</>
);
Expand Down
Loading