feat: Adds error message to complete search step

This displays the error message that was returned from the backend in
the page as red text. At best it will give the user something to cut and
paste when they send us an email.

Author: neomorphic

src/components/CustomSearch/CompleteStep.jsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
-import { Button } from "antd";
+import { Button, Typography } from "antd";
 import StepTitle from "./StepTitle";
 
-export default function CompleteStep({ state, matches, resultsUrl }) {
+const { Text } = Typography;
+
+export default function CompleteStep({ state, matches, resultsUrl, errorMessage }) {
   let content = "";
 
   const handleView = () => {
@@ -38,6 +40,10 @@ export default function CompleteStep({ state, matches, resultsUrl }) {
         </Button>
       </>
     );
+  } else if (state === "error") {
+    content = (
+      <Text type="danger">{errorMessage}</Text>
+    );
   }
 
   return (
@@ -51,9 +57,11 @@ export default function CompleteStep({ state, matches, resultsUrl }) {
 CompleteStep.propTypes = {
   state: PropTypes.string.isRequired,
   matches: PropTypes.number,
-  resultsUrl: PropTypes.string.isRequired
+  resultsUrl: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string
 };
 
 CompleteStep.defaultProps = {
-  matches: 0
+  matches: 0,
+  errorMessage: ""
 };

src/components/CustomSearch/SearchSteps.jsx

@@ -9,16 +9,6 @@ import ColorDepthSearchStep from "./ColorDepthSearchStep";
 import CompleteStep from "./CompleteStep";
 import "./SearchSteps.css";
 
-// const { Step } = Steps;
-
-/* const steps = [
-  "Files Uploaded",
-  "Image Alignment",
-  "Mask Selection",
-  "Color Depth Search",
-  "Complete"
-]; */
-
 function stepState(step, current, error) {
   if (step === current && error) {
     return "error";
@@ -46,9 +36,6 @@ export default function SearchSteps({ search }) {
 
   return (
     <div className="searchSteps">
-      {/* <Steps size="small" current={currentStep} status={status}>
-        {formattedSteps}
-      </Steps> */}
       <Row>
         <Col xs={5}>
           <FileUploadStep
@@ -87,6 +74,7 @@ export default function SearchSteps({ search }) {
             resultsUrl={searchLink}
             matches={search.nTotalMatches}
             state={stepState(4, currentStep, errorMessage)}
+            errorMessage={errorMessage}
           />
         </Col>
       </Row>

src/components/CustomSearch/SearchSteps.stories.jsx

@@ -190,3 +190,14 @@ StepOneAfterAlignmentWithLSM.args = {
     alignStarted: "2022-12-01T15:22:07.092Z",
   },
 };
+
+export const CompleteStepWithErrors = Template.bind({});
+CompleteStepWithErrors.args = {
+  search: {
+    errorMessage: "It went badly, like really badly, there was a lot of smoke and some of the servers will never recover. I don't think they are going to bring the data center back online for months",
+    nTotalMatches: 0,
+    step: 4,
+  },
+};
+
+

src/components/CustomSearch/StepTitle.css

@@ -10,5 +10,5 @@
 }
 
 .stepIconError {
-  color: #008b94;
+  color: #ff4d4f;
 }