chore: update ImageEmptyPage to include pullImage button (podman-desktop#8890)

* chore: update ImageEmptyPage to include pull image button
Signed-off-by: Sonia Sandler <[email protected]>

Author: SoniaSandler

packages/renderer/src/lib/image/ImageEmptyScreen.spec.ts

@@ -0,0 +1,123 @@
+/**********************************************************************
+ * Copyright (C) 2024 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/vitest';
+
+import type { ProviderStatus } from '@podman-desktop/api';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, test, vi } from 'vitest';
+
+import { providerInfos } from '/@/stores/providers';
+import type { ProviderContainerConnectionInfo, ProviderInfo } from '/@api/provider-info';
+
+import ImageEmptyScreen from './ImageEmptyScreen.svelte';
+
+const pullImageMock = vi.fn();
+const showMessageBoxMock = vi.fn();
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  (window as any).pullImage = pullImageMock;
+  (window as any).showMessageBox = showMessageBoxMock;
+});
+
+// set up a valid provider connection for pull image
+function setup() {
+  const pStatus: ProviderStatus = 'started';
+  const pInfo: ProviderContainerConnectionInfo = {
+    name: 'test',
+    displayName: 'test',
+    status: 'started',
+    endpoint: {
+      socketPath: '',
+    },
+    type: 'podman',
+  };
+  const providerInfo = {
+    id: 'test',
+    internalId: 'id',
+    name: '',
+    containerConnections: [pInfo],
+    kubernetesConnections: undefined,
+    status: pStatus,
+    containerProviderConnectionCreation: false,
+    containerProviderConnectionInitialization: false,
+    kubernetesProviderConnectionCreation: false,
+    kubernetesProviderConnectionInitialization: false,
+    links: undefined,
+    detectionChecks: undefined,
+    warnings: undefined,
+    images: undefined,
+    installationSupport: undefined,
+  } as unknown as ProviderInfo;
+  providerInfos.set([providerInfo]);
+}
+
+test('expect page to have pull image button', async () => {
+  render(ImageEmptyScreen);
+
+  const pullButton = screen.getByRole('button', { name: 'Pull your first image' });
+
+  expect(pullButton).toBeInTheDocument();
+
+  await userEvent.click(pullButton);
+});
+
+test('expect error to show up in message box when pull has an error', async () => {
+  setup();
+  render(ImageEmptyScreen);
+
+  pullImageMock.mockRejectedValueOnce(new Error('Cannot pull image'));
+
+  const pullButton = screen.getByRole('button', { name: 'Pull your first image' });
+  expect(pullButton).toBeInTheDocument();
+
+  await userEvent.click(pullButton);
+
+  expect(showMessageBoxMock).toBeCalledWith({
+    title: `Error while pulling image`,
+    message: `Error while pulling image from test: Cannot pull image`,
+  });
+});
+
+test('expect error to show up in message box with no providers', async () => {
+  providerInfos.set([]);
+  render(ImageEmptyScreen);
+
+  const pullButton = screen.getByRole('button', { name: 'Pull your first image' });
+
+  await userEvent.click(pullButton);
+
+  expect(showMessageBoxMock).toBeCalledWith({
+    title: `Error while pulling image`,
+    message: `No provider connections found`,
+  });
+});
+
+test('expect image to be pulled successfully', async () => {
+  setup();
+  render(ImageEmptyScreen);
+
+  const pullButton = screen.getByRole('button', { name: 'Pull your first image' });
+
+  await userEvent.click(pullButton);
+
+  expect(pullImageMock).toBeCalled();
+  expect(showMessageBoxMock).not.toBeCalled();
+});

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

@@ -1,14 +1,58 @@
 <script lang="ts">
-import { EmptyScreen } from '@podman-desktop/ui-svelte';
+import { Button, EmptyScreen } from '@podman-desktop/ui-svelte';
+
+import { providerInfos } from '/@/stores/providers';
 
 import ImageIcon from '../images/ImageIcon.svelte';
 
-const commandLine = 'podman pull quay.io/podman/hello';
+$: selectedProviderConnection = $providerInfos
+  .map(provider => provider.containerConnections)
+  .flat()
+  .find(providerContainerConnection => providerContainerConnection.status === 'started');
+
+const firstImageName = 'quay.io/podman/hello';
+const commandLine = `podman pull ${firstImageName}`;
+let pullInProgress = false;
+
+async function pullFirstImage() {
+  if (!selectedProviderConnection) {
+    await window.showMessageBox({
+      title: `Error while pulling image`,
+      message: `No provider connections found`,
+    });
+    return;
+  }
+
+  pullInProgress = true;
+  try {
+    await window.pullImage(selectedProviderConnection, firstImageName, () => {});
+  } catch (error: any) {
+    const errorMessage = error.message ? error.message : error;
+    await window.showMessageBox({
+      title: `Error while pulling image`,
+      message: `Error while pulling image from ${selectedProviderConnection.name}: ${errorMessage}`,
+    });
+  }
+  pullInProgress = false;
+}
 </script>
 
 <EmptyScreen
   icon={ImageIcon}
   title="No images"
   message="Pull a first image using the following command line:"
   commandline={commandLine}
-  on:click={() => window.clipboardWriteText(commandLine)} />
+  on:click={() => window.clipboardWriteText(commandLine)}>
+  <div slot="upperContent">
+    <span class="text-[var(--pd-details-empty-sub-header)] max-w-[800px] text-pretty mx-2"
+      >Pull a first image by clicking on this button:</span>
+    <div class="flex gap-2 justify-center p-3">
+      <Button
+        title="Pull {firstImageName} image"
+        type="primary"
+        inProgress={pullInProgress}
+        on:click={() => pullFirstImage()}>Pull your first image</Button>
+    </div>
+    <h1 class="text-xl text-[var(--pd-details-empty-header)]">OR</h1>
+  </div>
+</EmptyScreen>