feat: background colors and FormPage

packages/renderer/src/lib/help/HelpPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import { providerInfos } from '../../stores/providers';
 import type { ProviderLinks } from '@podman-desktop/api';
 
@@ -17,8 +17,8 @@ $: contributedLinks = $providerInfos
   }, new Map<string, ProviderLinks[]>());
 </script>
 
-<NavPage searchEnabled="{false}" title="Help">
-  <div slot="content" class="flex flex-col min-h-full bg-zinc-700">
+<FormPage title="Help">
+  <div slot="content" class="flex flex-col min-w-full h-fit">
     <div class="min-w-full flex-1 pt-5 px-5 pb-5 space-y-5">
       <!-- Getting Started -->
       <div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
@@ -173,4 +173,4 @@ $: contributedLinks = $providerInfos
       </div>
     </div>
   </div>
-</NavPage>
+</FormPage>

packages/renderer/src/lib/image/RunImage.svelte

@@ -3,7 +3,7 @@ import { runImageInfo } from '../../stores/run-image-store';
 import { onMount } from 'svelte';
 import type { ContainerCreateOptions, HostConfig } from '../../../../main/src/plugin/api/container-info';
 import type { ImageInspectInfo } from '../../../../main/src/plugin/api/image-inspect-info';
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import type { ImageInfoUI } from './ImageInfoUI';
 import { faFolderOpen, faMinusCircle, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import Fa from 'svelte-fa/src/fa.svelte';
@@ -387,8 +387,12 @@ function checkContainerName(event: any) {
 
 <Route path="/*" let:meta>
   {#if dataReady}
-    <NavPage title="Create a container from image {imageDisplayName}:{image.tag}" searchEnabled="{false}">
-      <div slot="content" class="bg-zinc-700 p-5 min-w-full h-fit">
+    <FormPage
+      name="Run Image"
+      title="Create a container from image {imageDisplayName}:{image.tag}"
+      parentName="Images"
+      parentURL="/images">
+      <div slot="content" class="p-5 min-w-full h-fit">
         <div class="bg-charcoal-600 px-6 py-4 space-y-2 lg:px-8 sm:pb-6 xl:pb-8">
           <section class="pf-c-page__main-tabs pf-m-limit-width">
             <div class="pf-c-page__main-body">
@@ -896,6 +900,6 @@ function checkContainerName(event: any) {
           <ErrorMessage class="py-2 text-sm" error="{createError}" />
         </div>
       </div>
-    </NavPage>
+    </FormPage>
   {/if}
 </Route>

packages/renderer/src/lib/pod/DeployPodToKube.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onDestroy, onMount } from 'svelte';
 import MonacoEditor from '../editor/MonacoEditor.svelte';
-import NavPage from '../ui/NavPage.svelte';
+import FormPage from '../ui/FormPage.svelte';
 import * as jsYaml from 'js-yaml';
 import type { V1Route } from '../../../../main/src/plugin/api/openshift-types';
 import type { V1NamespaceList } from '@kubernetes/client-node/dist/api';
@@ -343,8 +343,8 @@ function updateKubeResult() {
 }
 </script>
 
-<NavPage title="Deploy generated pod to Kubernetes" searchEnabled="{false}">
-  <div slot="content" class="p-5 bg-zinc-700 min-w-full h-fit">
+<FormPage name="Deploy to Kubernetes" title="Deploy generated pod to Kubernetes" parentName="Pods" parentURL="/pods">
+  <div slot="content" class="p-5 min-w-full h-fit">
     <div class="bg-charcoal-600 p-5">
       {#if kubeDetails}
         <p>Generated pod to deploy to Kubernetes:</p>
@@ -575,4 +575,4 @@ function updateKubeResult() {
       {/if}
     </div>
   </div>
-</NavPage>
+</FormPage>

packages/renderer/src/lib/ui/FormPage.spec.ts

@@ -0,0 +1,68 @@
+/**********************************************************************
+ * 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 FormPage from './FormPage.svelte';
+
+test('Expect title is defined', async () => {
+  const name = 'My Name';
+  const title = 'My Dummy Title';
+  render(FormPage, {
+    name,
+    title,
+  });
+
+  const titleElement = screen.getByRole('heading', { level: 1, name: title });
+  expect(titleElement).toBeInTheDocument();
+  expect(titleElement).toHaveTextContent(title);
+});
+
+test('Expect backlink is defined', async () => {
+  const name = 'My Name';
+  const title = 'My Dummy Title';
+  const parentName = 'Parent';
+  const parentURL = '/test';
+  render(FormPage, {
+    name,
+    title,
+    parentName,
+    parentURL,
+  });
+
+  const nameElement = screen.getByLabelText('back');
+  expect(nameElement).toBeInTheDocument();
+  expect(nameElement).toHaveTextContent(parentName);
+  expect(nameElement).toHaveAttribute('href', parentURL);
+});
+
+test('Expect close link is defined', async () => {
+  const name = 'My Name';
+  const title = 'My Dummy Title';
+  const parentURL = '/test';
+  render(FormPage, {
+    name,
+    title,
+    parentURL,
+  });
+
+  const closeElement = screen.getByTitle('Close');
+  expect(closeElement).toBeInTheDocument();
+  expect(closeElement).toHaveAttribute('href', parentURL);
+});

packages/renderer/src/lib/ui/FormPage.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+export let name: string = undefined;
+export let title: string;
+export let parentName: string = undefined;
+export let parentURL: string = undefined;
+</script>
+
+<div class="flex flex-col w-full h-full shadow-pageheader">
+  <div class="flex flex-row w-full h-fit px-5 py-4">
+    <div class="flex flex-col w-full h-fit">
+      {#if parentName}
+        <div class="flex flew-row items-center">
+          <a
+            aria-label="back"
+            class="text-violet-400 text-base hover:no-underline"
+            href="{parentURL}"
+            title="Go back to {parentName}">{parentName}</a>
+          <div class="text-xl mx-2 text-gray-700">></div>
+          <div class="text-sm font-extralight text-gray-700">{name}</div>
+        </div>
+      {/if}
+      <h1 aria-label="{title}" class="text-xl first-letter:uppercase">{title}</h1>
+    </div>
+    <div class="flex flex-1 justify-end">
+      {#if parentURL}
+        <a href="{parentURL}" title="Close" class="mt-2 mr-2 text-gray-900">
+          <i class="fas fa-times" aria-hidden="true"></i>
+        </a>
+      {/if}
+    </div>
+  </div>
+  <div class="flex w-full h-full bg-zinc-700 overflow-auto">
+    <slot name="content" />
+  </div>
+</div>