Keep Values And Show Message On Error #9 #13

-When an error is encountered on submission the form values are not deleted so that the form can be easily submitted again. -When there is an error on the upload the error message is shown in a readable format. The format is title followed by description.
NASA-PDS · Feb 1, 2021 · b5ff2e5 · b5ff2e5
1 parent c3b07bc
commit b5ff2e5
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 119 deletions.
diff --git a/src/actions/appAction.js b/src/actions/appAction.js
@@ -47,9 +47,15 @@ const setReserveNode = (payload) => dispatch => {
     });
 }
 
-const resetReserveInputs = () => dispatch => {
+const retryReserve = () => dispatch => {
     dispatch({
-        type: 'RESET_RESERVE_INPUTS'
+        type: 'RETRY_RESERVE'
+    })
+}
+
+const retryRelease = () => dispatch => {
+    dispatch({
+        type: 'RETRY_RELEASE'
     })
 }
 
@@ -102,7 +108,8 @@ export default{
     sendReserveRequest,
     setReserveSubmitter,
     setReserveNode,
-    resetReserveInputs,
+    retryReserve,
+    retryRelease,
     sendLidvidSearchRequest,
     sendPds4LabelSearchRequest,
     sendReleaseRequest,

diff --git a/src/components/AppBody.jsx b/src/components/AppBody.jsx
@@ -4,6 +4,7 @@ import Release from './Release';
 import Reserve from './Reserve';
 import Button from '@material-ui/core/Button';
 import rootActions from '../actions/rootActions';
+import Container from '@material-ui/core/Container';
 
 const AppBody = () => {
 
@@ -28,7 +29,7 @@ const AppBody = () => {
     dispatch(rootActions.appAction.setIsReleasing(true));
   }
 
-  return <div>
+  return <Container>
     {isSelecting?
       <div>
         <br/>
@@ -68,7 +69,7 @@ const AppBody = () => {
       :
       ''
     }
-  </div>;
+  </Container>;
 };
 
 export default AppBody;
diff --git a/src/components/Release.jsx b/src/components/Release.jsx
@@ -19,6 +19,7 @@ import TextField from '@material-ui/core/TextField';
 import ReleaseAlert from './ReleaseAlert';
 import UatKeyWordAutoComplete from './UatKeyWordAutoComplete';
 import { findXmlTag } from '../utils/xmlUtil';
+import { Alert, AlertTitle } from '@material-ui/lab';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -43,10 +44,16 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "center"
   },
   xmlTextBox: {
-    width: "95%"
+    width: "100%"
   },
   disabled: {
     color: theme.palette.text.disabled,
+  },
+  alert: {
+    '& .MuiAlert-message':{
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
   }
 }));
 
@@ -55,7 +62,7 @@ const Release = () => {
 
   const dispatch = useDispatch();
   const [doiOrLidvid, setDoiOrLidvid] = useState("pds4lidvid");
-  const [doiLidvid, setDoiLidvid] = useState("doi");
+  const [doiLidvid, setDoiLidvid] = useState("");
   const [labelUrl, setLabelUrl] = useState("");
 
   const doiSearchResults = useSelector(state => {
@@ -99,113 +106,140 @@ const Release = () => {
     dispatch(rootActions.appAction.updateReleaseKeywords(findXmlTag(event.target.value, "keywords")));
   }
 
+  const handleRetryRelease = event => {
+    dispatch(rootActions.appAction.retryRelease());
+  }
+
   return <div>
     <br/>
-    <Typography>Release</Typography>
-
-    <div>
-      <p>This is where a description of release will go</p>
-      <p>Update a release by typing in a LIDVID or DOI</p>
-    </div>
-
-    <div className={classes.center}>
-      <Paper component="form" className={classes.root}>
-        <FormControl>
-          <Select
-            value={doiOrLidvid}
-            onChange={handleDoiLidvidChange}
-            disabled
-          >
-            <MenuItem value={"doi"}>DOI</MenuItem>
-            <MenuItem value={"pds4lidvid"}>PDS4 LIDVID</MenuItem>
-          </Select>
-        </FormControl>
-
-        <InputBase
-          className={classes.input}
-          inputProps={{ 'aria-label': 'search google maps' }}
-          onChange={handleDoiLidvidInputChange}
-        />
-        <IconButton 
-          className={classes.iconButton} 
-          aria-label="search"
-          onClick={handleDoiLidvidSearch}
-        >
-          <SearchIcon />
-        </IconButton>
-      </Paper>
-    </div>
+    <Typography variant="h4">Release</Typography>
+    <br/>
 
-    <p>OR</p>
-
-    <div className={classes.center}>
-      <Paper component="form" className={classes.root}>
-        <Typography
-          className={classes.disabled}
-        >
-          PDS4 Label URL
-        </Typography>
-        <InputBase
-          className={classes.input}
-          placeholder="urn:nasa:pds:lab_shocked_feldspars::1.0"
-          inputProps={{ 'aria-label': 'Enter PDS4 Label Url' }}
-          onChange={handleLabelUrlChange}
-          disabled
-        />
-        <IconButton 
-          className={classes.iconButton}
-          aria-label="search"
-          onClick={handleLabelUrlSearch}
-          disabled
-        >
-          <SearchIcon />
-        </IconButton>
-      </Paper>
-    </div>
-
-    {doiSearchResults?
-      doiSearchResults.errors?
+    {releaseResponse?
+      releaseResponse.errors?
         <div>
-          <p><b>An error has occured:</b> {String(doiSearchResults.errors[0].name)}</p>
-          <p><b>Description:</b> {String(doiSearchResults.errors[0].message)}</p>
-          <p>Please try searching again.</p>
+          <Alert icon={false} severity="error" className={classes.alert}>
+            <AlertTitle>Error: {String(releaseResponse.errors[0].name)}</AlertTitle>
+              <b>Description:</b> {String(releaseResponse.errors[0].message)}
+              <p>Please try releasing again.</p>
+          </Alert>
+
+          <p>
+            <Button
+              variant="outlined"
+              onClick={handleRetryRelease}
+            >
+              Retry
+            </Button>
+          </p>
         </div>
         :
         <div>
-          <div>
-            <p>Your DOI is ready to be released. Please update the metadata below if necessary.</p>
-            <p>
-              <TextField
-                className={classes.xmlTextBox}
-                label="Metadata"
-                multiline
-                variant="outlined"
-                value={releaseXml}
-                onChange={handleReleaseXmlChange}
-              />
-            </p>
-            <UatKeyWordAutoComplete></UatKeyWordAutoComplete>
-          </div>
-          <div>
-            <ReleaseAlert></ReleaseAlert>
-          </div>
+          <Alert icon={false} severity="success" className={classes.alert}>
+            <AlertTitle>Release Successful!</AlertTitle>
+            An email will be sent to you when your release has been completed.
+          </Alert>
         </div>
       :
-      ""
-    }
-
-
-    {releaseResponse?
-      releaseResponse.errors?
+      <div>
         <div>
-          <p><b>An error has occured:</b> {String(releaseResponse.errors[0].name)}</p>
-          <p><b>Description:</b> {String(releaseResponse.errors[0].message)}</p>
-          <p>Please try releasing again.</p>
+          <p>This is where a description of release will go</p>
+          <p>Update a release by typing in a LIDVID or DOI</p>
         </div>
-        :
-        ""
-      :
-      ""
+
+        <div className={classes.center}>
+          <Paper component="form" className={classes.root}>
+            <FormControl>
+              <Select
+                value={doiOrLidvid}
+                onChange={handleDoiLidvidChange}
+                disabled
+              >
+                <MenuItem value={"doi"}>DOI</MenuItem>
+                <MenuItem value={"pds4lidvid"}>PDS4 LIDVID</MenuItem>
+              </Select>
+            </FormControl>
+
+            <InputBase
+              className={classes.input}
+              value={doiLidvid}
+              inputProps={{ 'aria-label': 'search google maps' }}
+              onChange={handleDoiLidvidInputChange}
+            />
+            <IconButton 
+              className={classes.iconButton} 
+              aria-label="search"
+              onClick={handleDoiLidvidSearch}
+            >
+              <SearchIcon />
+            </IconButton>
+          </Paper>
+        </div>
+
+        <p>OR</p>
+
+        <div className={classes.center}>
+          <Paper component="form" className={classes.root}>
+            <Typography
+              className={classes.disabled}
+            >
+              PDS4 Label URL
+            </Typography>
+            <InputBase
+              className={classes.input}
+              placeholder="urn:nasa:pds:lab_shocked_feldspars::1.0"
+              inputProps={{ 'aria-label': 'Enter PDS4 Label Url' }}
+              onChange={handleLabelUrlChange}
+              disabled
+            />
+            <IconButton 
+              className={classes.iconButton}
+              aria-label="search"
+              onClick={handleLabelUrlSearch}
+              disabled
+            >
+              <SearchIcon />
+            </IconButton>
+          </Paper>
+        </div>
+
+        {doiSearchResults?
+          doiSearchResults.errors?
+            <div>
+              <br/>
+              <Alert icon={false} severity="error" className={classes.alert}>
+                <AlertTitle>Error: {String(doiSearchResults.errors[0].name)}</AlertTitle>
+                  <b>Description:</b> {String(doiSearchResults.errors[0].message)}
+                  Please try searching again.
+              </Alert>
+            </div>
+            :
+            <div>
+              <div>
+                <br/>
+                <Alert icon={false} severity="info">
+                  Your DOI is ready to be released. Please update the metadata below if necessary.
+                </Alert>
+                <p>
+                  <TextField
+                    className={classes.xmlTextBox}
+                    label="Metadata"
+                    multiline
+                    variant="outlined"
+                    value={releaseXml}
+                    onChange={handleReleaseXmlChange}
+                  />
+                </p>
+                <UatKeyWordAutoComplete></UatKeyWordAutoComplete>
+              </div>
+              <div>
+                <ReleaseAlert></ReleaseAlert>
+              </div>
+            </div>
+          :
+          ""
+        }
+      </div>
     }
   </div>;
 };

diff --git a/src/components/ReleaseAlert.jsx b/src/components/ReleaseAlert.jsx
@@ -50,9 +50,11 @@ const ReleaseAlert = () => {
   }
 
   return <div>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
-        Release
-      </Button>
+      <p>
+        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+          Release
+        </Button>
+      </p>
 
       <Dialog
         open={open}