Merge pull request #958 from spearec/reactstrap

Update reactstrap and edit/create modal validation

.eslintrc.json

@@ -73,7 +73,6 @@
         {
             // TODO: Remove this override once these components have been converted to use hooks
             "files": [
-                "src/client/app/components/UIModalComponent.tsx",
                 "src/client/app/containers/admin/CreateUserContainer.tsx",
                 "src/client/app/containers/csv/UploadCSVContainer.tsx"
             ],
@@ -93,7 +92,7 @@
                 "@typescript-eslint"
             ],
             "rules": {
-                // only to be used when declaring props as {}. Example is in UIModalComponent, ie; extends React.Component<{}>
+                // only to be used when declaring props as {}.
                 // is used in conjunction with overrides
                 // https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns
                 "@typescript-eslint/ban-types": [

package.json

@@ -71,7 +71,7 @@
     "axios": "~0.24.0",
     "bcryptjs": "~2.4.3",
     "body-parser": "~1.20.2",
-    "bootstrap": "~4.3.1",
+    "bootstrap": "~5.2.3",
     "cookie-parser": "~1.4.6",
     "csv": "~5.3.2",
     "csv-parse": "~4.16.3",
@@ -99,7 +99,6 @@
     "query-string": "~7.0.1",
     "rc-slider": "~8.6.6",
     "react": "~17.0.2",
-    "react-bootstrap": "~2.2.3",
     "react-dom": "~17.0.2",
     "react-intl": "~5.22.0",
     "react-notification-system": "~0.4.0",
@@ -108,7 +107,7 @@
     "react-router-dom": "~5.3.0",
     "react-select": "~5.2.0",
     "react-tooltip": "~4.2.20",
-    "reactstrap": "~8.10.0",
+    "reactstrap": "~9.1.10",
     "redux": "~4.2.1",
     "redux-thunk": "~2.4.0",
     "serve-favicon": "~2.5.0",

src/client/app/actions/admin.ts

@@ -14,6 +14,7 @@ import translate from '../utils/translate';
 import { LanguageTypes } from '../types/redux/i18n';
 import * as moment from 'moment';
 import { AreaUnitType } from '../utils/getAreaUnitConversion';
+import { updateSelectedLanguage } from './options';
 
 export function updateSelectedMeter(meterID: number): t.UpdateImportMeterAction {
 	return { type: ActionType.UpdateImportMeter, meterID };
@@ -95,6 +96,9 @@ function fetchPreferences(): Thunk {
 				if (preferences.defaultAreaNormalization !== state.graph.areaNormalization) {
 					dispatch2(toggleAreaNormalization());
 				}
+				if (preferences.defaultLanguage !== state.options.selectedLanguage) {
+					dispatch2(updateSelectedLanguage(preferences.defaultLanguage));
+				}
 			});
 		}
 	};

src/client/app/actions/graph.ts

@@ -70,8 +70,8 @@ export function setHotlinkedAsync(hotlinked: boolean): Thunk {
 	};
 }
 
-export function setOptionsVisibility(visibility: boolean): t.SetOptionsVisibility {
-	return { type: ActionType.SetOptionsVisibility, visibility };
+export function toggleOptionsVisibility(): t.ToggleOptionsVisibility {
+	return { type: ActionType.ToggleOptionsVisibility };
 }
 
 function changeGraphZoom(timeInterval: TimeInterval): t.ChangeGraphZoomAction {
@@ -229,7 +229,7 @@ export function changeOptionsFromLink(options: LinkOptions) {
 	// Visual Studio indents after the first line in autoformat but ESLint does not like that in this case so override.
 	/* eslint-disable @typescript-eslint/indent */
 	const dispatchSecond: Array<Thunk | t.ChangeChartToRenderAction | t.ChangeBarStackingAction |
-		t.ChangeGraphZoomAction | t.ChangeCompareSortingOrderAction | t.SetOptionsVisibility |
+		t.ChangeGraphZoomAction | t.ChangeCompareSortingOrderAction | t.ToggleOptionsVisibility |
 		m.UpdateSelectedMapAction | t.UpdateLineGraphRate | t.ToggleAreaNormalizationAction |
 		t.UpdateSelectedAreaUnitAction> = [];
 	/* eslint-enable @typescript-eslint/indent */
@@ -278,7 +278,7 @@ export function changeOptionsFromLink(options: LinkOptions) {
 		dispatchSecond.push(changeCompareSortingOrder(options.compareSortingOrder));
 	}
 	if (options.optionsVisibility != null) {
-		dispatchSecond.push(setOptionsVisibility(options.optionsVisibility));
+		dispatchSecond.push(toggleOptionsVisibility());
 	}
 	if (options.mapID) {
 		// TODO here and elsewhere should be IfNeeded but need to check that all state updates are done when edit, etc.

src/client/app/actions/options.ts

@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+  * License, v. 2.0. If a copy of the MPL was not distributed with this
+  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { ActionType } from '../types/redux/actions';
+import { LanguageTypes } from '../types/redux/i18n';
+import * as t from '../types/redux/options';
+
+export function updateSelectedLanguage(selectedLanguage: LanguageTypes): t.UpdateSelectedLanguageAction {
+	return {type: ActionType.UpdateSelectedLanguage, selectedLanguage };
+}

src/client/app/components/ChartDataSelectComponent.tsx

@@ -291,6 +291,7 @@ export default function ChartDataSelectComponent() {
 		<div>
 			<p style={labelStyle}>
 				<FormattedMessage id='groups' />:
+				<TooltipMarkerComponent page='home' helpTextId='help.home.select.groups' />
 			</p>
 			<div style={divBottomPadding}>
 				<MultiSelectComponent
@@ -313,10 +314,10 @@ export default function ChartDataSelectComponent() {
 						}
 					}}
 				/>
-				<TooltipMarkerComponent page='home' helpTextId='help.home.select.groups' />
 			</div>
 			<p style={labelStyle}>
 				<FormattedMessage id='meters' />:
+				<TooltipMarkerComponent page='home' helpTextId='help.home.select.meters' />
 			</p>
 			<div style={divBottomPadding}>
 				<MultiSelectComponent
@@ -347,10 +348,10 @@ export default function ChartDataSelectComponent() {
 						}
 					}}
 				/>
-				<TooltipMarkerComponent page='home' helpTextId='help.home.select.meters' />
 			</div>
 			<p style={labelStyle}>
 				<FormattedMessage id='units' />:
+				<TooltipMarkerComponent page='home' helpTextId='help.home.select.units' />
 			</p>
 			<div style={divBottomPadding}>
 				{/* TODO this could be converted to a regular Select component */}
@@ -375,7 +376,6 @@ export default function ChartDataSelectComponent() {
 						else { dispatch(changeSelectedUnit(-99)); }
 					}}
 				/>
-				<TooltipMarkerComponent page='home' helpTextId='help.home.select.units' />
 			</div>
 		</div>
 	);

src/client/app/components/ChartSelectComponent.tsx

@@ -7,14 +7,11 @@ import * as _ from 'lodash';
 import { ChartTypes } from '../types/redux/graph';
 import { FormattedMessage } from 'react-intl';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
-import Dropdown from 'reactstrap/lib/Dropdown';
-import DropdownItem from 'reactstrap/lib/DropdownItem';
-import DropdownToggle from 'reactstrap/lib/DropdownToggle';
-import DropdownMenu from 'reactstrap/lib/DropdownMenu';
 import { useDispatch, useSelector } from 'react-redux';
 import { State } from '../types/redux/state';
 import { useState } from 'react';
 import { SelectOption } from '../types/items';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 /**
  *  A component that allows users to select which chart should be displayed.
@@ -39,6 +36,7 @@ export default function ChartSelectComponent() {
 		<div style={divBottomPadding}>
 			<p style={labelStyle}>
 				<FormattedMessage id='graph.type' />:
+				<TooltipMarkerComponent page='home' helpTextId='help.home.chart.select' />
 			</p>
 			<Dropdown isOpen={expand} toggle={() => setExpand(!expand)}>
 				<DropdownToggle outline caret>
@@ -73,9 +71,6 @@ export default function ChartSelectComponent() {
 					</DropdownItem>
 				</DropdownMenu>
 			</Dropdown>
-			<div>
-				<TooltipMarkerComponent page='home' helpTextId='help.home.chart.select' />
-			</div>
 		</div>
 	);
 }

src/client/app/components/ConfirmActionModalComponent.tsx

@@ -2,9 +2,9 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import * as React from 'react';
-import { Modal, Button } from 'react-bootstrap';
 import '../styles/modal.css';
 import translate from '../utils/translate';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 
 interface ConfirmActionModalComponentProps {
 	// Control this through the parent component to open/close this modal
@@ -45,49 +45,25 @@ export default function ConfirmActionModalComponent(props: ConfirmActionModalCom
 		props.handleClose();
 	}
 
-	const formInputStyle: React.CSSProperties = {
-		paddingBottom: '5px'
-	}
-
-	const tableStyle: React.CSSProperties = {
-		width: '100%'
-	};
-
 	return (
 		<>
-			<Modal show={props.show} onHide={props.handleClose} centered>
-				<Modal.Header>
-					<Modal.Title>
-						{props.actionTitle ? props.actionTitle : translate('confirm.action')}
-					</Modal.Title>
-				</Modal.Header>
-				{/* when any of the conversion are changed call one of the functions. */}
-				<Modal.Body className="show-grid">
-					<div id="container">
-						<div id="modalChild">
-							{/* Modal content */}
-							<div className="container-fluid">
-								<div style={tableStyle}>
-									{/* SourceId input*/}
-									<div style={formInputStyle}>
-										<p>{props.actionConfirmMessage}</p>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</Modal.Body>
-				<Modal.Footer>
+			<Modal isOpen={props.show} onClosed={props.handleClose} backdrop='static' centered>
+				<ModalHeader>
+					{props.actionTitle ? props.actionTitle : translate('confirm.action')}
+				</ModalHeader>
+				{/* Passed message is already translated */}
+				<ModalBody>{props.actionConfirmMessage}</ModalBody>
+				<ModalFooter>
 					{/* Do not execute the actionFunction and instead close the action confirm modal */}
-					<Button variant="secondary" onClick={handleClose}>
+					<Button color='secondary' onClick={handleClose}>
 						{/* Render the action reject text if it was passed, or else 'no' */}
 						{props.actionRejectText ? props.actionRejectText : translate('no')}
 					</Button>
 					{/* Execute the action function and close the action confirm modal */}
-					<Button variant="secondary" onClick={props.actionFunction}>
+					<Button color='primary' onClick={props.actionFunction}>
 						{props.actionConfirmText ? props.actionConfirmText : translate('yes')}
 					</Button>
-				</Modal.Footer>
+				</ModalFooter>
 			</Modal>
 		</>
 	);

src/client/app/components/DashboardComponent.tsx

@@ -12,7 +12,7 @@ import SpinnerComponent from './SpinnerComponent';
 import {ChartTypes} from '../types/redux/graph';
 import * as moment from 'moment';
 import {TimeInterval} from '../../../common/TimeInterval';
-import Button from 'reactstrap/lib/Button';
+import { Button} from 'reactstrap';
 import { FormattedMessage } from 'react-intl';
 import TooltipMarkerComponent from './TooltipMarkerComponent';
 

src/client/app/components/ExportComponent.tsx

@@ -311,14 +311,14 @@ export default function ExportComponent() {
 	return (
 		<>
 			<div>
-				<Button outline onClick={exportGraphReading}>
+				<Button color='secondary' outline onClick={exportGraphReading}>
 					<FormattedMessage id='export.graph.data' />
 				</Button>
 				<TooltipMarkerComponent page='home' helpTextId='help.home.export.graph.data' />
 			</div>
 			{/* Only raw export if a line graph */}
 			{graphState.chartToRender === 'line' ? <div style={{ paddingTop: '10px' }}>
-				<Button outline onClick={exportRawReadings}>
+				<Button color='secondary' outline onClick={exportRawReadings}>
 					<FormattedMessage id='export.raw.graph.data' />
 				</Button>
 			</div> : ''}

src/client/app/components/GraphicRateMenuComponent.tsx

@@ -45,7 +45,10 @@ export default function GraphicRateMenuComponent() {
 			{
 				graphState.chartToRender == 'line' &&
 				<div>
-					<p style={labelStyle}><FormattedMessage id='rate' />:</p>
+					<p style={labelStyle}>
+						<FormattedMessage id='rate' />:
+						<TooltipMarkerComponent page='home' helpTextId='help.home.select.rates' />
+					</p>
 					{ /* On change update the line graph rate in the store after a null check */}
 					<Select
 						options={rateOptions}
@@ -59,7 +62,6 @@ export default function GraphicRateMenuComponent() {
 							}
 						}}
 					/>
-					<TooltipMarkerComponent page='home' helpTextId='help.home.select.rates' />
 				</div>
 			}
 		</div>