feat: switch more pages to formpage

Changes almost all of the remaining pages to FormPages, using the existing icons that are used in the actions to open the form and the form button: - Build image - Pull image - Play Kube YAML - Create Pod from containers Adds a new 'actions' slot for the PullImage page's Manage registries button. Adds 'missing' pull image action to the button to match other pages. Makes Kube play icon resizable so that a larger form can be used in the header. Svelte has no API to test slots directly (see below), so a FormPageSpec component is added solely to be able to test that the icon/actions/content slots work correctly. The actions section is also tested by confirming the pull image registry button. testing-library/svelte-testing-library#48 https://stackoverflow.com/questions/60771586/testing-svelte-components-that-use-slots Signed-off-by: Tim deBoer <[email protected]>
deboer-tim · Jul 10, 2023 · 5886c01 · 5886c01
1 parent 893b6ab
commit 5886c01
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 15 deletions.
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte
@@ -7,7 +7,7 @@ import { onDestroy, onMount } from 'svelte';
 import type { ProviderContainerConnectionInfo, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
 
 import { providerInfos } from '../../stores/providers';
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import NoContainerEngineEmptyScreen from './NoContainerEngineEmptyScreen.svelte';
 import {
   type BuildImageCallback,
@@ -133,7 +133,10 @@ async function getContainerBuildContextDirectory() {
 }
 </script>
 
-<NavPage title="Build Image from Containerfile" searchEnabled="{false}">
+<FormPage title="Build Image from Containerfile">
+  <span slot="icon">
+    <i class="fas fa-cube fa-2x" aria-hidden="true"></i>
+  </span>
   <div slot="content" class="p-5 min-w-full h-fit">
     {#if providerConnections.length === 0}
       <NoContainerEngineEmptyScreen />
@@ -217,4 +220,4 @@ async function getContainerBuildContextDirectory() {
       </div>
     {/if}
   </div>
-</NavPage>
+</FormPage>
diff --git a/packages/renderer/src/lib/image/PullImage.spec.ts b/packages/renderer/src/lib/image/PullImage.spec.ts
@@ -119,4 +119,14 @@ describe('PullImage', () => {
 
     expect(button).toBeEnabled();
   });
+
+  test('Expect that action is displayed', async () => {
+    setup();
+    render(PullImage);
+
+    const regButton = 'Manage registries';
+    const button = screen.getByRole('button', { name: regButton });
+    expect(button).toBeInTheDocument();
+    expect(button).toBeEnabled();
+  });
 });
diff --git a/packages/renderer/src/lib/image/PullImage.svelte b/packages/renderer/src/lib/image/PullImage.svelte
@@ -6,7 +6,7 @@ import type { PullEvent } from '../../../../main/src/plugin/api/pull-event';
 
 import { providerInfos } from '../../stores/providers';
 import NoContainerEngineEmptyScreen from './NoContainerEngineEmptyScreen.svelte';
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import ErrorMessage from '../ui/ErrorMessage.svelte';
 import TerminalWindow from '../ui/TerminalWindow.svelte';
 import type { Terminal } from 'xterm';
@@ -111,8 +111,12 @@ function validateImageName(event): void {
 }
 </script>
 
-<NavPage title="Pull Image From a Registry" searchEnabled="{false}">
-  <div slot="additional-actions" class="space-x-2 flex flex-nowrap">
+<FormPage title="Pull Image From a Registry">
+  <span slot="icon">
+    <i class="fas fa-arrow-circle-down fa-2x" aria-hidden="true"></i>
+  </span>
+
+  <div slot="actions" class="space-x-2 flex flex-nowrap">
     <button on:click="{() => gotoManageRegistries()}" class="pf-c-button pf-m-primary" type="button">
       <span class="pf-c-button__icon pf-m-start">
         <i class="fas fa-cog" aria-hidden="true"></i>
@@ -181,6 +185,9 @@ function validateImageName(event): void {
                     </span>
                   </i>
                 {/if}
+                <span class="pf-c-button__icon pf-m-start">
+                  <i class="fas fa-arrow-circle-down" aria-hidden="true"></i>
+                </span>
                 Pull image</button>
             {:else}
               <button class="pf-c-button pf-m-primary" type="button" on:click="{() => pullImageFinished()}">
@@ -195,4 +202,4 @@ function validateImageName(event): void {
       </div>
     {/if}
   </div>
-</NavPage>
+</FormPage>
diff --git a/packages/renderer/src/lib/kube/KubePlayIcon.svelte b/packages/renderer/src/lib/kube/KubePlayIcon.svelte
@@ -1,4 +1,14 @@
-<svg class="mr-1" width="13px" height="13px" version="1.1" viewBox="0 0 18.035 17.5" xmlns="http://www.w3.org/2000/svg">
+<script lang="ts">
+export let size = '13px';
+</script>
+
+<svg
+  class="mr-1"
+  width="{size}"
+  height="{size}"
+  version="1.1"
+  viewBox="0 0 18.035 17.5"
+  xmlns="http://www.w3.org/2000/svg">
   <g transform="translate(-.99263 -1.1742)">
     <g
       transform="matrix(1.0149 0 0 1.0149 16.902 -2.6987)"

diff --git a/packages/renderer/src/lib/kube/KubePlayYAML.svelte b/packages/renderer/src/lib/kube/KubePlayYAML.svelte
@@ -7,7 +7,7 @@ let providerUnsubscribe: Unsubscriber;
 import { providerInfos } from '../../stores/providers';
 import MonacoEditor from '../editor/MonacoEditor.svelte';
 import NoContainerEngineEmptyScreen from '../image/NoContainerEngineEmptyScreen.svelte';
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import KubePlayIcon from '../kube/KubePlayIcon.svelte';
 import ErrorMessage from '../ui/ErrorMessage.svelte';
 import WarningMessage from '../ui/WarningMessage.svelte';
@@ -151,8 +151,11 @@ async function getKubernetesfileLocation() {
 {/if}
 
 {#if providerConnections.length > 0}
-  <NavPage title="Play Pods or Containers from a Kubernetes YAML File" searchEnabled="{false}">
-    <div slot="content" class="bg-charcoal-700 p-5 min-w-full h-fit">
+  <FormPage title="Play Pods or Containers from a Kubernetes YAML File">
+    <span slot="icon">
+      <KubePlayIcon size="30px" />
+    </span>
+    <div slot="content" class="p-5 min-w-full h-fit">
       <div class="bg-charcoal-800 px-6 py-4 space-y-6 lg:px-8 sm:pb-6 xl:pb-8 rounded-lg">
         <div class="text-xl font-medium">Select file:</div>
         <div hidden="{runStarted}">
@@ -334,5 +337,5 @@ async function getKubernetesfileLocation() {
         {/if}
       </div>
     </div>
-  </NavPage>
+  </FormPage>
 {/if}
diff --git a/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte b/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
@@ -3,7 +3,7 @@ import { providerInfos } from '../../stores/providers';
 import { onDestroy, onMount } from 'svelte';
 import type { ProviderContainerConnectionInfo, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
 import { type PodCreation, podCreationHolder } from '../../stores/creation-from-containers-store';
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import { router } from 'tinro';
 import type { Unsubscriber } from 'svelte/store';
 import ErrorMessage from '../ui/ErrorMessage.svelte';
@@ -183,7 +183,11 @@ function updatePortExposure(port: number, checked: boolean) {
 }
 </script>
 
-<NavPage title="Copy containers to a pod" searchEnabled="{false}">
+<FormPage title="Copy containers to a pod">
+  <span slot="icon">
+    <PodIcon solid="{true}" />
+  </span>
+
   <div class="min-w-full h-fit" slot="content">
     <div class="m-5 p-6 bg-charcoal-800 rounded-sm text-gray-700">
       <div>
@@ -328,4 +332,4 @@ function updatePortExposure(port: number, checked: boolean) {
       </div>
     </div>
   </div>
-</NavPage>
+</FormPage>
diff --git a/packages/renderer/src/lib/ui/FormPage.svelte b/packages/renderer/src/lib/ui/FormPage.svelte
@@ -29,6 +29,11 @@ export let showBreadcrumb = true;
       </div>
     </div>
     <div class="flex flex-1 justify-end">
+      {#if $$slots.actions}
+        <div class="pr-5">
+          <slot name="actions">&nbsp;</slot>
+        </div>
+      {/if}
       {#if showBreadcrumb}
         <a href="{$lastPage.path}" title="Close" class="mt-2 mr-2 text-gray-900">
           <i class="fas fa-times" aria-hidden="true"></i>

diff --git a/packages/renderer/src/lib/ui/FormPageSpec.spec.ts b/packages/renderer/src/lib/ui/FormPageSpec.spec.ts
@@ -0,0 +1,43 @@
+/**********************************************************************
+ * 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
+ ***********************************************************************/
+
+import '@testing-library/jest-dom';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import FormPageTest from './FormPageSpec.svelte';
+
+test('Expect icon slot is defined', async () => {
+  render(FormPageTest);
+
+  const element = screen.getByLabelText('icon');
+  expect(element).toBeInTheDocument();
+});
+
+test('Expect actions slot is defined', async () => {
+  render(FormPageTest);
+
+  const element = screen.getByLabelText('actions');
+  expect(element).toBeInTheDocument();
+});
+
+test('Expect content slot is defined', async () => {
+  render(FormPageTest);
+
+  const element = screen.getByLabelText('content');
+  expect(element).toBeInTheDocument();
+});
diff --git a/packages/renderer/src/lib/ui/FormPageSpec.svelte b/packages/renderer/src/lib/ui/FormPageSpec.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import FormPage from './FormPage.svelte';
+</script>
+
+<FormPage title="Test component" showBreadcrumb="{false}">
+  <span slot="icon">
+    <i class="fas fa-lightbulb fa-2x" aria-label="icon"></i>
+  </span>
+
+  <span slot="actions">
+    <i class="fas fa-lightbulb fa-2x" aria-label="actions"></i>
+  </span>
+
+  <div slot="content" class="flex flex-col">
+    <i class="fas fa-lightbulb fa-2x" aria-label="content"></i>
+  </div>
+</FormPage>