Disable actions when deleting

packages/renderer/src/lib/container/ContainerActions.spec.ts

@@ -100,3 +100,26 @@ test('Expect no error and status deleting container', async () => {
   expect(container.actionError).toEqual('');
   expect(updateMock).toHaveBeenCalled();
 });
+
+test('Expect buttons to be disabled when deleting', async () => {
+  render(ContainerActions, { container });
+  container.state = 'DELETING';
+
+  const deleteButton = screen.getByRole('button', { name: 'Delete Container' });
+  expect(deleteButton).toBeDisabled();
+
+  const startButton = screen.getByRole('button', { name: 'Start Container' });
+  expect(startButton).toBeDisabled();
+
+  const stopButton = screen.getByRole('button', { name: 'Stop Container' });
+  expect(stopButton).toBeDisabled();
+
+  const generateKubeButton = screen.getByRole('button', { name: 'Generate Kube' });
+  expect(generateKubeButton).toBeDisabled();
+
+  const deployToKubeButton = screen.getByRole('button', { name: 'Deploy to Kubernetes' });
+  expect(deployToKubeButton).toBeDisabled();
+
+  const restartContainerButton = screen.getByRole('button', { name: 'Restart Container' });
+  expect(restartContainerButton).toBeDisabled();
+});

packages/renderer/src/lib/container/ContainerActions.svelte

@@ -132,6 +132,7 @@ if (dropdownMenu) {
   hidden="{container.state === 'RUNNING' || container.state === 'STOPPING'}"
   detailed="{detailed}"
   inProgress="{container.actionInProgress && container.state === 'STARTING'}"
+  enabled="{container.state !== 'STARTING' && container.state !== 'DELETING'}"
   icon="{faPlay}"
   iconOffset="pl-[0.15rem]" />
 
@@ -141,6 +142,7 @@ if (dropdownMenu) {
   hidden="{!(container.state === 'RUNNING' || container.state === 'STOPPING')}"
   detailed="{detailed}"
   inProgress="{container.actionInProgress && container.state === 'STOPPING'}"
+  enabled="{container.state !== 'STOPPING' && container.state !== 'DELETING'}"
   icon="{faStop}" />
 
 <ListItemButtonIcon
@@ -149,7 +151,8 @@ if (dropdownMenu) {
   onClick="{() => deleteContainer()}"
   icon="{faTrash}"
   detailed="{detailed}"
-  inProgress="{container.actionInProgress && container.state === 'DELETING'}" />
+  inProgress="{container.actionInProgress && container.state === 'DELETING'}"
+  enabled="{container.state !== 'DELETING'}" />
 
 <!-- If dropdownMenu is true, use it, otherwise just show the regular buttons -->
 <svelte:component this="{actionsStyle}">
@@ -167,6 +170,7 @@ if (dropdownMenu) {
       hidden="{!(
         container.engineType === 'podman' && container.groupInfo.type === ContainerGroupInfoTypeUI.STANDALONE
       )}"
+      enabled="{container.state !== 'DELETING'}"
       detailed="{detailed}"
       icon="{faFileCode}" />
   {/if}
@@ -176,6 +180,7 @@ if (dropdownMenu) {
     menu="{dropdownMenu}"
     hidden="{!(container.engineType === 'podman' && container.groupInfo.type === ContainerGroupInfoTypeUI.STANDALONE)}"
     detailed="{detailed}"
+    enabled="{container.state !== 'DELETING'}"
     icon="{faRocket}" />
   <ListItemButtonIcon
     title="Open Browser"
@@ -199,6 +204,7 @@ if (dropdownMenu) {
     onClick="{() => restartContainer()}"
     menu="{dropdownMenu}"
     detailed="{detailed}"
+    enabled="{container.state !== 'DELETING'}"
     icon="{faArrowsRotate}" />
   <ContributionActions
     args="{[container]}"

packages/renderer/src/lib/deployments/DeploymentActions.spec.ts

@@ -64,3 +64,11 @@ test('Expect no error and status deleting deployment', async () => {
   expect(updateMock).toHaveBeenCalled();
   expect(deleteMock).toHaveBeenCalled();
 });
+
+test('Expect buttons to be disabled when deleting', async () => {
+  render(DeploymentActions, { deployment });
+  deployment.status = 'DELETING';
+
+  const deleteButton = screen.getByRole('button', { name: 'Delete Deployment' });
+  expect(deleteButton).toBeDisabled();
+});

packages/renderer/src/lib/deployments/DeploymentActions.svelte

@@ -22,4 +22,6 @@ async function deleteDeployment(): Promise<void> {
   confirm="{true}"
   onClick="{() => deleteDeployment()}"
   detailed="{detailed}"
+  enabled="{deployment.status !== 'DELETING'}"
+  inProgress="{deployment.status === 'DELETING'}"
   icon="{faTrash}" />

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

@@ -154,3 +154,28 @@ test('Expect no dropdown when several contributions and dropdownMenu mode on', a
     expect(button.lastChild?.textContent).toBe('dummy-contrib');
   });
 });
+
+test('Expect buttons to be disabled when deleting', async () => {
+  const image: ImageInfoUI = {
+    name: 'dummy',
+    status: 'DELETING',
+  } as ImageInfoUI;
+
+  render(ImageActions, {
+    onPushImage: vi.fn(),
+    onRenameImage: vi.fn(),
+    image,
+  });
+
+  const runImagesButton = screen.getByRole('button', { name: 'Run Image' });
+  expect(runImagesButton).toBeDisabled();
+
+  const deleteButton = screen.getByRole('button', { name: 'Delete Image' });
+  expect(deleteButton).toBeDisabled();
+
+  const editImageButton = screen.getByRole('button', { name: 'Edit Image' });
+  expect(editImageButton).toBeDisabled();
+
+  const showHistoryButton = screen.getByRole('button', { name: 'Show History' });
+  expect(showHistoryButton).toBeDisabled();
+});

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

@@ -93,7 +93,12 @@ function onError(error: string): void {
 }
 </script>
 
-<ListItemButtonIcon title="Run Image" onClick="{() => runImage(image)}" detailed="{detailed}" icon="{faPlay}" />
+<ListItemButtonIcon
+  title="Run Image"
+  onClick="{() => runImage(image)}"
+  detailed="{detailed}"
+  icon="{faPlay}"
+  enabled="{image.status !== 'DELETING'}" />
 
 <ListItemButtonIcon
   title="Delete Image"
@@ -115,6 +120,7 @@ function onError(error: string): void {
       onClick="{() => pushImage(image)}"
       menu="{dropdownMenu}"
       detailed="{detailed}"
+      enabled="{image.status !== 'DELETING'}"
       icon="{faArrowUp}" />
   {/if}
 
@@ -123,6 +129,7 @@ function onError(error: string): void {
     onClick="{() => renameImage(image)}"
     menu="{dropdownMenu}"
     detailed="{detailed}"
+    enabled="{image.status !== 'DELETING'}"
     icon="{faEdit}" />
 
   {#if !detailed}
@@ -131,6 +138,7 @@ function onError(error: string): void {
       onClick="{() => showLayersImage()}"
       menu="{dropdownMenu}"
       detailed="{detailed}"
+      enabled="{image.status !== 'DELETING'}"
       icon="{faLayerGroup}" />
   {/if}
 

packages/renderer/src/lib/pod/PodActions.spec.ts

@@ -192,3 +192,30 @@ test('Expect kubernetes routes kebab menu to be displayed', async () => {
   const routesDropDownMenu = await screen.findByTitle('Drop Down Menu Items');
   expect(routesDropDownMenu).toBeVisible();
 });
+
+test('Expect buttons to be disabled when deleting', async () => {
+  const pod: PodInfoUI = {
+    id: 'pod',
+    name: 'name',
+    containers: [{ Id: 'pod' }],
+    status: 'DELETING',
+    kind: 'podman',
+  } as PodInfoUI;
+
+  render(PodActions, { pod: pod });
+
+  const startPodButton = screen.getByRole('button', { name: 'Start Pod' });
+  expect(startPodButton).toBeDisabled();
+
+  const stopPodButton = screen.getByRole('button', { name: 'Stop Pod' });
+  expect(stopPodButton).toBeDisabled();
+
+  const deletePodButton = screen.getByRole('button', { name: 'Delete Pod' });
+  expect(deletePodButton).toBeDisabled();
+
+  const generateKubeButton = screen.getByRole('button', { name: 'Generate Kube' });
+  expect(generateKubeButton).toBeDisabled();
+
+  const deployKubeButton = screen.getByRole('button', { name: 'Deploy to Kubernetes' });
+  expect(deployKubeButton).toBeDisabled();
+});

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

@@ -165,6 +165,7 @@ if (dropdownMenu) {
     hidden="{pod.status === 'RUNNING' || pod.status === 'STOPPING'}"
     detailed="{detailed}"
     inProgress="{pod.actionInProgress && pod.status === 'STARTING'}"
+    enabled="{pod.status !== 'STARTING' && pod.status !== 'DELETING'}"
     icon="{faPlay}"
     iconOffset="pl-[0.15rem]" />
   <ListItemButtonIcon
@@ -173,6 +174,7 @@ if (dropdownMenu) {
     hidden="{!(pod.status === 'RUNNING' || pod.status === 'STOPPING')}"
     detailed="{detailed}"
     inProgress="{pod.actionInProgress && pod.status === 'STOPPING'}"
+    enabled="{pod.status !== 'STOPPING' && pod.status !== 'DELETING'}"
     icon="{faStop}" />
 {/if}
 <ListItemButtonIcon
@@ -181,7 +183,8 @@ if (dropdownMenu) {
   confirm="{true}"
   icon="{faTrash}"
   detailed="{detailed}"
-  inProgress="{pod.actionInProgress && pod.status === 'DELETING'}" />
+  inProgress="{pod.actionInProgress && pod.status === 'DELETING'}"
+  enabled="{pod.status !== 'DELETING'}" />
 
 <!-- If dropdownMenu is true, use it, otherwise just show the regular buttons -->
 <svelte:component this="{actionsStyle}">
@@ -192,13 +195,15 @@ if (dropdownMenu) {
         onClick="{() => openGenerateKube()}"
         menu="{dropdownMenu}"
         detailed="{detailed}"
+        enabled="{pod.status !== 'DELETING'}"
         icon="{faFileCode}" />
     {/if}
     <ListItemButtonIcon
       title="Deploy to Kubernetes"
       onClick="{() => deployToKubernetes()}"
       menu="{dropdownMenu}"
       detailed="{detailed}"
+      enabled="{pod.status !== 'DELETING'}"
       icon="{faRocket}" />
     {#if openingUrls.length === 0}
       <ListItemButtonIcon
@@ -274,6 +279,7 @@ if (dropdownMenu) {
     onClick="{() => restartPod()}"
     menu="{dropdownMenu}"
     detailed="{detailed}"
+    enabled="{pod.status !== 'DELETING'}"
     icon="{faArrowsRotate}" />
   <ContributionActions
     args="{[pod]}"

packages/renderer/src/lib/service/ServiceActions.spec.ts

@@ -63,3 +63,11 @@ test('Expect no error and status deleting service', async () => {
   expect(updateMock).toHaveBeenCalled();
   expect(deleteMock).toHaveBeenCalled();
 });
+
+test('Expect buttons to be disabled when deleting', async () => {
+  render(ServiceActions, { service });
+  service.status = 'DELETING';
+
+  const deletePodButton = screen.getByRole('button', { name: 'Delete Service' });
+  expect(deletePodButton).toBeDisabled();
+});

packages/renderer/src/lib/service/ServiceActions.svelte

@@ -22,4 +22,5 @@ async function deleteService(): Promise<void> {
   confirm="{true}"
   onClick="{() => deleteService()}"
   detailed="{detailed}"
+  enabled="{service.status !== 'DELETING'}"
   icon="{faTrash}" />

packages/renderer/src/lib/volume/VolumeActions.spec.ts

@@ -53,3 +53,31 @@ test('Expect prompt dialog and deletion', async () => {
   expect(volume.status).toBe('DELETING');
   expect(removeVolumeMock).toHaveBeenCalled();
 });
+
+test('Expect buttons to be disabled when deleting', async () => {
+  const volume: VolumeInfoUI = {
+    name: 'dummy',
+    status: 'DELETING',
+  } as VolumeInfoUI;
+
+  render(VolumeActions, {
+    volume,
+  });
+
+  const button = screen.getByTitle('Delete Volume');
+  expect(button).toBeDisabled();
+});
+
+test('Expect delete to be disabled when volume is being used', async () => {
+  const volume: VolumeInfoUI = {
+    name: 'dummy',
+    status: 'USED',
+  } as VolumeInfoUI;
+
+  render(VolumeActions, {
+    volume,
+  });
+
+  const button = screen.getByTitle('Delete Volume');
+  expect(button).toBeDisabled();
+});

packages/renderer/src/lib/volume/VolumeActions.svelte

@@ -17,11 +17,10 @@ async function removeVolume(): Promise<void> {
 }
 </script>
 
-{#if volume.status === 'UNUSED'}
-  <ListItemButtonIcon
-    title="Delete Volume"
-    confirm="{true}"
-    onClick="{() => removeVolume()}"
-    detailed="{detailed}"
-    icon="{faTrash}" />
-{/if}
+<ListItemButtonIcon
+  title="Delete Volume"
+  confirm="{true}"
+  onClick="{() => removeVolume()}"
+  detailed="{detailed}"
+  enabled="{volume.status === 'UNUSED'}"
+  icon="{faTrash}" />