From 6820e5bb919ed8bc4b761f07f7157e16a8205b3d Mon Sep 17 00:00:00 2001
From: Charlie Drage <charlie@charliedrage.com>
Date: Wed, 2 Nov 2022 08:32:09 -0400
Subject: [PATCH] feat: add Play Kubernetes YAML to pod navigation (#739)

### What does this PR do?

* Refactors the Kubernetes-specific actions, to a new folder named
  `kube`
* Adds a button to Play Kubernetes YAML on the pod navigation screen

### Screenshot/screencast of this PR

<!-- Please include a screenshot or a screencast explaining what is doing this PR -->

### What issues does this PR fix or reference?

<!-- Please include any related issue from Podman Desktop repository (or from another issue tracker).
-->

Fixes containers#540

### How to test this PR?

Run `yarn watch`

<!-- Please explain steps to reproduce -->

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

Signed-off-by: Charlie Drage <charlie@charliedrage.com>
---
 packages/renderer/src/App.svelte              |  7 ++++---
 .../renderer/src/lib/ContainerList.svelte     | 13 ++-----------
 .../src/lib/kube/KubePlayButton.svelte        | 19 +++++++++++++++++++
 .../{container => kube}/KubePlayIcon.svelte   |  0
 .../KubePlayYAML.svelte}                      |  8 +++-----
 packages/renderer/src/lib/pod/PodsList.svelte | 14 +++++++++++++-
 6 files changed, 41 insertions(+), 20 deletions(-)
 create mode 100644 packages/renderer/src/lib/kube/KubePlayButton.svelte
 rename packages/renderer/src/lib/{container => kube}/KubePlayIcon.svelte (100%)
 rename packages/renderer/src/lib/{container/ContainerPlayKubefile.svelte => kube/KubePlayYAML.svelte} (95%)

diff --git a/packages/renderer/src/App.svelte b/packages/renderer/src/App.svelte
index f795b2178f2..cf0a0897a5a 100644
--- a/packages/renderer/src/App.svelte
+++ b/packages/renderer/src/App.svelte
@@ -29,7 +29,7 @@ import PreferencesNavigation from './PreferencesNavigation.svelte';
 import AppNavigation from './AppNavigation.svelte';
 import VolumesList from './lib/volume/VolumesList.svelte';
 import VolumeDetails from './lib/volume/VolumeDetails.svelte';
-import ContainerPlayKubefile from './lib/container/ContainerPlayKubefile.svelte';
+import KubePlayYAML from './lib/kube/KubePlayYAML.svelte';
 import PodDetails from './lib/pod/PodDetails.svelte';
 import PodCreateFromContainers from './lib/pod/PodCreateFromContainers.svelte';
 import DeployPodToKube from './lib/pod/DeployPodToKube.svelte';
@@ -97,8 +97,9 @@ window.events?.receive('display-help', () => {
         <Route path="/containers/:id/*" let:meta>
           <ContainerDetails containerID="{meta.params.id}" />
         </Route>
-        <Route path="/containers/play">
-          <ContainerPlayKubefile />
+
+        <Route path="/kube/play">
+          <KubePlayYAML />
         </Route>
 
         <Route path="/images">
diff --git a/packages/renderer/src/lib/ContainerList.svelte b/packages/renderer/src/lib/ContainerList.svelte
index 1d70af7098c..20d729c83f1 100644
--- a/packages/renderer/src/lib/ContainerList.svelte
+++ b/packages/renderer/src/lib/ContainerList.svelte
@@ -20,8 +20,8 @@ import NavPage from './ui/NavPage.svelte';
 import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import Fa from 'svelte-fa/src/fa.svelte';
 import ContainerGroupIcon from './container/ContainerGroupIcon.svelte';
-import KubePlayIcon from './container/KubePlayIcon.svelte';
 import { podCreationHolder } from '../stores/creation-from-containers-store';
+import KubePlayButton from './kube/KubePlayButton.svelte';
 
 const containerUtils = new ContainerUtils();
 let openChoiceModal = false;
@@ -280,16 +280,7 @@ function toggleAllContainerGroups(value: boolean) {
       Create container
     </button>
     {#if providerPodmanConnections.length > 0}
-      <button
-        on:click="{() => runContainerYaml()}"
-        class="pf-c-button pf-m-primary"
-        type="button"
-        title="Play pod/containers from kubernetes YAML file ">
-        <div class="flex flex-row align-text-top justify-start items-center">
-          <KubePlayIcon />
-          Play Kubernetes YAML
-        </div>
-      </button>
+      <KubePlayButton />
     {/if}
   </div>
   <div slot="bottom-additional-actions" class="flex flex-row justify-start items-center w-full">
diff --git a/packages/renderer/src/lib/kube/KubePlayButton.svelte b/packages/renderer/src/lib/kube/KubePlayButton.svelte
new file mode 100644
index 00000000000..37f8eb62ecc
--- /dev/null
+++ b/packages/renderer/src/lib/kube/KubePlayButton.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import { router } from 'tinro';
+import KubePlayIcon from './KubePlayIcon.svelte';
+
+function runContainerYaml(): void {
+  router.goto('/kube/play');
+}
+</script>
+
+<button
+  on:click="{() => runContainerYaml()}"
+  class="pf-c-button pf-m-primary"
+  type="button"
+  title="Play pod/containers from kubernetes YAML file ">
+  <div class="flex flex-row align-text-top justify-start items-center">
+    <KubePlayIcon />
+    Play Kubernetes YAML
+  </div>
+</button>
diff --git a/packages/renderer/src/lib/container/KubePlayIcon.svelte b/packages/renderer/src/lib/kube/KubePlayIcon.svelte
similarity index 100%
rename from packages/renderer/src/lib/container/KubePlayIcon.svelte
rename to packages/renderer/src/lib/kube/KubePlayIcon.svelte
diff --git a/packages/renderer/src/lib/container/ContainerPlayKubefile.svelte b/packages/renderer/src/lib/kube/KubePlayYAML.svelte
similarity index 95%
rename from packages/renderer/src/lib/container/ContainerPlayKubefile.svelte
rename to packages/renderer/src/lib/kube/KubePlayYAML.svelte
index 5896dc434d2..1400ad6abad 100644
--- a/packages/renderer/src/lib/container/ContainerPlayKubefile.svelte
+++ b/packages/renderer/src/lib/kube/KubePlayYAML.svelte
@@ -8,7 +8,7 @@ import { providerInfos } from '../../stores/providers';
 import MonacoEditor from '../editor/MonacoEditor.svelte';
 import NoContainerEngineEmptyScreen from '../image/NoContainerEngineEmptyScreen.svelte';
 import NavPage from '../ui/NavPage.svelte';
-import KubePlayIcon from './KubePlayIcon.svelte';
+import KubePlayIcon from '../kube/KubePlayIcon.svelte';
 
 let runStarted = false;
 let runFinished = false;
@@ -55,9 +55,6 @@ async function playKubeFile(): Promise<void> {
   }
   runStarted = false;
 }
-function goToContainerList(): void {
-  window.location.href = '#/containers';
-}
 
 onMount(() => {
   providerUnsubscribe = providerInfos.subscribe(value => {
@@ -162,7 +159,8 @@ async function getKubernetesfileLocation() {
           <div class="text-red-500 text-sm">{runError}</div>
         {/if}
         {#if runFinished}
-          <button on:click="{() => goToContainerList()}" class="w-full pf-c-button pf-m-primary">Done</button>
+          <!-- On click, go BACK to the previous page (if clicked on Pods page, go back to pods, same for Containers)-->
+          <button on:click="{() => history.back()}" class="w-full pf-c-button pf-m-primary">Done</button>
         {/if}
       </div>
       {#if playKubeResultRaw}
diff --git a/packages/renderer/src/lib/pod/PodsList.svelte b/packages/renderer/src/lib/pod/PodsList.svelte
index 6186622f413..24240357bc6 100644
--- a/packages/renderer/src/lib/pod/PodsList.svelte
+++ b/packages/renderer/src/lib/pod/PodsList.svelte
@@ -13,6 +13,7 @@ import NoContainerEngineEmptyScreen from '../image/NoContainerEngineEmptyScreen.
 import PodEmptyScreen from './PodEmptyScreen.svelte';
 import PodIcon from '../container/PodIcon.svelte';
 import PodActions from './PodActions.svelte';
+import KubePlayButton from '../kube/KubePlayButton.svelte';
 
 let searchTerm = '';
 $: searchPattern.set(searchTerm);
@@ -25,6 +26,13 @@ $: providerConnections = $providerInfos
   .flat()
   .filter(providerContainerConnection => providerContainerConnection.status === 'started');
 
+$: providerPodmanConnections = $providerInfos
+  .map(provider => provider.containerConnections)
+  .flat()
+  // keep only podman providers as it is not supported by docker
+  .filter(providerContainerConnection => providerContainerConnection.type === 'podman')
+  .filter(providerContainerConnection => providerContainerConnection.status === 'started');
+
 // number of selected items in the list
 $: selectedItemsNumber = pods.filter(pod => pod.selected).length;
 
@@ -108,7 +116,11 @@ function openContainersFromPod(pod: PodInfoUI) {
   bind:searchTerm
   title="pods"
   subtitle="Hover over an pod to view action buttons; click to open up full details.">
-  <div slot="additional-actions" class="space-x-2 flex flex-nowrap"></div>
+  <div slot="additional-actions" class="space-x-2 flex flex-nowrap">
+    {#if providerPodmanConnections.length > 0}
+      <KubePlayButton />
+    {/if}
+  </div>
 
   <div slot="bottom-additional-actions" class="flex flex-row justify-start items-center w-full">
     {#if selectedItemsNumber > 0}