feat: making the page persistent

Signed-off-by: axel7083 <[email protected]>

packages/backend/src/managers/applicationManager.ts

@@ -20,7 +20,7 @@ import type { Recipe } from '@shared/src/models/IRecipe';
 import type { GitCloneInfo, GitManager } from './gitManager';
 import fs from 'fs';
 import * as path from 'node:path';
-import { containerEngine, Disposable } from '@podman-desktop/api';
+import { containerEngine, Disposable, window, ProgressLocation } from '@podman-desktop/api';
 import type {
   PodCreatePortOptions,
   TelemetryLogger,
@@ -106,7 +106,10 @@ export class ApplicationManager extends Publisher<ApplicationState[]> implements
 
     const task = this.taskRegistry.createTask(`Pulling ${recipe.name} recipe`, 'loading', labels);
 
-    this.pullApplication(recipe, model, labels)
+    window
+      .withProgress({ location: ProgressLocation.TASK_WIDGET, title: `Pulling ${recipe.name}.` }, () =>
+        this.pullApplication(recipe, model, labels),
+      )
       .then(() => {
         task.state = 'success';
       })

packages/frontend/src/pages/StartRecipe.spec.ts

@@ -25,6 +25,7 @@ import type { Recipe } from '@shared/src/models/IRecipe';
 import { InferenceType } from '@shared/src/models/IInference';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import type { Task } from '@shared/src/models/ITask';
+import { router } from 'tinro';
 
 const mocks = vi.hoisted(() => {
   return {
@@ -86,6 +87,9 @@ vi.mock('/@/stores/catalog', async () => {
 vi.mock('tinro', () => ({
   router: {
     goto: vi.fn(),
+    location: {
+      query: new Map(),
+    },
   },
 }));
 
@@ -124,6 +128,9 @@ const fakeRemoteModel: ModelInfo = {
 beforeEach(() => {
   vi.resetAllMocks();
 
+  // reset all query between tests
+  router.location.query.clear();
+
   mocks.getCatalogMock.mockReturnValue({
     recipes: [fakeRecipe],
   });
@@ -290,3 +297,50 @@ test('Loading task should make the submit button disabled', async () => {
     expect(button).toBeDefined();
   });
 });
+
+test('trackingId in router query should use it to display related tasks', () => {
+  mocks.getTasksMock.mockReturnValue([
+    {
+      id: 'dummy-task-id',
+      name: 'Dummy task',
+      state: 'loading',
+      labels: {
+        trackingId: 'fake-tracking-id',
+      },
+    } as Task,
+  ]);
+
+  router.location.query.set('trackingId', 'fake-tracking-id');
+
+  render(StartRecipe, {
+    recipeId: 'dummy-recipe-id',
+  });
+  const button = screen.getByTitle(`Start ${fakeRecipe.name} recipe`);
+  expect(button).toBeDisabled();
+});
+
+test('restoring page should use model-id from tasks to restore the value in the select input', async () => {
+  mocks.getTasksMock.mockReturnValue([
+    {
+      id: 'dummy-task-id',
+      name: 'Dummy task',
+      state: 'loading',
+      labels: {
+        trackingId: 'fake-tracking-id',
+        'model-id': fakeRecommendedModel.id,
+      },
+    } as Task,
+  ]);
+
+  router.location.query.set('trackingId', 'fake-tracking-id');
+
+  const { container } = render(StartRecipe, {
+    recipeId: 'dummy-recipe-id',
+  });
+
+  return await vi.waitFor(() => {
+    const input = container.querySelector('input[name="select-model"][type="hidden"]');
+    if (!input) throw new Error('input not found');
+    expect(JSON.parse((input as HTMLInputElement).value).label).toBe(fakeRecommendedModel.name);
+  });
+});

packages/frontend/src/pages/StartRecipe.svelte

@@ -76,13 +76,35 @@ const processTasks = (tasks: Task[]) => {
 
   // if all task are successful
   completed = trackedTasks.every(task => task.state === 'success');
+
+  // if we re-open the page, we might need to restore the model selected
+  populateModelFromTasks();
 };
 
+// This method uses the trackedTasks to restore the selected value of model
+// It is useful when the page has been restored
+function populateModelFromTasks(): void {
+  // if we already have a value for the model keep it
+  if (value) return;
+
+  const task = trackedTasks.find(
+    task => task.labels && 'model-id' in task.labels && typeof task.labels['model-id'] === 'string',
+  );
+  const modelId = task?.labels?.['model-id'];
+  if (!modelId) return;
+
+  const model = models.find(model => model.id === modelId);
+  if (!model) return;
+
+  value = { ...model, label: model.name, value: model.id };
+}
+
 async function submit(): Promise<void> {
   if (!recipe || !value) return;
 
   loading = true;
   trackingId = await studioClient.requestPullApplication(recipe.id, value.id);
+  router.location.query.set('trackingId', trackingId);
 }
 
 let connectionInfo: ContainerConnectionInfo | undefined;
@@ -93,6 +115,12 @@ $: if (value) {
 }
 
 onMount(() => {
+  // Fetch any trackingId we could recover from query
+  const query = router.location.query.get('trackingId');
+  if (typeof query === 'string' && query.length > 0) {
+    trackingId = query;
+  }
+
   return tasks.subscribe(tasks => {
     processTasks(tasks);
   });