Merge pull request #2714 from dusk-network/feature-2585

explorer: Hide "Show More" Button on Error
dusk-network · Oct 22, 2024 · c368da1 · c368da1
2 parents 39e8f05 + 0fae092
commit c368da1
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 15 deletions.
diff --git a/explorer/CHANGELOG.md b/explorer/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change the displayed value for average gas price to lux [#2416]
 - Change the blocks table header `FEE` to `GAS` and `AVG` to `AVG PRICE` and `TOTAL` to `USED` [#2416]
 - Change the tooltip info of the block rewards [#2166]
+- Hide "Show More" button if an error has occurred [#2585]
 - Update Footer layout [#2640]
 - Change WorldMap location [#2613]
 - Fetch network information locally [#2662]
@@ -85,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2389]: https://github.com/dusk-network/rusk/issues/2389
 [#2527]: https://github.com/dusk-network/rusk/issues/2527
 [#2166]: https://github.com/dusk-network/rusk/issues/2166
+[#2585]: https://github.com/dusk-network/rusk/issues/2585
 [#2640]: https://github.com/dusk-network/rusk/issues/2640
 [#2668]: https://github.com/dusk-network/rusk/issues/2668
 [#2613]: https://github.com/dusk-network/rusk/issues/2613

diff --git a/explorer/src/lib/components/__tests__/BlocksCard.spec.js b/explorer/src/lib/components/__tests__/BlocksCard.spec.js
@@ -62,4 +62,15 @@ describe("Blocks Card", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should hide the `Show More` button if an error has occurred", async () => {
+    const props = { ...baseProps, error: new Error("error") };
+
+    const { container } = render(BlocksCard, {
+      ...baseOptions,
+      props: { ...props, error: new Error("error") },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/explorer/src/lib/components/__tests__/ProvisionersCard.spec.js b/explorer/src/lib/components/__tests__/ProvisionersCard.spec.js
@@ -53,4 +53,15 @@ describe("Provisioners Card", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should hide the `Show More` button if an error has occurred", async () => {
+    const props = { ...baseProps, error: new Error("error") };
+
+    const { container } = render(ProvisionersCard, {
+      ...baseOptions,
+      props: { ...props, error: new Error("error") },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/explorer/src/lib/components/__tests__/TransactionsCard.spec.js b/explorer/src/lib/components/__tests__/TransactionsCard.spec.js
@@ -63,4 +63,15 @@ describe("Transactions Card", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should hide the `Show More` button if an error has occurred", async () => {
+    const props = { ...baseProps, error: new Error("error") };
+
+    const { container } = render(TransactionsCard, {
+      ...baseOptions,
+      props: { ...props, error: new Error("error") },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
@@ -724,6 +724,64 @@ exports[`Blocks Card > should disable the \`Show More\` button is the card is in
   </div>
   
    
+</div>
+`;
+
+exports[`Blocks Card > should hide the \`Show More\` button if an error has occurred 1`] = `
+<div
+  class="dusk-card data-card"
+>
+  <header
+    class="data-card__header"
+    slot="header"
+  >
+    <h1
+      class="data-card__header-title"
+    >
+      Blocks — 0 Displayed Items
+    </h1>
+     
+  </header>
+   
+  <div
+    class="alert"
+  >
+    <svg
+      class="dusk-icon dusk-icon--size--large"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+      />
+    </svg>
+    
+     
+    <header>
+      <p>
+        There was an error fetching the data.
+      </p>
+       
+      <p
+        class="alert__error-message"
+      >
+        error
+      </p>
+    </header>
+     
+    <button
+      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      type="button"
+    >
+      <span
+        class="dusk-button__text"
+      >
+        Retry
+      </span>
+    </button>
+  </div>
+  
+   
 </div>
 `;
 

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/ProvisionersCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/ProvisionersCard.spec.js.snap
@@ -608,6 +608,64 @@ exports[`Provisioners Card > should disable the \`Show More\` button is the card
   </div>
   
    
+</div>
+`;
+
+exports[`Provisioners Card > should hide the \`Show More\` button if an error has occurred 1`] = `
+<div
+  class="dusk-card data-card"
+>
+  <header
+    class="data-card__header"
+    slot="header"
+  >
+    <h1
+      class="data-card__header-title"
+    >
+      Provisioners — 0 Displayed Items
+    </h1>
+     
+  </header>
+   
+  <div
+    class="alert"
+  >
+    <svg
+      class="dusk-icon dusk-icon--size--large"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+      />
+    </svg>
+    
+     
+    <header>
+      <p>
+        There was an error fetching the data.
+      </p>
+       
+      <p
+        class="alert__error-message"
+      >
+        error
+      </p>
+    </header>
+     
+    <button
+      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      type="button"
+    >
+      <span
+        class="dusk-button__text"
+      >
+        Retry
+      </span>
+    </button>
+  </div>
+  
+   
 </div>
 `;
 

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
@@ -1081,6 +1081,64 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
   </div>
   
    
+</div>
+`;
+
+exports[`Transactions Card > should hide the \`Show More\` button if an error has occurred 1`] = `
+<div
+  class="dusk-card data-card"
+>
+  <header
+    class="data-card__header"
+    slot="header"
+  >
+    <h1
+      class="data-card__header-title"
+    >
+      Transactions — 0 Displayed Items
+    </h1>
+     
+  </header>
+   
+  <div
+    class="alert"
+  >
+    <svg
+      class="dusk-icon dusk-icon--size--large"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+      />
+    </svg>
+    
+     
+    <header>
+      <p>
+        There was an error fetching the data.
+      </p>
+       
+      <p
+        class="alert__error-message"
+      >
+        error
+      </p>
+    </header>
+     
+    <button
+      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      type="button"
+    >
+      <span
+        class="dusk-button__text"
+      >
+        Retry
+      </span>
+    </button>
+  </div>
+  
+   
 </div>
 `;
 

diff --git a/explorer/src/lib/components/blocks-card/BlocksCard.svelte b/explorer/src/lib/components/blocks-card/BlocksCard.svelte
@@ -41,11 +41,13 @@
   {error}
   {loading}
   title="Blocks — {displayedBlocks.length} Displayed Items"
-  headerButtonDetails={{
-    action: () => loadMoreItems(),
-    disabled: isLoadMoreDisabled,
-    label: "Show More",
-  }}
+  headerButtonDetails={error
+    ? undefined
+    : {
+        action: () => loadMoreItems(),
+        disabled: isLoadMoreDisabled,
+        label: "Show More",
+      }}
 >
   {#if isSmallScreen}
     <div class="blocks-card__list">

diff --git a/explorer/src/lib/components/provisioners-card/ProvisionersCard.svelte b/explorer/src/lib/components/provisioners-card/ProvisionersCard.svelte
@@ -46,11 +46,13 @@
   {error}
   {loading}
   title="Provisioners — {displayedProvisioner.length} Displayed Items"
-  headerButtonDetails={{
-    action: () => loadMoreItems(),
-    disabled: isLoadMoreDisabled,
-    label: "Show More",
-  }}
+  headerButtonDetails={error
+    ? undefined
+    : {
+        action: () => loadMoreItems(),
+        disabled: isLoadMoreDisabled,
+        label: "Show More",
+      }}
 >
   {#if isSmallScreen}
     <div class="provisioners-card__list">

diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte
@@ -45,11 +45,13 @@
   {error}
   {loading}
   title="Transactions — {displayedTxns.length} Displayed Items"
-  headerButtonDetails={{
-    action: () => loadMoreItems(),
-    disabled: isLoadMoreDisabled,
-    label: "Show More",
-  }}
+  headerButtonDetails={error
+    ? undefined
+    : {
+        action: () => loadMoreItems(),
+        disabled: isLoadMoreDisabled,
+        label: "Show More",
+      }}
 >
   {#if isSmallScreen}
     <div class="transactions-card__list">