chore: provider buttons

Updates the provider (dashboard) buttons to use our Button component. No major changes other than the minor styling updates, e.g. lighter buttons and hover, and the spinner replaces the icon instead of being overtop of the text. There is one button ('Initialize and start') that doesn't use any existing component or styling, but uses pf-like colors to build a drop-down box. I will update that in another PR. Signed-off-by: Tim deBoer <[email protected]>
jeffmaury · Aug 2, 2023 · ee01ca2 · ee01ca2
1 parent 0ccff27
commit ee01ca2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 49 deletions.
diff --git a/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte b/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte
@@ -10,6 +10,7 @@ import Steps from 'svelte-steps/Steps.svelte';
 import { onMount } from 'svelte';
 import { InitializeAndStartMode, InitializationSteps, type InitializationContext } from './ProviderInitUtils';
 import Spinner from '../ui/Spinner.svelte';
+import Button from '../ui/Button.svelte';
 
 export let provider: ProviderInfo;
 export let initializationContext: InitializationContext;
@@ -65,9 +66,9 @@ onMount(() => {
 
     {#if !runAtStart && !runInProgress}
       <div class="mt-5">
-        <button on:click="{() => runProvider()}" class="pf-c-button pf-m-primary" type="button">
+        <Button on:click="{() => runProvider()}">
           Run {provider.name}
-        </button>
+        </Button>
       </div>
     {/if}
     {#if runAtStart || runInProgress}

diff --git a/packages/renderer/src/lib/dashboard/ProviderDetectionChecksButton.svelte b/packages/renderer/src/lib/dashboard/ProviderDetectionChecksButton.svelte
@@ -2,7 +2,8 @@
 import type { ProviderDetectionCheck } from '@podman-desktop/api';
 
 import type { ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
-import Spinner from '../ui/Spinner.svelte';
+import Button from '../ui/Button.svelte';
+import { faList } from '@fortawesome/free-solid-svg-icons';
 
 export let provider: ProviderInfo;
 export let onDetectionChecks = (_detectionChecks: ProviderDetectionCheck[]) => {};
@@ -31,21 +32,11 @@ async function toggleDetectionChecks(provider: ProviderInfo) {
 </script>
 
 {#if provider.detectionChecks.length > 0}
-  <button
+  <Button
     on:click="{() => toggleDetectionChecks(provider)}"
-    class="pf-c-button pf-m-primary"
-    disabled="{viewInProgress}"
-    type="button"
+    inProgress="{viewInProgress}"
+    icon="{faList}"
     title="Why {provider.name} is not found.">
-    <span class="pf-c-button__icon pf-m-start">
-      {#if viewInProgress}
-        <div class="mr-44">
-          <Spinner />
-        </div>
-      {:else}
-        <i class="fas fa-list" aria-hidden="true"></i>
-      {/if}
-    </span>
     {mode === 'view' ? 'View' : 'Hide'} detection checks
-  </button>
+  </Button>
 {/if}
diff --git a/packages/renderer/src/lib/dashboard/ProviderInstallationButton.svelte b/packages/renderer/src/lib/dashboard/ProviderInstallationButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { faRocket } from '@fortawesome/free-solid-svg-icons';
 import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
-import Spinner from '../ui/Spinner.svelte';
+import Button from '../ui/Button.svelte';
 
 export let provider: ProviderInfo;
 
@@ -49,20 +50,11 @@ async function performInstallation(provider: ProviderInfo) {
 </script>
 
 {#if provider.installationSupport}
-  <button
-    disabled="{installInProgress || preflightChecksFailed}"
-    on:click="{() => performInstallation(provider)}"
-    class="pf-c-button pf-m-primary"
-    type="button">
-    <span class="pf-c-button__icon pf-m-start">
-      {#if installInProgress}
-        <div class="mr-20">
-          <Spinner />
-        </div>
-      {:else}
-        <i class="fas fa-rocket" aria-hidden="true"></i>
-      {/if}
-    </span>
+  <Button
+    inProgress="{installInProgress}"
+    disabled="{preflightChecksFailed}"
+    icon="{faRocket}"
+    on:click="{() => performInstallation(provider)}">
     Install
-  </button>
+  </Button>
 {/if}
diff --git a/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte b/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { faBoxOpen } from '@fortawesome/free-solid-svg-icons';
 import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
-import Spinner from '../ui/Spinner.svelte';
+import Button from '../ui/Button.svelte';
 
 export let provider: ProviderInfo;
 let updateInProgress = false;
@@ -49,20 +50,11 @@ async function performUpdate(provider: ProviderInfo) {
 </script>
 
 {#if provider?.updateInfo?.version}
-  <button
-    disabled="{updateInProgress || preflightChecksFailed}"
-    on:click="{() => performUpdate(provider)}"
-    class="pf-c-button pf-m-primary"
-    type="button">
-    <span class="pf-c-button__icon pf-m-start">
-      {#if updateInProgress}
-        <div class="mr-20">
-          <Spinner />
-        </div>
-      {:else}
-        <i class="fas fa-box-open" aria-hidden="true"></i>
-      {/if}
-    </span>
+  <Button
+    inProgress="{updateInProgress}"
+    disabled="{preflightChecksFailed}"
+    icon="{faBoxOpen}"
+    on:click="{() => performUpdate(provider)}">
     Update to {provider.updateInfo.version}
-  </button>
+  </Button>
 {/if}