From b95424bb3ba3ee2d54794b0fb1c587b6810ed7b3 Mon Sep 17 00:00:00 2001 From: Chris Date: Sat, 3 Aug 2024 12:29:09 -0700 Subject: [PATCH] chore: Documentation cleanup (#216) Co-authored-by: Om Mishra <32200996+mishraomp@users.noreply.github.com> --- README.md | 20 +--- frontend/README.md | 98 +++++++++++++++++++ frontend/src/assets/svgs/fa-chevron-left.svg | 4 +- frontend/src/assets/svgs/fa-chevron-right.svg | 3 + frontend/src/components/DropdownButton.css | 2 +- .../src/components/HorizontalScroller.css | 5 +- .../src/components/HorizontalScroller.tsx | 8 +- .../components/LocationIconButton.test.tsx | 2 +- frontend/src/components/NotFound.test.tsx | 3 +- frontend/src/components/NotFound.tsx | 2 +- .../src/components/SearchByRadioGroup.tsx | 2 +- frontend/src/constants/constants.ts | 8 ++ frontend/src/constants/data-layers.ts | 5 +- frontend/src/constants/marker-icons.ts | 2 + frontend/src/hooks/useMyLocation.tsx | 4 + frontend/src/hooks/useSwipe.tsx | 11 ++- frontend/src/interfaces/UserDto.ts | 5 - frontend/src/mocks/README.md | 4 + .../AuthorizationDetails.test.tsx | 4 +- .../DetailsBackButton.tsx | 2 +- .../DetailsSection.test.tsx | 4 +- .../authorizationDetails/DetailsSection.tsx | 2 +- .../authorizationDetails/DocumentsSection.tsx | 8 +- .../AuthorizationList.test.tsx | 5 +- .../authorizationList/ListSearchSection.tsx | 19 +++- frontend/src/pages/dashboard/InfoSection.tsx | 22 +++-- .../src/pages/dashboard/LearnMoreCard.tsx | 21 ++-- .../src/pages/dashboard/LearnMoreSection.tsx | 14 +-- frontend/src/pages/map/MapView.css | 4 +- .../map/drawer/ClearSelectedItemButton.tsx | 3 +- frontend/src/pages/map/drawer/MapSidebar.tsx | 2 +- .../pages/map/drawer/SidebarToggleButton.css | 3 +- .../pages/map/drawer/SidebarToggleButton.tsx | 5 +- .../pages/map/hooks/useAutocompleteSearch.tsx | 4 +- .../src/pages/map/hooks/usePlaceNames.tsx | 1 + .../pages/map/layers/AuthorizationMarkers.tsx | 2 +- frontend/src/pages/map/layers/MapControls.css | 4 +- .../src/pages/map/search/AutocompleteItem.css | 2 +- .../src/pages/map/search/DataLayersButton.tsx | 1 + .../src/pages/map/search/FilterByButton.tsx | 4 +- .../pages/map/search/FindMeButton.test.tsx | 2 +- frontend/src/pages/map/search/MapSearch.css | 4 +- .../src/pages/map/search/SearchByButton.tsx | 2 +- .../src/pages/map/search/SearchDialog.css | 4 +- .../src/pages/map/search/SearchDialog.tsx | 1 + frontend/src/test-setup.ts | 2 +- frontend/src/test-utils.tsx | 1 + 47 files changed, 238 insertions(+), 102 deletions(-) create mode 100644 frontend/README.md create mode 100644 frontend/src/assets/svgs/fa-chevron-right.svg delete mode 100644 frontend/src/interfaces/UserDto.ts create mode 100644 frontend/src/mocks/README.md diff --git a/README.md b/README.md index 41c33ff0..cf87d442 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Organics Info (ORI) shares information on authorized biosolids land application and compost facilities regulated under the Organic Matter Recycling Regulation (OMRR) in BC. -This project is part of a the OMRR Transparency Enhancement Initiative led by the Environmental Policy and Initiatives Branch (EPIB) in the Ministry of Environment and Climate Change Strategy. +This project is part of the OMRR Transparency Enhancement Initiative led by the Environmental Policy and Initiatives Branch (EPIB) in the Ministry of Environment and Climate Change Strategy. # Technologies used @@ -52,24 +52,6 @@ Steps: 4. Run the following command in terminal `cd frontend && npm install && npm run dev`, this will start the frontend application on port 3001. -## Running Frontend Tests - -**End to end** tests are run using [Playwright](https://playwright.dev/). -Here are the steps to follow to run the end to end tests: -1. First install Playwright: `npx playwright install` -2. Then run start the server and frontend as shown above in steps 1-4. -3. Run Playwright with this command: `npx playwright test` or `npm run test:e2e` - -To configure playwright edit the `playwright.config.ts` file. -End to end tests are located in the `/e2e` folder. - -**Unit tests** do not require the server or frontend to be running. -You can run the unit tests with this command: `npm run test:unit` -To generate a coverage report, use this command: `npm run test:cov` -The coverage report can be viewed in the `coverage` folder. -Unit tests use [MSW](https://mswjs.io/) to mock API responses, see the -`src/test-setup.ts` file where it is set up. - # Contribution Guidelines Follow the steps outlined in this repository to contribute: [CONTRIBUTING.md](./CONTRIBUTING.md). diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 00000000..885bc000 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,98 @@ +# Organics Info Frontend + +Refer to the project README file in the parent directory for details +on the architecture, libraries, and how to run the whole application. + +The information in this README file will be specific to the frontend only. + +## Scripts + +See the `scripts` section of the `frontend/package.json` file to see +what command line scripts can be run. The most used ones are: +- `npm start` - Starts the local application +- `npm run dev` - Starts the app with network support +- `npm run lint` - Runs the eslint to check for linting issues +- `npm run tsc` - Runs the typescript checker for typing issues +- `npm run test:unit` - Runs unit tests in watch mode +- `npm run test:cov` - Runs unit tests and generates coverage report +- `npm run test-e2e` - Runs Playwright end to end tests + +There is also a `scripts` folder that contains other utility scripts +that can be run. See the README file in that directory for more details. + +## Tests - Playwright and Testing Library + +The [Playwright](https://playwright.dev/) library is used for End to End tests. +It requires the backend server and front end client to be running. + +[Vitest](https://vitest.dev/) is used for the unit tests, along with +[React Testing Library](https://testing-library.com/). +[MSW](https://mswjs.io/) is also used for mocking the 3 API calls. +Unit tests run using jsdom, which is not the same as a full functioning browser, +and as such some features don't work and need to be mocked. +See the `src/test-setup.ts` file for more details. + +### Running End To End Tests + +**End to end** tests are run using [Playwright](https://playwright.dev/). +Here are the steps to follow to run the end to end tests: +1. First install Playwright: `npx playwright install` +2. Then run start the server and frontend as shown above in steps 1-4. +3. Run Playwright with this command: `npx playwright test` or `npm run test:e2e` + +To configure playwright edit the `playwright.config.ts` file. +End to end tests are located in the `/e2e` folder. + +It is also really useful to run the `npx playwright test --ui` command if you +want to debug why a test is failing, or to run certain tests on specific browsers. + +### Running Unit Tests + +**Unit tests** do not require the server or frontend to be running. +You can run the unit tests with this command: `npm run test:unit` +To generate a coverage report, use this command: `npm run test:cov` +The coverage report can be viewed in the `coverage` folder. +Unit tests use [MSW](https://mswjs.io/) to mock API responses, see the +`src/test-setup.ts` file where it is set up. + +## Application Styles - Figma, MUI and CSS + +The [Figma design](https://www.figma.com/design/74nNxjyv6JM6hiT1FluULV/OMRR-(ORI)?node-id=675-3797) +for this application is the source of truth for the text and styles used. + +This application uses a combination of [Material UI](https://mui.com/) components, +custom React components, and CSS stylesheets. + +Material UI is convenient and very helpful for making the application +responsive to different screen sizes. Therefore, MUI components are often +used whenever styles need to change based on the screen size using the +`sx` or `style` attributes. See the MUI +[Responsive UI](https://mui.com/material-ui/guides/responsive-ui/) +page for more details on how it works. + +Basic styling that don't need to change with screen size (for example +colors) is handled with plain CSS files. + +[CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) +(also called custom properties) are used quite frequently to define +color and layout constants. These come directly from the Figma file +and makes it easy to copy styles directly from Figma. +All the custom properties can be found in the `src/properties.css` file. + +## Application State - Redux + +The application state is stored in +[Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts). + +The state is divided into 4 slices: +- **omrr-slice** - Stores the array of authorizations and all search filters, +and has the API call for loading authorizations. +- **applications-slice** - Stores the array of applications +- **documents-slice** - Stores the array of documents +- **map-slice** - Stores all the map related state including selected item, +sidebar width, etc. + +Each slice defines selectors and hooks to allow extracting each piece of state +in the most efficient way. + +It also contains the action functions for changing the state. diff --git a/frontend/src/assets/svgs/fa-chevron-left.svg b/frontend/src/assets/svgs/fa-chevron-left.svg index 5bb8396e..8de655a1 100644 --- a/frontend/src/assets/svgs/fa-chevron-left.svg +++ b/frontend/src/assets/svgs/fa-chevron-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/svgs/fa-chevron-right.svg b/frontend/src/assets/svgs/fa-chevron-right.svg new file mode 100644 index 00000000..15d55a6e --- /dev/null +++ b/frontend/src/assets/svgs/fa-chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/DropdownButton.css b/frontend/src/components/DropdownButton.css index 8996fc2a..f28044bc 100644 --- a/frontend/src/components/DropdownButton.css +++ b/frontend/src/components/DropdownButton.css @@ -1,5 +1,5 @@ .dropdown-button-menu .MuiPaper-root { - padding: 1rem; + padding: var(--layout-padding-medium); border-radius: var(--layout-border-radius-medium); border: 1px solid var(--surface-color-border-light); background: var(--surface-color-background-white); diff --git a/frontend/src/components/HorizontalScroller.css b/frontend/src/components/HorizontalScroller.css index 31efccab..5f48d9cc 100644 --- a/frontend/src/components/HorizontalScroller.css +++ b/frontend/src/components/HorizontalScroller.css @@ -23,7 +23,8 @@ button.horizontal-scroller-button.MuiButton-root { height: 45px; padding: 0; margin: 0; - background: var(--surface-color-primary-default); + color: white; + background-color: var(--surface-color-primary-default); border-radius: 50%; box-shadow: var(--box-shadow-small); display: flex; @@ -38,4 +39,4 @@ button.horizontal-scroller-button.horizontal-scroller-button--left { button.horizontal-scroller-button.horizontal-scroller-button--right { right: 16px; -} \ No newline at end of file +} diff --git a/frontend/src/components/HorizontalScroller.tsx b/frontend/src/components/HorizontalScroller.tsx index d64131f4..bd859a3e 100644 --- a/frontend/src/components/HorizontalScroller.tsx +++ b/frontend/src/components/HorizontalScroller.tsx @@ -1,10 +1,12 @@ import { ReactNode, useEffect, useRef, useState } from 'react' import { Button } from '@mui/material' -import { ChevronLeft, ChevronRight } from '@mui/icons-material' import clsx from 'clsx' import { SwipeDirection, useSwipe } from '@/hooks/useSwipe' +import ChevronLeft from '@/assets/svgs/fa-chevron-left.svg?react' +import ChevronRight from '@/assets/svgs/fa-chevron-right.svg?react' + import './HorizontalScroller.css' const DEFAULT_SCROLL_OFFSET = 100 @@ -107,7 +109,7 @@ function HorizontalScrollerComponent({ className="horizontal-scroller-button horizontal-scroller-button--left" title="Scroll left" > - + )} {scrollRightVisible && ( @@ -118,7 +120,7 @@ function HorizontalScrollerComponent({ className="horizontal-scroller-button horizontal-scroller-button--right" title="Scroll right" > - + )} diff --git a/frontend/src/components/LocationIconButton.test.tsx b/frontend/src/components/LocationIconButton.test.tsx index c62a57b9..39ec73c8 100644 --- a/frontend/src/components/LocationIconButton.test.tsx +++ b/frontend/src/components/LocationIconButton.test.tsx @@ -1,10 +1,10 @@ import { screen } from '@testing-library/react' +import { Mock } from 'vitest' import { LatLngTuple } from 'leaflet' import { render } from '@/test-utils' import { useUserLocation } from '@/features/omrr/omrr-slice' import { LocationIconButton } from './LocationIconButton' -import { Mock } from 'vitest' interface State { userLocation?: LatLngTuple diff --git a/frontend/src/components/NotFound.test.tsx b/frontend/src/components/NotFound.test.tsx index 89d887b6..9487f378 100644 --- a/frontend/src/components/NotFound.test.tsx +++ b/frontend/src/components/NotFound.test.tsx @@ -1,6 +1,7 @@ import { vi } from 'vitest' import { render, screen } from '@testing-library/react' -import NotFound from '@/components/NotFound' + +import NotFound from './NotFound' vi.mock('react-router', () => ({ useNavigate: vi.fn(), diff --git a/frontend/src/components/NotFound.tsx b/frontend/src/components/NotFound.tsx index a0c63c5b..4d71dc4b 100644 --- a/frontend/src/components/NotFound.tsx +++ b/frontend/src/components/NotFound.tsx @@ -1,6 +1,6 @@ +import { useNavigate } from 'react-router' import { Box, Button, Container, Typography } from '@mui/material' import Grid from '@mui/material/Grid' -import { useNavigate } from 'react-router' export default function NotFound() { const navigate = useNavigate() diff --git a/frontend/src/components/SearchByRadioGroup.tsx b/frontend/src/components/SearchByRadioGroup.tsx index 41d1c828..8cfa570c 100644 --- a/frontend/src/components/SearchByRadioGroup.tsx +++ b/frontend/src/components/SearchByRadioGroup.tsx @@ -2,6 +2,7 @@ import { ChangeEvent } from 'react' import { useDispatch } from 'react-redux' import { FormControlLabel, Radio, RadioGroup } from '@mui/material' import { RadioGroupProps } from '@mui/material/RadioGroup/RadioGroup' +import clsx from 'clsx' import { SEARCH_BY_ACTIVE, @@ -9,7 +10,6 @@ import { SEARCH_BY_INACTIVE, } from '@/interfaces/types' import { setSearchBy, useSearchBy } from '@/features/omrr/omrr-slice' -import clsx from 'clsx' interface Props extends Omit { defaultValue?: string diff --git a/frontend/src/constants/constants.ts b/frontend/src/constants/constants.ts index 400a038c..300073b8 100644 --- a/frontend/src/constants/constants.ts +++ b/frontend/src/constants/constants.ts @@ -7,6 +7,7 @@ export const MIN_SEARCH_LENGTH = 3 * How long to wait before performing a search. */ export const SEARCH_DELAY = 300 + /** * The zoom level when zooming to a place. */ @@ -25,8 +26,12 @@ export const FOOTER_HEIGHT = 64 * in its initial state. It can be expanded to full height. */ export const MAP_BOTTOM_DRAWER_HEIGHT = 320 +/** + * The search by, polygon and point search will have a smaller height. + */ export const MAP_BOTTOM_DRAWER_HEIGHT_SMALL = 160 +// The positions of the map controls (zoom in/out etc) export const MAP_CONTROLS_RIGHT_XL = 64 export const MAP_CONTROLS_RIGHT_LG = 48 export const MAP_CONTROLS_RIGHT_SM = 24 @@ -41,4 +46,7 @@ export enum ActiveToolEnum { filterBy = 'filterBy', } +/** + * The smallest allowed radius in meters for the Point Search feature. + */ export const MIN_CIRCLE_RADIUS = 500 diff --git a/frontend/src/constants/data-layers.ts b/frontend/src/constants/data-layers.ts index f45b9f55..304eb640 100644 --- a/frontend/src/constants/data-layers.ts +++ b/frontend/src/constants/data-layers.ts @@ -3,9 +3,12 @@ import { DataLayerGroup } from '@/interfaces/data-layers' const BASE_URL = 'https://openmaps.gov.bc.ca/geo/pub' /** - * All layer urls and params extracted from the ticket. + * All layer urls and params are extracted from these tickets. * Many of them have multiple available styles that can be displayed. + * The `url` field is the WMS url. The `webUrl` is the data catalogue url. + * These values are displayed on the Map page and the Guidance page. * @see https://github.com/bcgov/nr-epd-organics-info/issues/109 + * @see https://github.com/bcgov/nr-epd-organics-info/issues/204 */ export const DATA_LAYER_GROUPS: DataLayerGroup[] = [ { diff --git a/frontend/src/constants/marker-icons.ts b/frontend/src/constants/marker-icons.ts index c6863806..8e6af324 100644 --- a/frontend/src/constants/marker-icons.ts +++ b/frontend/src/constants/marker-icons.ts @@ -30,6 +30,7 @@ export const blueIcon1x = new L.Icon({ shadowAnchor: [8, 4], }) +// Used by Polygon and Point search tools export const crosshairsIcon = new L.Icon({ iconUrl: crosshairsSvg, iconSize: [32, 32], @@ -46,6 +47,7 @@ export const emptyIcon = new L.DivIcon({ iconSize: [0, 0], }) +// Icon used by Polygon search at the vertices export const blackSquareIcon = new L.DivIcon({ html: '
', className: 'black-square-icon', diff --git a/frontend/src/hooks/useMyLocation.tsx b/frontend/src/hooks/useMyLocation.tsx index 2bf57e8b..1ef9186c 100644 --- a/frontend/src/hooks/useMyLocation.tsx +++ b/frontend/src/hooks/useMyLocation.tsx @@ -17,6 +17,10 @@ export function useMyLocation(): MyLocationData { return data } +/** + * Allows querying the browser permissions to see if the geolocation + * permission has been set (granted, prompt, denied). + */ export function useGeolocationPermission(): PermissionState | undefined { const [state, setState] = useState(undefined) diff --git a/frontend/src/hooks/useSwipe.tsx b/frontend/src/hooks/useSwipe.tsx index 1c9c81ad..ac0c9b39 100644 --- a/frontend/src/hooks/useSwipe.tsx +++ b/frontend/src/hooks/useSwipe.tsx @@ -3,10 +3,18 @@ import { RefObject, useEffect, useRef } from 'react' export type SwipeDirection = 'left' | 'right' | 'up' | 'down' export type SwipeCallback = (swipeDirection: SwipeDirection) => void +/** + * A simple hook that will call a callback function + * when a swipe gesture is detected on the reference element. + * @param ref a reference to the HTML element which will receive gestures + * @param callback the callback function for when gestures are detected + * @param {number} [minDistance=20] the minimum distance in pixels required + * for a swipe to be recognized. + */ export function useSwipe( ref: RefObject, callback: SwipeCallback, - minDistance = 30, + minDistance = 20, ) { const callbackRef = useRef(callback) callbackRef.current = callback @@ -53,6 +61,7 @@ export function useSwipe( useEffect(() => { const el = ref.current + // Determine if touch screen enabled device const isTouch = 'ontouchstart' in window if (el) { if (isTouch) { diff --git a/frontend/src/interfaces/UserDto.ts b/frontend/src/interfaces/UserDto.ts deleted file mode 100644 index fa4a8a27..00000000 --- a/frontend/src/interfaces/UserDto.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default interface UserDto { - id: number - name: string - email: string -} diff --git a/frontend/src/mocks/README.md b/frontend/src/mocks/README.md new file mode 100644 index 00000000..dc3d40a3 --- /dev/null +++ b/frontend/src/mocks/README.md @@ -0,0 +1,4 @@ +## Mock Data + +The files in this folder contain mock data that is used by the +Unit Tests. They are copied from the real data when possible. \ No newline at end of file diff --git a/frontend/src/pages/authorizationDetails/AuthorizationDetails.test.tsx b/frontend/src/pages/authorizationDetails/AuthorizationDetails.test.tsx index cee8623a..c07eea9b 100644 --- a/frontend/src/pages/authorizationDetails/AuthorizationDetails.test.tsx +++ b/frontend/src/pages/authorizationDetails/AuthorizationDetails.test.tsx @@ -3,11 +3,11 @@ import { getByText, screen, waitFor } from '@testing-library/react' import { render } from '@/test-utils' import OmrrData from '@/interfaces/omrr' import { OmrrAuthzDocsResponse } from '@/interfaces/omrr-documents' -import { mockOmrrData } from '@/mocks/mock-omrr-data' import { initialState } from '@/features/omrr/omrr-slice' +import { mockOmrrData } from '@/mocks/mock-omrr-data' import { mockOmrrApplicationStatusResponse } from '@/mocks/mock-omrr-application-status' -import AuthorizationDetails from './AuthorizationDetails' import { mockOmrrDocuments } from '@/mocks/mock-omrr-documents' +import AuthorizationDetails from './AuthorizationDetails' describe('Test suite for AuthorizationDetails', () => { function renderComponent( diff --git a/frontend/src/pages/authorizationDetails/DetailsBackButton.tsx b/frontend/src/pages/authorizationDetails/DetailsBackButton.tsx index 8eab045c..ed57756c 100644 --- a/frontend/src/pages/authorizationDetails/DetailsBackButton.tsx +++ b/frontend/src/pages/authorizationDetails/DetailsBackButton.tsx @@ -19,7 +19,7 @@ export function DetailsBackButton() { color="primary" variant="contained" size="medium" - startIcon={} + startIcon={} onClick={onClick} > Back to {searchType} diff --git a/frontend/src/pages/authorizationDetails/DetailsSection.test.tsx b/frontend/src/pages/authorizationDetails/DetailsSection.test.tsx index f77a443c..9b690d95 100644 --- a/frontend/src/pages/authorizationDetails/DetailsSection.test.tsx +++ b/frontend/src/pages/authorizationDetails/DetailsSection.test.tsx @@ -1,9 +1,9 @@ import { render, screen } from '@testing-library/react' import OmrrData, { omrrDataBooleanFields } from '@/interfaces/omrr' -import { DetailsSection } from './DetailsSection' -import { createMockOmrrData } from '@/mocks/mock-omrr-data' import { OPERATION_TYPE_COMPOST_FACILITY } from '@/interfaces/omrr-filter' +import { createMockOmrrData } from '@/mocks/mock-omrr-data' +import { DetailsSection } from './DetailsSection' describe('Test suite for DetailsSection', () => { it('should render DetailsSection for old Notification', () => { diff --git a/frontend/src/pages/authorizationDetails/DetailsSection.tsx b/frontend/src/pages/authorizationDetails/DetailsSection.tsx index d85f082b..abf02f27 100644 --- a/frontend/src/pages/authorizationDetails/DetailsSection.tsx +++ b/frontend/src/pages/authorizationDetails/DetailsSection.tsx @@ -2,7 +2,6 @@ import { ReactNode } from 'react' import { Grid, Stack, Typography } from '@mui/material' import OmrrData from '@/interfaces/omrr' -import { DetailsGridLabel } from './DetailsGridLabel' import { AUTHORIZATION_TYPE_APPROVAL, AUTHORIZATION_TYPE_NOTIFICATION, @@ -17,6 +16,7 @@ import { NotificationLandApplicationGridItems, PermitApprovalOperationalCertificateGridItems, } from './DetailsGridItems' +import { DetailsGridLabel } from './DetailsGridLabel' interface Props { item: OmrrData diff --git a/frontend/src/pages/authorizationDetails/DocumentsSection.tsx b/frontend/src/pages/authorizationDetails/DocumentsSection.tsx index bceebeb9..dad1e31a 100644 --- a/frontend/src/pages/authorizationDetails/DocumentsSection.tsx +++ b/frontend/src/pages/authorizationDetails/DocumentsSection.tsx @@ -1,7 +1,7 @@ import { Link, Stack, Typography } from '@mui/material' -import {env} from '@/env' import clsx from 'clsx' +import { env } from '@/env' import { useDocumentsStatus, useFindAuthorizationDocuments, @@ -55,7 +55,11 @@ export function DocumentsSection({ item }: Readonly) { 'documents-table-cell', canDownload && 'documents-table-cell--link', )} - href={env.VITE_AMS_URL +'download.aspx?PosseObjectId='+ doc.DocumentObjectID} + href={ + env.VITE_AMS_URL + + 'download.aspx?PosseObjectId=' + + doc.DocumentObjectID + } target="_blank" rel={canDownload ? 'noopener noreferrer' : ''} > diff --git a/frontend/src/pages/authorizationList/AuthorizationList.test.tsx b/frontend/src/pages/authorizationList/AuthorizationList.test.tsx index 9168950a..3728bf38 100644 --- a/frontend/src/pages/authorizationList/AuthorizationList.test.tsx +++ b/frontend/src/pages/authorizationList/AuthorizationList.test.tsx @@ -1,9 +1,10 @@ -import AuthorizationList from './AuthorizationList' +import { screen } from '@testing-library/react' + import { render } from '@/test-utils' import { initialState, OmrrSliceState } from '@/features/omrr/omrr-slice' -import { screen } from '@testing-library/react' import { mockActiveOmrrData, mockOmrrData } from '@/mocks/mock-omrr-data' import { SEARCH_BY_ALL } from '@/interfaces/types' +import AuthorizationList from './AuthorizationList' describe('Test suite for AuthorizationList', () => { function renderComponent(state: Partial = {}, pageSize = 2) { diff --git a/frontend/src/pages/authorizationList/ListSearchSection.tsx b/frontend/src/pages/authorizationList/ListSearchSection.tsx index e2049885..57ebdae8 100644 --- a/frontend/src/pages/authorizationList/ListSearchSection.tsx +++ b/frontend/src/pages/authorizationList/ListSearchSection.tsx @@ -1,12 +1,13 @@ import { useState } from 'react' -import { Box, Button } from '@mui/material' -import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material' +import { Box, Button, Collapse } from '@mui/material' import clsx from 'clsx' import { FilterByCheckboxGroup } from '@/components/FilterByCheckboxGroup' import { ListSearchInput } from './ListSearchInput' import { ListSearchByGroup } from './ListSearchByGroup' +import DownArrow from '@/assets/svgs/fa-caret-down.svg?react' + const styles = { searchByRow: { display: 'flex', @@ -42,12 +43,20 @@ export function ListSearchSection() { color="primary" variant="contained" onClick={() => setFiltersExpanded(!filtersExpanded)} - endIcon={filtersExpanded ? : } + endIcon={ + + } > Filter by Facility Type - {filtersExpanded && ( + - )} + ) } diff --git a/frontend/src/pages/dashboard/InfoSection.tsx b/frontend/src/pages/dashboard/InfoSection.tsx index ecb8bb0e..9f479970 100644 --- a/frontend/src/pages/dashboard/InfoSection.tsx +++ b/frontend/src/pages/dashboard/InfoSection.tsx @@ -5,28 +5,32 @@ import infoImage from '@/assets/homepage-info.jpg' const styles = { section: { padding: { - xs: '2.5rem 1.5rem', - md: '5rem', + xs: '40px 24px', + md: '80px', }, }, heading: { - fontSize: '1.5rem', + fontSize: '24px', fontWeight: 'bold', - color: 'black', - marginBottom: '1.5rem', + color: { + xs: 'black', + md: '#313131', + }, + marginBottom: '24px', }, heading2: { fontSize: { - xs: '1.25rem', - md: '1.5rem', + xs: '20px', + md: '24px', }, fontWeight: 'bold', + color: '#313131', }, link: { textDecoration: 'none', }, content: { - paddingBottom: '1.25em', + paddingBottom: '20px', }, stack: { justifyContent: { @@ -36,7 +40,7 @@ const styles = { alignItems: 'flex-start', marginTop: { xs: 0, - md: '2em', + md: '32px', }, gap: { xs: '16px', diff --git a/frontend/src/pages/dashboard/LearnMoreCard.tsx b/frontend/src/pages/dashboard/LearnMoreCard.tsx index e2ae65eb..6de04c1d 100644 --- a/frontend/src/pages/dashboard/LearnMoreCard.tsx +++ b/frontend/src/pages/dashboard/LearnMoreCard.tsx @@ -7,9 +7,10 @@ import { CardMedia, Link, } from '@mui/material' -import { ChevronRight } from '@mui/icons-material' import Grid from '@mui/material/Grid' +import ChevronRight from '@/assets/svgs/fa-chevron-right.svg?react' + const styles = { card: { display: 'flex', @@ -18,17 +19,17 @@ const styles = { header: { padding: 0, marginBottom: { - xs: '0.75rem', - md: '1rem', + xs: '12px', + md: '16px', }, }, title: { fontWeight: 700, - fontSize: '1.125rem', + fontSize: '18px', textDecoration: 'none', display: 'flex', alignItems: 'center', - gap: '1rem', + gap: '16px', color: '#255a90', }, content: { @@ -37,21 +38,21 @@ const styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', - margin: '0 0 1.25em', + margin: '0 0 20px', }, icon: { width: 'auto', - height: '3rem', + height: '48px', }, actions: { - padding: '0 0 1em', + padding: '0 0 16px', }, divider: { display: { xs: 'block', md: 'none', }, - margin: '0.75em 0 0.25em', + margin: '12px 0 4px', borderColor: '#d8d8d8', }, } @@ -74,7 +75,7 @@ export function LearnMoreCard({ const titleElement = ( {title} - + ) diff --git a/frontend/src/pages/dashboard/LearnMoreSection.tsx b/frontend/src/pages/dashboard/LearnMoreSection.tsx index 8de956f8..6a0400dd 100644 --- a/frontend/src/pages/dashboard/LearnMoreSection.tsx +++ b/frontend/src/pages/dashboard/LearnMoreSection.tsx @@ -9,22 +9,22 @@ import identity from '@/assets/svgs/fa-identity.svg' const styles = { section: { margin: { - xs: '1.5em', - md: '5em', + xs: '24px', + md: '80px', }, - gap: '0.25em', + gap: '4px', }, yellowDivider: { - width: '2em', + width: '32px', height: '4px', backgroundColor: '#fcba19', }, heading: { color: 'black', - fontSize: '1.5rem', + fontSize: '24px', fontWeight: 'bold', - lineHeight: '2.25em', - marginBottom: '1rem', + lineHeight: '56px', + marginBottom: '16px', }, } diff --git a/frontend/src/pages/map/MapView.css b/frontend/src/pages/map/MapView.css index 24377113..0c2dcc29 100644 --- a/frontend/src/pages/map/MapView.css +++ b/frontend/src/pages/map/MapView.css @@ -1,9 +1,9 @@ .map-view { width: 100%; - height: calc(100vh - 4em); + height: calc(100vh - var(--header-height)); /* Header is fixed */ - padding-top: 4em; + padding-top: var(--header-height); position: relative; display: flex; flex-direction: column; diff --git a/frontend/src/pages/map/drawer/ClearSelectedItemButton.tsx b/frontend/src/pages/map/drawer/ClearSelectedItemButton.tsx index 7e9625b1..8bdc169f 100644 --- a/frontend/src/pages/map/drawer/ClearSelectedItemButton.tsx +++ b/frontend/src/pages/map/drawer/ClearSelectedItemButton.tsx @@ -24,8 +24,7 @@ export function ClearSelectedItemButton() { variant="contained" size="medium" onClick={onClick} - startIcon={} - sx={{ color: '#2d2d2d' }} + startIcon={} > Back to Search Results diff --git a/frontend/src/pages/map/drawer/MapSidebar.tsx b/frontend/src/pages/map/drawer/MapSidebar.tsx index c9e1d7da..b4167ff1 100644 --- a/frontend/src/pages/map/drawer/MapSidebar.tsx +++ b/frontend/src/pages/map/drawer/MapSidebar.tsx @@ -5,11 +5,11 @@ import { useSidebarState } from '../hooks/useSidebarState' import { SearchResultsList } from './SearchResultsList' import { SidebarToggleButton } from './SidebarToggleButton' import { ZoomToButton } from './ZoomToButton' +import { ClearSelectedItemButton } from './ClearSelectedItemButton' import CloseIcon from '@/assets/svgs/close.svg?react' import './MapSidebar.css' -import { ClearSelectedItemButton } from '@/pages/map/drawer/ClearSelectedItemButton' export function MapSidebar() { // This hook keeps track of the expanded state and calculates the sidebar width diff --git a/frontend/src/pages/map/drawer/SidebarToggleButton.css b/frontend/src/pages/map/drawer/SidebarToggleButton.css index baf35162..083dfacd 100644 --- a/frontend/src/pages/map/drawer/SidebarToggleButton.css +++ b/frontend/src/pages/map/drawer/SidebarToggleButton.css @@ -25,5 +25,6 @@ button.sidebar-toggle-button.MuiButton-root { flex-direction: row; justify-content: center; align-items: center; - gap: 0.5em; + gap: 10px; + color: white; } \ No newline at end of file diff --git a/frontend/src/pages/map/drawer/SidebarToggleButton.tsx b/frontend/src/pages/map/drawer/SidebarToggleButton.tsx index bc3618b2..6e8e556e 100644 --- a/frontend/src/pages/map/drawer/SidebarToggleButton.tsx +++ b/frontend/src/pages/map/drawer/SidebarToggleButton.tsx @@ -1,8 +1,9 @@ import { MouseEventHandler, ReactNode } from 'react' import { Button } from '@mui/material' -import { ChevronRight } from '@mui/icons-material' import clsx from 'clsx' +import ChevronRight from '@/assets/svgs/fa-chevron-right.svg?react' + import './SidebarToggleButton.css' interface Props { @@ -29,8 +30,8 @@ export function SidebarToggleButton({ > {children} diff --git a/frontend/src/pages/map/hooks/useAutocompleteSearch.tsx b/frontend/src/pages/map/hooks/useAutocompleteSearch.tsx index a017c221..feffe94a 100644 --- a/frontend/src/pages/map/hooks/useAutocompleteSearch.tsx +++ b/frontend/src/pages/map/hooks/useAutocompleteSearch.tsx @@ -10,8 +10,8 @@ import { import { AutocompleteOption } from '@/interfaces/autocomplete-option' import { getAutocompleteOptions } from '@/utils/autocomplete' import { usePlaceNames } from './usePlaceNames' -import { useSetSelectedItem } from '@/pages/map/hooks/useSetSelectedItem' -import { useSetSelectedPlace } from '@/pages/map/hooks/useSetSelectedPlace' +import { useSetSelectedItem } from './useSetSelectedItem' +import { useSetSelectedPlace } from './useSetSelectedPlace' export function useAutocompleteSearch() { const dispatch = useDispatch() diff --git a/frontend/src/pages/map/hooks/usePlaceNames.tsx b/frontend/src/pages/map/hooks/usePlaceNames.tsx index 3e3c06d3..9f5ebcfb 100644 --- a/frontend/src/pages/map/hooks/usePlaceNames.tsx +++ b/frontend/src/pages/map/hooks/usePlaceNames.tsx @@ -20,6 +20,7 @@ async function loadPlaces() { /** * Loads the place names from the public/places.json file. + * See the scripts folder for details on how that file is generated. */ export function usePlaceNames(): PlaceNamesResult { const [loading, setLoading] = useState(false) diff --git a/frontend/src/pages/map/layers/AuthorizationMarkers.tsx b/frontend/src/pages/map/layers/AuthorizationMarkers.tsx index 7882e3e3..eaa18ace 100644 --- a/frontend/src/pages/map/layers/AuthorizationMarkers.tsx +++ b/frontend/src/pages/map/layers/AuthorizationMarkers.tsx @@ -1,3 +1,4 @@ +import { useCallback } from 'react' import { useSelector, useStore } from 'react-redux' import MarkerClusterGroup from 'react-leaflet-cluster' import { useTheme } from '@mui/material/styles' @@ -7,7 +8,6 @@ import { selectStatus, useFilteredResults } from '@/features/omrr/omrr-slice' import OmrrData from '@/interfaces/omrr' import { AuthorizationMarker } from './AuthorizationMarker' import { useSetSelectedItem } from '../hooks/useSetSelectedItem' -import { useCallback } from 'react' import { RootState } from '@/app/store' import { ActiveToolEnum } from '@/constants/constants' diff --git a/frontend/src/pages/map/layers/MapControls.css b/frontend/src/pages/map/layers/MapControls.css index 5818e51d..90d2cf61 100644 --- a/frontend/src/pages/map/layers/MapControls.css +++ b/frontend/src/pages/map/layers/MapControls.css @@ -2,10 +2,10 @@ .map-controls { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 8px; border: 0 !important; border-radius: 0; - max-height: calc(100vh - 5em); + max-height: calc(100vh - 80px); transition: margin ease-in-out 0.5s; position: relative; } diff --git a/frontend/src/pages/map/search/AutocompleteItem.css b/frontend/src/pages/map/search/AutocompleteItem.css index a61783f2..359079f5 100644 --- a/frontend/src/pages/map/search/AutocompleteItem.css +++ b/frontend/src/pages/map/search/AutocompleteItem.css @@ -24,7 +24,7 @@ flex-direction: column; justify-content: stretch; align-items: flex-start; - gap: 0.25rem; + gap: 4px; overflow: hidden; } diff --git a/frontend/src/pages/map/search/DataLayersButton.tsx b/frontend/src/pages/map/search/DataLayersButton.tsx index 9c7e5254..5433c654 100644 --- a/frontend/src/pages/map/search/DataLayersButton.tsx +++ b/frontend/src/pages/map/search/DataLayersButton.tsx @@ -16,6 +16,7 @@ export function DataLayersButton() { color="secondary" className="map-button map-button--large" menuClassName="data-layers-button-menu" + openClassName="map-button--active" startIcon={Data layers icon} dropdownContent={} horizontalAlign="right" diff --git a/frontend/src/pages/map/search/FilterByButton.tsx b/frontend/src/pages/map/search/FilterByButton.tsx index 6c761492..52fa84bf 100644 --- a/frontend/src/pages/map/search/FilterByButton.tsx +++ b/frontend/src/pages/map/search/FilterByButton.tsx @@ -1,9 +1,9 @@ +import { useDispatch } from 'react-redux' +import { Button } from '@mui/material' import clsx from 'clsx' import DropdownButton from '@/components/DropdownButton' import { FilterByCheckboxGroup } from '@/components/FilterByCheckboxGroup' -import { Button } from '@mui/material' -import { useDispatch } from 'react-redux' import { toggleActiveTool, useActiveTool } from '@/features/map/map-slice' import { ActiveToolEnum } from '@/constants/constants' diff --git a/frontend/src/pages/map/search/FindMeButton.test.tsx b/frontend/src/pages/map/search/FindMeButton.test.tsx index 6404e2bf..fc4e2725 100644 --- a/frontend/src/pages/map/search/FindMeButton.test.tsx +++ b/frontend/src/pages/map/search/FindMeButton.test.tsx @@ -1,8 +1,8 @@ import { screen, waitForElementToBeRemoved } from '@testing-library/react' +import { Mock } from 'vitest' import { FindMeButton } from './FindMeButton' import { render } from '@/test-utils' -import { Mock } from '~/vitest' describe('Test suite for FindMeButton', () => { it('should render FindMeButton', async () => { diff --git a/frontend/src/pages/map/search/MapSearch.css b/frontend/src/pages/map/search/MapSearch.css index 6f44237c..55e6d42c 100644 --- a/frontend/src/pages/map/search/MapSearch.css +++ b/frontend/src/pages/map/search/MapSearch.css @@ -36,10 +36,10 @@ button.map-button { font-size: 16px; font-weight: 400; - line-height: 1.5rem; + line-height: 24px; display: flex; flex: 0 0 auto; - gap: 0.5rem; + gap: 8px; background-color: var(--surface-color-background-white); color: var(--typography-color-secondary); box-sizing: border-box; diff --git a/frontend/src/pages/map/search/SearchByButton.tsx b/frontend/src/pages/map/search/SearchByButton.tsx index 483e81fe..49c9ef49 100644 --- a/frontend/src/pages/map/search/SearchByButton.tsx +++ b/frontend/src/pages/map/search/SearchByButton.tsx @@ -32,7 +32,7 @@ export function SearchByButton({ isLarge }: Readonly) { ) diff --git a/frontend/src/pages/map/search/SearchDialog.css b/frontend/src/pages/map/search/SearchDialog.css index f0eb0586..0b6a35ad 100644 --- a/frontend/src/pages/map/search/SearchDialog.css +++ b/frontend/src/pages/map/search/SearchDialog.css @@ -26,6 +26,7 @@ button.search-dialog-back-button { min-width: 40px; + padding: 0; width: var(--map-button-height-medium); height: var(--map-button-height-medium); border-color: var(--surface-color-border-dark); @@ -33,8 +34,7 @@ button.search-dialog-back-button { } .search-dialog-back-icon { - width: 10px; - height: 15px; + width: 9px; } .search-dialog-input { diff --git a/frontend/src/pages/map/search/SearchDialog.tsx b/frontend/src/pages/map/search/SearchDialog.tsx index a61dfa5f..ca80aaf4 100644 --- a/frontend/src/pages/map/search/SearchDialog.tsx +++ b/frontend/src/pages/map/search/SearchDialog.tsx @@ -51,6 +51,7 @@ export function SearchDialog({ onClose }: Readonly) { title="Back to the map" onClick={onClose} variant="outlined" + size="small" className="search-dialog-back-button" > diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts index 75b08c0b..51626a7f 100644 --- a/frontend/src/test-setup.ts +++ b/frontend/src/test-setup.ts @@ -1,13 +1,13 @@ import '@testing-library/jest-dom' import '@testing-library/jest-dom/vitest' import * as matchers from '@testing-library/jest-dom/matchers' +import { cleanup } from '@testing-library/react' import { afterAll, afterEach, beforeAll, expect } from 'vitest' import { http, HttpResponse } from 'msw' import { setupServer } from 'msw/node' import mediaQuery from 'css-mediaquery' import OmrrResponse from '@/interfaces/omrr-response' -import { cleanup } from '@testing-library/react' import { mockOmrrData } from '@/mocks/mock-omrr-data' import { mockPlaces } from '@/mocks/mock-places' import { mockOmrrApplicationStatusResponse } from '@/mocks/mock-omrr-application-status' diff --git a/frontend/src/test-utils.tsx b/frontend/src/test-utils.tsx index 2b7d5ec4..0e72b1e6 100644 --- a/frontend/src/test-utils.tsx +++ b/frontend/src/test-utils.tsx @@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom' import { render, RenderOptions } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import { Provider } from 'react-redux' + import { loadApiData, RootState, setupStore } from '@/app/store' interface TestRouterProps {