Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: provider cards Creates a ProviderCard component and makes each of the Provider* components use it in order to get some common layout and code between the different states. With the card I tried to make it more like the example in #4395 and our other cards (e.g. Resources, Kubernetes contexts, or CLI), creating two columns with the first having the common bits: logo at the top-left corner with the name and version, with status below it, and the right containing everything else that is specific to the state. The existing status dots + text components don't quite work for providers so I created a new one. Need to review this, overall componentization, and create tests for ProviderCard before raising for official review. Signed-off-by: Tim deBoer <git@tdeboer.ca>
- Loading branch information
1 parent
ce9073f
commit 2bf9ab2
Showing
13 changed files
with
447 additions
and
160 deletions.
There are no files selected for viewing
156 changes: 156 additions & 0 deletions
156
packages/renderer/src/lib/dashboard/ProviderCard.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| /********************************************************************** | ||
| * Copyright (C) 2023 Red Hat, Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| ***********************************************************************/ | ||
|
|
||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
|
|
||
| import '@testing-library/jest-dom/vitest'; | ||
| import { expect, test } from 'vitest'; | ||
| import ProviderCard from './ProviderCard.svelte'; | ||
| import { screen, render } from '@testing-library/svelte'; | ||
| import type { ProviderInfo } from '../../../../main/src/plugin/api/provider-info'; | ||
| import type { ProviderImages } from '@podman-desktop/api'; | ||
|
|
||
| test('Expect provider region', async () => { | ||
| const provider: ProviderInfo = { | ||
| internalId: 'internal-id', | ||
| id: 'my-provider', | ||
| extensionId: '', | ||
| name: 'Podman', | ||
| containerConnections: [], | ||
| kubernetesConnections: [], | ||
| status: 'not-installed', | ||
| containerProviderConnectionCreation: false, | ||
| containerProviderConnectionInitialization: false, | ||
| kubernetesProviderConnectionCreation: false, | ||
| kubernetesProviderConnectionInitialization: false, | ||
| links: [], | ||
| detectionChecks: [], | ||
| warnings: [], | ||
| images: {} as ProviderImages, | ||
| installationSupport: false, | ||
| }; | ||
| render(ProviderCard, { provider }); | ||
|
|
||
| const region = screen.getByRole('region', { name: provider.name + ' Provider' }); | ||
| expect(region).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Expect provider name', async () => { | ||
| const provider: ProviderInfo = { | ||
| internalId: 'internal-id', | ||
| id: 'my-provider', | ||
| extensionId: '', | ||
| name: 'Podman', | ||
| containerConnections: [], | ||
| kubernetesConnections: [], | ||
| status: 'not-installed', | ||
| containerProviderConnectionCreation: false, | ||
| containerProviderConnectionInitialization: false, | ||
| kubernetesProviderConnectionCreation: false, | ||
| kubernetesProviderConnectionInitialization: false, | ||
| links: [], | ||
| detectionChecks: [], | ||
| warnings: [], | ||
| images: {} as ProviderImages, | ||
| installationSupport: false, | ||
| }; | ||
| render(ProviderCard, { provider }); | ||
|
|
||
| const name = screen.getByLabelText('context-name'); | ||
| expect(name).toBeInTheDocument(); | ||
| expect(name.textContent).toContain(provider.name); | ||
| }); | ||
|
|
||
| test('Expect no provider version', async () => { | ||
| const provider: ProviderInfo = { | ||
| internalId: 'internal-id', | ||
| id: 'my-provider', | ||
| extensionId: '', | ||
| name: 'Podman', | ||
| containerConnections: [], | ||
| kubernetesConnections: [], | ||
| status: 'not-installed', | ||
| containerProviderConnectionCreation: false, | ||
| containerProviderConnectionInitialization: false, | ||
| kubernetesProviderConnectionCreation: false, | ||
| kubernetesProviderConnectionInitialization: false, | ||
| links: [], | ||
| detectionChecks: [], | ||
| warnings: [], | ||
| images: {} as ProviderImages, | ||
| installationSupport: false, | ||
| // no version | ||
| }; | ||
| render(ProviderCard, { provider }); | ||
|
|
||
| const version = screen.queryByLabelText('Provider Version'); | ||
| expect(version).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Expect provider version', async () => { | ||
| const provider: ProviderInfo = { | ||
| internalId: 'internal-id', | ||
| id: 'my-provider', | ||
| extensionId: '', | ||
| name: 'Podman', | ||
| containerConnections: [], | ||
| kubernetesConnections: [], | ||
| status: 'not-installed', | ||
| containerProviderConnectionCreation: false, | ||
| containerProviderConnectionInitialization: false, | ||
| kubernetesProviderConnectionCreation: false, | ||
| kubernetesProviderConnectionInitialization: false, | ||
| links: [], | ||
| detectionChecks: [], | ||
| warnings: [], | ||
| images: {} as ProviderImages, | ||
| installationSupport: false, | ||
| version: '1.2.3', | ||
| }; | ||
| render(ProviderCard, { provider }); | ||
|
|
||
| const version = screen.getByLabelText('Provider Version'); | ||
| expect(version).toBeInTheDocument(); | ||
| expect(version.textContent).toBe('v' + provider.version); | ||
| }); | ||
|
|
||
| test('Expect provider state', async () => { | ||
| const provider: ProviderInfo = { | ||
| internalId: 'internal-id', | ||
| id: 'my-provider', | ||
| extensionId: '', | ||
| name: 'Podman', | ||
| containerConnections: [], | ||
| kubernetesConnections: [], | ||
| status: 'not-installed', | ||
| containerProviderConnectionCreation: false, | ||
| containerProviderConnectionInitialization: false, | ||
| kubernetesProviderConnectionCreation: false, | ||
| kubernetesProviderConnectionInitialization: false, | ||
| links: [], | ||
| detectionChecks: [], | ||
| warnings: [], | ||
| images: {} as ProviderImages, | ||
| installationSupport: false, | ||
| }; | ||
| render(ProviderCard, { provider }); | ||
|
|
||
| const state = screen.getByLabelText('Actual State'); | ||
| expect(state).toBeInTheDocument(); | ||
| expect(state.textContent).toContain('NOT-INSTALLED'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.