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,8 @@
 import { fetch } from 'undici';
 
 import { GlobalStorage } from '../../storage';
-import { Credentials, Vote } from '../../types';
-import { getHTTPServer } from './config';
+import { Credentials, Vote, isAppStorageFilesApiResponse } from '../../types';
+import { getHTTPServer, getDomain } from './config';
 
 /**
  * Download image from imgURL and save it to `imgDir/imgName`.
@@ -72,3 +72,28 @@ 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)) {
+    return data.items;
+  } 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,43 @@ export function isWebSocketError(data: unknown): data is WebSocketError {
     data.type == 'com.saucelabs.scriptiq.error'
   );
 }
+
+export interface AppInfo {
+  id: string;
+  name: string;
+  kind: string;
+  metadata: {
+    is_simulator?: boolean;
+  };
+}
+
+function isAppInfo(data: unknown): data is AppInfo {
+  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'
+  );
+}
+
+interface AppStorageFilesApiResponse {
+  items: AppInfo[];
+}
+
+export function isAppStorageFilesApiResponse(
+  data: unknown,
+): data is AppStorageFilesApiResponse {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'items' in data &&
+    Array.isArray(data.items) &&
+    data.items.every(isAppInfo)
+  );
+}

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,45 @@
     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 as string,
+                    platformName: appInfo.kind as 'iOS' | 'Android',
+                  },
+                });
+              }
+            }}
+            value={appName}
+            className="app-list"
+          >
+            {appName !== '' &&
+            !apps.some((appInfo) => appInfo.name === 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 +212,7 @@
               }}
               value={state.tunnel?.name ?? ''}
             >
-              Tunnel Name
+              Tunnel Name (optional)
             </VSCodeTextField>
             <VSCodeTextField
               placeholder="Sauce Connect tunnel owner"
@@ -200,7 +226,7 @@
               }}
               value={state.tunnel?.owner ?? ''}
             >
-              Tunnel Owner
+              Tunnel Owner (optional)
             </VSCodeTextField>
             <VSCodeTextField
               value={maxSteps.toString()}
@@ -223,23 +249,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) {

webview-ui/test-generation/src/state.ts

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { Credentials, TestRecord, Vote } from '../../../src/types';
+import { Credentials, TestRecord, Vote, AppInfo } from '../../../src/types';
 
 export interface Assertion {
   value: string;
@@ -78,6 +78,8 @@ export interface State {
   language: 'python' | 'java';
 
   tunnel: Tunnel;
+
+  apps: AppInfo[];
 }
 
 export const initialState: State = {
@@ -102,14 +104,20 @@ export const initialState: State = {
     name: '',
     owner: '',
   },
+  apps: [],
 };
 
 export type Action =
   | { type: 'clear' }
-  | { type: 'setAppName'; value: State['appName'] }
+  | {
+      type: 'setAppName';
+      value: {
+        appName: State['appName'];
+        platformName: State['platform']['name'];
+      };
+    }
   | { type: 'setTestGoal'; value: State['testGoal'] }
   | { type: 'setMaxSteps'; value: string }
-  | { type: 'setPlatformName'; value: State['platform']['name'] }
   | { type: 'setPlatformVersion'; value: State['platform']['version'] }
   | { type: 'setStatus'; value: State['status'] }
   | { type: 'setGenerationState'; value: State['generationState'] }
@@ -118,6 +126,7 @@ export type Action =
   | { type: 'setTunnelOwner'; value: State['tunnel']['owner'] }
   | { type: 'showTestRecord'; value: { testRecord: TestRecord; votes: Vote[] } }
   | { type: 'loadNewRecord'; value: TestRecord }
+  | { type: 'loadAppNames'; value: AppInfo[] }
   | { type: 'addAssertion'; value: { key: string } }
   | { type: 'removeAssertion'; value: { key: string } }
   | { type: 'setAssertionValue'; value: { key: string; value: string } }
@@ -247,7 +256,11 @@ export const reducer = (current: State, action: Action): State => {
     case 'setAppName':
       return {
         ...current,
-        appName: action.value,
+        appName: action.value.appName,
+        platform: {
+          ...current.platform,
+          name: action.value.platformName,
+        },
       };
     case 'setTestGoal':
       return {
@@ -263,14 +276,6 @@ export const reducer = (current: State, action: Action): State => {
         maxSteps,
       };
     }
-    case 'setPlatformName':
-      return {
-        ...current,
-        platform: {
-          ...current.platform,
-          name: action.value,
-        },
-      };
     case 'setPlatformVersion':
       return {
         ...current,
@@ -360,6 +365,26 @@ export const reducer = (current: State, action: Action): State => {
         },
       };
     }
+    case 'loadAppNames': {
+      let apps = action.value;
+      apps = apps.filter(
+        (item) =>
+          item.metadata === null ||
+          !('is_simulator' in item.metadata) ||
+          item.metadata.is_simulator === false,
+      );
+      apps.forEach((app) => {
+        app.kind = app.kind === 'android' ? 'Android' : 'iOS';
+      });
+      if (apps) {
+        apps.sort((a, b) => a.name.localeCompare(b.name));
+      }
+
+      return {
+        ...current,
+        apps: apps,
+      };
+    }
     case 'showTestRecord': {
       const { testRecord, votes } = action.value;
       let { user_screen_descs = [''] } = testRecord;