Merge pull request #167 from orppst/161-make-clear-why-saveupdatesubm…

…it-buttons-are-disabled 161 make clear why save-update-submit buttons are disabled
orppst · Jun 21, 2024 · 90f58fd · 90f58fd
2 parents 2be7fdf + 696b3c9
commit 90f58fd
Show file tree

Hide file tree

Showing 23 changed files with 333 additions and 277 deletions.
diff --git a/src/main/webui/src/ProposalEditorView/investigators/List.tsx b/src/main/webui/src/ProposalEditorView/investigators/List.tsx
@@ -6,7 +6,7 @@ import {
     useInvestigatorResourceGetInvestigators,
 } from "src/generated/proposalToolComponents.ts";
 import {useQueryClient} from "@tanstack/react-query";
-import {Box, Grid, Table, Text} from "@mantine/core";
+import {Box, Stack, Table, Text} from "@mantine/core";
 import {modals} from "@mantine/modals";
 import {randomId} from "@mantine/hooks";
 import DeleteButton from "src/commonButtons/delete";
@@ -57,10 +57,7 @@ function InvestigatorsPanel(): ReactElement {
     return (
         <PanelFrame>
             <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Investigators"}/>
-            <Grid>
-                <Grid.Col span={5}>
-                <AddButton toolTipLabel={"Add new"}
-                           onClick={handleAddNew} />
+                <Stack>
                     {data?.length === 0 ?
                         <div>Please add an investigator</div>:
                         isLoading ? (<div>Loading...</div>) :
@@ -81,8 +78,9 @@ function InvestigatorsPanel(): ReactElement {
                             }
                         </Table.Tbody>
                     </Table>}
-                </Grid.Col>
-            </Grid>
+                    <AddButton toolTipLabel={"Add new"}
+                               onClick={handleAddNew} />
+                </Stack>
         </PanelFrame>
     );
 }

diff --git a/src/main/webui/src/ProposalEditorView/investigators/New.tsx b/src/main/webui/src/ProposalEditorView/investigators/New.tsx
@@ -7,9 +7,9 @@ import {
 import {useNavigate, useParams} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
 import {InvestigatorKind} from "src/generated/proposalToolSchemas.ts";
-import {Checkbox, Grid, Select} from "@mantine/core";
+import {Checkbox, Select, Stack} from "@mantine/core";
 import {useForm} from "@mantine/form";
-import {SubmitButton} from "src/commonButtons/save";
+import {FormSubmitButton} from "src/commonButtons/save";
 import DeleteButton from "src/commonButtons/delete";
 import { JSON_SPACES } from 'src/constants.tsx';
 import {EditorPanelHeader, PanelFrame} from "../../commonPanel/appearance.tsx";
@@ -35,6 +35,8 @@ function AddInvestigatorPanel(): ReactElement {
             forPhD: false,
             selectedInvestigator: 0},
         validate: {
+            type: (value) => (value != null ? null
+                : 'Please select an investigator type'),
             selectedInvestigator: (value) => (
                 value === 0 || value === null ? 'Please select an investigator' : null)
         }
@@ -107,35 +109,30 @@ function AddInvestigatorPanel(): ReactElement {
             <PanelFrame>
                 <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Add an investigator"} />
                 <form onSubmit={handleAdd}>
-                    <Select label={"Type"}
-                        data={typeData}
-                        {...form.getInputProps("type")}
-                    />
-                    <Checkbox
-                        label={"Is this for a PHD?"}
-                        {...form.getInputProps("forPhD")}
-                    />
-                    <Select
-                        label="Select an investigator"
-                        searchable
-                        data={searchData}
-                        {...form.getInputProps("selectedInvestigator")}
-                    />
-                    <Grid>
-                        <Grid.Col span={2}>
-                            <SubmitButton
-                                label={"Add"}
-                                toolTipLabel={"Add new investigator"}
-                                disabled={!form.isDirty() || !form.isValid()}
-                            />
-                        </Grid.Col>
-                        <Grid.Col span={1}>
-                            <DeleteButton
-                                label={"Cancel"}
-                                onClickEvent={handleCancel}
-                                toolTipLabel={"Do not save the new investigator"}/>
-                        </Grid.Col>
-                    </Grid>
+                    <Stack>
+                        <Select label={"Type"}
+                            data={typeData}
+                            {...form.getInputProps("type")}
+                        />
+                        <Checkbox
+                            label={"Is this for a PHD?"}
+                            {...form.getInputProps("forPhD")}
+                        />
+                        <Select
+                            label="Select an investigator"
+                            searchable
+                            data={searchData}
+                            {...form.getInputProps("selectedInvestigator")}
+                        />
+                        <FormSubmitButton
+                            label={"Add"}
+                            form={form}
+                        />
+                        <DeleteButton
+                            label={"Cancel"}
+                            onClickEvent={handleCancel}
+                            toolTipLabel={"Do not save the new investigator"}/>
+                    </Stack>
                 </form>
             </PanelFrame>
     )

diff --git a/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx b/src/main/webui/src/ProposalEditorView/justifications/justification.form.tsx
@@ -7,8 +7,8 @@ import {useForm, UseFormReturnType} from "@mantine/form";
 import {fetchProposalResourceUpdateJustification} from "src/generated/proposalToolComponents.ts";
 import {useParams} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
-import {SubmitButton} from "src/commonButtons/save.tsx";
-import {notifySuccess} from "../../commonPanel/notifications.tsx";
+import {FormSubmitButton} from "src/commonButtons/save.tsx";
+import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
 import {PreviewJustification} from "./justification.preview.tsx";
 
 import Editor from "react-simple-code-editor";
@@ -17,6 +17,7 @@ import "prismjs/themes/prism.css";
 import "prismjs/components/prism-latex.js";
 import "prismjs/components/prism-rest.js";
 import "prismjs/components/prism-asciidoc.js";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 
 const JustificationTextArea = (form : UseFormReturnType<Justification>) => {
@@ -112,16 +113,16 @@ export default function JustificationForm(props: JustificationProps)
                 notifySuccess("Update successful", props.which + " justification updated");
             })
             .then(props.closeModal)
-            .catch(console.error);
+            .catch((error) => {
+                console.error(error);
+                notifyError("Update justification error", getErrorMessage(error))
+            });
     });
 
     return (
         <>
             <form onSubmit={handleSubmit}>
-                <SubmitButton
-                    toolTipLabel={"Save updates"}
-                    disabled={!form.isDirty() || !form.isValid()}
-                />
+                <FormSubmitButton form={form} />
                 <Grid span={10} grow>
                     <Grid.Col span={{base: 6, md: 8, lg: 9}}>
                         <JustificationTextArea {...form} />

diff --git a/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx b/src/main/webui/src/ProposalEditorView/observations/edit.group.tsx
@@ -14,7 +14,7 @@ import {
     fetchObservationResourceReplaceTarget, fetchObservationResourceReplaceTechnicalGoal,
     fetchObservationResourceReplaceTimingWindow
 } from 'src/generated/proposalToolComponents.ts';
-import { SubmitButton } from 'src/commonButtons/save.tsx';
+import {FormSubmitButton} from 'src/commonButtons/save.tsx';
 import { useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { FormEvent, ReactElement } from 'react';
@@ -267,11 +267,7 @@ export default function ObservationEditGroup(
         <>
             <form onSubmit={handleSubmit}>
                 <Group justify={'flex-start'} mt="md">
-                    <SubmitButton
-                        toolTipLabel={newObservation ? "save changes" : "save"}
-                        label={"Save"}
-                        disabled={!form.isDirty() || !form.isValid()}
-                    />
+                    <FormSubmitButton form={form} />
                 </Group>
                 <Grid  columns={5}>
                     <Grid.Col span={{base: 5, lg: 2}}>

diff --git a/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx b/src/main/webui/src/ProposalEditorView/proposal/Documents.tsx
@@ -5,7 +5,7 @@ import {
     useSupportingDocumentResourceGetSupportingDocuments
 } from "src/generated/proposalToolComponents";
 import {useParams} from "react-router-dom";
-import {Box, FileButton, Table, Text} from "@mantine/core";
+import {Box, FileButton, Stack, Table, Text} from "@mantine/core";
 import {useState} from "react";
 import {useQueryClient} from "@tanstack/react-query";
 import {modals} from "@mantine/modals";
@@ -84,7 +84,7 @@ const DocumentsPanel = () => {
     return (
         <PanelFrame>
             <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Documents"} />
-            <Box>
+            <Stack>
                 <Table>
                     <Table.Tbody>
                     {isLoading ? (
@@ -106,15 +106,16 @@ const DocumentsPanel = () => {
                     }
                     </Table.Tbody>
                 </Table>
-            </Box>
-            <Text fz="lg" fw={HEADER_FONT_WEIGHT}>Upload a document</Text>
-            <FileButton onChange={handleUpload}>
-                        {(props) => <UploadButton
-                            toolTipLabel="select a file from disk to upload"
-                            label={"Choose a file"}
-                            onClick={props.onClick}/>}
-            </FileButton>
-            <Result status={status} />
+
+                <Text fz="lg" fw={HEADER_FONT_WEIGHT}>Upload a document</Text>
+                <FileButton onChange={handleUpload}>
+                            {(props) => <UploadButton
+                                toolTipLabel="select a file from disk to upload"
+                                label={"Choose a file"}
+                                onClick={props.onClick}/>}
+                </FileButton>
+                <Result status={status} />
+            </Stack>
         </PanelFrame>
     );
 };

diff --git a/src/main/webui/src/ProposalEditorView/proposal/New.tsx b/src/main/webui/src/ProposalEditorView/proposal/New.tsx
@@ -15,7 +15,7 @@ import {useNavigate} from "react-router-dom";
 import {Box, Container, Select, Text, Textarea, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {useQueryClient} from "@tanstack/react-query";
-import { SubmitButton } from 'src/commonButtons/save';
+import {FormSubmitButton} from 'src/commonButtons/save';
 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";
@@ -95,7 +95,10 @@ const textFormatData = [
                 }
             })
             .then(() => setSubmitting(false))
-            .catch(console.log);
+            .catch((error) => {
+                console.log(error);
+                notifyError("Create proposal error", getErrorMessage(error))
+            });
     });
 
      return (
@@ -169,10 +172,9 @@ const textFormatData = [
                         {...form.getInputProps('technicalJustification.format')}
                     />
                 </Container>
-                <SubmitButton
+                <FormSubmitButton
+                    form={form}
                     label={"Create"}
-                    toolTipLabel={"Create new proposal"}
-                    disabled={!form.isDirty() || !form.isValid()}
                 />
             </form>
         </PanelFrame>

diff --git a/src/main/webui/src/ProposalEditorView/proposal/Submit.tsx b/src/main/webui/src/ProposalEditorView/proposal/Submit.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useEffect, useState} from "react";
-import {Box, Select, Text} from "@mantine/core";
+import {Box, Select, Stack, Text} from "@mantine/core";
 import {
     fetchProposalCyclesResourceGetProposalCycleDates,
     fetchSubmittedProposalResourceSubmitProposal,
@@ -88,17 +88,19 @@ function SubmitPanel(): ReactElement {
             <ValidationOverview cycle={selectedCycle}/>
 
             <form onSubmit={trySubmitProposal}>
-                <Select label={"Cycle"}
-                    data={searchData}
-                    {...form.getInputProps("selectedCycle")}
-                    onChange={changeCycleDates}
-                />
-                <Text>Submission deadline {submissionDeadline}</Text>
-                <SubmitButton
-                    disabled={form.values.selectedCycle===0}
-                    label={"Submit proposal"}
-                    toolTipLabel={"Submit your proposal to the selected cycle"}
-                />
+                <Stack>
+                    <Select label={"Cycle"}
+                        data={searchData}
+                        {...form.getInputProps("selectedCycle")}
+                        onChange={changeCycleDates}
+                    />
+                    <Text>Submission deadline {submissionDeadline}</Text>
+                    <SubmitButton
+                        disabled={form.values.selectedCycle===0}
+                        label={"Submit proposal"}
+                        toolTipLabel={"Submit your proposal to the selected cycle"}
+                    />
+                </Stack>
             </form>
         </PanelFrame>
     )

diff --git a/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx b/src/main/webui/src/ProposalEditorView/proposal/Summary.tsx
@@ -6,15 +6,17 @@ import {
 } from "src/generated/proposalToolComponents";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {useParams} from "react-router-dom";
-import {Box, Textarea} from "@mantine/core";
+import {Box, Stack, Textarea} from "@mantine/core";
 import {useForm} from "@mantine/form";
-import { SubmitButton } from 'src/commonButtons/save';
+import {FormSubmitButton} from 'src/commonButtons/save';
 import {
     JSON_SPACES,
     MAX_CHARS_FOR_INPUTS, TEXTAREA_MAX_ROWS
 } from 'src/constants';
 import MaxCharsForInputRemaining from "src/commonInputs/remainingCharacterCount.tsx";
 import {PanelFrame, PanelHeader} from "../../commonPanel/appearance.tsx";
+import {notifyError, notifySuccess} from "../../commonPanel/notifications.tsx";
+import getErrorMessage from "../../errorHandling/getErrorMessage.tsx";
 
 function SummaryPanel() {
     const { selectedProposalCode } = useParams();
@@ -49,11 +51,14 @@ function SummaryPanel() {
                 setSubmitting(true);
             },
             onError: () => {
-                console.log("An error occurred trying to update the title")
+                console.error("An error occurred trying to update the title");
+                notifyError("Update failed", getErrorMessage(error))
             },
             onSuccess: () => {
                 queryClient.invalidateQueries()
-                    .then(() => setSubmitting(false))
+                    .then(() => setSubmitting(false));
+                notifySuccess("Update summary", "Update successful");
+                form.resetDirty();
             }
         }
     );
@@ -88,15 +93,13 @@ function SummaryPanel() {
                 <Box>Submitting request</Box> :
 
             <form onSubmit={updateSummary}>
-                <Textarea rows={TEXTAREA_MAX_ROWS}
-                          maxLength={MAX_CHARS_FOR_INPUTS}
-                          name="summary" {...form.getInputProps('summary')} />
-                <MaxCharsForInputRemaining length={form.values.summary.length} />
-                <br/>
-                <SubmitButton toolTipLabel={"Update summary"}
-                              label={"Save"}
-                              disabled={!form.isDirty() || !form.isValid()}
-                />
+                <Stack>
+                    <Textarea rows={TEXTAREA_MAX_ROWS}
+                              maxLength={MAX_CHARS_FOR_INPUTS}
+                              name="summary" {...form.getInputProps('summary')} />
+                    <MaxCharsForInputRemaining length={form.values.summary.length} />
+                    <FormSubmitButton form={form} />
+                </Stack>
             </form>
             }
         </PanelFrame>