Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: provider cards #5013

Merged
merged 5 commits into from Dec 13, 2023
Merged

feat: provider cards #5013

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
383b483
feat: provider cards
deboer-tim Nov 28, 2023
0dcae9c
chore: fix aria region
deboer-tim Dec 12, 2023
74b8c64
chore: add tests
deboer-tim Dec 12, 2023
3bdc4a9
chore: remove unused import
deboer-tim Dec 12, 2023
eb148b1
Merge branch 'main' into provider-card
deboer-tim Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 34 additions & 0 deletions packages/renderer/src/lib/dashboard/ProviderCard.svelte
View file
Open in desktop
@@ -0,0 +1,34 @@
<script lang="ts">
import type { ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import ProviderStatus from '../ui/ProviderStatus.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';

export let provider: ProviderInfo;
</script>

<div class="bg-charcoal-800 mb-5 rounded-md p-3 flex-nowrap" role="region" aria-label="{provider.name} Provider">
<div class="flex flex-row">
<div class="flex flex-row">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col text-gray-400 ml-3 whitespace-nowrap" aria-label="context-name">
<div class="flex flex-row items-center">
{provider.name}
{#if provider.version}
<div class="text-gray-800 text-sm pl-1" aria-label="Provider Version">
v{provider.version}
</div>
{/if}
</div>
<div class="flex flex-row pt-1" aria-label="Actual State">
<ProviderStatus status="{provider.status}" />
</div>
</div>
</div>
<div class="flex flex-col items-center text-center flex-grow">
<slot name="content" />
</div>
</div>

<ProviderLinks provider="{provider}" />
</div>
36 changes: 13 additions & 23 deletions packages/renderer/src/lib/dashboard/ProviderConfigured.svelte
View file
Open in desktop
Expand Up @@ -2,15 +2,14 @@
import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import ErrorMessage from '../ui/ErrorMessage.svelte';
import PreflightChecks from './PreflightChecks.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';
import ProviderUpdateButton from './ProviderUpdateButton.svelte';
import Steps from '../ui/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';
import ProviderCard from './ProviderCard.svelte';

export let provider: ProviderInfo;
export let initializationContext: InitializationContext;
Expand Down Expand Up @@ -47,17 +46,9 @@ onMount(() => {
});
</script>

<div class="p-2 flex flex-col bg-charcoal-800 rounded-lg" role="region" aria-label="{provider.name} Provider">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col items-center text-center">
<p class="text-xl text-gray-400" aria-label="Actual State">
{provider.name}
{#if provider.version}
v{provider.version}
{/if}
is stopped
</p>
<p class="text-base text-gray-700" aria-label="Suggested Actions">
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-base text-gray-700">
To start working with containers, {provider.name}
{#if provider.version}
v{provider.version}
Expand Down Expand Up @@ -88,13 +79,12 @@ onMount(() => {
{#if runError}
<ErrorMessage class="flex flex-col mt-2 my-2 text-sm" error="{runError}" />
{/if}
</div>
{#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
<div class="mt-5 mb-1 w-full flex justify-around"></div>
<ProviderLinks provider="{provider}" />
</div>

{#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
</svelte:fragment>
</ProviderCard>
37 changes: 12 additions & 25 deletions packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte
View file
Open in desktop
@@ -1,8 +1,6 @@
<script lang="ts">
import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import PreflightChecks from './PreflightChecks.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';
import ProviderUpdateButton from './ProviderUpdateButton.svelte';
import { onDestroy, onMount } from 'svelte';
import { Terminal } from 'xterm';
Expand All @@ -13,6 +11,7 @@ import { getPanelDetailColor } from '../color/color';
import { type InitializationContext, InitializationSteps, InitializeAndStartMode } from './ProviderInitUtils';
import Steps from '../ui/Steps.svelte';
import Spinner from '../ui/Spinner.svelte';
import ProviderCard from './ProviderCard.svelte';

export let provider: ProviderInfo;
export let initializationContext: InitializationContext;
Expand Down Expand Up @@ -86,18 +85,9 @@ onDestroy(() => {
});
</script>

<div class="p-2 flex flex-col bg-charcoal-800 rounded-lg" role="region" aria-label="{provider.name} Provider">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col items-center text-center">
<p class="text-xl text-gray-400" aria-label="Actual State">
{provider.name}
{#if provider.version}
v{provider.version}
{/if}
is initializing
</p>

<div class="mt-5">
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<div>
{#if initializationContext.mode === InitializeAndStartMode}
<Steps steps="{InitializationSteps}" />
{/if}
Expand All @@ -118,15 +108,12 @@ onDestroy(() => {
class:min-w-full="{noErrors === false}"
bind:this="{logsXtermDiv}">
</div>
</div>

{#if provider.updateInfo}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />

<div class="mt-5 mb-1 w-full flex justify-around"></div>
<ProviderLinks provider="{provider}" />
</div>
{#if provider.updateInfo}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
</svelte:fragment>
</ProviderCard>
14 changes: 8 additions & 6 deletions packages/renderer/src/lib/dashboard/ProviderInstalled.spec.ts
View file
Open in desktop
Expand Up @@ -69,11 +69,12 @@ test('Expect installed provider shows button', async () => {
const initializationContext: InitializationContext = { mode: InitializeAndStartMode };
render(ProviderInstalled, { provider: provider, initializationContext: initializationContext });

const providerText = screen.getByText(
content => content.includes('MyProvider') && content.includes('is installed but not ready'),
);
const providerText = screen.getByText(content => content === 'MyProvider');
expect(providerText).toBeInTheDocument();

const installedText = screen.getByText(content => content.toLowerCase().includes('installed but not ready'));
expect(installedText).toBeInTheDocument();

const button = screen.getByRole('button', { name: 'Initialize and start' });
expect(button).toBeInTheDocument();

Expand Down Expand Up @@ -115,11 +116,12 @@ test('Expect to see the initialize context error if provider installation fails'
const initializationContext: InitializationContext = { mode: InitializeAndStartMode };
render(ProviderInstalled, { provider: provider, initializationContext: initializationContext });

const providerText = screen.getByText(
content => content.includes('MyProvider') && content.includes('is installed but not ready'),
);
const providerText = screen.getByText(content => content === 'MyProvider');
expect(providerText).toBeInTheDocument();

const installedText = screen.getByText(content => content.toLowerCase().includes('installed but not ready'));
expect(installedText).toBeInTheDocument();

const button = screen.getByRole('button', { name: 'Initialize and start' });
expect(button).toBeInTheDocument();

Expand Down
33 changes: 11 additions & 22 deletions packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
View file
Open in desktop
@@ -1,8 +1,6 @@
<script lang="ts">
import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import PreflightChecks from './PreflightChecks.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';
import ProviderUpdateButton from './ProviderUpdateButton.svelte';
import { onDestroy, onMount } from 'svelte';
import { Terminal } from 'xterm';
Expand All @@ -19,6 +17,7 @@ import {
} from './ProviderInitUtils';
import Steps from '../ui/Steps.svelte';
import Spinner from '../ui/Spinner.svelte';
import ProviderCard from './ProviderCard.svelte';

export let provider: ProviderInfo;
export let initializationContext: InitializationContext;
Expand Down Expand Up @@ -134,16 +133,8 @@ function onInstallationClick() {
}
</script>

<div class="p-2 flex flex-col bg-charcoal-800 rounded-lg" role="region" aria-label="{provider.name} Provider">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col items-center text-center">
<p class="text-xl text-gray-400" aria-label="Actual State">
{provider.name}
{#if provider.version}
v{provider.version}
{/if}
is installed but not ready
</p>
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-base text-gray-700" aria-label="Suggested Actions">
To start working with containers, {provider.name} needs to be initialized.
</p>
Expand Down Expand Up @@ -216,14 +207,12 @@ function onInstallationClick() {
class:min-w-full="{noErrors === false}"
bind:this="{logsXtermDiv}">
</div>
</div>

{#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />

<ProviderLinks provider="{provider}" />
</div>
{#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
</svelte:fragment>
</ProviderCard>
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/dashboard/ProviderLinks.svelte
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@ export let provider: ProviderInfo;
</script>

{#if provider.links.length > 0}
<div class="mt-5 flex flex-row justify-around">
<div class="mt-2 flex flex-row justify-around">
{#each provider.links as link}
{#if link.group === undefined}
<Link class="text-sm" externalRef="{link.url}">
Expand Down
50 changes: 22 additions & 28 deletions packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
View file
Open in desktop
Expand Up @@ -5,41 +5,35 @@ import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/
import PreflightChecks from './PreflightChecks.svelte';
import ProviderDetectionChecksButton from './ProviderDetectionChecksButton.svelte';
import ProviderInstallationButton from './ProviderInstallationButton.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';
import ProviderCard from './ProviderCard.svelte';

export let provider: ProviderInfo;

let detectionChecks: ProviderDetectionCheck[] = [];
let preflightChecks: CheckStatus[] = [];
</script>

<div class="p-2 flex flex-col bg-charcoal-800 rounded-lg" role="region" aria-label="{provider.name} Provider">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col items-center text-center">
<p class="text-xl text-gray-400" aria-label="Actual State">
Podman Desktop was not able to find an installation of {provider.name}.
</p>
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-base text-gray-700" aria-label="Suggested Actions">
To start working with containers, {provider.name} needs to be detected/installed.
Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.
</p>
</div>
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderDetectionChecksButton onDetectionChecks="{checks => (detectionChecks = checks)}" provider="{provider}" />
<ProviderInstallationButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{#if detectionChecks.length > 0}
<div class="flex flex-col w-full mt-5 px-5 pt-5 pb-0 rounded-lg bg-zinc-600">
{#each detectionChecks as detectionCheck}
<div class="flex flex-col">
<p class="mb-4 items-center list-inside">{detectionCheck.status ? '✅' : '❌'} {detectionCheck.name}</p>
{#if detectionCheck.details}
Details: <p class="text-gray-400 w-full break-all">{detectionCheck.details}</p>
{/if}
</div>
{/each}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderDetectionChecksButton onDetectionChecks="{checks => (detectionChecks = checks)}" provider="{provider}" />
<ProviderInstallationButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
<ProviderLinks provider="{provider}" />
</div>
{#if detectionChecks.length > 0}
<div class="flex flex-col w-full mt-5 px-5 pt-5 pb-0 rounded-lg bg-zinc-600">
{#each detectionChecks as detectionCheck}
<div class="flex flex-col">
<p class="mb-4 items-center list-inside">{detectionCheck.status ? '✅' : '❌'} {detectionCheck.name}</p>
{#if detectionCheck.details}
Details: <p class="text-gray-400 w-full break-all">{detectionCheck.details}</p>
{/if}
</div>
{/each}
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
</svelte:fragment>
</ProviderCard>
36 changes: 13 additions & 23 deletions packages/renderer/src/lib/dashboard/ProviderReady.svelte
View file
Open in desktop
Expand Up @@ -2,41 +2,31 @@
import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import PreflightChecks from './PreflightChecks.svelte';
import ProviderWarnings from './ProviderWarnings.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';
import ProviderUpdateButton from './ProviderUpdateButton.svelte';
import ProviderCard from './ProviderCard.svelte';

export let provider: ProviderInfo;

let preflightChecks: CheckStatus[] = [];
</script>

<div class="p-2 flex flex-col bg-charcoal-800 rounded-lg" role="region" aria-label="{provider.name} Provider">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col items-center text-center">
<p class="text-xl text-gray-400" aria-label="Actual State">
{provider.name} is running
</p>
{#if provider.version}
<p class="text-base capitalize font-semibold text-gray-700" aria-label="Provider Version">
version {provider.version}
</p>
{/if}
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
{#if provider.containerConnections.length > 0}
<div class="flex flex-row text-xs text-gray-900 mt-4">
<p>
{provider.containerConnections.map(c => c.name).join(', ')}
</p>
</div>
{/if}
</div>
{#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />

<ProviderWarnings provider="{provider}" />
<ProviderLinks provider="{provider}" />
</div>
{#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />

<ProviderWarnings provider="{provider}" />
</svelte:fragment>
</ProviderCard>