Reflect validation errors in tx certification breadbrumb

Author: Alenar

mithril-explorer/__tests__/TransactionCertificationBreadcrumb.test.js

@@ -0,0 +1,85 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import TransactionCertificationBreadcrumb from "../src/components/CertifyCardanoTransactionsModal/TransactionCertificationBreadcrumb";
+import { validationSteps } from "../src/components/CertifyCardanoTransactionsModal";
+
+function setup(currentStep, isProofValid, isCertificateChainValid) {
+  const utils = [
+    render(
+      <TransactionCertificationBreadcrumb
+        currentStep={currentStep}
+        isProofValid={isProofValid}
+        isCertificateChainValid={isCertificateChainValid}
+      />,
+    ),
+  ];
+
+  const tabs = new Map();
+  tabs.set(validationSteps.fetchingProof, screen.getByText(/Fetching Transactions Proof/i));
+  tabs.set(validationSteps.validatingProof, screen.getByText(/Verifying Transactions Proof/i));
+  tabs.set(
+    validationSteps.validatingCertificateChain,
+    screen.getByText(/Validating Certificate Chain/i),
+  );
+  tabs.set(validationSteps.done, screen.getByText(/Finish/i));
+
+  return {
+    tabs: tabs,
+    ...utils,
+  };
+}
+
+const classForVariant = (variant) => `list-group-item-${variant}`;
+
+describe("TransactionCertificationBreadcrumb", () => {
+  it("The tab variant are light when default", () => {
+    const { tabs } = setup(validationSteps.ready, false, false);
+
+    for (const [_key, tab] of tabs) {
+      expect(tab).toHaveClass(classForVariant("light"));
+    }
+  });
+
+  it.each([
+    ["fetchingProof", validationSteps.fetchingProof],
+    ["validatingProof", validationSteps.validatingProof],
+    ["validatingCertificateChain", validationSteps.validatingCertificateChain],
+  ])("The tab variant is primary when current and checks are valid : %s", (stepName, stepIndex) => {
+    const { tabs } = setup(stepIndex, true, true);
+
+    expect(tabs.get(stepIndex)).toHaveClass(classForVariant("primary"));
+  });
+
+  it("Current step is done and checks are valid then tabs are light except done step tab that is success", () => {
+    const { tabs } = setup(validationSteps.done, true, true);
+
+    expect(tabs.get(validationSteps.fetchingProof)).toHaveClass(classForVariant("light"));
+    expect(tabs.get(validationSteps.validatingProof)).toHaveClass(classForVariant("light"));
+    expect(tabs.get(validationSteps.validatingCertificateChain)).toHaveClass(
+      classForVariant("light"),
+    );
+    expect(tabs.get(validationSteps.done)).toHaveClass(classForVariant("success"));
+  });
+
+  it("Current step is done and proof check is invalid then tabs are danger except tabs before proof validation", () => {
+    const { tabs } = setup(validationSteps.done, false, true);
+
+    expect(tabs.get(validationSteps.fetchingProof)).toHaveClass(classForVariant("light"));
+    expect(tabs.get(validationSteps.validatingProof)).toHaveClass(classForVariant("danger"));
+    expect(tabs.get(validationSteps.validatingCertificateChain)).toHaveClass(
+      classForVariant("danger"),
+    );
+    expect(tabs.get(validationSteps.done)).toHaveClass(classForVariant("danger"));
+  });
+
+  it("Current step is done and certificate chain check is invalid then tabs are danger except tabs before certificate chain validation", () => {
+    const { tabs } = setup(validationSteps.done, true, false);
+
+    expect(tabs.get(validationSteps.fetchingProof)).toHaveClass(classForVariant("light"));
+    expect(tabs.get(validationSteps.validatingProof)).toHaveClass(classForVariant("light"));
+    expect(tabs.get(validationSteps.validatingCertificateChain)).toHaveClass(
+      classForVariant("danger"),
+    );
+    expect(tabs.get(validationSteps.done)).toHaveClass(classForVariant("danger"));
+  });
+});

mithril-explorer/src/components/CertifyCardanoTransactionsModal/TransactionCertificationBreadcrumb.js

@@ -4,13 +4,37 @@ import { validationSteps } from "./index";
 
 export default function TransactionCertificationBreadcrumb({
   currentStep,
-  isSuccess,
+  // Note: validity values are only relevant after their respective steps
+  isProofValid,
+  isCertificateChainValid,
   onStepClick = (step) => {},
 }) {
+  function variantForActiveStep(currentStep, step) {
+    if (currentStep < step) {
+      return "light";
+    } else if (step === currentStep) {
+      return "primary";
+    }
+
+    let altVariant = "";
+    switch (step) {
+      case validationSteps.fetchingProof:
+        altVariant = "light";
+        break;
+      case validationSteps.validatingProof:
+        altVariant = isProofValid ? "light" : "danger";
+        break;
+      case validationSteps.validatingCertificateChain:
+        altVariant = isProofValid && isCertificateChainValid ? "light" : "danger";
+        break;
+    }
+    return altVariant;
+  }
+
   function variantForDoneStep(currentStep) {
     let variant = "light";
     if (currentStep === validationSteps.done) {
-      variant = isSuccess ? "success" : "danger";
+      variant = isProofValid && isCertificateChainValid ? "success" : "danger";
     }
     return variant;
   }
@@ -37,8 +61,9 @@ export default function TransactionCertificationBreadcrumb({
           action
           key={step}
           eventKey={step}
+          disabled={step > validationSteps.validatingProof && !isProofValid}
           onClick={() => onStepClick(step)}
-          variant={currentStep === step ? "primary" : "light"}>
+          variant={variantForActiveStep(currentStep, step)}>
           {text} {currentStep === step && <Spinner size="sm" />}
         </ListGroup.Item>
       ))}

mithril-explorer/src/components/CertifyCardanoTransactionsModal/index.js

@@ -39,6 +39,7 @@ export default function CertifyCardanoTransactionsModal({
   useEffect(() => {
     setShowLoadingWarning(false);
     setIsProofValid(false);
+    setIsCertificateChainValid(true);
     setCertificate(undefined);
     setCurrentStep(validationSteps.ready);
 
@@ -167,7 +168,8 @@ export default function CertifyCardanoTransactionsModal({
               <Col>
                 <TransactionCertificationBreadcrumb
                   currentStep={currentStep}
-                  isSuccess={isProofValid}
+                  isProofValid={isProofValid}
+                  isCertificateChainValid={isCertificateChainValid}
                   onStepClick={handleStepClick}
                 />
                 {showLoadingWarning && (