[poc] Add layout components

packages/main/src/plugin/color-registry.ts

@@ -341,11 +341,26 @@ export class ColorRegistry {
  light: colorPalette.gray[300],
  });
 
+ this.registerColor(`${invCt}card-bg-highlighted`, {
+ dark: colorPalette.charcoal[700],
+ light: colorPalette.gray[200],
+ });
+
+ this.registerColor(`${invCt}card-divide`, {
+ dark: colorPalette.gray[900],
+ light: colorPalette.charcoal[50],
+ });
+
  this.registerColor(`${invCt}card-header-text`, {
  dark: colorPalette.white,
  light: colorPalette.charcoal[900],
  });
 
+ this.registerColor(`${invCt}card-subtitle-text`, {
+ dark: colorPalette.gray[600],
+ light: colorPalette.charcoal[100],
+ });
+
  this.registerColor(`${invCt}card-text`, {
  dark: colorPalette.gray[300],
  light: colorPalette.charcoal[700],

packages/renderer/src/lib/dashboard/DashboardPage.svelte

@@ -13,6 +13,7 @@ import FeaturedExtensions from '/@/lib/featured/FeaturedExtensions.svelte';
 import ProviderConfiguring from '/@/lib/dashboard/ProviderConfiguring.svelte';
 import NotificationsBox from './NotificationsBox.svelte';
 import LearningCenter from '../learning-center/LearningCenter.svelte';
+import Card from '../ui/Card.svelte';
 
 const providerInitContexts = new Map<string, InitializationContext>();
 
@@ -96,8 +97,18 @@ function getInitializationContext(id: string): InitializationContext {
  <ProviderStopped provider="{providerStopped}" />
  {/each}
  {/if}
- <LearningCenter />
- <FeaturedExtensions />
+ </div>
+ <div class="px-2 mt-5 h-full">
+ <Card title="Learning center">
+ <svelte:fragment slot="content">
+ <LearningCenter />
+ </svelte:fragment>
+ </Card>
+ <Card title="Featured extensions">
+ <svelte:fragment slot="content">
+ <FeaturedExtensions />
+ </svelte:fragment>
+ </Card>
  </div>
  </div>
  </div>

packages/renderer/src/lib/featured/FeaturedExtensions.svelte

@@ -5,8 +5,6 @@ import Fa from 'svelte-fa';
 import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
 </script>
 
-<!--Title-->
-<p class="text-lg first-letter:uppercase font-bold">featured extensions:</p>
 <div class="grid min-[920px]:grid-cols-2 min-[1180px]:grid-cols-3 gap-3" role="region" aria-label="FeaturedExtensions">
  {#each $featuredExtensionInfos as featuredExtension}
  <div

packages/renderer/src/lib/learning-center/LearningCenter.svelte

@@ -11,11 +11,8 @@ onMount(async () => {
 });
 </script>
 
-<div class="flex flex-1 flex-col">
- <p class="text-lg first-letter:uppercase font-bold pb-5">Learning center:</p>
- <div class="flex flex-1 flex-col bg-charcoal-800 p-5 rounded-lg">
- <Carousel cards="{guides}" let:card>
- <GuideCard guide="{card}" />
- </Carousel>
- </div>
+<div class="flex flex-1 flex-col bg-charcoal-800 p-5 rounded-lg">
+ <Carousel cards="{guides}" let:card>
+ <GuideCard guide="{card}" />
+ </Carousel>
 </div>

packages/renderer/src/lib/preferences/PreferencesCliTool.spec.ts

@@ -82,7 +82,7 @@ suite('CLI Tool item', () => {
  render(PreferencesCliTool, {
  cliTool: cliToolInfoItem1,
  });
- const nameElement = screen.getByLabelText('cli-name');
+ const nameElement = screen.getByLabelText('title');
  expect(nameElement).toBeDefined();
  expect(nameElement.textContent).equal(cliToolInfoItem1.name);
  const registeredByElement = screen.getByLabelText('cli-registered-by');
@@ -101,7 +101,7 @@ suite('CLI Tool item', () => {
  render(PreferencesCliTool, {
  cliTool: cliToolInfoItem2,
  });
- const nameElement = screen.getByLabelText('cli-name');
+ const nameElement = screen.getByLabelText('title');
  expect(nameElement).toBeDefined();
  expect(nameElement.textContent).equal(cliToolInfoItem2.name);
  const registeredByElement = screen.getByLabelText('cli-registered-by');
@@ -122,7 +122,7 @@ suite('CLI Tool item', () => {
  render(PreferencesCliTool, {
  cliTool: cliToolInfoItem3,
  });
- const nameElement = screen.getByLabelText('cli-name');
+ const nameElement = screen.getByLabelText('title');
  expect(nameElement).toBeDefined();
  expect(nameElement.textContent).equal(cliToolInfoItem3.name);
  const registeredByElement = screen.getByLabelText('cli-registered-by');

packages/renderer/src/lib/preferences/PreferencesCliTool.svelte

@@ -8,6 +8,7 @@ import LoadingIconButton from '../ui/LoadingIconButton.svelte';
 
 import Markdown from '../markdown/Markdown.svelte';
 import type { ILoadingStatus } from './Util';
+import HorizontalCard from '../ui/HorizontalCard.svelte';
 
 export let cliTool: CliToolInfo;
 let showError = false;
@@ -47,51 +48,37 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
  onEnd: () => {},
  };
 }
+
+/*
+Changes:
+ aria-label="cli-logo" -> aria-label="logo"
+*/
 </script>
 
-<div role="row" class="bg-charcoal-600 mb-5 rounded-md p-3 flex flex-col">
- <div class="divide-x divide-gray-900 flex flex-row">
- <div>
- <!-- left col - cli-tool icon/name + "create new" button -->
- <div class="min-w-[170px] max-w-[200px] h-full flex flex-col justify-between">
- <div class="flex flex-row">
- {#if cliTool?.images?.icon || cliTool?.extensionInfo.icon}
- {#if typeof cliTool.images?.icon === 'string'}
- <img
- src="{cliTool.images.icon}"
- aria-label="cli-logo"
- alt="{cliTool.name} logo"
- class="max-w-[40px] max-h-[40px] h-full" />
- {:else if typeof cliTool.extensionInfo.icon === 'string'}
- <img
- src="{cliTool.extensionInfo.icon}"
- aria-label="cli-logo"
- alt="{cliTool.name} logo"
- class="max-w-[40px] max-h-[40px] h-full" />
- {/if}
- {/if}
- <span id="{cliTool.id}" class="my-auto ml-3 break-words" aria-label="cli-name">{cliTool.name}</span>
- </div>
- {#if cliTool.version && cliToolStatus}
- <div class="p-0.5 rounded-lg bg-charcoal-900 w-fit">
- <LoadingIconButton
- action="update"
- clickAction="{() => {
- if (cliTool.newVersion) {
- update(cliTool);
- }
- }}"
- icon="{faCircleArrowUp}"
- leftPosition="left-[0.4rem]"
- state="{cliToolStatus}"
- color="primary"
- tooltip="{!cliTool.newVersion ? 'No updates' : `Update to v${cliTool.newVersion}`}" />
- </div>
- {/if}
+<HorizontalCard
+ label="{cliTool?.id}"
+ title="{cliTool.name}"
+ icon="{cliTool?.images?.icon || cliTool?.extensionInfo.icon}">
+ <svelte:fragment slot="actions">
+ {#if cliTool.version && cliToolStatus}
+ <div class="p-0.5 rounded-lg bg-charcoal-900 w-fit">
+ <LoadingIconButton
+ action="update"
+ clickAction="{() => {
+ if (cliTool.newVersion) {
+ update(cliTool);
+ }
+ }}"
+ icon="{faCircleArrowUp}"
+ leftPosition="left-[0.4rem]"
+ state="{cliToolStatus}"
+ color="primary"
+ tooltip="{!cliTool.newVersion ? 'No updates' : `Update to v${cliTool.newVersion}`}" />
  </div>
- </div>
- <!-- cli-tools columns -->
- <div class="grow flex-column divide-gray-900 ml-2">
+ {/if}
+ </svelte:fragment>
+ <svelte:fragment slot="content">
+ <div class="grow flex-column">
  <span class="my-auto ml-3 break-words" aria-label="cli-display-name">{cliTool.displayName}</span>
  <div role="region" class="float-right text-gray-900 px-2 text-sm" aria-label="cli-registered-by">
  Registered by {cliTool.extensionInfo.label}
@@ -125,17 +112,19 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
  {/if}
  </div>
  </div>
- </div>
- {#if showError}
- <div class="flex flex-row items-center text-xs text-red-400 ml-[200px] mt-2">
- <Fa icon="{faCircleXmark}" class="mr-1 text-red-500" />
- <span>Unable to update {cliTool.displayName} to version {cliTool.newVersion}. </span>
- <Button
- type="link"
- padding="p-0"
- class="ml-1 text-xs"
- aria-label="{cliTool.displayName} failed"
- on:click="{() => window.events?.send('toggle-task-manager', '')}">Check why it failed</Button>
- </div>
- {/if}
-</div>
+ </svelte:fragment>
+ <svelte:fragment slot="footer">
+ {#if showError}
+ <div class="flex flex-row items-center text-xs text-red-400 ml-[200px] mt-2">
+ <Fa icon="{faCircleXmark}" class="mr-1 text-red-500" />
+ <span>Unable to update {cliTool.displayName} to version {cliTool.newVersion}. </span>
+ <Button
+ type="link"
+ padding="p-0"
+ class="ml-1 text-xs"
+ aria-label="{cliTool.displayName} failed"
+ on:click="{() => window.events?.send('toggle-task-manager', '')}">Check why it failed</Button>
+ </div>
+ {/if}
+ </svelte:fragment>
+</HorizontalCard>

packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.spec.ts

@@ -20,7 +20,7 @@
 
 import '@testing-library/jest-dom/vitest';
 import { within } from '@testing-library/dom';
-import { afterEach, beforeAll, expect, suite, test, vi } from 'vitest';
+import { afterEach, beforeEach, expect, suite, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import { cliToolInfos } from '/@/stores/cli-tools';
 import type { CliToolInfo } from '../../../../main/src/plugin/api/cli-tool-info';
@@ -102,7 +102,7 @@ suite('CLI Tool Prefernces page shows', () => {
  });
  }
 
- beforeAll(() => {
+ beforeEach(async () => {
  cliToolInfos.set(cliTools);
  render(PreferencesCliToolsRendering, {});
  const cliToolsTable = screen.getByRole('table', { name: 'cli-tools' });
@@ -114,7 +114,7 @@ suite('CLI Tool Prefernces page shows', () => {
  });
 
  test('tool`s name', () => {
- validatePropertyPresentation('cli-name', toolInfo => toolInfo.name);
+ validatePropertyPresentation('title', toolInfo => toolInfo.name);
  });
 
  test('extension`s name that registered the tool', () => {
@@ -130,12 +130,12 @@ suite('CLI Tool Prefernces page shows', () => {
  });
 
  test('tool`s logo is not shown if images.icon property is not present or images property is empty', () => {
- expect(within(cliToolRows[0]).queryAllByLabelText('cli-logo').length).equals(0);
- expect(within(cliToolRows[1]).queryAllByLabelText('cli-logo').length).equals(0);
+ expect(within(cliToolRows[0]).queryAllByLabelText('logo').length).equals(0);
+ expect(within(cliToolRows[1]).queryAllByLabelText('logo').length).equals(0);
  });
 
  test('tool`s logo is shown when images.icon property is present', () => {
- expect(within(cliToolRows[2]).getAllByLabelText('cli-logo').length).equals(1);
+ expect(within(cliToolRows[2]).getAllByLabelText('logo').length).equals(1);
  });
 
  test('test tools version is shown', () => {

packages/renderer/src/lib/preferences/PreferencesExtensionList.svelte

@@ -11,6 +11,7 @@ import FeaturedExtensions from '../featured/FeaturedExtensions.svelte';
 import Button from '../ui/Button.svelte';
 import ExtensionIcon from './ExtensionIcon.svelte';
 import { Input } from '@podman-desktop/ui-svelte';
+import Card from '../ui/Card.svelte';
 
 export let ociImage: string | undefined = undefined;
 
@@ -77,51 +78,54 @@ async function updateExtension(extension: ExtensionInfo, ociUri: string) {
 
 <SettingsPage title="Extensions">
  <div class="bg-charcoal-600 rounded-md p-3">
- <div class="bg-charcoal-700 mb-4 rounded-md p-3">
- <FeaturedExtensions />
- </div>
-
- <div class="bg-charcoal-700 mt-5 rounded-md p-3" role="region" aria-label="OCI image installation box">
- <h1 class="text-lg mb-2">Install a new extension from OCI Image</h1>
-
- <div class="flex flex-col w-full">
- <div
- class="flex flex-row mb-2 w-full space-x-4 items-center"
- role="region"
- aria-label="Install Extension From OCI">
- <Input
- name="ociImage"
- id="ociImage"
- aria-label="OCI Image Name"
- bind:value="{ociImage}"
- placeholder="Name of the Image"
- class="w-1/2"
- required />
-
- <Button
- on:click="{() => installExtensionFromImage()}"
- disabled="{ociImage === undefined || ociImage.trim() === ''}"
- class="w-full"
- inProgress="{installInProgress}"
- icon="{faArrowCircleDown}">
- Install extension from the OCI image
- </Button>
- </div>
-
- <div class="container w-full flex-col">
+ <Card title="Featured Extensions">
+ <svelte:fragment slot="content">
+ <FeaturedExtensions />
+ </svelte:fragment>
+ </Card>
+
+ <Card title="Install a new extension from OCI Image" label="OCI image installation box">
+ <svelte:fragment slot="content">
+ <div class="flex flex-col w-full">
  <div
- class:opacity-0="{logs.length === 0}"
- bind:this="{logElement}"
- class="bg-zinc-700 text-gray-300 mt-4 mb-3 p-1 h-16 overflow-y-auto">
- {#each logs as log}
- <p class="font-light text-sm">{log}</p>
- {/each}
+ class="flex flex-row mb-2 w-full space-x-4 items-center"
+ role="region"
+ aria-label="Install Extension From OCI">
+ <Input
+ name="ociImage"
+ id="ociImage"
+ aria-label="OCI Image Name"
+ bind:value="{ociImage}"
+ placeholder="Name of the Image"
+ class="w-1/2"
+ required />
+
+ <Button
+ on:click="{() => installExtensionFromImage()}"
+ disabled="{ociImage === undefined || ociImage.trim() === ''}"
+ class="w-full"
+ inProgress="{installInProgress}"
+ icon="{faArrowCircleDown}">
+ Install extension from the OCI image
+ </Button>
  </div>
 
- <ErrorMessage error="{errorInstall}" />
+ <div class="container w-full flex-col">
+ <div
+ class:opacity-0="{logs.length === 0}"
+ bind:this="{logElement}"
+ class="bg-zinc-700 text-gray-300 mt-4 mb-3 p-1 h-16 overflow-y-auto">
+ {#each logs as log}
+ <p class="font-light text-sm">{log}</p>
+ {/each}
+ </div>
+
+ <ErrorMessage error="{errorInstall}" />
+ </div>
  </div>
- </div>
- </div>
+ </svelte:fragment>
+ </Card>
+
  <div class="bg-charcoal-600 mt-5 rounded-md p-3">
  <table class="min-w-full" aria-label="Installed Extensions">
  <tbody>

packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.spec.ts

@@ -101,7 +101,7 @@ test('Test that context-name2 is the current context', async () => {
  // Get current-context by aria label
  // find "context-name" which is located within the same parent div as current-context
  // make sure the content is context-name2
- const currentContext = await screen.findByLabelText('current-context');
+ const currentContext = await screen.findByLabelText('subtitle');
  expect(currentContext).toBeInTheDocument();
 
  // Make sure that the span with the text "context-name2" is within the same parent div as current-context (to make sure that it is the current context)
@@ -120,7 +120,7 @@ test('when deleting the current context, a popup should ask confirmation', async
  const currentContext = screen.getAllByRole('row')[1];
  expect(currentContext).toBeInTheDocument();
 
- const label = within(currentContext).queryByLabelText('current-context');
+ const label = within(currentContext).queryByLabelText('subtitle');
  expect(label).toBeInTheDocument();
 
  const deleteBtn = within(currentContext).getByRole('button', { name: 'Delete Context' });