From c8ca3ba522a8a7b0ed71e11490021a3b15330d97 Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:21:17 +0200
Subject: [PATCH] fix: disabling service form creation when loading

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 .../frontend/src/pages/CreateService.spec.ts  | 51 +++++++++++++++++++
 .../frontend/src/pages/CreateService.svelte   | 12 +++--
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/CreateService.spec.ts b/packages/frontend/src/pages/CreateService.spec.ts
index 759403c3d..6d1634a3c 100644
--- a/packages/frontend/src/pages/CreateService.spec.ts
+++ b/packages/frontend/src/pages/CreateService.spec.ts
@@ -195,6 +195,57 @@ test('tasks should be displayed after requestCreateInferenceServer', async () =>
   });
 });
 
+test('form should be disabled when loading', async () => {
+  mocks.modelsInfoSubscribeMock.mockReturnValue([{ id: 'random', file: true }]);
+
+  let listener: ((tasks: Task[]) => void) | undefined;
+  vi.spyOn(mocks.tasksQueriesMock, 'subscribe').mockImplementation((f: (tasks: Task[]) => void) => {
+    listener = f;
+    listener([]);
+    return () => {};
+  });
+
+  render(CreateService);
+
+  // wait for listener to be defined
+  await vi.waitFor(() => {
+    expect(listener).toBeDefined();
+  });
+
+  let createBtn: HTMLElement | undefined = undefined;
+  await vi.waitFor(() => {
+    createBtn = screen.getByTitle('Create service');
+    expect(createBtn).toBeDefined();
+  });
+
+  if (createBtn === undefined || listener === undefined) throw new Error('properties undefined');
+
+  await fireEvent.click(createBtn);
+
+  await vi.waitFor(() => {
+    expect(studioClient.requestCreateInferenceServer).toHaveBeenCalled();
+  });
+
+  listener([
+    {
+      id: 'dummyTaskId',
+      labels: {
+        trackingId: 'dummyTrackingId',
+      },
+      name: 'Dummy Task name',
+      state: 'loading',
+    },
+  ]);
+
+  await vi.waitFor(() => {
+    const select = screen.getByRole('combobox', { name: 'Model select' });
+    expect(select).toBeDisabled();
+
+    const input = screen.getByRole('spinbutton', { name: 'Port input' });
+    expect(input).toBeDisabled();
+  });
+});
+
 test('should display error message if createService fails', async () => {
   mocks.modelsInfoSubscribeMock.mockReturnValue([{ id: 'random', file: true }]);
 
diff --git a/packages/frontend/src/pages/CreateService.svelte b/packages/frontend/src/pages/CreateService.svelte
index 7a8568742..de0bd74c2 100644
--- a/packages/frontend/src/pages/CreateService.svelte
+++ b/packages/frontend/src/pages/CreateService.svelte
@@ -43,6 +43,8 @@ let error: boolean = false;
 let containerId: string | undefined = undefined;
 $: available = containerId && $inferenceServers.some(server => server.container.containerId);
 
+$: loading = trackingId !== undefined && !error;
+
 let connectionInfo: ContainerConnectionInfo | undefined;
 $: if (localModels && modelId) {
   checkContainerConnectionStatus(localModels, modelId, 'inference')
@@ -155,9 +157,11 @@ onMount(async () => {
           <select
             required
             bind:value="{modelId}"
-            id="providerChoice"
+            disabled="{loading}"
+            aria-label="Model select"
+            id="model-select"
             class="border text-sm rounded-lg w-full focus:ring-purple-500 focus:border-purple-500 block p-2.5 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
-            name="providerChoice">
+            name="Model select">
             {#each localModels as model}
               <option class="my-1" value="{model.id}">{model.name}</option>
             {/each}
@@ -184,6 +188,8 @@ onMount(async () => {
             class="w-full p-2 outline-none text-sm bg-charcoal-600 rounded-sm text-gray-700 placeholder-gray-700"
             placeholder="8888"
             name="containerPort"
+            aria-label="Port input"
+            disabled="{loading}"
             required />
         </div>
         {#if errorMsg !== undefined}
@@ -194,7 +200,7 @@ onMount(async () => {
             {#if containerId === undefined}
               <Button
                 title="Create service"
-                inProgress="{trackingId !== undefined && !error}"
+                inProgress="{loading}"
                 on:click="{submit}"
                 disabled="{!modelId}"
                 icon="{faPlusCircle}">