Improve spacing and layout of some forms, move add button bottom wher…

…e it was at the top
orppst · Jun 20, 2024 · 44abed6 · 44abed6
1 parent 1acfdf5
commit 44abed6
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 113 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,7 +7,7 @@ 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, Stack} from "@mantine/core";
+import {Checkbox, Select, Stack} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {FormSubmitButton} from "src/commonButtons/save";
 import DeleteButton from "src/commonButtons/delete";
@@ -124,20 +124,14 @@ function AddInvestigatorPanel(): ReactElement {
                             data={searchData}
                             {...form.getInputProps("selectedInvestigator")}
                         />
-                        <Grid>
-                            <Grid.Col span={2}>
-                                <FormSubmitButton
-                                    label={"Add"}
-                                    form={form}
-                                />
-                            </Grid.Col>
-                            <Grid.Col span={1}>
-                                <DeleteButton
-                                    label={"Cancel"}
-                                    onClickEvent={handleCancel}
-                                    toolTipLabel={"Do not save the new investigator"}/>
-                            </Grid.Col>
-                        </Grid>
+                        <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/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/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,7 +6,7 @@ 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 {FormSubmitButton} from 'src/commonButtons/save';
 import {
@@ -93,12 +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/>
-                <FormSubmitButton form={form} />
+                <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>

diff --git a/src/main/webui/src/ProposalEditorView/proposal/Title.tsx b/src/main/webui/src/ProposalEditorView/proposal/Title.tsx
@@ -5,7 +5,7 @@ import {
     useProposalResourceGetObservingProposalTitle,
 } from "src/generated/proposalToolComponents";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
-import {TextInput} from "@mantine/core";
+import {Stack, TextInput} from "@mantine/core";
 import {useParams} from "react-router-dom";
 import {useForm} from "@mantine/form";
 import {FormSubmitButton} from 'src/commonButtons/save';
@@ -92,12 +92,13 @@ function TitlePanel() {
             { isLoading ? ("Loading..") :
                  submitting ? ("Submitting..."):
             <form onSubmit={updateTitle}>
-                <TextInput name="title"
-                           maxLength={MAX_CHARS_FOR_INPUTS}
-                           {...form.getInputProps('title')}/>
-                <MaxCharsForInputRemaining length={form.values.title.length} />
-                <br/>
-                <FormSubmitButton form={form} />
+                <Stack>
+                    <TextInput name="title"
+                               maxLength={MAX_CHARS_FOR_INPUTS}
+                               {...form.getInputProps('title')}/>
+                    <MaxCharsForInputRemaining length={form.values.title.length} />
+                    <FormSubmitButton form={form} />
+                </Stack>
             </form>
             }
         </PanelFrame>

diff --git a/src/main/webui/src/ProposalEditorView/targets/targetPanel.tsx b/src/main/webui/src/ProposalEditorView/targets/targetPanel.tsx
@@ -51,7 +51,6 @@ export function TargetPanel(): ReactElement {
         <PanelFrame>
             <EditorPanelHeader proposalCode={Number(selectedProposalCode)} panelHeading={"Targets"} />
             <Stack>
-                <AddTargetModal/>
                 {data?.length === 0?
                     <div>Please add your targets</div> :
                     <TargetTable isLoading={isLoading}
@@ -61,6 +60,7 @@ export function TargetPanel(): ReactElement {
                                  showButtons={true}
                                  selectedTarget={undefined}/>
                 }
+                <AddTargetModal/>
             </Stack>
         </PanelFrame>
     );

diff --git a/src/main/webui/src/ProposalManagerView/TAC/tacNewMember.tsx b/src/main/webui/src/ProposalManagerView/TAC/tacNewMember.tsx
@@ -6,7 +6,7 @@ import {
 import {useNavigate, useParams} from "react-router-dom";
 import {useQueryClient} from "@tanstack/react-query";
 import {TacRole} from "src/generated/proposalToolSchemas.ts";
-import {Grid, Select, Stack} from "@mantine/core";
+import {Select, Stack} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {FormSubmitButton} from "src/commonButtons/save";
 import DeleteButton from "src/commonButtons/delete";
@@ -122,17 +122,15 @@ function CycleTACAddMemberPanel(): ReactElement {
                         data={searchData}
                         {...form.getInputProps("selectedMember")}
                     />
-                    <Grid>
-                        <Grid.Col span={2}>
-                            <FormSubmitButton label={"Add"} form={form}/>
-                        </Grid.Col>
-                        <Grid.Col span={1}>
-                            <DeleteButton
-                                label={"Cancel"}
-                                onClickEvent={handleCancel}
-                                toolTipLabel={"Do not save the new committee member"}/>
-                        </Grid.Col>
-                    </Grid>
+                    <FormSubmitButton
+                        label={"Add"}
+                        form={form}
+                    />
+                    <DeleteButton
+                        label={"Cancel"}
+                        onClickEvent={handleCancel}
+                        toolTipLabel={"Do not save the new committee member"}
+                    />
                 </Stack>
             </form>
         </PanelFrame>

diff --git a/src/main/webui/src/ProposalManagerView/TAC/tacPanel.tsx b/src/main/webui/src/ProposalManagerView/TAC/tacPanel.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useState} from "react";
-import {Box, Grid, Table, Text} from "@mantine/core";
+import {Box, Stack, Table, Text} from "@mantine/core";
 import AddButton from "../../commonButtons/add.tsx";
 import {randomId} from "@mantine/hooks";
 import {useNavigate, useParams} from "react-router-dom";
@@ -48,32 +48,30 @@ export default function CycleTACPanel() : ReactElement {
     return (
         <PanelFrame>
             <ManagerPanelHeader proposalCycleCode={Number(selectedCycleCode)} panelHeading={"Time Allocation Committee"}/>
-            <Grid>
-                <Grid.Col span={5}>
-                    <AddButton toolTipLabel={"Add new"}
-                               onClick={handleAddNew} />
-                    {data?.length === 0 ?
-                        <div>Please add a committee member</div>:
-                        isLoading ? (<div>Loading...</div>) :
-                            <Table>
-                                <MembersHeader/>
-                                <Table.Tbody>
-                                    {data?.map((item) => {
-                                        if(item.dbid !== undefined) {
-                                            return (<TACMemberRow dbid={item.dbid}
-                                                                      key={item.dbid}/>)
-                                        } else {
-                                            return (
-                                                <Box key={randomId()}>
-                                                    Undefined Investigator!
-                                                </Box>)
-                                        }
-                                    })
+            <Stack>
+                <AddButton toolTipLabel={"Add new"}
+                           onClick={handleAddNew} />
+                {data?.length === 0 ?
+                    <Box>Please add a committee member</Box>:
+                    isLoading ? (<Box>Loading...</Box>) :
+                        <Table>
+                            <MembersHeader/>
+                            <Table.Tbody>
+                                {data?.map((item) => {
+                                    if(item.dbid !== undefined) {
+                                        return (<TACMemberRow dbid={item.dbid}
+                                                                  key={item.dbid}/>)
+                                    } else {
+                                        return (
+                                            <Box key={randomId()}>
+                                                Undefined Investigator!
+                                            </Box>)
                                     }
-                                </Table.Tbody>
-                            </Table>}
-                </Grid.Col>
-            </Grid>
+                                })
+                                }
+                            </Table.Tbody>
+                        </Table>}
+            </Stack>
 
         </PanelFrame>
     )

diff --git a/src/main/webui/src/ProposalManagerView/proposalCycle/observatory.tsx b/src/main/webui/src/ProposalManagerView/proposalCycle/observatory.tsx
@@ -69,8 +69,10 @@ export default function CycleObservatoryPanel() : ReactElement {
                 };
 
         fetchProposalCyclesResourceReplaceCycleObservatory(newObservatory)
-            .then(()=>
-                notifySuccess("Update observatory", "Changes saved")
+            .then(()=> {
+                    notifySuccess("Update observatory", "Changes saved");
+                    form.resetDirty();
+                }
             )
             .catch((error) => {
                 notifyError("Error updating observatory", "Cause: "
@@ -86,11 +88,12 @@ export default function CycleObservatoryPanel() : ReactElement {
             {formReady && (
             <form onSubmit={updateObservatory}>
                 <Stack>
-                <Select
-                    data = {observatorySearchData}
-                    {...form.getInputProps("selectedObservatory")}
-                />
-                <FormSubmitButton form={form} label={"Change observatory"}/>
+                    <Select
+                        data = {observatorySearchData}
+                        allowDeselect={false}
+                        {...form.getInputProps("selectedObservatory")}
+                    />
+                    <FormSubmitButton form={form} label={"Change observatory"}/>
                 </Stack>
             </form>)}
         </PanelFrame>

diff --git a/src/main/webui/src/ProposalManagerView/proposalCycle/title.tsx b/src/main/webui/src/ProposalManagerView/proposalCycle/title.tsx
@@ -1,5 +1,5 @@
 import {ReactElement, useEffect, useState} from "react";
-import {TextInput} from "@mantine/core";
+import {Stack, TextInput} from "@mantine/core";
 import {useParams} from "react-router-dom";
 import {
     fetchProposalCyclesResourceReplaceCycleTitle,
@@ -96,12 +96,13 @@ export default function CycleTitlePanel() : ReactElement {
             { isLoading ? ("Loading..") :
                 submitting ? ("Submitting..."):
                     <form onSubmit={updateTitle}>
-                        <TextInput name="title"
-                                   maxLength={MAX_CHARS_FOR_INPUTS}
-                                   {...form.getInputProps('title')}/>
-                        <MaxCharsForInputRemaining length={form.values.title.length} />
-                        <br/>
-                        <FormSubmitButton form={form} />
+                        <Stack>
+                            <TextInput name="title"
+                                       maxLength={MAX_CHARS_FOR_INPUTS}
+                                       {...form.getInputProps('title')}/>
+                            <MaxCharsForInputRemaining length={form.values.title.length} />
+                            <FormSubmitButton form={form} />
+                        </Stack>
                     </form>
             }
         </PanelFrame>

diff --git a/src/main/webui/src/commonPanel/appearance.tsx b/src/main/webui/src/commonPanel/appearance.tsx
@@ -18,7 +18,7 @@ import {headerInterfaceProps, editorPanelHeaderInterfaceProps, managerPanelHeade
  */
 export function PanelHeader(props: headerInterfaceProps): ReactElement {
     return (
-        <Title order={3}>
+        <Title order={3} styles={{root: { marginBottom: 10, marginTop: 10}}}>
             { props.isLoading ?
                 <Badge size={"xl"} radius={0}>...</Badge> :
                 <Badge size={"xl"} radius={0}>{props.itemName}</Badge>