Disable action buttons when errors present (#503)

Author: ericglau

packages/ui/src/cairo/App.svelte

@@ -15,6 +15,7 @@
     import Dropdown from '../common/Dropdown.svelte';
     import OverflowMenu from '../common/OverflowMenu.svelte';
     import FileIcon from '../common/icons/FileIcon.svelte';
+    import ErrorDisabledActionButtons from '../common/ErrorDisabledActionButtons.svelte';
 
     import type { KindedOptions, Kind, Contract, OptionsErrorMessages } from '@openzeppelin/wizard-cairo';
     import { ContractBuilder, buildGeneric, printContract, sanitizeKind, OptionsError } from '@openzeppelin/wizard-cairo';
@@ -88,6 +89,8 @@
     $: code = printContract(contract);
     $: highlightedCode = injectHyperlinks(hljs.highlight(code, {language: 'cairo'}).value);
 
+    $: hasErrors = errors[tab] !== undefined;
+
     const language = 'cairo';
 
     let copied = false;
@@ -141,30 +144,34 @@
       </OverflowMenu>
     </div>
 
-    <div class="action flex flex-row gap-2 shrink-0">
-      <button class="action-button p-3 min-w-[40px]" on:click={copyHandler} title="Copy to Clipboard">
-        {#if copied}
-          <CheckIcon />
-        {:else}
-          <CopyIcon />
-        {/if}
-      </button>
-
-      <Dropdown let:active>
-        <button class="action-button with-text" class:active slot="button">
-          <DownloadIcon />
-          Download
+    {#if hasErrors}
+      <ErrorDisabledActionButtons />
+    {:else}
+      <div class="action flex flex-row gap-2 shrink-0">
+        <button class="action-button p-3 min-w-[40px]" on:click={copyHandler} title="Copy to Clipboard">
+          {#if copied}
+            <CheckIcon />
+          {:else}
+            <CopyIcon />
+          {/if}
         </button>
 
-        <button class="download-option" on:click={downloadCairoHandler}>
-          <FileIcon />
-          <div class="download-option-content">
-            <p>Single file</p>
-            <p>Requires a Scarb project with <code>openzeppelin</code> as a dependency.</p>
-          </div>
-        </button>
-      </Dropdown>
-    </div>
+        <Dropdown let:active>
+          <button class="action-button with-text" class:active slot="button">
+            <DownloadIcon />
+            Download
+          </button>
+
+          <button class="download-option" on:click={downloadCairoHandler}>
+            <FileIcon />
+            <div class="download-option-content">
+              <p>Single file</p>
+              <p>Requires a Scarb project with <code>openzeppelin</code> as a dependency.</p>
+            </div>
+          </button>
+        </Dropdown>
+      </div>
+    {/if}
   </div>
 
   <div class="flex flex-row grow">
@@ -227,15 +234,6 @@
     background-color: transparent;
   }
 
-  .action-button {
-    padding: 7px;
-    border-radius: 20px; 
-    transition: background-color ease-in-out .2s;
-  }
-  .with-text {
-    padding-right: var(--size-3);
-  }
-
   .tab button:hover, :global(.overflow-btn):hover {
     background-color: var(--gray-2);
   }
@@ -250,7 +248,11 @@
     order: unset;
   }
 
-  .action-button {
+  :global(.action-button) {
+    padding: 7px;
+    border-radius: 20px;
+    transition: background-color ease-in-out .2s;
+
     background-color: var(--gray-1);
     border: 1px solid var(--gray-3);
     color: var(--gray-6);
@@ -265,10 +267,18 @@
     }
 
     :global(.icon) {
-      margin-right: 0 var(--size-1);
+      margin: 0 var(--size-1);
     }
   }
 
+  :global(.action-button.disabled) {
+    color: var(--gray-4);
+  }
+
+  :global(.with-text) {
+    padding-right: var(--size-3);
+  }
+
   .controls {
     background-color: white;
     padding: var(--size-4);

packages/ui/src/cairo_alpha/App.svelte

@@ -15,6 +15,7 @@
     import Dropdown from '../common/Dropdown.svelte';
     import OverflowMenu from '../common/OverflowMenu.svelte';
     import FileIcon from '../common/icons/FileIcon.svelte';
+    import ErrorDisabledActionButtons from '../common/ErrorDisabledActionButtons.svelte';
 
     import type { KindedOptions, Kind, Contract, OptionsErrorMessages } from '@openzeppelin/wizard-cairo-alpha';
     import { ContractBuilder, buildGeneric, printContract, sanitizeKind, OptionsError } from '@openzeppelin/wizard-cairo-alpha';
@@ -88,6 +89,8 @@
     $: code = printContract(contract);
     $: highlightedCode = injectHyperlinks(hljs.highlight(code, {language: 'cairo'}).value);
 
+    $: hasErrors = errors[tab] !== undefined;
+
     const language = 'cairo';
 
     let copied = false;
@@ -141,6 +144,9 @@
       </OverflowMenu>
     </div>
 
+    {#if hasErrors}
+      <ErrorDisabledActionButtons />
+    {:else}
     <div class="action flex flex-row gap-2 shrink-0">
       <button class="action-button p-3 min-w-[40px]" on:click={copyHandler} title="Copy to Clipboard">
         {#if copied}
@@ -165,6 +171,7 @@
         </button>
       </Dropdown>
     </div>
+    {/if}
   </div>
 
   <div class="flex flex-row grow">
@@ -227,15 +234,6 @@
     background-color: transparent;
   }
 
-  .action-button {
-    padding: 7px;
-    border-radius: 20px; 
-    transition: background-color ease-in-out .2s;
-  }
-  .with-text {
-    padding-right: var(--size-3);
-  }
-
   .tab button:hover, :global(.overflow-btn):hover {
     background-color: var(--gray-2);
   }
@@ -250,7 +248,11 @@
     order: unset;
   }
 
-  .action-button {
+  :global(.action-button) {
+    padding: 7px;
+    border-radius: 20px;
+    transition: background-color ease-in-out .2s;
+
     background-color: var(--gray-1);
     border: 1px solid var(--gray-3);
     color: var(--gray-6);
@@ -265,10 +267,18 @@
     }
 
     :global(.icon) {
-      margin-right: 0 var(--size-1);
+      margin: 0 var(--size-1);
     }
   }
 
+  :global(.action-button.disabled) {
+    color: var(--gray-4);
+  }
+
+  :global(.with-text) {
+    padding-right: var(--size-3);
+  }
+
   .controls {
     background-color: white;
     padding: var(--size-4);

packages/ui/src/common/ErrorDisabledActionButtons.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import CopyIcon from './icons/CopyIcon.svelte';
+  import DownloadIcon from './icons/DownloadIcon.svelte';
+  import Tooltip from './Tooltip.svelte';
+</script>
+
+<!-- Fake Copy and Download buttons for display when there are errors in the input options -->
+<div class="action flex flex-row gap-2 shrink-0">
+  <Tooltip
+    let:trigger
+    theme="light-red border"
+    hideOnClick={false}
+    interactive
+  >
+    <button
+      use:trigger
+      class="action-button p-3 min-w-[40px]"
+      class:disabled={true}
+    >
+      <CopyIcon />
+    </button>
+    <div slot="content">
+      <p>There are errors in the input options.</p>
+      <p>Fix them to continue.</p>
+    </div>
+  </Tooltip>
+  <Tooltip
+    let:trigger
+    theme="light-red border"
+    hideOnClick={false}
+    interactive
+  >
+    <button
+      use:trigger
+      class="action-button with-text"
+      class:disabled={true}
+    >
+      <DownloadIcon />
+      Download
+    </button>
+    <div slot="content">
+      <p>There are errors in the input options.</p>
+      <p>Fix them to continue.</p>
+    </div>
+  </Tooltip>
+</div>