feat: drop down of apps from app management

src/api/llm/config.ts

@@ -14,7 +14,7 @@ export function getHTTPServer(region: Region): string {
   return `https://${getDomain(region)}/v1/scriptiq-llm`;
 }
 
-function getDomain(region: Region): string {
+export function getDomain(region: Region): string {
   switch (region) {
     case 'staging':
       return 'api.staging.saucelabs.net';

src/api/llm/http.ts

@@ -1,8 +1,13 @@
 import { fetch } from 'undici';
 
 import { GlobalStorage } from '../../storage';
-import { Credentials, Vote } from '../../types';
-import { getHTTPServer } from './config';
+import {
+  Credentials,
+  Vote,
+  AppInfo,
+  isAppStorageFilesApiResponse,
+} from '../../types';
+import { getHTTPServer, getDomain } from './config';
 
 /**
  * Download image from imgURL and save it to `imgDir/imgName`.
@@ -72,3 +77,34 @@ export async function sendUserRating(
     throw new Error('Unexpected status code: ' + resp.status);
   }
 }
+
+export async function fetchApps(creds: Credentials) {
+  const response = await fetch(
+    `https://${getDomain(creds.region)}/v1/storage/files?kind=ios&kind=android`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Basic ' + btoa(`${creds.username}:${creds.accessKey}`),
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error('Network response was not ok: ' + response.status);
+  }
+
+  const data = await response.json();
+
+  if (isAppStorageFilesApiResponse(data)) {
+    const appData: AppInfo[] = data.items.map((app) => ({
+      id: app.id,
+      name: app.name,
+      platformName: app.kind === 'android' ? 'Android' : 'iOS',
+      metadata: app.metadata,
+    }));
+    return appData;
+  } else {
+    throw new Error('Unexpected data format from API: ' + data);
+  }
+}

src/editors/TestGenerationPanel.ts

@@ -20,6 +20,7 @@
 import { generateTest } from '../api/llm/ws';
 import { sendUserRating } from '../api/llm/http';
 import { executeUpdateHistoryLinksCommand } from '../commands';
+import { fetchApps } from '../api/llm/http';
 
 const MAX_HISTORY_LEN = 100;
 
@@ -70,6 +71,10 @@
     if (TestGenerationPanel.currentPanel) {
       // If the webview panel already exists reveal it
       TestGenerationPanel.currentPanel._panel.reveal(ViewColumn.One);
+      if (typeof testID !== 'string') {
+        // when webview panel already exists, only load names if testID is not a string
+        TestGenerationPanel.currentPanel.loadApps();
+      }
     } else {
       // If a webview panel does not already exist create and show a new one
       const panel = window.createWebviewPanel(
@@ -92,6 +97,9 @@
         storage,
       );
       TestGenerationPanel.currentPanel._testRecordNavigation = true;
+
+      // when webview panel doesn't exist, always load app names
+      TestGenerationPanel.currentPanel.loadApps();
     }
 
     if (!TestGenerationPanel.currentPanel._testRecordNavigation) {
@@ -153,6 +161,29 @@
     });
   }
 
+  private loadApps() {
+    const creds = this._memento.getCredentials();
+
+    if (!creds?.username || !creds?.accessKey || !creds?.region) {
+      toast.showError(
+        'Please set your Sauce Labs credentials in the extension settings.',
+      );
+      return;
+    }
+
+    fetchApps(creds)
+      .then((appNames) => {
+        this._msgQueue.enqueue({
+          action: 'load-app-names',
+          data: appNames,
+        });
+      })
+      .catch((error) => {
+        console.error('Error fetching app names:', error);
+        toast.showError(`Failed to load app names: ${errMsg(error)}.`);
+      });
+  }
+
   /**
    * Defines and returns the HTML that should be rendered within the webview panel.
    *
@@ -250,7 +281,7 @@
    */
   private _setWebviewMessageListener(webview: Webview) {
     webview.onDidReceiveMessage(
       async (message: any) => {
         switch (message.action) {
           case 'ready':
             this._msgQueue.ready();
@@ -564,7 +595,7 @@
 }
 
 class MessageQueue {
   private _messages: any[];
   private _ready: boolean;
   private _webview: Webview;
 
@@ -574,7 +605,7 @@
     this._webview = webview;
   }
 
   enqueue(msg: any) {
     if (!this._ready) {
       this._messages.push(msg);
       return;

src/types.ts

@@ -187,3 +187,52 @@ export function isWebSocketError(data: unknown): data is WebSocketError {
     data.type == 'com.saucelabs.scriptiq.error'
   );
 }
+
+export interface ApiAppInfo {
+  id: string;
+  name: string;
+  kind: string;
+  metadata: {
+    is_simulator?: boolean;
+  } | null;
+}
+
+function isApiAppInfo(data: unknown): data is ApiAppInfo {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'id' in data &&
+    typeof data.id === 'string' &&
+    'name' in data &&
+    typeof data.name === 'string' &&
+    'kind' in data &&
+    typeof data.kind === 'string' &&
+    'metadata' in data &&
+    typeof data.metadata === 'object'
+  );
+}
+
+export interface AppInfo {
+  id: string;
+  name: string;
+  platformName: Platform;
+  metadata: {
+    is_simulator?: boolean;
+  } | null;
+}
+
+interface AppStorageFilesApiResponse {
+  items: ApiAppInfo[];
+}
+
+export function isAppStorageFilesApiResponse(
+  data: unknown,
+): data is AppStorageFilesApiResponse {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'items' in data &&
+    Array.isArray(data.items) &&
+    data.items.every(isApiAppInfo)
+  );
+}

webview-ui/test-generation/src/App.scss

@@ -68,6 +68,11 @@
   row-gap: 8px;
 }
 
+.app-not-loaded,
+.app-list:has(.app-not-loaded) {
+  color: var(--vscode-input-placeholderForeground);
+}
+
 footer {
   margin: 8px 0 16px 0;
   .controls {

webview-ui/test-generation/src/App.tsx

@@ -19,6 +19,7 @@
 import { AssertionInput } from './AssertionInput';
 import { Preview } from './Preview';
 import { AbstractBaseGenerator, AppiumPython, AppiumJava } from './codegen';
+import { AppInfo } from '../../../src/types';
 
 function App() {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -26,7 +27,7 @@
   const [showAdditionalSettings, setShowAdditionalSettings] = useState(false);
 
   useEffect(() => {
     function handler(event: any) {
       const message = event.data as PostedMessage; // The json data that the extension sent
 
       switch (message.action) {
@@ -66,6 +67,12 @@
             value: message.data,
           });
           break;
+        case 'load-app-names':
+          dispatch({
+            type: 'loadAppNames',
+            value: message.data,
+          });
+          break;
         case 'recover-from-error':
           dispatch({
             type: 'setGenerationState',
@@ -115,26 +122,44 @@
     status,
     steps,
     tunnel,
+    apps,
   } = state;
 
   return (
     <main>
       <section className="inputs">
         <h2>What do you want to test?</h2>
-        <VSCodeTextField
-          value={appName}
-          placeholder="From Sauce Labs App Storage, e.g. test.apk"
-          onInput={(e) => {
-            if (e.target && 'value' in e.target) {
-              dispatch({
-                type: 'setAppName',
-                value: e.target.value as string,
-              });
-            }
-          }}
-        >
-          Application Name
-        </VSCodeTextField>
+        <section className="with-label">
+          <label>App Name</label>
+          <VSCodeDropdown
+            onInput={(e) => {
+              if (e.target && 'value' in e.target) {
+                const appName: string = e.target.value as string;
+                const appInfo = apps.find(
+                  (app) => app.name === appName,
+                ) as AppInfo;
+                dispatch({
+                  type: 'setAppName',
+                  value: {
+                    appName: appName,
+                    platformName: appInfo.platformName,
+                  },
+                });
+              }
+            }}
+            value={appName}
+            className="app-list"
+          >
+            {appName !== '' &&
+            apps.length > 0 &&
+            !apps.some((appInfo) => appInfo.name === appName) ? (
+              <VSCodeOption className="app-not-loaded">{appName}</VSCodeOption>
+            ) : null}
+            {apps.map((appInfo) => (
+              <VSCodeOption>{appInfo.name}</VSCodeOption>
+            ))}
+          </VSCodeDropdown>
+        </section>
         <VSCodeTextArea
           resize="both"
           value={testGoal}
@@ -186,7 +211,7 @@
               }}
               value={state.tunnel?.name ?? ''}
             >
-              Tunnel Name
+              Tunnel Name (optional)
             </VSCodeTextField>
             <VSCodeTextField
               placeholder="Sauce Connect tunnel owner"
@@ -200,7 +225,7 @@
               }}
               value={state.tunnel?.owner ?? ''}
             >
-              Tunnel Owner
+              Tunnel Owner (optional)
             </VSCodeTextField>
             <VSCodeTextField
               value={maxSteps.toString()}
@@ -223,23 +248,6 @@
             >
               Cut off steps at
             </VSCodeTextField>
-            <section className="with-label">
-              <label>Platform</label>
-              <VSCodeDropdown
-                onInput={(e) => {
-                  if (e.target && 'value' in e.target) {
-                    dispatch({
-                      type: 'setPlatformName',
-                      value: e.target.value as 'iOS' | 'Android',
-                    });
-                  }
-                }}
-                value={platform.name}
-              >
-                <VSCodeOption>Android</VSCodeOption>
-                <VSCodeOption>iOS</VSCodeOption>
-              </VSCodeDropdown>
-            </section>
             <VSCodeTextField
               onInput={(e) => {
                 if (e.target && 'value' in e.target) {