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

Update react scripts #5908

Closed
wants to merge 8 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
frontend-code-test:
resource_class: large
docker:
- image: cimg/node:16.20
- image: cimg/node:18.19
working_directory: /home/circleci/tasking-manager
steps:
- checkout
Expand Down Expand Up @@ -184,7 +184,7 @@ jobs:
working_directory: /home/circleci/tasking-manager
resource_class: medium
docker:
- image: cimg/python:3.10.7-node
- image: cimg/python:3.10-node
steps:
- checkout
- aws-cli/setup:
Expand Down Expand Up @@ -236,7 +236,7 @@ jobs:
working_directory: /home/circleci/tasking-manager
resource_class: large
docker:
- image: cimg/python:3.10.7-node
- image: cimg/python:3.10-node
parameters:
stack_name:
description: "the name of the stack for cfn-config"
Expand Down
28 changes: 28 additions & 0 deletions frontend/craco.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
// Fix CRA #11770
const rules = webpackConfig.module.rules;
for (const rule of rules) {
if (Object.hasOwn(rule, 'oneOf')) {
rule.oneOf.filter((currentValue, index, arr) => {
const toRemove =
currentValue.test instanceof RegExp && currentValue.test.test('something.svg');
if (toRemove) {
arr.splice(index, 1);
}
return toRemove;
});
rule.oneOf.push({
test: /\.svg$/i,
issuer: {
and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
},
type: 'asset',
});
}
}
return webpackConfig;
},
},
};
12 changes: 7 additions & 5 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"@placemarkio/geo-viewport": "^1.0.1",
"@rapideditor/rapid": "^2.1.1",
"@sentry/react": "^7.60.1",
"@tmcw/togeojson": "^4.7.0",
"@tanstack/react-query": "^4.29.7",
"@tanstack/react-query-devtools": "^4.29.7",
"@tmcw/togeojson": "^4.7.0",
"@turf/area": "^6.5.0",
"@turf/bbox": "^6.5.0",
"@turf/bbox-polygon": "^6.5.0",
Expand Down Expand Up @@ -57,7 +57,6 @@
"react-placeholder": "^4.1.0",
"react-redux": "^8.1.1",
"react-router-dom": "^6.13.0",
"react-scripts": "^4.0.3",
"react-select": "^5.7.3",
"react-tooltip": "^4.2.21",
"reactjs-popup": "^2.0.5",
Expand Down Expand Up @@ -86,11 +85,11 @@
"patch-id": "bash -c \"cp patch/imagery.min.json public/static/id/data\"",
"patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
"preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
"start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && react-scripts start",
"build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && react-scripts build && npm run sentry:sourcemaps",
"start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && craco start",
"build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && craco build && npm run sentry:sourcemaps",
"prettier": "prettier --write 'src/**/*.js'",
"lint": "eslint src",
"test": "npm run lint && react-scripts test --env=jsdom",
"test": "npm run lint && craco test --env=jsdom",
"coverage": "npm run test -- --coverage --watchAll=false",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"sentry:sourcemaps": "if sentry-cli info; then sentry-cli sourcemaps inject --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build && sentry-cli sourcemaps upload --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build; fi"
Expand All @@ -112,16 +111,19 @@
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@craco/craco": "^7.1.0",
"@sentry/cli": "^2.20.5",
"@tanstack/eslint-plugin-query": "^4.29.8",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"combine-react-intl-messages": "^4.0.0",
"jest": "^29.6.3",
"jest-canvas-mock": "^2.5.1",
"msw": "0.49.2",
"prettier": "^2.8.8",
"react-scripts": "^5.0.1",
"react-select-event": "^5.5.1",
"react-test-renderer": "^17.0.2",
"source-map-explorer": "^2.5.3"
Expand Down
9 changes: 3 additions & 6 deletions frontend/src/components/homepage/testimonials.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';

import messages from './messages';
import IfrcImage from '../../assets/img/testimonials/ifrc.jpg';
// import {RightIcon, LeftIcon} from '../../svgIcons';

export function Testimonials() {
Expand All @@ -11,7 +12,7 @@ export function Testimonials() {
bio: messages.ifrcBio,
citation: messages.ifrcCitation,
cssCode: 'ifrc',
image: '.../../images/ifrc.png',
image: IfrcImage,
},
];

Expand All @@ -30,11 +31,7 @@ export function Testimonials() {
<div className="testimony relative" key={person.name}>
{/* <div key={n} className={`blue-dark testimonial-${person.cssCode} relative`} /> */}
<div className="testimonial-image-parent">
<img
className="testimonial-image"
src={require('../../assets/img/testimonials/ifrc.jpg').default}
alt={person.name}
/>
<img className="testimonial-image" src={person.image} alt={person.name} />
</div>
<div className="citation-ctr">
<p className="bg-red white pv2 pl3 pr1 citation ma0 relative">
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/rapidEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { OSM_CLIENT_ID, OSM_CLIENT_SECRET, OSM_REDIRECT_URI, OSM_SERVER_URL } fr
import { types } from '../store/actions/editor';

// We import from a CDN using a SEMVER minor version range
import { version as rapidVersion, name as rapidName } from '@rapideditor/rapid/package.json';
import rapidPackage from '@rapideditor/rapid/package.json';

const baseCdnUrl = `https://cdn.jsdelivr.net/npm/${rapidName}@~${rapidVersion}/dist/`;
const baseCdnUrl = `https://cdn.jsdelivr.net/npm/${rapidPackage.name}@~${rapidPackage.version}/dist/`;
// We currently copy rapid files to the public/static/rapid directory. This should probably remain,
// since it can be useful for debugging rapid issues in the TM.
// const baseCdnUrl = '/static/rapid/';
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/components/statsTimestamp/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,18 @@ function StatsTimestamp({ messageType }) {
minute: 'numeric',
};

const message = intl.formatMessage(messages[messageType], {
formattedDate: intl.formatDate(lastUpdated, dateOptions),
timeZone: intl.timeZone,
});

return (
<div>
<InfoIcon
className="blue-grey h1 w1 v-mid ml2 pointer"
data-tip={intl.formatMessage(messages[messageType], {
formattedDate: intl.formatDate(lastUpdated, dateOptions),
timeZone: intl.timeZone,
})}
data-tip={message}
data-for="ohsome-timestamp"
aria-label={message}
/>
<ReactTooltip id="ohsome-timestamp" place="top" className="mw6" effect="solid" />
</div>
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/components/taskSelection/tests/action.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '@testing-library/jest-dom';
import { screen, waitFor, within } from '@testing-library/react';
import { act, screen, waitFor, within } from '@testing-library/react';

import { getProjectSummary } from '../../../network/tests/mockData/projects';
import { userMultipleLockedTasksDetails } from '../../../network/tests/mockData/userStats';
Expand Down Expand Up @@ -77,18 +77,18 @@ describe('Task Map Action', () => {
});

describe('Session Expire Dialogs', () => {
beforeEach(() => {
jest.useFakeTimers();
beforeEach(async () => {
await act(() => jest.useFakeTimers());
});

afterEach(() => {
jest.runOnlyPendingTimers();
afterEach(async () => {
await act(() => jest.runOnlyPendingTimers());
jest.useRealTimers();
});

it('should display modal to notify user session about to expire', async () => {
setup();
jest.advanceTimersByTime(6900000);
await act(() => jest.advanceTimersByTime(6900000));
const extendSessionDialog = screen.getByRole('dialog');
expect(within(extendSessionDialog).getByRole('heading')).toHaveTextContent(
messages.sessionAboutToExpireTitle.defaultMessage,
Expand All @@ -97,7 +97,7 @@ describe('Session Expire Dialogs', () => {

it('should display modal to notify user session has ended', async () => {
setup();
jest.advanceTimersByTime(7200000);
await act(() => jest.advanceTimersByTime(7200000));
const extendSessionDialog = screen.getByRole('dialog');
expect(within(extendSessionDialog).getByRole('heading')).toHaveTextContent(
messages.sessionExpiredTitle.defaultMessage,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,7 @@ test('FeatureStats renders the correct values and labels', async () => {
// Uncomment the following when POIs and waterways become available
// expect(screen.getByText('183,011')).toBeInTheDocument();
// expect(screen.getByText('350,906')).toBeInTheDocument();
// We need to wait for network requests to complete -- otherwise, logging the errors to console may cause jest to fail
// Note: The time is 2023-10-03T15:47:49Z, but time zones may mess things up (+- 12 hours).
await waitFor(() => expect(screen.getByLabelText(/These statistics come from ohsomeNow Stats and were last updated at Oct 0[34], 2023, .{10,}. Missing fields will be made available soon!/)).toBeInTheDocument());
});
20 changes: 11 additions & 9 deletions frontend/src/components/tests/dropdown.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import TestRenderer from 'react-test-renderer';
import TestRenderer, { act } from 'react-test-renderer';

import { CustomButton } from '../button';
import { Dropdown } from '../dropdown';
Expand Down Expand Up @@ -40,10 +40,12 @@ test('dropdown-content is not rendered before the user clicks on the button', ()

test('dropdown-content disappear after click on option', () => {
const elementInstance = createTestDropdown([{ label: 'English' }, { label: 'Portuguese (pt)' }]);
elementInstance.findByType(CustomButton).props.onClick();
elementInstance
.findAllByProps({ className: 'pa3 nowrap bg-animate bg-white hover-bg-tan' })[0]
.children[0].props.onClick();
act(() => elementInstance.findByType(CustomButton).props.onClick());
act(() =>
elementInstance
.findAllByProps({ className: 'pa3 nowrap bg-animate bg-white hover-bg-tan' })[0]
.children[0].props.onClick(),
);
// dropdown-content should disappear after selecting an option
expect(() =>
elementInstance.findByProps({
Expand All @@ -62,7 +64,7 @@ test('dropdown behaviour with href props', () => {
{ label: 'B', href: 'http://b.co' },
{ label: 'C', href: 'http://c.co' },
]);
elementInstance.findByType(CustomButton).props.onClick();
act(() => elementInstance.findByType(CustomButton).props.onClick());
// dropdown-content must be rendered after the click
expect(
elementInstance.findByProps({
Expand Down Expand Up @@ -99,7 +101,7 @@ test('dropdown behaviour with multi enabled', () => {
</MemoryRouter>,
);
const elementInstance = testElement.root;
elementInstance.findByType(CustomButton).props.onClick();
act(() => elementInstance.findByType(CustomButton).props.onClick());
// dropdown-content must be rendered after the click
expect(
elementInstance.findByProps({
Expand Down Expand Up @@ -132,7 +134,7 @@ test('dropdown with toTop enabled should have bottom-3 class', () => {
</MemoryRouter>,
);
const elementInstance = testElement.root;
elementInstance.findByType(CustomButton).props.onClick();
act(() => elementInstance.findByType(CustomButton).props.onClick());
// dropdown-content must be rendered after the click
expect(
elementInstance.findByProps({
Expand Down Expand Up @@ -169,7 +171,7 @@ test('dropdown with more than 9 options has "h5 overflow-y-scroll" classes', ()
</MemoryRouter>,
);
const elementInstance = testElement.root;
elementInstance.findByType(CustomButton).props.onClick();
act(() => elementInstance.findByType(CustomButton).props.onClick());
// dropdown-content must be rendered after the click
expect(
elementInstance.findByProps({
Expand Down
14 changes: 11 additions & 3 deletions frontend/src/components/user/list.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,15 +152,22 @@ export const UsersTable = ({ filters, setFilters }) => {
const [error, setError] = useState(null);

useEffect(() => {
let abort = false;
const fetchUsers = async (filters) => {
setLoading(true);
const url = `users/?${filters}`;
fetchLocalJSONAPI(url, token)
.then((res) => {
setResponse(res);
setLoading(false);
if (!abort) {
setResponse(res);
setLoading(false);
}
})
.catch((err) => setError(err));
.catch((err) => {
if (!abort) {
setError(err);
}
});
};

// Filter elements according to logic.
Expand All @@ -183,6 +190,7 @@ export const UsersTable = ({ filters, setFilters }) => {
.join('&');

fetchUsers(urlFilters);
return () => abort = true;
}, [filters, token, status]);

return (
Expand Down
Loading
Loading