Fix scenario form bug (#1019)

* improve the scenario form and edit components

* Remove DefaultScenarioHelpText from scenario form to fix scenario page crashing on click

* Fix explanationText as JSX element

src/data_management/rasters/RasterSourceTable.tsx

@@ -181,7 +181,7 @@ export const RasterSourceTable = (props: any) => {
       imgUrl={rasterSourcesIcon}
       imgAltDescription={"Raster-Source icon"}
       headerText={"Raster Sources"}
-      explanationText={DefaultRasterSourceExplanationTextTable()} 
+      explanationText={<DefaultRasterSourceExplanationTextTable />}
       backUrl={"/management/data_management/rasters"}
     >
       <TableStateContainer

src/data_management/scenarios/EditScenario.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { ScenarioForm } from "./ScenarioForm";
+import { RouteComponentProps } from "react-router-dom";
+import ScenarioForm from "./ScenarioForm";
 import SpinnerIfNotLoaded from '../../components/SpinnerIfNotLoaded';
-import {createFetchRecordFunctionFromUrl} from '../../utils/createFetchRecordFunctionFromUrl';
+import { createFetchRecordFunctionFromUrl } from '../../utils/createFetchRecordFunctionFromUrl';
 
 interface RouteProps {
   uuid: string
 }
 
-const EditScenarioModel: React.FC<RouteComponentProps<RouteProps>> = (props) => {
+export const EditScenario = (props: RouteComponentProps<RouteProps>) => {
   const [currentRecord, setCurrentRecord] = useState(null);
   const { uuid } = props.match.params;
   useEffect (() => {
     (async () => {
-      const currentRecord = await createFetchRecordFunctionFromUrl(`/api/v4/scenarios/${uuid}`)();
+      const currentRecord = await createFetchRecordFunctionFromUrl(`/api/v4/scenarios/${uuid}/`)();
 
       setCurrentRecord(currentRecord);
     })();
@@ -28,8 +28,4 @@ const EditScenarioModel: React.FC<RouteComponentProps<RouteProps>> = (props) =>
       />;
     </SpinnerIfNotLoaded>
   );
-}
-
-const EditScenario = withRouter(EditScenarioModel);
-
-export { EditScenario };
+}

src/data_management/scenarios/ScenarioForm.tsx

@@ -11,9 +11,9 @@ import { CancelButton } from '../../form/CancelButton';
 import { useForm, Values } from '../../form/useForm';
 import { minLength } from '../../form/validators';
 import { addNotification } from '../../actions';
+import { scenarioFormHelpText } from '../../utils/help_texts/helpTextForScenarios';
 import threediIcon from "../../images/[email protected]";
 import formStyles from './../../styles/Forms.module.css';
-import { scenarioFormHelpText, DefaultScenarioExplanationText } from '../../utils/help_texts/helpTextForScenarios';
 
 interface Props {
   currentRecord: any
@@ -25,7 +25,7 @@ interface RouteParams {
   uuid: string;
 };
 
-const ScenarioFormModel: React.FC<Props & PropsFromDispatch & RouteComponentProps<RouteParams>> = (props) => {
+const ScenarioForm: React.FC<Props & PropsFromDispatch & RouteComponentProps<RouteParams>> = (props) => {
   const { currentRecord } = props;
   const organisations = useSelector(getOrganisations).available;
   const scenarioOrganisation = organisations.find((org: any) => org.uuid === currentRecord.organisation.uuid);
@@ -87,7 +87,7 @@ const ScenarioFormModel: React.FC<Props & PropsFromDispatch & RouteComponentProp
       headerText={"3Di Scenarios"}
       explanationText={
         scenarioFormHelpText[fieldOnFocus] || 
-        DefaultScenarioExplanationText()
+        scenarioFormHelpText['default']
       }
       backUrl={"/management/data_management/scenarios/"}
       fieldName={fieldOnFocus}
@@ -199,6 +199,4 @@ const mapPropsToDispatch = (dispatch: any) => ({
   addNotification: (message: string | number, timeout: number) => dispatch(addNotification(message, timeout))
 });
 
-const ScenarioForm = connect(null, mapPropsToDispatch)(withRouter(ScenarioFormModel));
-
-export { ScenarioForm };
+export default connect(null, mapPropsToDispatch)(withRouter(ScenarioForm));

src/data_management/scenarios/ScenarioTable.tsx

@@ -169,7 +169,7 @@ export const ScenarioTable = () =>  {
       imgUrl={threediIcon}
       imgAltDescription={"3Di icon"}
       headerText={"3Di Scenarios"}
-      explanationText={DefaultScenarioExplanationText()}
+      explanationText={<DefaultScenarioExplanationText />}
       backUrl={"/management/data_management"}
     >
         <TableStateContainer 

src/data_management/timeseries/timeseries/TimeseriesTable.tsx

@@ -165,7 +165,7 @@ export const TimeseriesTable = (props: RouteComponentProps) =>  {
       imgUrl={timeseriesIcon}
       imgAltDescription={"Timeseries icon"}
       headerText={"Time Series"}
-      explanationText={TimeseriesTableHelptext()}
+      explanationText={<TimeseriesTableHelptext />}
       backUrl={"/management/data_management/timeseries"}
     >
       <TableStateContainer

src/utils/help_texts/helpTextForScenarios.tsx

@@ -36,14 +36,12 @@ export const DefaultScenarioExplanationText = () => {
           available={scenarioAvailableSizeDefinedByContract}
         />
       </div>
-
     </div>
-
   );
 };
 
-
 export const scenarioFormHelpText: HelpText = {
+  default: 'View and manage a 3Di scenario.',
   name: 'The scenario name comes from 3Di. This name can be changed for your convenience.',
   uuid: uuidHelpText,
   modelName: 'The model that was used to create this scenario.',