From 6539ffaf15aa2314838834692f4524eeb3f2ed8c Mon Sep 17 00:00:00 2001 From: mwapst <163834242+mwapst@users.noreply.github.com> Date: Tue, 23 Jul 2024 14:03:58 +0100 Subject: [PATCH 1/7] Proof of concept contextual help stuff Presenting a Show/ Clear Help button on the more complex forms to tell the user what must be provided. --- .../webui/public/contextualHelpMessages.jsx | 55 +++++++++++++++++++ .../ProposalEditorView/investigators/New.tsx | 8 +++ .../justifications/justification.form.tsx | 10 ++++ .../observations/edit.group.tsx | 7 +++ .../src/ProposalEditorView/proposal/New.tsx | 8 +++ .../technicalGoals/edit.group.tsx | 8 ++- .../src/commonButtons/contextualHelp.tsx | 53 ++++++++++++++++++ src/main/webui/src/index.css | 7 ++- 8 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 src/main/webui/public/contextualHelpMessages.jsx create mode 100644 src/main/webui/src/commonButtons/contextualHelp.tsx diff --git a/src/main/webui/public/contextualHelpMessages.jsx b/src/main/webui/public/contextualHelpMessages.jsx new file mode 100644 index 00000000..02610523 --- /dev/null +++ b/src/main/webui/public/contextualHelpMessages.jsx @@ -0,0 +1,55 @@ +export const contextualHelpMessages = [ + { + id: "MaintSciJust-eng", + message: " " + + "\n\n" + "Please state briefly the scientific justification for your proposal" + + "\n\n" + "This should include..." +} +, { + id: "MaintSciJust-spa", + message: " " + + "\n\n" + "Spanish version would follow..." + + "\n\n" + "Please state briefly the scientific justification for your proposal" + + "\n\n"+ "This should include..." +} +, { + id: "MaintTechJust-eng", + message: " " + + "\n\n" + "Please state briefly the technical justification for your proposal" + + "\n\n" + "This should include..." +} +, { + id: "MaintInvest-eng", + message: " " + + "\n\n" + "Please select a new investigator from the drop-down list." + + "\n\n" + "They will automatically be assigned as a co-investigator." + + "\n\n" + "Please tick the PhD box if this work forms part of their PhD." +} +, { + id: "CreaProp-eng", + message: " " + + "\n\n" + "You must provide a Title and a Summary." + + "\n\n" + "You can save your proposal once they have been entered and come back later, or continue with the remaining fields" + + " indicating the kind of proposal and providing the scientific and technical justifications." + + "\n\n" + "You have the option to provide your justification in LaTeX, RST or ASCII format." + + "\n\n" +} +, { + id: "CreaTechGoal-eng", + message: " " + + "\n\n" + "You must provide values and units for the following performance parameters - Angular resolution, Largest scale, and Spectral point." + + "\n\n" + "Spectral windows are optional, but if you select one you must enter values and units for Start, End, and Resolution, as well as polarization." + + "\n\n" +} +, { + id: "CreaObs-eng", + message: " " + + "You must select one Target, and one Technical Goal (Performance parameters), followed by both Observation field and type. " + + " If your observation type is Calibration, you must choose Calibration intended use." + + "\n\n" + "Timing windows are optional, but if you select one, you must provide start and end dates and times" + + " (choose the date from the calendar and then select a time from the bottom of the calendar)." + + "\n\n" + "The slider next to the time fields identifies the window as one to be avoided, and you may add a brief note." + + "\n\n" +} +]; + diff --git a/src/main/webui/src/ProposalEditorView/investigators/New.tsx b/src/main/webui/src/ProposalEditorView/investigators/New.tsx index d68431a0..1e6855b8 100644 --- a/src/main/webui/src/ProposalEditorView/investigators/New.tsx +++ b/src/main/webui/src/ProposalEditorView/investigators/New.tsx @@ -15,6 +15,7 @@ import { JSON_SPACES } from 'src/constants.tsx'; import {EditorPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx"; import {notifyError} from "../../commonPanel/notifications.tsx"; import getErrorMessage from "../../errorHandling/getErrorMessage.tsx"; +import {ContextualHelpButton} from "/src/commonButtons/contextualHelp.tsx" /** * Render s form panel to add an investigator to the current proposal. @@ -105,9 +106,16 @@ function AddInvestigatorPanel(): ReactElement { navigate("../",{relative:"path"}) } +const helpButtonCall = ( + + ); + return ( + {helpButtonCall}
- - +

+ + + + + +

) diff --git a/src/main/webui/src/ProposalEditorView/justifications/JustificationsPanel.tsx b/src/main/webui/src/ProposalEditorView/justifications/JustificationsPanel.tsx index 0874de72..a46e0af9 100644 --- a/src/main/webui/src/ProposalEditorView/justifications/JustificationsPanel.tsx +++ b/src/main/webui/src/ProposalEditorView/justifications/JustificationsPanel.tsx @@ -7,6 +7,7 @@ import {JSON_SPACES} from "src/constants.tsx"; import {Justification} from "src/generated/proposalToolSchemas.ts"; import JustificationsTable from "./justifications.table.tsx"; import {EditorPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx"; +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" //no need to use an array, only two "kinds" of Justification 'scientific' and 'technical' export type JustificationKinds = { @@ -50,11 +51,10 @@ export default function JustificationsPanel() : ReactElement { ); } - return ( - + {scientificIsLoading || technicalIsLoading ? (`Loading justifications...`) : } diff --git a/src/main/webui/src/ProposalEditorView/justifications/edit.modal.tsx b/src/main/webui/src/ProposalEditorView/justifications/edit.modal.tsx index b16e6161..b7a19f9a 100644 --- a/src/main/webui/src/ProposalEditorView/justifications/edit.modal.tsx +++ b/src/main/webui/src/ProposalEditorView/justifications/edit.modal.tsx @@ -1,6 +1,6 @@ import {ReactElement} from "react"; import ViewEditButton from "src/commonButtons/viewEdit.tsx"; -import {Modal} from "@mantine/core"; +import {Modal, xl} from "@mantine/core"; import {useDisclosure} from "@mantine/hooks"; import JustificationForm from "./justification.form.tsx"; import {JustificationProps} from "./justifications.table.tsx"; @@ -29,7 +29,11 @@ export default function JustificationsEditModal(justificationProps : Justificati opened={opened} onClose={props.closeModal} title={"View/Edit " + capitalizeFirstChar(props.which) + " Justification"} - fullScreen + //fullScreen + size="auto" + height={75} + centered + > diff --git a/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx b/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx index dc6ff615..63444344 100644 --- a/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx +++ b/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx @@ -5,12 +5,13 @@ import {JustificationProps} from "./justifications.table.tsx"; import {Justification, TextFormats} from "src/generated/proposalToolSchemas.ts"; import {useForm, UseFormReturnType} from "@mantine/form"; import {fetchProposalResourceUpdateJustification} from "src/generated/proposalToolComponents.ts"; -import {useParams} from "react-router-dom"; +import {useNavigate,useParams } from "react-router-dom"; import {useQueryClient} from "@tanstack/react-query"; import {FormSubmitButton} from "src/commonButtons/save.tsx"; +import DeleteButton from "src/commonButtons/delete"; import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx"; import {PreviewJustification} from "./justification.preview.tsx"; -import {ContextualHelpButton} from "src/commonButtons/contextualHelp.tsx" +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" import Editor from "react-simple-code-editor"; import { languages, highlight } from "prismjs"; @@ -120,18 +121,19 @@ export default function JustificationForm(props: JustificationProps) notifyError("Update justification error", getErrorMessage(error)) }); }); -const helpButtonCall = ( - // need to determine whether sci or tech - - ); + const navigate = useNavigate(); + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } return ( <>
+ {/*} {helpButtonCall} + */} + @@ -141,8 +143,17 @@ const helpButtonCall = ( - +

+ + + + + + {form.values.format==='latex' && PreviewJustification(form.values.format!, form.values.text!)} diff --git a/src/main/webui/src/ProposalEditorView/observationFields/ObservationFieldsPanel.tsx b/src/main/webui/src/ProposalEditorView/observationFields/ObservationFieldsPanel.tsx index 82ec7dbd..2becefc4 100644 --- a/src/main/webui/src/ProposalEditorView/observationFields/ObservationFieldsPanel.tsx +++ b/src/main/webui/src/ProposalEditorView/observationFields/ObservationFieldsPanel.tsx @@ -1,11 +1,12 @@ import {ReactElement} from "react"; import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx"; -import {useParams} from "react-router-dom"; +import {useParams, useNavigate} from "react-router-dom"; import {useProposalResourceGetObservingProposal} from "../../generated/proposalToolComponents.ts"; import ObservationFieldsTable from "./observationFieldsTable.tsx"; import {Field} from "../../generated/proposalToolSchemas.ts"; import ObservationFieldModal from "./observationFields.modal.tsx"; -import {Badge, Card, Group, Space, Text} from "@mantine/core"; +import {Badge, Card, Grid, Group, Space, Text} from "@mantine/core"; +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" export type ObservationFieldsProps = { observationField: Field | undefined @@ -33,6 +34,13 @@ export default function ObservationFieldsPanel() : ReactElement { obs.field! as number) ) + const navigate = useNavigate(); + + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } + //Remove the "Card" once we have this fully implemented // can be treated as @@ -44,7 +52,7 @@ export default function ObservationFieldsPanel() : ReactElement { itemName={proposal.data?.title!} panelHeading={"Observation Fields"} /> - + @@ -62,10 +70,15 @@ export default function ObservationFieldsPanel() : ReactElement { - - + + + + + {/*} + + */}
) diff --git a/src/main/webui/src/ProposalEditorView/observationFields/observationFields.form.tsx b/src/main/webui/src/ProposalEditorView/observationFields/observationFields.form.tsx index 05668e88..ee01bf69 100644 --- a/src/main/webui/src/ProposalEditorView/observationFields/observationFields.form.tsx +++ b/src/main/webui/src/ProposalEditorView/observationFields/observationFields.form.tsx @@ -1,6 +1,6 @@ import {ReactElement} from "react"; import {ObservationFieldsProps} from "./ObservationFieldsPanel.tsx"; -import {Badge, Select, Stack, TextInput, Tooltip} from "@mantine/core"; +import {Badge, Grid, Select, Stack, TextInput, Tooltip} from "@mantine/core"; import { Ellipse, EquatorialPoint, @@ -12,14 +12,16 @@ import { } from "../../generated/proposalToolSchemas.ts"; import {useForm} from "@mantine/form"; import {SubmitButton} from "../../commonButtons/save.tsx"; +import DeleteButton from "src/commonButtons/delete.tsx"; import { fetchProposalResourceAddNewField, fetchProposalResourceChangeFieldName } from "../../generated/proposalToolComponents.ts"; -import {useParams} from "react-router-dom"; +import {useParams, useNavigate} from "react-router-dom"; import {useQueryClient} from "@tanstack/react-query"; import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx"; import getErrorMessage from "../../errorHandling/getErrorMessage.tsx"; +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" /** * Function to return the "Observation Fields" form to either create a new "Field" or edit an existing one. @@ -173,11 +175,21 @@ export default function ObservationFieldsForm(props: ObservationFieldsProps) : R .catch(error => notifyError("Failed to create new Field", getErrorMessage(error))) } }) + const navigate = useNavigate(); + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } //Reminder: Once fully implemented remove the type-checking conditions in the Submit disable property return (
+

+ + + + {fieldNameTextInput()} {fieldTypeSelect()} @@ -201,14 +213,24 @@ export default function ObservationFieldsForm(props: ObservationFieldsProps) : R } + +

+ + + - + /> + + +
) } \ No newline at end of file diff --git a/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx b/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx index 5e8a926f..eeb03105 100644 --- a/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx +++ b/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx @@ -15,7 +15,8 @@ import { fetchObservationResourceReplaceTimingWindow } from 'src/generated/proposalToolComponents.ts'; import {FormSubmitButton} from 'src/commonButtons/save.tsx'; -import { useParams } from 'react-router-dom'; +import DeleteButton from 'src/commonButtons/delete.tsx'; +import { useNavigate, useParams } from 'react-router-dom'; import { useQueryClient } from '@tanstack/react-query'; import { FormEvent, ReactElement } from 'react'; import { TimingWindowGui } from './timingWindowGui.tsx'; @@ -264,15 +265,16 @@ export default function ObservationEditGroup( } }); -const helpButtonCall = ( - - ); + const navigate = useNavigate(); + + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } return ( <>
- {helpButtonCall} + @@ -287,11 +289,23 @@ const helpButtonCall = ( + + +

+ + + + + +

+ - - + ) diff --git a/src/main/webui/src/ProposalEditorView/observations/edit.modal.tsx b/src/main/webui/src/ProposalEditorView/observations/edit.modal.tsx index 4bfa95d0..9d6be505 100644 --- a/src/main/webui/src/ProposalEditorView/observations/edit.modal.tsx +++ b/src/main/webui/src/ProposalEditorView/observations/edit.modal.tsx @@ -46,7 +46,7 @@ export default function ObservationEditModal( title={newObservation ? "New Observation" : "View/Edit Observation"} - fullScreen + size = "auto" //fullScreen > diff --git a/src/main/webui/src/ProposalEditorView/observations/observationPanel.tsx b/src/main/webui/src/ProposalEditorView/observations/observationPanel.tsx index 8bac2dd6..9aef8786 100644 --- a/src/main/webui/src/ProposalEditorView/observations/observationPanel.tsx +++ b/src/main/webui/src/ProposalEditorView/observations/observationPanel.tsx @@ -1,14 +1,15 @@ import { useProposalResourceGetObservingProposal, } from 'src/generated/proposalToolComponents'; -import {useParams} from "react-router-dom"; +import {useNavigate, useParams} from "react-router-dom"; import ObservationRow, { observationTableHeader } from './observationTable.tsx'; -import {Container, Group, List, Space, Table} from "@mantine/core"; +import {Container, Grid, Group, List, Space, Table} from "@mantine/core"; import {Observation} from "src/generated/proposalToolSchemas.ts"; import getErrorMessage from "src/errorHandling/getErrorMessage.tsx"; import { ReactElement } from 'react'; import ObservationEditModal from './edit.modal.tsx'; import NavigationButton from 'src/commonButtons/navigation.tsx'; +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" import {IconTarget, IconChartLine, IconGeometry} from '@tabler/icons-react'; import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx"; @@ -192,11 +193,17 @@ function Observations() { return (
+ + + + + - + + - + ) } diff --git a/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx b/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx index 0f7d0e06..3329a5a6 100644 --- a/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx +++ b/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx @@ -4,8 +4,8 @@ import { fetchSupportingDocumentResourceUploadSupportingDocument, useSupportingDocumentResourceGetSupportingDocuments } from "src/generated/proposalToolComponents"; -import {useParams} from "react-router-dom"; -import {Box, FileButton, Stack, Table, Text} from "@mantine/core"; +import {useNavigate, useParams} from "react-router-dom"; +import {Box, FileButton, Grid, Stack, Table, Text} from "@mantine/core"; import {useState} from "react"; import {useQueryClient} from "@tanstack/react-query"; import {modals} from "@mantine/modals"; @@ -20,6 +20,7 @@ import {HEADER_FONT_WEIGHT, JSON_SPACES, MAX_SUPPORTING_DOCUMENT_SIZE} from 'src import {EditorPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx"; import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx"; import getErrorMessage from "../../errorHandling/getErrorMessage.tsx"; +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" type DocumentProps = { dbid: number, @@ -80,10 +81,16 @@ const DocumentsPanel = () => { } } }; + const navigate = useNavigate(); + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } return ( + @@ -108,12 +115,20 @@ const DocumentsPanel = () => {
Upload a document +

+ + {(props) => } + + diff --git a/src/main/webui/src/ProposalEditorView/proposal/New.tsx b/src/main/webui/src/ProposalEditorView/proposal/New.tsx index 1711ae79..00171f48 100644 --- a/src/main/webui/src/ProposalEditorView/proposal/New.tsx +++ b/src/main/webui/src/ProposalEditorView/proposal/New.tsx @@ -12,10 +12,11 @@ import { TargetField } from "src/generated/proposalToolSchemas"; import {useNavigate} from "react-router-dom"; -import {Box, Container, Select, Text, Textarea, TextInput, Stack, Space} from "@mantine/core"; +import {Box, Container, Grid, Select, Text, Textarea, TextInput, Stack, Space} from "@mantine/core"; import {useForm} from "@mantine/form"; import {useQueryClient} from "@tanstack/react-query"; import {FormSubmitButton} from 'src/commonButtons/save'; +import DeleteButton from 'src/commonButtons/delete'; import { MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS } from "src/constants"; import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx"; import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx"; @@ -101,13 +102,10 @@ const textFormatData = [ notifyError("Create proposal error", getErrorMessage(error)) }); }); - -const helpButtonCall = ( - - ); - + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } return ( @@ -116,7 +114,7 @@ const helpButtonCall = ( }
- {helpButtonCall} + - +

+ + + + + + Submission deadline {submissionDeadline} + + +

+ + - + + +
) diff --git a/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx b/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx index 2757805e..1ff8fc76 100644 --- a/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx +++ b/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx @@ -5,10 +5,11 @@ import { useProposalResourceGetObservingProposal, } from "src/generated/proposalToolComponents"; import {useMutation, useQueryClient} from "@tanstack/react-query"; -import {useParams} from "react-router-dom"; -import {Box, Stack, Textarea} from "@mantine/core"; +import {useNavigate, useParams} from "react-router-dom"; +import {Box, Grid, Stack, Textarea} from "@mantine/core"; import {useForm} from "@mantine/form"; import {FormSubmitButton} from 'src/commonButtons/save'; +import DeleteButton from "src/commonButtons/delete"; import { JSON_SPACES, MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS @@ -17,6 +18,7 @@ import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount. import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx"; import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx"; import getErrorMessage from "../../errorHandling/getErrorMessage.tsx"; +import {ContextualHelpButton} from "../../commonButtons/contextualHelp.tsx" function SummaryPanel() { const { selectedProposalCode } = useParams(); @@ -37,6 +39,12 @@ function SummaryPanel() { // get client for talking to database. const queryClient = useQueryClient() + const navigate = useNavigate(); + function handleCancel(event: SyntheticEvent) { + event.preventDefault(); + navigate("../",{relative:"path"}) + } + const mutation = useMutation({ mutationFn: () => { const newSummary: ProposalResourceReplaceSummaryVariables = { @@ -84,7 +92,6 @@ function SummaryPanel() { setSummary(val.summary); mutation.mutate(); }); - return ( @@ -93,13 +100,23 @@ function SummaryPanel() { Submitting request :
+