From 8de3de2e93e258bd8e146e03012b036fae9f8c52 Mon Sep 17 00:00:00 2001
From: Rena <cRui861@users.noreply.github.com>
Date: Mon, 30 Oct 2023 16:53:45 -0700
Subject: [PATCH 1/8] Accessibility fixes for windows high contrast buttons
 (#2826)

* AB#1060 general fix for disabled buttons in windows high contrast mode

* AB#1051 narrator will read aloud favorites dropdown options now

---------

Co-authored-by: Rena Chen <rechen@microsoft.com>
---
 desktop/src/@batch-flask/ui/buttons/button.scss               | 4 ++++
 .../layout/pinned-entity-dropdown/pinned-dropdown.html        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/desktop/src/@batch-flask/ui/buttons/button.scss b/desktop/src/@batch-flask/ui/buttons/button.scss
index a9d234daa..0c23ad953 100644
--- a/desktop/src/@batch-flask/ui/buttons/button.scss
+++ b/desktop/src/@batch-flask/ui/buttons/button.scss
@@ -180,5 +180,9 @@ bl-button {
 @media (forced-colors: active) {
     bl-button {
         border: 1px solid currentColor;
+
+        &.disabled {
+            opacity: 0.3;
+        }
     }
 }
diff --git a/desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html b/desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html
index f0f2f687a..336464ba6 100644
--- a/desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html
+++ b/desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html
@@ -11,7 +11,7 @@
             (contextmenu)="onContextMenu(favorite)">
 
             <bl-clickable class="dropdown-item favorite-item" (do)="gotoFavorite(favorite)">
-                <span aria-hidden="true">
+                <span attr.aria-label="{{favorite.name || favorite.id}}">
                     <i class="entity-type fa" [ngClass]="entityIcon(favorite)"
                     [title]="entityType(favorite)"></i>
                     {{favorite.name || favorite.id}}

From 7299f41527128af83fa0a44b41827212c7a50563 Mon Sep 17 00:00:00 2001
From: Shiran Pasternak <shiran.pasternak@microsoft.com>
Date: Thu, 28 Sep 2023 15:45:16 -0400
Subject: [PATCH 2/8] Sets proper name on record type for identification

Also supports a custom name on the `@Model()` decorator.
---
 desktop/src/@batch-flask/core/record/decorators.ts |  7 ++++---
 .../src/@batch-flask/core/record/record.spec.ts    | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/desktop/src/@batch-flask/core/record/decorators.ts b/desktop/src/@batch-flask/core/record/decorators.ts
index 92f5c8f89..628d77f59 100644
--- a/desktop/src/@batch-flask/core/record/decorators.ts
+++ b/desktop/src/@batch-flask/core/record/decorators.ts
@@ -56,13 +56,12 @@ export function ListProp<T>(type: any) {
     };
 }
 
-export function Model() {
+export function Model(name?: string) {
     return <T extends new(...args: any[]) => {}>(ctr: T) => {
         if (!(ctr.prototype instanceof Record)) {
             throw new RecordMissingExtendsError(ctr);
         }
-
-        return (class extends ctr {
+        const model = (class extends ctr {
             constructor(...args: any[]) {
                 const [data] = args;
                 if (data instanceof ctr) {
@@ -72,5 +71,7 @@ export function Model() {
                 (this as any)._completeInitialization();
             }
         });
+        Object.defineProperty(model, "name", { value: name || ctr.name });
+        return model;
     };
 }
diff --git a/desktop/src/@batch-flask/core/record/record.spec.ts b/desktop/src/@batch-flask/core/record/record.spec.ts
index 1634d6147..3cfab632f 100644
--- a/desktop/src/@batch-flask/core/record/record.spec.ts
+++ b/desktop/src/@batch-flask/core/record/record.spec.ts
@@ -44,6 +44,12 @@ class InheritedTestRec extends SimpleTestRec {
     public d: number;
 }
 
+@Model("CustomName")
+class CustomNameRec extends Record<any> {
+    @Prop()
+    public id: string = "default-id";
+}
+
 describe("Record", () => {
     it("should throw an exeption when record doesn't extends Record class", () => {
         try {
@@ -176,4 +182,12 @@ describe("Record", () => {
         expect(SimpleTestRec.isStaticMethod).not.toBeFalsy();
         expect(SimpleTestRec.isStaticMethod()).toBe(true);
     });
+
+    it("should allow a custom record name to be set", () => {
+        const rec1 = new TestRec();
+        expect(rec1.constructor.name).toEqual("TestRec");
+
+        const rec2 = new CustomNameRec();
+        expect(rec2.constructor.name).toEqual("CustomName");
+    });
 });

From c6efb9cfe97f9c9e6efadc15694f489245fdd9cd Mon Sep 17 00:00:00 2001
From: Shiran Pasternak <shiran.pasternak@microsoft.com>
Date: Thu, 21 Sep 2023 16:47:01 -0400
Subject: [PATCH 3/8] Better typing for storage-related modules

---
 .../file-group-picker.component.ts            |  1 -
 desktop/src/app/models/blob-container.ts      |  4 +-
 .../services/core/data/storage-list-getter.ts |  7 ++-
 .../storage/blob-storage-client-proxy.ts      |  3 +-
 .../services/storage/models/storage-blob.ts   | 56 ++++++++++---------
 .../services/storage/storage-blob.service.ts  | 18 +++---
 .../storage/storage-client.service.ts         | 10 +++-
 .../storage/storage-container.service.ts      |  4 +-
 8 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts
index 22829fc85..18d94e0b2 100644
--- a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts
+++ b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts
@@ -4,7 +4,6 @@ import {
 import {
     ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR,
 } from "@angular/forms";
-import { MatOptionSelectionChange } from "@angular/material/core";
 import { FilterBuilder, ListView } from "@batch-flask/core";
 import { Activity, DialogService } from "@batch-flask/ui";
 import { FileGroupCreateFormComponent } from "app/components/data/action";
diff --git a/desktop/src/app/models/blob-container.ts b/desktop/src/app/models/blob-container.ts
index 341270c73..f8de3b367 100644
--- a/desktop/src/app/models/blob-container.ts
+++ b/desktop/src/app/models/blob-container.ts
@@ -8,7 +8,7 @@ export interface BlobContainerAttributes {
     name: string;
     publicAccessLevel: string;
     metadata?: any;
-    lastModified: Date;
+    lastModified?: Date;
     lease?: Partial<ContainerLeaseAttributes>;
 }
 
@@ -25,7 +25,7 @@ export class BlobContainer extends Record<BlobContainerAttributes> implements Na
 
     @Prop() public publicAccessLevel: string;
     @Prop() public metadata: any;
-    @Prop() public lastModified: Date;
+    @Prop() public lastModified?: Date;
     @Prop() public lease: ContainerLease;
     @Prop() public storageAccountId: string;
 
diff --git a/desktop/src/app/services/core/data/storage-list-getter.ts b/desktop/src/app/services/core/data/storage-list-getter.ts
index 268797cd4..b6c1387b8 100644
--- a/desktop/src/app/services/core/data/storage-list-getter.ts
+++ b/desktop/src/app/services/core/data/storage-list-getter.ts
@@ -1,5 +1,6 @@
 import { Type } from "@angular/core";
 import { ContinuationToken, ListGetter, ListGetterConfig, Record, ServerError } from "@batch-flask/core";
+import { BlobStorageClientProxy } from "app/services/storage";
 import { StorageBlobResult } from "app/services/storage/models";
 import { StorageClientService } from "app/services/storage/storage-client.service";
 import { Observable, from, throwError } from "rxjs";
@@ -12,13 +13,15 @@ export interface StorageBaseParams {
 export interface StorageListConfig<TEntity extends Record<any>, TParams extends StorageBaseParams>
     extends ListGetterConfig<TEntity, TParams> {
 
-    getData: (client: any, params: TParams, options: any, token: any) => Promise<StorageBlobResult<TEntity[]>>;
+    getData: (client: BlobStorageClientProxy, params: TParams, options: any, token: any) =>
+        Promise<StorageBlobResult<TEntity[]>>;
 }
 
 export class StorageListGetter<TEntity extends Record<any>, TParams extends StorageBaseParams>
     extends ListGetter<TEntity, TParams> {
 
-    private _getData: (client: any, params: TParams, options: any, token: any) => Promise<StorageBlobResult<TEntity[]>>;
+    private _getData: (client: BlobStorageClientProxy, params: TParams, options: any, token: any) =>
+        Promise<StorageBlobResult<TEntity[]>>;
 
     constructor(
         type: Type<TEntity>,
diff --git a/desktop/src/app/services/storage/blob-storage-client-proxy.ts b/desktop/src/app/services/storage/blob-storage-client-proxy.ts
index 3ae96a601..e3241f8dd 100644
--- a/desktop/src/app/services/storage/blob-storage-client-proxy.ts
+++ b/desktop/src/app/services/storage/blob-storage-client-proxy.ts
@@ -4,6 +4,7 @@ import { IpcEvent } from "common/constants";
 import { SharedAccessPolicy } from "./models";
 import * as blob from "./models/storage-blob";
 import { BlobContentResult } from "./storage-blob.service";
+import { StorageClient } from "./storage-client.service";
 
 const storageIpc = IpcEvent.storageBlob;
 
@@ -18,7 +19,7 @@ export interface ListBlobResponse {
     };
 }
 
-export class BlobStorageClientProxy {
+export class BlobStorageClientProxy implements StorageClient {
 
     private storageInfo: { url: string; account: string, key: string };
 
diff --git a/desktop/src/app/services/storage/models/storage-blob.ts b/desktop/src/app/services/storage/models/storage-blob.ts
index 7cf2cf58f..4042ac914 100644
--- a/desktop/src/app/services/storage/models/storage-blob.ts
+++ b/desktop/src/app/services/storage/models/storage-blob.ts
@@ -1,10 +1,38 @@
-import { ContainerItem, BlobUploadCommonResponse, ContainerGetPropertiesResponse, CommonOptions } from "@azure/storage-blob";
+import { BlobUploadCommonResponse, ContainerGetPropertiesResponse, CommonOptions, ContainerItem } from "@azure/storage-blob";
 import { Model, Prop, Record } from "@batch-flask/core";
 import { SharedAccessPolicy } from "./shared-access-policy";
+import { BlobContainer } from "app/models";
 
 // Placeholder; we don't use any options to storage-blob API requests
 export type RequestOptions = Partial<CommonOptions>;
 
+export interface BlobProperties {
+    name: string;
+    url: string;
+    isDirectory: boolean;
+    properties: {
+        contentLength: number;
+        contentType: string;
+        creationTime: Date | string;
+        lastModified?: Date | string;
+    };
+}
+
+export type ContainerProperties = ContainerGetPropertiesResponse;
+
+@Model()
+export class BlobItem extends Record<BlobProperties> {
+    @Prop() name: string;
+    @Prop() url: string;
+    @Prop() isDirectory: boolean;
+    @Prop() properties: {
+        contentLength: number;
+        contentType: string;
+        creationTime: Date | string;
+        lastModified?: Date | string;
+    }
+}
+
 export interface BaseParams {
     url: string;
     account: string;
@@ -94,32 +122,6 @@ export interface GetBlobContentResult {
     content: string;
 }
 
-export interface BlobProperties {
-    name: string;
-    url: string;
-    isDirectory: boolean;
-    properties: {
-        contentLength: number;
-        contentType: string;
-        creationTime: Date | string;
-        lastModified: Date | string;
-    };
-}
-
-@Model()
-export class BlobItem extends Record<BlobProperties> {
-    @Prop() name: string;
-    @Prop() url: string;
-    @Prop() isDirectory: boolean;
-    @Prop() properties: {
-        contentLength: number;
-        contentType: string;
-        creationTime: Date | string;
-        lastModified: Date | string;
-    }
-}
-
-export type ContainerProperties = ContainerGetPropertiesResponse;
 
 export interface ListBlobOptions {
     /**
diff --git a/desktop/src/app/services/storage/storage-blob.service.ts b/desktop/src/app/services/storage/storage-blob.service.ts
index 3e0a4f9b0..7d1b91bb3 100644
--- a/desktop/src/app/services/storage/storage-blob.service.ts
+++ b/desktop/src/app/services/storage/storage-blob.service.ts
@@ -19,7 +19,7 @@ import { Constants } from "common";
 import { AsyncSubject, Observable, from, of, throwError } from "rxjs";
 import { catchError, concat, concatMap, map, share, switchMap, take } from "rxjs/operators";
 import { BlobStorageClientProxy } from "./blob-storage-client-proxy";
-import { StorageClientService } from "./storage-client.service";
+import { StorageClient, StorageClientService } from "./storage-client.service";
 
 export interface ListBlobParams {
     storageAccountId: string;
@@ -42,7 +42,10 @@ export interface BlobContentResult {
     content: string;
 }
 
-export type StorageContainerProperties = ContainerProperties;
+export interface StorageContainerProperties extends Omit<ContainerProperties, "lastModified" | "etag"> {
+    lastModified?: Date;
+    etag?: string;
+}
 
 export interface NavigateBlobsOptions {
     /**
@@ -117,8 +120,7 @@ export class StorageBlobService {
 
         this._blobListGetter = new StorageListGetter(FileRecord, this.storageClient, {
             cache: (params) => this.getBlobFileCache(params),
-            getData: (client: BlobStorageClientProxy,
-                params, options, continuationToken) => {
+            getData: async (client: StorageClient, params, options, continuationToken) => {
                 const blobOptions: ListBlobOptions = {
                     folder: options.original.folder,
                     recursive: options.original.recursive,
@@ -126,12 +128,8 @@ export class StorageBlobService {
                     maxPageSize: this.maxBlobPageSize
                 };
 
-                // N.B. `BlobItem` and `FileRecord` are nearly identical
-                return client.listBlobs(
-                    params.container,
-                    blobOptions,
-                    continuationToken,
-                ) as Promise<StorageBlobResult<FileRecord[]>>;
+                const blobs = await client.listBlobs(params.container, blobOptions, continuationToken);
+                return { data: blobs.data.map(blob => new FileRecord(blob)) };
             },
             logIgnoreError: storageIgnoredErrors,
         });
diff --git a/desktop/src/app/services/storage/storage-client.service.ts b/desktop/src/app/services/storage/storage-client.service.ts
index f879dd6c3..a2ba91516 100644
--- a/desktop/src/app/services/storage/storage-client.service.ts
+++ b/desktop/src/app/services/storage/storage-client.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from "@angular/core";
 import { ServerError } from "@batch-flask/core";
 import { ElectronRemote } from "@batch-flask/electron";
-import { StorageKeys } from "app/models";
+import { BlobContainer, StorageKeys } from "app/models";
 import { BatchExplorerService } from "app/services/batch-explorer.service";
 import { ArmResourceUtils } from "app/utils";
 import { Observable, throwError } from "rxjs";
@@ -10,6 +10,7 @@ import { BatchAccountService } from "../batch-account";
 import { BlobStorageClientProxy } from "./blob-storage-client-proxy";
 import { StorageAccountKeysService } from "./storage-account-keys.service";
 import { StorageClientProxyFactory } from "./storage-client-proxy-factory";
+import { ListBlobsResult, ListContainersResult, StorageBlobResult } from "./models";
 
 export interface AutoStorageSettings {
     lastKeySync: Date;
@@ -23,6 +24,13 @@ export interface StorageKeyCachedItem {
     keys: StorageKeys;
 }
 
+export interface StorageClient {
+    listContainersWithPrefix(prefix: string, continuationToken?: string, options?: any):
+        Promise<ListContainersResult>;
+    listBlobs(containerName: string, options: any, continuationToken?: string):
+        Promise<ListBlobsResult>;
+}
+
 @Injectable({ providedIn: "root" })
 export class StorageClientService {
     public hasAutoStorage: Observable<boolean>;
diff --git a/desktop/src/app/services/storage/storage-container.service.ts b/desktop/src/app/services/storage/storage-container.service.ts
index a08887577..4323f19ab 100644
--- a/desktop/src/app/services/storage/storage-container.service.ts
+++ b/desktop/src/app/services/storage/storage-container.service.ts
@@ -14,7 +14,7 @@ import { SharedAccessPolicy } from "app/services/storage/models";
 import { Observable, Subject, from, throwError } from "rxjs";
 import { catchError, flatMap, share } from "rxjs/operators";
 import { BlobStorageClientProxy } from "./blob-storage-client-proxy";
-import { StorageClientService } from "./storage-client.service";
+import { StorageClient, StorageClientService } from "./storage-client.service";
 
 export interface GetContainerParams {
     storageAccountId: string;
@@ -62,7 +62,7 @@ export class StorageContainerService {
         });
         this._containerListGetter = new StorageListGetter(BlobContainer, this.storageClient, {
             cache: params => this._containerCache.getCache(params),
-            getData: async (client, params, options, continuationToken) => {
+            getData: async (client: StorageClient, params, options, continuationToken) => {
                 let prefix = null;
                 if (options && options.filter) {
                     prefix = options.filter.value;

From f0e6615b398c5f4ed388f584af71ba74a25cba3f Mon Sep 17 00:00:00 2001
From: Shiran Pasternak <shiran.pasternak@microsoft.com>
Date: Thu, 26 Oct 2023 23:31:09 -0400
Subject: [PATCH 4/8] Proper token wrapper for Python RPC ARM calls

---
 desktop/python/server/aad_auth.py | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/desktop/python/server/aad_auth.py b/desktop/python/server/aad_auth.py
index d647a56c8..f51431f14 100644
--- a/desktop/python/server/aad_auth.py
+++ b/desktop/python/server/aad_auth.py
@@ -1,5 +1,14 @@
 import azext.batch
 from msrestazure.azure_active_directory import AdalAuthentication
+from azure.core.credentials import TokenCredential, AccessToken
+
+class BatchExplorerTokenCredential(TokenCredential):
+    def __init__(self, access_token) -> None:
+        super().__init__()
+        self.access_token = access_token
+
+    def get_token(self, *scopes, **kwargs):
+        return AccessToken(token=self.access_token, expires_on=0)
 
 class BatchAccount:
     def __init__(self, account_id: str, name: str, account_endpoint: str, subscription_id: str):
@@ -22,8 +31,8 @@ class AADAuth:
     def __init__(self, batchToken: str, armToken: str, armUrl: str, storage_endpoint: str, account: BatchAccount):
         self.batchCreds = AdalAuthentication(
             lambda: {'accessToken': batchToken, 'tokenType': 'Bearer'})
-        self.armCreds = AdalAuthentication(
-            lambda: {'accessToken': armToken, 'tokenType': 'Bearer'})
+
+        self.armCreds = BatchExplorerTokenCredential(armToken)
         self.armUrl = armUrl
         self.storage_endpoint = storage_endpoint
         self.account = account

From 9b886cea0d2ed24196673d87a9fc4c62ae0663fc Mon Sep 17 00:00:00 2001
From: Shiran Pasternak <shiran.pasternak@microsoft.com>
Date: Thu, 21 Sep 2023 16:47:01 -0400
Subject: [PATCH 5/8] Fixes inoperable file group controls

Bug introduced in #2745: No handler for a file group that has changed. Also restores the picker option labels.

Backfills container names on certain API calls because they are not returned, but are needed by various UI flows.
---
 .../targeted-data-cache.ts                    |  2 +-
 .../file-group-picker.component.spec.ts       | 92 +++++++++++++++++++
 .../file-group-picker.component.ts            | 25 +++--
 .../file-group-picker/file-group-picker.html  |  5 +-
 .../submit/market-application.model.ts        |  7 +-
 .../parameter-input.component.ts              |  9 +-
 .../submit/submit-ncj-template.component.ts   |  2 +-
 ...ner-configuration-picker.component.spec.ts |  4 +-
 .../app/models/azure-batch/pool/pool.spec.ts  |  4 +-
 desktop/src/app/models/blob-container.ts      |  2 +-
 .../storage/blob-storage-client-proxy.ts      |  7 +-
 .../services/storage/models/storage-blob.ts   |  6 +-
 .../storage/storage-container.service.ts      |  7 +-
 13 files changed, 141 insertions(+), 31 deletions(-)
 create mode 100644 desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.spec.ts

diff --git a/desktop/src/@batch-flask/core/data/targeted-data-cache/targeted-data-cache.ts b/desktop/src/@batch-flask/core/data/targeted-data-cache/targeted-data-cache.ts
index b79926aaf..6682d15d1 100644
--- a/desktop/src/@batch-flask/core/data/targeted-data-cache/targeted-data-cache.ts
+++ b/desktop/src/@batch-flask/core/data/targeted-data-cache/targeted-data-cache.ts
@@ -27,7 +27,7 @@ export class TargetedDataCache<TParams, TEntity extends Record<any>> {
      * Return the key of the cache associated to the given params
      */
     public getCacheKey(params: TParams) {
-        return this._options.key!(params);
+        return this._options.key?.call(null, params);
     }
 
     public getCache(params: TParams): DataCache<TEntity> {
diff --git a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.spec.ts b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.spec.ts
new file mode 100644
index 000000000..332b21152
--- /dev/null
+++ b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.spec.ts
@@ -0,0 +1,92 @@
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { Component, DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { BrowserDynamicTestingModule }
+    from "@angular/platform-browser-dynamic/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { GlobalStorage, USER_SERVICE, UserConfigurationService }
+    from "@batch-flask/core";
+import {
+    I18nTestingModule,
+    MockGlobalStorage,
+    MockUserConfigurationService
+} from "@batch-flask/core/testing";
+import { ElectronTestingModule } from "@batch-flask/electron/testing";
+import { ButtonsModule, DialogService, FormModule, SelectModule }
+    from "@batch-flask/ui";
+import { AuthService, BatchExplorerService } from "app/services";
+import { BehaviorSubject } from "rxjs";
+import { FileGroupPickerComponent } from "./file-group-picker.component";
+import { FileGroupPickerModule } from "./file-group-picker.module";
+
+@Component({
+    template: `<bl-file-group-picker [formControl]="control"></bl-file-group-picker>`,
+})
+class TestComponent {
+    public control = new FormControl();
+}
+
+describe("FileGroupPickerComponent", () => {
+    let testComponent: TestComponent;
+    let component: FileGroupPickerComponent;
+    let fixture: ComponentFixture<TestComponent>;
+    let de: DebugElement;
+
+    const userServiceSpy = { currentUser: new BehaviorSubject(null) };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                FormModule,
+                FormsModule,
+                ReactiveFormsModule,
+                SelectModule,
+                RouterTestingModule,
+                I18nTestingModule,
+                HttpClientTestingModule,
+                ButtonsModule,
+                ElectronTestingModule,
+                BrowserDynamicTestingModule,
+                FileGroupPickerModule
+            ],
+            declarations: [TestComponent],
+            providers: [
+                { provide: BatchExplorerService, useValue: {} },
+                { provide: UserConfigurationService, useValue:
+                    new MockUserConfigurationService({}) },
+                { provide: AuthService, useValue: userServiceSpy },
+                { provide: GlobalStorage, useValue: new MockGlobalStorage() },
+                { provide: USER_SERVICE, useValue: userServiceSpy },
+                { provide: DialogService, useValue: {} },
+            ]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        de = fixture.debugElement.query(By.css("bl-file-group-picker"));
+        component = fixture.debugElement.query(By.css("bl-file-group-picker"))
+            .componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should pick an existing value", () => {
+        const testValue = 'existingValue';
+        component.fileGroupPicked(testValue);
+        fixture.detectChanges();
+        expect(component.value.value).toEqual(testValue);
+    });
+
+    it("should create a new file group on null value", () => {
+        const spy = spyOn(component, "createFileGroup");
+        const testValue = null;
+        component.fileGroupPicked(testValue);
+        fixture.detectChanges();
+        expect(spy).toHaveBeenCalledOnce();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+});
diff --git a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts
index 18d94e0b2..4deb5644f 100644
--- a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts
+++ b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.component.ts
@@ -140,18 +140,25 @@ export class FileGroupPickerComponent implements ControlValueAccessor, OnInit, O
         return null;
     }
 
-    public createFileGroup(dropdownValue: string) {
-        if (!dropdownValue) {
-            const dialog = this.dialogService.open(FileGroupCreateFormComponent);
-            dialog.afterClosed().subscribe((activity?: Activity) => {
-                const newFileGroupName = dialog.componentInstance.getCurrentValue().name;
-                this.value.setValue(this.fileGroupService.addFileGroupPrefix(newFileGroupName));
-                this.changeDetector.markForCheck();
-                this._uploadActivity.next(activity);
-            });
+    public fileGroupPicked(value: string) {
+        if (value) {
+            this.writeValue(value);
+            this.changeDetector.markForCheck();
+        } else {
+            this.createFileGroup();
         }
     }
 
+    public createFileGroup() {
+        const dialog = this.dialogService.open(FileGroupCreateFormComponent);
+        dialog.afterClosed().subscribe((activity?: Activity) => {
+            const newFileGroupName = dialog.componentInstance.getCurrentValue().name;
+            this.value.setValue(this.fileGroupService.addFileGroupPrefix(newFileGroupName));
+            this.changeDetector.markForCheck();
+            this._uploadActivity.next(activity);
+        });
+    }
+
     public trackFileGroup(_: number, fileGroup: BlobContainer) {
         return fileGroup.id;
     }
diff --git a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.html b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.html
index 0ecaa7c1e..b3f7cce42 100644
--- a/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.html
+++ b/desktop/src/app/components/data/shared/file-group-picker/file-group-picker.html
@@ -8,11 +8,12 @@
     <bl-hint *ngIf="hint" align="end">
         {{hint}}
     </bl-hint>
-    <bl-select placeholder="File group" [filterable]="true" (change)="createFileGroup($event)">
+    <bl-select placeholder="File group" [filterable]="true" (change)="fileGroupPicked($event)">
         <bl-option value="" label="+ {{'file-group-picker.create' | i18n}}"></bl-option>
         <bl-option
             *ngFor="let fileGroup of fileGroups;trackBy: trackFileGroup"
-            [value]="fileGroup">
+            [value]="fileGroup.name"
+            [label]="fileGroup.name">
         </bl-option>
     </bl-select>
 </bl-form-field>
diff --git a/desktop/src/app/components/gallery/submit/market-application.model.ts b/desktop/src/app/components/gallery/submit/market-application.model.ts
index c0463c89b..36c992405 100644
--- a/desktop/src/app/components/gallery/submit/market-application.model.ts
+++ b/desktop/src/app/components/gallery/submit/market-application.model.ts
@@ -38,9 +38,12 @@ export class NcjParameterWrapper {
     }
 
     private _computeDefaultValue() {
-        if (this.param.defaultValue) {
-            this.defaultValue = this.param.defaultValue;
+        let defaultValue = this.param.defaultValue;
+        if (typeof defaultValue === "string" &&
+            defaultValue.toLowerCase().trim() === "none") {
+            defaultValue = "";
         }
+        this.defaultValue = this.param.defaultValue = defaultValue;
     }
 
     private _computeDescription() {
diff --git a/desktop/src/app/components/gallery/submit/parameter-input/parameter-input.component.ts b/desktop/src/app/components/gallery/submit/parameter-input/parameter-input.component.ts
index aae2ed559..249a12676 100644
--- a/desktop/src/app/components/gallery/submit/parameter-input/parameter-input.component.ts
+++ b/desktop/src/app/components/gallery/submit/parameter-input/parameter-input.component.ts
@@ -41,11 +41,10 @@ export class ParameterInputComponent implements ControlValueAccessor, OnChanges,
         this._subs.push(this.parameterValue.valueChanges.pipe(
             distinctUntilChanged(),
         ).subscribe((query: string) => {
-                if (this._propagateChange) {
-                    this._propagateChange(query);
-                }
-            }),
-        );
+            if (this._propagateChange) {
+                this._propagateChange(query);
+            }
+        }));
     }
 
     public ngOnChanges(changes) {
diff --git a/desktop/src/app/components/gallery/submit/submit-ncj-template.component.ts b/desktop/src/app/components/gallery/submit/submit-ncj-template.component.ts
index cdc22f72c..74e6a1e23 100644
--- a/desktop/src/app/components/gallery/submit/submit-ncj-template.component.ts
+++ b/desktop/src/app/components/gallery/submit/submit-ncj-template.component.ts
@@ -347,7 +347,7 @@ export class SubmitNcjTemplateComponent implements OnInit, OnChanges, OnDestroy
             let validator = Validators.required;
             if (exists(template.parameters[key].defaultValue)) {
                 defaultValue = String(template.parameters[key].defaultValue);
-                if (template.parameters[key].defaultValue === "") {
+                if (defaultValue.trim() === "") {
                     validator = null;
                 }
             }
diff --git a/desktop/src/app/components/pool/action/add/container-configuration-picker/container-configuration-picker.component.spec.ts b/desktop/src/app/components/pool/action/add/container-configuration-picker/container-configuration-picker.component.spec.ts
index 7a44c26d0..e3eb2420b 100644
--- a/desktop/src/app/components/pool/action/add/container-configuration-picker/container-configuration-picker.component.spec.ts
+++ b/desktop/src/app/components/pool/action/add/container-configuration-picker/container-configuration-picker.component.spec.ts
@@ -6,7 +6,7 @@ import { I18nTestingModule } from "@batch-flask/core/testing";
 import { SelectComponent, SelectModule } from "@batch-flask/ui";
 import { FormModule } from "@batch-flask/ui/form";
 import { ContainerConfigurationAttributes, ContainerType } from "app/models";
-import { ContainerConfigurationDto } from "app/models/dtos";
+import { ContainerConfigurationDto, ContainerRegistryDto } from "app/models/dtos";
 import { ContainerConfigurationPickerComponent } from "./container-configuration-picker.component";
 import { ContainerImagesPickerComponent } from "./images-picker/container-images-picker.component";
 import { ContainerRegistryPickerComponent } from "./registry-picker/container-registry-picker.component";
@@ -97,7 +97,7 @@ describe("ContainerConfigurationPickerComponent", () => {
             type: ContainerType.DockerCompatible,
             containerImageNames: [],
             containerRegistries: [
-                { username: "foo", password: "pass123!", registryServer: "https://bar.com" },
+                { username: "foo", password: "pass123!", registryServer: "https://bar.com" } as ContainerRegistryDto,
             ],
         }));
     });
diff --git a/desktop/src/app/models/azure-batch/pool/pool.spec.ts b/desktop/src/app/models/azure-batch/pool/pool.spec.ts
index b0d9c6114..2a08b7972 100644
--- a/desktop/src/app/models/azure-batch/pool/pool.spec.ts
+++ b/desktop/src/app/models/azure-batch/pool/pool.spec.ts
@@ -1,4 +1,4 @@
-import { ContainerType } from "app/models";
+import { ContainerRegistry, ContainerType } from "app/models";
 import { List } from "immutable";
 import { Pool } from "./pool";
 
@@ -13,7 +13,7 @@ describe("Pool Model", () => {
                             username: "abc",
                             password: "foo",
                             registryServer: "hub.docker.com",
-                        },
+                        } as ContainerRegistry,
                     ],
                 },
             },
diff --git a/desktop/src/app/models/blob-container.ts b/desktop/src/app/models/blob-container.ts
index f8de3b367..50d73cf61 100644
--- a/desktop/src/app/models/blob-container.ts
+++ b/desktop/src/app/models/blob-container.ts
@@ -15,7 +15,7 @@ export interface BlobContainerAttributes {
 /**
  * Class for displaying blob container information.
  */
-@Model()
+@Model("BlobContainer")
 export class BlobContainer extends Record<BlobContainerAttributes> implements NavigableRecord {
     // container name
     @Prop() public id: string;
diff --git a/desktop/src/app/services/storage/blob-storage-client-proxy.ts b/desktop/src/app/services/storage/blob-storage-client-proxy.ts
index e3241f8dd..249684115 100644
--- a/desktop/src/app/services/storage/blob-storage-client-proxy.ts
+++ b/desktop/src/app/services/storage/blob-storage-client-proxy.ts
@@ -173,8 +173,13 @@ export class BlobStorageClientProxy implements StorageClient {
         containerName: string,
         options?: blob.RequestOptions
     ): Promise<blob.GetContainerPropertiesResult> {
-        return this.remote.send(storageIpc.getContainerProperties,
+        const result = await this.remote.send(storageIpc.getContainerProperties,
             { ...this.storageInfo, containerName, options });
+
+        // The container name is not returned by the API, but we add it here,
+        // since it's used by the UI model
+        result.data.name =  containerName;
+        return result;
     }
 
     /**
diff --git a/desktop/src/app/services/storage/models/storage-blob.ts b/desktop/src/app/services/storage/models/storage-blob.ts
index 4042ac914..0ef2d3cce 100644
--- a/desktop/src/app/services/storage/models/storage-blob.ts
+++ b/desktop/src/app/services/storage/models/storage-blob.ts
@@ -1,7 +1,7 @@
-import { BlobUploadCommonResponse, ContainerGetPropertiesResponse, CommonOptions, ContainerItem } from "@azure/storage-blob";
+import { BlobUploadCommonResponse, CommonOptions, ContainerGetPropertiesResponse } from "@azure/storage-blob";
 import { Model, Prop, Record } from "@batch-flask/core";
-import { SharedAccessPolicy } from "./shared-access-policy";
 import { BlobContainer } from "app/models";
+import { SharedAccessPolicy } from "./shared-access-policy";
 
 // Placeholder; we don't use any options to storage-blob API requests
 export type RequestOptions = Partial<CommonOptions>;
@@ -111,7 +111,7 @@ export interface StorageBlobResult<T> {
     continuationToken?: string;
 }
 
-export type ListContainersResult = StorageBlobResult<ContainerItem[]>;
+export type ListContainersResult = StorageBlobResult<BlobContainer[]>;
 export type GetBlobPropertiesResult = StorageBlobResult<BlobProperties>;
 export type ListBlobsResult = StorageBlobResult<BlobItem[]>;
 export type GetContainerPropertiesResult =
diff --git a/desktop/src/app/services/storage/storage-container.service.ts b/desktop/src/app/services/storage/storage-container.service.ts
index 4323f19ab..ebf7501b4 100644
--- a/desktop/src/app/services/storage/storage-container.service.ts
+++ b/desktop/src/app/services/storage/storage-container.service.ts
@@ -72,8 +72,11 @@ export class StorageContainerService {
                     continuationToken,
                     { maxResults: options && options.maxResults });
 
-                response.data.map(x => x.storageAccountId = params.storageAccountId);
-                return response;
+                const containers = response.data.map((container: BlobContainer) => {
+                    container.name = container.id;
+                    return container;
+                });
+                return { data: containers };
             },
             logIgnoreError: storageIgnoredErrors,
         });

From 7ea11e2192ba104428f1738fb50004e716e9c5b6 Mon Sep 17 00:00:00 2001
From: David Watrous <509299+dpwatrous@users.noreply.github.com>
Date: Thu, 2 Nov 2023 15:41:45 -0400
Subject: [PATCH 6/8] Add TabSelector form control (#2827)

---
 packages/bonito-core/src/form/parameter.ts    |  10 ++
 .../form/__tests__/tab-selector.spec.tsx      |  81 +++++++++
 .../bonito-ui/src/components/form/index.ts    |   1 +
 .../src/components/form/tab-selector.tsx      | 160 ++++++++++++++++++
 .../src/components/form/text-field.tsx        |   9 +
 .../src/form/__tests__/react-form.spec.tsx    |   6 +
 packages/bonito-ui/src/form/react-form.ts     |   3 +
 packages/playground/src/demo-routes.tsx       |   2 +
 .../src/demo/form/action-form-demo.tsx        |  28 ++-
 .../src/demo/form/tab-selector-demo.tsx       |  94 ++++++++++
 .../playground/src/layout/demo-nav-menu.tsx   |  13 +-
 11 files changed, 400 insertions(+), 7 deletions(-)
 create mode 100644 packages/bonito-ui/src/components/form/__tests__/tab-selector.spec.tsx
 create mode 100644 packages/bonito-ui/src/components/form/tab-selector.tsx
 create mode 100644 packages/playground/src/demo/form/tab-selector-demo.tsx

diff --git a/packages/bonito-core/src/form/parameter.ts b/packages/bonito-core/src/form/parameter.ts
index b9c217389..b984c9d62 100644
--- a/packages/bonito-core/src/form/parameter.ts
+++ b/packages/bonito-core/src/form/parameter.ts
@@ -38,6 +38,7 @@ export interface ParameterInit<
     hideLabel?: boolean;
     required?: boolean;
     placeholder?: string;
+    standalone?: boolean;
     dependencies?: D;
     dynamic?: DynamicParameterProperties<V, K>;
     onValidateSync?(value: V[K]): ValidationStatus;
@@ -146,6 +147,13 @@ export interface Parameter<
      */
     placeholder?: string;
 
+    /**
+     * If true, this parameter is being rendered by itself outside of a
+     * form layout component, and should be responsible for rendering its own
+     * label, description, etc.
+     */
+    standalone?: boolean;
+
     dynamic?: DynamicParameterProperties<V, K>;
 
     /**
@@ -219,6 +227,7 @@ export abstract class AbstractParameter<
     description?: string;
     placeholder?: string;
     dependencies?: D;
+    standalone?: boolean;
     dynamic?: DynamicParameterProperties<V, K>;
 
     private _disabled?: boolean;
@@ -288,6 +297,7 @@ export abstract class AbstractParameter<
         this.hidden = init?.hidden;
         this.hideLabel = init?.hideLabel;
         this.required = init?.required;
+        this.standalone = init?.standalone;
         this.dynamic = init?.dynamic;
 
         if (init?.value !== undefined) {
diff --git a/packages/bonito-ui/src/components/form/__tests__/tab-selector.spec.tsx b/packages/bonito-ui/src/components/form/__tests__/tab-selector.spec.tsx
new file mode 100644
index 000000000..4f45a5d74
--- /dev/null
+++ b/packages/bonito-ui/src/components/form/__tests__/tab-selector.spec.tsx
@@ -0,0 +1,81 @@
+import { StringParameter } from "@azure/bonito-core/lib/form";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { initMockBrowserEnvironment } from "../../../environment";
+import { createParam } from "../../../form";
+import { runAxe } from "../../../test-util/a11y";
+import { TabSelector } from "../tab-selector";
+
+describe("Dropdown form control", () => {
+    beforeEach(() => initMockBrowserEnvironment());
+
+    test("Render simple tab selector", async () => {
+        const onChange = jest.fn();
+
+        const { container } = render(
+            <TabSelector
+                param={createParam<string>(StringParameter, {
+                    label: "Card",
+                    placeholder: "Pick a card",
+                })}
+                options={[
+                    {
+                        label: "Ace",
+                        value: "ace-of-spades",
+                    },
+                    {
+                        label: "King",
+                        value: "king-of-hearts",
+                    },
+                    {
+                        label: "Queen",
+                        value: "queen-of-diamonds",
+                    },
+                ]}
+                onChange={onChange}
+            ></TabSelector>
+        );
+
+        expect(onChange).toBeCalledTimes(0);
+
+        const tabListEl = screen.getByRole("tablist");
+        expect(tabListEl).toBeDefined();
+
+        const tabs: HTMLButtonElement[] = screen.getAllByRole("tab");
+        expect(tabs.length).toEqual(3);
+        expect(tabs.map((tabs) => tabs.name)).toEqual(["Ace", "King", "Queen"]);
+
+        const selectedTab: HTMLButtonElement = screen.getByRole("tab", {
+            selected: true,
+        });
+        expect(selectedTab.name).toBe("Ace");
+        expect(selectedTab.getAttribute("aria-selected")).toBe("true");
+
+        const kingTab: HTMLButtonElement = screen.getByRole("tab", {
+            name: "King",
+        });
+        expect(kingTab.name).toBe("King");
+        expect(kingTab.getAttribute("aria-selected")).toBe("false");
+
+        const user = userEvent.setup();
+        await user.click(kingTab);
+
+        expect(onChange).toHaveBeenCalledWith(
+            expect.objectContaining({
+                target: expect.any(Element),
+            }),
+            "king-of-hearts"
+        );
+        expect(kingTab.getAttribute("aria-selected")).toBe("true");
+
+        expect(
+            await runAxe(container, {
+                rules: {
+                    // See: https://github.com/microsoft/fluentui/issues/27052
+                    "aria-required-children": { enabled: false },
+                },
+            })
+        ).toHaveNoViolations();
+    });
+});
diff --git a/packages/bonito-ui/src/components/form/index.ts b/packages/bonito-ui/src/components/form/index.ts
index b98ed43ce..8b8f02a55 100644
--- a/packages/bonito-ui/src/components/form/index.ts
+++ b/packages/bonito-ui/src/components/form/index.ts
@@ -9,6 +9,7 @@ export * from "./form-layout-provider";
 export * from "./checkbox";
 export * from "./dropdown";
 export * from "./radio-button";
+export * from "./tab-selector";
 export * from "./text-field";
 export * from "./storage-account-dropdown";
 export * from "./subscription-dropdown";
diff --git a/packages/bonito-ui/src/components/form/tab-selector.tsx b/packages/bonito-ui/src/components/form/tab-selector.tsx
new file mode 100644
index 000000000..7dd67de7b
--- /dev/null
+++ b/packages/bonito-ui/src/components/form/tab-selector.tsx
@@ -0,0 +1,160 @@
+import {
+    FormValues,
+    ParameterDependencies,
+    ParameterName,
+} from "@azure/bonito-core/lib/form";
+import { delayedCallback } from "@azure/bonito-core/lib/util";
+import { Pivot, PivotItem } from "@fluentui/react/lib/Pivot";
+import * as React from "react";
+import { useFormParameter, useUniqueId } from "../../hooks";
+import { FormControlProps } from "./form-control";
+
+export interface TabSelectorProps<
+    V extends FormValues,
+    K extends ParameterName<V>,
+    D extends ParameterDependencies<V> = ParameterDependencies<V>
+> extends FormControlProps<V, K, D> {
+    overflowBehavior?: "none" | "menu";
+    options: TabOption<V, K>[];
+    valueToKey?: (value?: V[K]) => string;
+}
+
+export interface TabOption<V extends FormValues, K extends ParameterName<V>> {
+    key?: string;
+    value: V[K];
+    label?: string;
+}
+
+const undefinedKey = "<<<No selection>>>";
+const nullKey = "<<<None>>>";
+
+/**
+ * A tab selection form control supporting single selection
+ */
+export function TabSelector<
+    V extends FormValues,
+    K extends ParameterName<V>,
+    D extends ParameterDependencies<V> = ParameterDependencies<V>
+>(props: TabSelectorProps<V, K, D>): JSX.Element {
+    const {
+        ariaLabel,
+        className,
+        // disabled,
+        onFocus,
+        onBlur,
+        onChange,
+        options,
+        param,
+        style,
+        valueToKey,
+        overflowBehavior,
+    } = props;
+
+    const id = useUniqueId("tab-selector", props.id);
+    const { setDirty } = useFormParameter(param);
+
+    const [hasFocused, setHasFocused] = React.useState<boolean>(false);
+
+    // Default to first option if the parameter is required
+    if (param.required && param.value == null && options.length > 0) {
+        // Do this asynchronously so that the current render finishes first
+        delayedCallback(() => {
+            param.value = options[0].value;
+        });
+    }
+
+    const transformedOptions = _transformOptions(options, valueToKey);
+
+    const indexByKey: Record<string, number> = {};
+    let idx = 0;
+    const pivotItems = transformedOptions.map((opt) => {
+        if (!opt.key) {
+            console.warn(`Tab option ${opt} has no key`);
+            return <></>;
+        }
+        indexByKey[opt.key] = idx++;
+        return (
+            <PivotItem
+                key={opt.key}
+                itemKey={opt.key}
+                headerText={opt.label ?? opt.key}
+            />
+        );
+    });
+
+    const toKey = valueToKey ?? defaultValueToKey;
+
+    return (
+        <Pivot
+            id={id}
+            aria-label={ariaLabel ?? param.label}
+            className={className}
+            style={style}
+            overflowBehavior={overflowBehavior ?? "menu"}
+            // TODO: Support disabled, errorMessage
+            // disabled={disabled || param.disabled}
+            // errorMessage={validationError}
+            selectedKey={param.value == null ? undefined : toKey(param.value)}
+            onFocus={(event) => {
+                setHasFocused(true);
+                if (onFocus) {
+                    onFocus(event);
+                }
+            }}
+            onBlur={onBlur}
+            onLinkClick={(item, event) => {
+                if (hasFocused) {
+                    setDirty(true);
+                }
+                const itemKey = item?.props.itemKey;
+                if (!itemKey) {
+                    console.warn("PivotItem does not have an itemKey property");
+                    return;
+                }
+
+                const selectionIndex = indexByKey[itemKey];
+                param.value = transformedOptions[selectionIndex].value;
+                if (onChange) {
+                    // KLUDGE: Revisit what event type onChange needs
+                    //         to take for the portal form API.
+                    //         Maybe just use SyntheticEvent instead?
+                    onChange(event as React.FormEvent, param.value);
+                }
+            }}
+        >
+            {pivotItems}
+        </Pivot>
+    );
+}
+
+function defaultValueToKey<V>(value?: V): string {
+    if (value === undefined) {
+        return undefinedKey;
+    }
+    if (value === null) {
+        return nullKey;
+    }
+
+    const stringValue = String(value);
+    if (stringValue === undefinedKey || stringValue === nullKey) {
+        throw new Error(
+            `Invalid key "${stringValue}". Cannot use a key which is reserved for null or undefined values.`
+        );
+    }
+    return stringValue;
+}
+
+function _transformOptions<V extends FormValues, K extends ParameterName<V>>(
+    options: TabOption<V, K>[],
+    valueToKey?: (value?: V[K]) => string
+): TabOption<V, K>[] {
+    const toKey = valueToKey ?? defaultValueToKey;
+    return options.map((option) => {
+        const key = toKey(option.value);
+        return {
+            key: key,
+            label: option.label ?? key,
+            value: option.value,
+        };
+    });
+}
diff --git a/packages/bonito-ui/src/components/form/text-field.tsx b/packages/bonito-ui/src/components/form/text-field.tsx
index 702c40c8d..22a5da114 100644
--- a/packages/bonito-ui/src/components/form/text-field.tsx
+++ b/packages/bonito-ui/src/components/form/text-field.tsx
@@ -50,6 +50,14 @@ export function TextField<V extends FormValues, K extends ParameterName<V>>(
         );
     }
 
+    // Properties to use only if this control is being rendered
+    // by itself outside of a form layout
+    const standaloneProps: ITextFieldProps = {};
+    if (param.standalone) {
+        standaloneProps.label = param.label;
+        standaloneProps.description = param.description;
+    }
+
     return (
         <FluentTextField
             id={id}
@@ -78,6 +86,7 @@ export function TextField<V extends FormValues, K extends ParameterName<V>>(
                 }
             }}
             {...typeSpecificProps}
+            {...standaloneProps}
         ></FluentTextField>
     );
 }
diff --git a/packages/bonito-ui/src/form/__tests__/react-form.spec.tsx b/packages/bonito-ui/src/form/__tests__/react-form.spec.tsx
index c65aa6fd3..80ffe7d7c 100644
--- a/packages/bonito-ui/src/form/__tests__/react-form.spec.tsx
+++ b/packages/bonito-ui/src/form/__tests__/react-form.spec.tsx
@@ -48,6 +48,9 @@ describe("ReactForm tests", () => {
         expect(screen.getByTestId("custom-item-render")).toBeDefined();
         expect(bannerEl).toBeDefined();
         expect(bannerEl.textContent).toEqual("Message was Hello world!");
+
+        // Parameters inside forms have standalone set to undefined by default
+        expect(form.getParam("message").standalone).toBeUndefined();
     });
 
     test("Standalone parameter creation", () => {
@@ -59,5 +62,8 @@ describe("ReactForm tests", () => {
         expect(param.parentForm.values).toStrictEqual({
             [param.name]: "testing 1 2 3",
         });
+
+        // Always set to true when using createParam()
+        expect(param.standalone).toBe(true);
     });
 });
diff --git a/packages/bonito-ui/src/form/react-form.ts b/packages/bonito-ui/src/form/react-form.ts
index 2d385d5de..906e06053 100644
--- a/packages/bonito-ui/src/form/react-form.ts
+++ b/packages/bonito-ui/src/form/react-form.ts
@@ -64,6 +64,9 @@ export function createParam<
     >,
     init?: ReactParameterInit<StandaloneForm<S>, "_standaloneParam", D>
 ) {
+    init = init ?? {};
+    init.standalone = true;
+
     const form = createReactForm<StandaloneForm<S>>({
         values: {
             _standaloneParam: init?.value,
diff --git a/packages/playground/src/demo-routes.tsx b/packages/playground/src/demo-routes.tsx
index 692b81e72..135d2a310 100644
--- a/packages/playground/src/demo-routes.tsx
+++ b/packages/playground/src/demo-routes.tsx
@@ -10,6 +10,7 @@ import { RadioButtonDemo } from "./demo/form/radiobutton/radiobutton-demo";
 import { CheckboxDemo } from "./demo/form/checkbox/checkbox-demo";
 import { NotificationDemo } from "./demo/form/notification-demo";
 import { DataGridLoadMoreDemo } from "./demo/display/task-grid/task-data-grid";
+import { TabSelectorDemo } from "./demo/form/tab-selector-demo";
 
 export const DEMO_MAP = {
     default: () => <DefaultPane />,
@@ -20,6 +21,7 @@ export const DEMO_MAP = {
     combobox: () => <ComboBoxDemo />,
     dropdown: () => <DropdownDemo />,
     searchbox: () => <SearchBoxDemo />,
+    tabselector: () => <TabSelectorDemo />,
     textfield: () => <TextFieldDemo />,
     notification: () => <NotificationDemo />,
     certificatedisplay: () => <CertificateDisplayDemo />,
diff --git a/packages/playground/src/demo/form/action-form-demo.tsx b/packages/playground/src/demo/form/action-form-demo.tsx
index c09716897..5d43b33bb 100644
--- a/packages/playground/src/demo/form/action-form-demo.tsx
+++ b/packages/playground/src/demo/form/action-form-demo.tsx
@@ -1,6 +1,7 @@
 import { AbstractAction, Action } from "@azure/bonito-core/lib/action";
 import {
     Form,
+    NumberParameter,
     StringParameter,
     ValidationStatus,
 } from "@azure/bonito-core/lib/form";
@@ -19,14 +20,18 @@ import * as React from "react";
 import { DemoComponentContainer } from "../../layout/demo-component-container";
 import { DemoControlContainer } from "../../layout/demo-control-container";
 import { DemoPane } from "../../layout/demo-pane";
-import { ActionForm, Dropdown } from "@azure/bonito-ui/lib/components/form";
+import {
+    ActionForm,
+    Dropdown,
+    TabSelector,
+} from "@azure/bonito-ui/lib/components/form";
 
 type CarFormValues = {
     subscriptionId?: string;
     make?: string;
     model?: string;
     description?: string;
-    milesPerChange?: number;
+    milesPerCharge?: number;
 };
 
 class CreateOrUpdateCarAction extends AbstractAction<CarFormValues> {
@@ -34,7 +39,7 @@ class CreateOrUpdateCarAction extends AbstractAction<CarFormValues> {
 
     async onInitialize(): Promise<CarFormValues> {
         return {
-            milesPerChange: 300,
+            milesPerCharge: 300,
         };
     }
 
@@ -44,6 +49,23 @@ class CreateOrUpdateCarAction extends AbstractAction<CarFormValues> {
             values: initialValues,
         });
 
+        form.param("milesPerCharge", NumberParameter, {
+            label: "Miles per charge",
+            render: (props) => {
+                return (
+                    <TabSelector
+                        options={[
+                            { value: 100 },
+                            { value: 200 },
+                            { value: 300 },
+                            { value: 400 },
+                        ]}
+                        {...props}
+                    />
+                );
+            },
+        });
+
         form.param("subscriptionId", SubscriptionParameter, {
             label: "Subscription",
         });
diff --git a/packages/playground/src/demo/form/tab-selector-demo.tsx b/packages/playground/src/demo/form/tab-selector-demo.tsx
new file mode 100644
index 000000000..b26a2993f
--- /dev/null
+++ b/packages/playground/src/demo/form/tab-selector-demo.tsx
@@ -0,0 +1,94 @@
+import { StringParameter } from "@azure/bonito-core/lib/form";
+import { createParam } from "@azure/bonito-ui";
+import { TabSelector, TextField } from "@azure/bonito-ui/lib/components/form";
+import { Toggle } from "@fluentui/react/lib/Toggle";
+import * as React from "react";
+import { DemoComponentContainer } from "../../layout/demo-component-container";
+import { DemoControlContainer } from "../../layout/demo-control-container";
+import { DemoPane } from "../../layout/demo-pane";
+
+export const TabSelectorDemo: React.FC = () => {
+    const [disabled, setDisabled] = React.useState(false);
+    const [labelPrefix, setLabelPrefix] = React.useState("Tab");
+    const [selectedValue, setSelectedValue] = React.useState("");
+
+    const labelParam = React.useMemo(
+        () =>
+            createParam<string>(StringParameter, {
+                label: "Label prefix",
+                value: "Tab",
+            }),
+        []
+    );
+
+    const tabSelectorParam = React.useMemo(
+        () => createParam<string>(StringParameter),
+        []
+    );
+
+    return (
+        <DemoPane title="Tab Selector">
+            <DemoControlContainer>
+                <Toggle
+                    label="Disabled"
+                    inlineLabel
+                    onChange={(_, checked?: boolean) => setDisabled(!!checked)}
+                    checked={disabled}
+                />
+                <TextField
+                    param={labelParam}
+                    onChange={(_, value) => {
+                        setLabelPrefix(value ? String(value) : "Tab");
+                    }}
+                />
+                <div>
+                    <strong>Selected value: </strong>
+                    {selectedValue}
+                </div>
+            </DemoControlContainer>
+            <DemoComponentContainer minWidth="400px">
+                <TabSelector
+                    param={tabSelectorParam}
+                    disabled={disabled}
+                    onChange={(event, value) => {
+                        setSelectedValue(value as string);
+                    }}
+                    options={[
+                        {
+                            value: "value1",
+                            label: `${labelPrefix} One`,
+                        },
+                        {
+                            value: "value2",
+                            label: `${labelPrefix} Two`,
+                        },
+                        {
+                            value: "value3",
+                            label: `${labelPrefix} Three`,
+                        },
+                        {
+                            value: "value4",
+                            label: `${labelPrefix} Four`,
+                        },
+                        {
+                            value: "value5",
+                            label: `${labelPrefix} Five`,
+                        },
+                        {
+                            value: "value6",
+                            label: `${labelPrefix} Six`,
+                        },
+                        {
+                            value: "value7",
+                            label: `${labelPrefix} Seven`,
+                        },
+                        {
+                            value: "value8",
+                            label: `${labelPrefix} Eight`,
+                        },
+                    ]}
+                />
+            </DemoComponentContainer>
+        </DemoPane>
+    );
+};
diff --git a/packages/playground/src/layout/demo-nav-menu.tsx b/packages/playground/src/layout/demo-nav-menu.tsx
index b53e5a04d..779fcf84b 100644
--- a/packages/playground/src/layout/demo-nav-menu.tsx
+++ b/packages/playground/src/layout/demo-nav-menu.tsx
@@ -15,7 +15,7 @@ export const DemoNavMenu: React.FC = () => {
             links: [
                 {
                     key: "ActionForm",
-                    name: "ActionForm",
+                    name: "Action Form",
                     url: getDemoHash("actionform"),
                 },
                 {
@@ -35,7 +35,7 @@ export const DemoNavMenu: React.FC = () => {
                 },
                 {
                     key: "ComboBox",
-                    name: "ComboBox",
+                    name: "Combo Box",
                     url: getDemoHash("combobox"),
                 },
                 {
@@ -45,12 +45,17 @@ export const DemoNavMenu: React.FC = () => {
                 },
                 {
                     key: "SearchBox",
-                    name: "SearchBox",
+                    name: "Search Box",
                     url: getDemoHash("searchbox"),
                 },
+                {
+                    key: "TabSelector",
+                    name: "Tab Selector",
+                    url: getDemoHash("tabselector"),
+                },
                 {
                     key: "TextField",
-                    name: "TextField",
+                    name: "Text Field",
                     url: getDemoHash("textfield"),
                 },
                 {

From 1b4b4e608229853cce643676fe73d4507d140ff6 Mon Sep 17 00:00:00 2001
From: David Watrous <509299+dpwatrous@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:13:47 -0400
Subject: [PATCH 7/8] Disable code coverage for most of playground/web (#2829)

These are non-production and their code coverage scores
shouldn't be aggregated with production packages.
---
 packages/playground/jest.config.js            |  2 ++
 util/common-config/jest-common.js             |  4 ++++
 web/jest.config.js                            |  2 ++
 web/src/__tests__/setup-tests.ts              |  8 +++++++
 .../components/__tests__/application.spec.tsx | 23 +++++++++++++++++++
 5 files changed, 39 insertions(+)
 create mode 100644 web/src/components/__tests__/application.spec.tsx

diff --git a/packages/playground/jest.config.js b/packages/playground/jest.config.js
index c76861636..b59fd2763 100644
--- a/packages/playground/jest.config.js
+++ b/packages/playground/jest.config.js
@@ -6,5 +6,7 @@ module.exports = require("@batch/common-config/jest-common").createConfig(
     {
         testEnvironment: "jsdom",
         setupFilesAfterEnv: ["<rootDir>/src/__tests__/setup-tests.tsx"],
+        // Ignore most code coverage as this isn't used in production
+        coveragePathIgnorePatterns: ["^(?!.*(playground-example.tsx))"],
     }
 );
diff --git a/util/common-config/jest-common.js b/util/common-config/jest-common.js
index a6784c9ea..4ee0dda8a 100644
--- a/util/common-config/jest-common.js
+++ b/util/common-config/jest-common.js
@@ -131,6 +131,10 @@ function getCombinedResourceStrings() {
             __dirname,
             "../../packages/playground/resources/i18n/json/resources.en.json"
         )),
+        require(path.join(
+            __dirname,
+            "../../web/resources/i18n/resources.en.json"
+        )),
     ];
 
     const allResourceStrings = {};
diff --git a/web/jest.config.js b/web/jest.config.js
index 26e46f300..8d20ac675 100644
--- a/web/jest.config.js
+++ b/web/jest.config.js
@@ -6,5 +6,7 @@ module.exports = require("@batch/common-config/jest-common").createConfig(
     {
         testEnvironment: "jsdom",
         setupFilesAfterEnv: ["<rootDir>/src/__tests__/setup-tests.ts"],
+        // Ignore most code coverage as this isn't used in production
+        coveragePathIgnorePatterns: ["^(?!.*(application.tsx))"],
     }
 );
diff --git a/web/src/__tests__/setup-tests.ts b/web/src/__tests__/setup-tests.ts
index ef968caba..89dae4b94 100644
--- a/web/src/__tests__/setup-tests.ts
+++ b/web/src/__tests__/setup-tests.ts
@@ -1,4 +1,9 @@
 import { destroyEnvironment } from "@azure/bonito-core";
+import { initializeAxe } from "@azure/bonito-ui/lib/test-util";
+
+beforeAll(async () => {
+    await initializeAxe();
+});
 
 afterEach(() => {
     jest.resetAllMocks();
@@ -9,6 +14,9 @@ afterAll(() => {
     jest.restoreAllMocks();
 });
 
+// UI tests can be slow, especially with a11y tests enabled
+jest.setTimeout(30000);
+
 // KLUDGE: Mock out the monaco API so that imports to MonacoEditor do not error.
 // Note that the editor itself currently does not work in a Node.js
 // environment regardless
diff --git a/web/src/components/__tests__/application.spec.tsx b/web/src/components/__tests__/application.spec.tsx
new file mode 100644
index 000000000..17df139c8
--- /dev/null
+++ b/web/src/components/__tests__/application.spec.tsx
@@ -0,0 +1,23 @@
+import { initMockBrowserEnvironment } from "@azure/bonito-ui";
+import { runAxe } from "@azure/bonito-ui/lib/test-util/a11y";
+import { render } from "@testing-library/react";
+import { Application } from "components/application";
+import * as React from "react";
+
+describe("Application tests", () => {
+    beforeEach(() => initMockBrowserEnvironment());
+
+    test("Can render the web UI without accessibility violations", async () => {
+        const { container } = render(<Application />);
+        expect(
+            await runAxe(container, {
+                rules: {
+                    // See https://github.com/microsoft/fluentui/issues/28706
+                    "aria-required-children": { enabled: false },
+                    // See https://github.com/microsoft/fluentui/issues/18474
+                    "empty-table-header": { enabled: false },
+                },
+            })
+        ).toHaveNoViolations();
+    });
+});

From 21e761406a2d432faf4c56e36907650d2d5da9a1 Mon Sep 17 00:00:00 2001
From: Haopeng Wang <wanghp000@gmail.com>
Date: Tue, 7 Nov 2023 13:49:32 +0900
Subject: [PATCH 8/8] add validation details and string-list control (#2825)

add validation details and string-list control


---------

Co-authored-by: hoppe <hoppewang@microsoft.com>
---
 .../src/form/string-list-parameter.ts         |  29 ++-
 .../bonito-core/src/form/validation-status.ts |  12 +-
 packages/bonito-ui/i18n/resources.resjson     |   1 +
 .../form/__tests__/string-list.spec.tsx       |  61 ++++++
 .../form/default-form-control-resolver.tsx    |   3 +-
 .../src/components/form/form-control.ts       |   2 +-
 .../src/components/form/form.i18n.yml         |   1 +
 .../bonito-ui/src/components/form/index.ts    |   1 +
 .../src/components/form/string-list.tsx       | 175 ++++++++++++++++++
 .../bonito-ui/src/hooks/use-form-parameter.ts |   6 +
 packages/playground/src/demo-routes.tsx       |   2 +
 .../src/demo/form/action-form-demo.tsx        |   6 +
 .../demo/form/stringlist/stringlist-demo.tsx  |  25 +++
 .../playground/src/layout/demo-nav-menu.tsx   |   5 +
 14 files changed, 311 insertions(+), 18 deletions(-)
 create mode 100644 packages/bonito-ui/src/components/form/__tests__/string-list.spec.tsx
 create mode 100644 packages/bonito-ui/src/components/form/string-list.tsx
 create mode 100644 packages/playground/src/demo/form/stringlist/stringlist-demo.tsx

diff --git a/packages/bonito-core/src/form/string-list-parameter.ts b/packages/bonito-core/src/form/string-list-parameter.ts
index 45b67791c..8c25def87 100644
--- a/packages/bonito-core/src/form/string-list-parameter.ts
+++ b/packages/bonito-core/src/form/string-list-parameter.ts
@@ -3,6 +3,10 @@ import { FormValues } from "./form";
 import { AbstractParameter, ParameterName } from "./parameter";
 import { ValidationStatus } from "./validation-status";
 
+export interface StringListValidationDetails {
+    [key: number]: string;
+}
+
 /**
  * A parameter with a value that is a list of strings
  */
@@ -10,28 +14,33 @@ export class StringListParameter<
     V extends FormValues,
     K extends ParameterName<V>
 > extends AbstractParameter<V, K> {
-    validateSync(): ValidationStatus {
+    validateSync() {
         let status = super.validateSync();
         if (status.level === "ok") {
             status = this._validate();
         }
         return status;
     }
-
     private _validate(): ValidationStatus {
+        let hasError = false;
+        const vData: StringListValidationDetails = {};
         if (this.value != null && Array.isArray(this.value)) {
-            for (const v of this.value) {
+            for (const [i, v] of this.value.entries()) {
                 if (typeof v !== "string") {
-                    // Found a non-string value - early out
-                    return new ValidationStatus(
-                        "error",
-                        translate(
-                            "bonito.core.form.validation.stringListValueError"
-                        )
+                    hasError = true;
+                    // Found a non-string value
+                    vData[i] = translate(
+                        "bonito.core.form.validation.stringValueError"
                     );
                 }
             }
         }
-        return new ValidationStatus("ok");
+        return hasError
+            ? new ValidationStatus(
+                  "error",
+                  translate("bonito.core.form.validation.stringListValueError"),
+                  vData
+              )
+            : new ValidationStatus("ok");
     }
 }
diff --git a/packages/bonito-core/src/form/validation-status.ts b/packages/bonito-core/src/form/validation-status.ts
index 15f8cd6fc..bdff798f5 100644
--- a/packages/bonito-core/src/form/validation-status.ts
+++ b/packages/bonito-core/src/form/validation-status.ts
@@ -2,12 +2,12 @@
  * Represents the result of a given validation
  */
 export class ValidationStatus {
-    level: "ok" | "warn" | "error" | "canceled";
-    message?: string;
     forced?: boolean = false;
 
-    constructor(level: "ok" | "warn" | "error" | "canceled", message?: string) {
-        this.level = level;
-        this.message = message;
-    }
+    constructor(
+        public level: "ok" | "warn" | "error" | "canceled",
+        public message?: string,
+        // TODO: Make this a generic type
+        public details?: unknown
+    ) {}
 }
diff --git a/packages/bonito-ui/i18n/resources.resjson b/packages/bonito-ui/i18n/resources.resjson
index 0d135cdf9..1332e4d0e 100644
--- a/packages/bonito-ui/i18n/resources.resjson
+++ b/packages/bonito-ui/i18n/resources.resjson
@@ -2,5 +2,6 @@
   "bonito.ui.dataGrid.noResults": "No results found",
   "bonito.ui.form.buttons.apply": "Apply",
   "bonito.ui.form.buttons.discardChanges": "Discard changes",
+  "bonito.ui.form.delete": "Delete",
   "bonito.ui.form.showPassword": "Show password"
 }
\ No newline at end of file
diff --git a/packages/bonito-ui/src/components/form/__tests__/string-list.spec.tsx b/packages/bonito-ui/src/components/form/__tests__/string-list.spec.tsx
new file mode 100644
index 000000000..617c3657a
--- /dev/null
+++ b/packages/bonito-ui/src/components/form/__tests__/string-list.spec.tsx
@@ -0,0 +1,61 @@
+import { StringListParameter } from "@azure/bonito-core/lib/form";
+import { initMockBrowserEnvironment } from "../../../environment";
+import { createParam } from "../../../form";
+import { StringList } from "../string-list";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { runAxe } from "../../../test-util";
+
+describe("StringList form control", () => {
+    beforeEach(() => initMockBrowserEnvironment());
+
+    test("renders a list of strings", async () => {
+        const { container } = render(
+            <>
+                <StringList
+                    param={createStringListParam()}
+                    id="StringList"
+                ></StringList>
+            </>
+        );
+        const inputs = screen.getAllByRole("textbox");
+        expect(inputs.length).toBe(3);
+        expect((inputs[0] as HTMLInputElement).value).toBe("foo");
+        expect((inputs[1] as HTMLInputElement).value).toBe("bar");
+        expect((inputs[2] as HTMLInputElement).value).toBe("");
+
+        const deleteButtons = screen.getAllByRole("button");
+        expect(deleteButtons.length).toBe(2);
+        expect(await runAxe(container)).toHaveNoViolations();
+    });
+
+    it("adds a new string when the last one is edited", async () => {
+        const onChange = jest.fn();
+        render(
+            <StringList param={createStringListParam()} onChange={onChange} />
+        );
+        const inputs = screen.getAllByRole("textbox");
+        const input = inputs[inputs.length - 1];
+        input.focus();
+        await userEvent.type(input, "baz");
+        expect(onChange).toHaveBeenCalledWith(null, ["foo", "bar", "baz"]);
+    });
+
+    it("deletes a string when the delete button is clicked", async () => {
+        const onChange = jest.fn();
+        render(
+            <StringList param={createStringListParam()} onChange={onChange} />
+        );
+        const deleteButton = screen.getAllByRole("button")[1];
+        await userEvent.click(deleteButton);
+        expect(onChange).toHaveBeenCalledWith(null, ["foo"]);
+    });
+});
+
+function createStringListParam() {
+    return createParam(StringListParameter, {
+        label: "String List",
+        value: ["foo", "bar"],
+    });
+}
diff --git a/packages/bonito-ui/src/components/form/default-form-control-resolver.tsx b/packages/bonito-ui/src/components/form/default-form-control-resolver.tsx
index 9dd98eca7..55a1c73dd 100644
--- a/packages/bonito-ui/src/components/form/default-form-control-resolver.tsx
+++ b/packages/bonito-ui/src/components/form/default-form-control-resolver.tsx
@@ -21,6 +21,7 @@ import { FormControlResolver } from "./form-control-resolver";
 import { LocationDropdown } from "./location-dropdown";
 import { ResourceGroupDropdown } from "./resource-group-dropdown";
 import { StorageAccountDropdown } from "./storage-account-dropdown";
+import { StringList } from "./string-list";
 import { SubscriptionDropdown } from "./subscription-dropdown";
 import { TextField } from "./text-field";
 
@@ -43,7 +44,7 @@ export class DefaultFormControlResolver implements FormControlResolver {
             );
         } else if (param instanceof StringListParameter) {
             return (
-                <TextField
+                <StringList
                     id={id}
                     key={param.name}
                     param={param}
diff --git a/packages/bonito-ui/src/components/form/form-control.ts b/packages/bonito-ui/src/components/form/form-control.ts
index 406f9e7c6..4719d63fc 100644
--- a/packages/bonito-ui/src/components/form/form-control.ts
+++ b/packages/bonito-ui/src/components/form/form-control.ts
@@ -63,5 +63,5 @@ export interface FormControlProps<
     /**
      * Callback for when the value of the control changes
      */
-    onChange?: (event: React.FormEvent, value: V[K]) => void;
+    onChange?: (event: React.FormEvent | null, value: V[K]) => void;
 }
diff --git a/packages/bonito-ui/src/components/form/form.i18n.yml b/packages/bonito-ui/src/components/form/form.i18n.yml
index 35bbf08b9..b5552fbd1 100644
--- a/packages/bonito-ui/src/components/form/form.i18n.yml
+++ b/packages/bonito-ui/src/components/form/form.i18n.yml
@@ -1,4 +1,5 @@
 form:
+  delete: Delete
   buttons:
     apply: Apply
     discardChanges: Discard changes
diff --git a/packages/bonito-ui/src/components/form/index.ts b/packages/bonito-ui/src/components/form/index.ts
index 8b8f02a55..906dd6a5c 100644
--- a/packages/bonito-ui/src/components/form/index.ts
+++ b/packages/bonito-ui/src/components/form/index.ts
@@ -13,3 +13,4 @@ export * from "./tab-selector";
 export * from "./text-field";
 export * from "./storage-account-dropdown";
 export * from "./subscription-dropdown";
+export * from "./string-list";
diff --git a/packages/bonito-ui/src/components/form/string-list.tsx b/packages/bonito-ui/src/components/form/string-list.tsx
new file mode 100644
index 000000000..651e0a3d5
--- /dev/null
+++ b/packages/bonito-ui/src/components/form/string-list.tsx
@@ -0,0 +1,175 @@
+import { FormValues, ParameterName } from "@azure/bonito-core/lib/form";
+import { IconButton } from "@fluentui/react/lib/Button";
+import { Stack } from "@fluentui/react/lib/Stack";
+import { TextField } from "@fluentui/react/lib/TextField";
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+import { useFormParameter, useUniqueId } from "../../hooks";
+import { FormControlProps } from "./form-control";
+import { useAppTheme } from "../../theme";
+import { translate } from "@azure/bonito-core";
+
+export interface StringListValidationDetails {
+    [key: number]: string;
+}
+
+export function StringList<V extends FormValues, K extends ParameterName<V>>(
+    props: FormControlProps<V, K>
+): JSX.Element {
+    const { className, style, param, onChange } = props;
+
+    const id = useUniqueId("form-control", props.id);
+    const validationDetails = useFormParameter(param)
+        .validationDetails as StringListValidationDetails;
+
+    const items = useMemo<string[]>(() => {
+        const items: string[] = [];
+        if (param.value && Array.isArray(param.value)) {
+            for (const item of param.value) {
+                items.push(item);
+            }
+        }
+        // Add an empty item at the end
+        items.push("");
+        return items;
+    }, [param.value]);
+
+    const onItemChange = useCallback(
+        (index: number, value: string) => {
+            const newItems = [...items];
+            if (index === items.length - 1) {
+                // Last item, add a new one
+                newItems.push("");
+            }
+            newItems[index] = value;
+            param.value = newItems.slice(0, newItems.length - 1) as V[K];
+            onChange?.(null, param.value);
+        },
+        [items, param, onChange]
+    );
+
+    const onItemDelete = useCallback(
+        (index: number) => {
+            const newItems = [...items];
+            newItems.splice(index, 1);
+            param.value = newItems.slice(0, newItems.length - 1) as V[K];
+            onChange?.(null, param.value);
+        },
+        [items, param, onChange]
+    );
+
+    return (
+        <Stack key={id} style={style} className={className}>
+            {items.map((item, index) => {
+                const errorMsg = validationDetails?.[index];
+                return (
+                    <StringListItem
+                        key={index}
+                        index={index}
+                        value={item}
+                        label={param.label}
+                        errorMsg={errorMsg}
+                        placeholder={param.placeholder}
+                        onChange={onItemChange}
+                        onDelete={onItemDelete}
+                        disableDelete={index === items.length - 1}
+                    ></StringListItem>
+                );
+            })}
+        </Stack>
+    );
+}
+
+interface StringListItemProps {
+    index: number;
+    value: string;
+    label?: string;
+    onChange: (index: number, value: string) => void;
+    onDelete: (index: number) => void;
+    placeholder?: string;
+    disableDelete?: boolean;
+    errorMsg?: string;
+}
+
+function StringListItem(props: StringListItemProps) {
+    const {
+        index,
+        value,
+        label,
+        onChange,
+        onDelete,
+        disableDelete,
+        errorMsg,
+        placeholder,
+    } = props;
+    const styles = useStringListItemStyles(props);
+    const ariaLabel = `${label || ""} ${index + 1}`;
+    return (
+        <Stack
+            key={index}
+            horizontal
+            verticalAlign="center"
+            styles={styles.container}
+        >
+            <Stack.Item grow={1}>
+                <TextField
+                    styles={styles.input}
+                    value={value}
+                    ariaLabel={ariaLabel}
+                    placeholder={placeholder}
+                    errorMessage={errorMsg}
+                    onChange={(_, newValue) => {
+                        onChange(index, newValue || "");
+                    }}
+                />
+            </Stack.Item>
+            <IconButton
+                styles={styles.button}
+                iconProps={{ iconName: "Delete" }}
+                ariaLabel={`${translate("bonito.ui.form.delete")} ${ariaLabel}`}
+                onClick={() => {
+                    onDelete(index);
+                }}
+                disabled={disableDelete}
+            />
+        </Stack>
+    );
+}
+
+function useStringListItemStyles(props: StringListItemProps) {
+    const theme = useAppTheme();
+    const { disableDelete } = props;
+
+    return React.useMemo(() => {
+        const itemPadding = {
+            padding: "11px 8px 11px 12px",
+        };
+        return {
+            container: {
+                root: {
+                    ":hover": {
+                        backgroundColor: theme.palette.neutralLighter,
+                    },
+                },
+            },
+            input: {
+                root: {
+                    ...itemPadding,
+                },
+                field: {
+                    height: "24px",
+                },
+                fieldGroup: {
+                    height: "24px",
+                    "box-sizing": "content-box",
+                },
+            },
+            button: {
+                root: {
+                    ...itemPadding,
+                    visibility: disableDelete ? "hidden" : "initial",
+                },
+            },
+        };
+    }, [theme.palette.neutralLighter, disableDelete]);
+}
diff --git a/packages/bonito-ui/src/hooks/use-form-parameter.ts b/packages/bonito-ui/src/hooks/use-form-parameter.ts
index 4d1ffc089..5c521f635 100644
--- a/packages/bonito-ui/src/hooks/use-form-parameter.ts
+++ b/packages/bonito-ui/src/hooks/use-form-parameter.ts
@@ -78,6 +78,8 @@ export function useFormParameter<
     const [validationError, setValidationError] = useState<
         string | undefined
     >();
+    const [validationDetails, setValidationDetails] =
+        useState<unknown>(undefined);
     const [validationStatus, setValidationStatus] = useState<
         ValidationStatus | undefined
     >();
@@ -178,6 +180,7 @@ export function useFormParameter<
                 setValidationStatus(snapshot.entryStatus[param.name]);
                 if (dirty || param.validationStatus?.forced) {
                     const msg = param.validationStatus?.message;
+                    const details = param.validationStatus?.details;
                     // Only set a visible validation error if the user has
                     // interacted with the form control (ie: the parameter is
                     // dirty) or validation is forced (usually the result of
@@ -185,8 +188,10 @@ export function useFormParameter<
                     // form)
                     if (param.validationStatus?.level === "error") {
                         setValidationError(msg);
+                        setValidationDetails(details);
                     } else {
                         setValidationError(undefined);
+                        setValidationDetails(undefined);
                     }
                     setDirty(true);
                 }
@@ -213,5 +218,6 @@ export function useFormParameter<
         loadingPromise,
         validationError,
         validationStatus,
+        validationDetails,
     };
 }
diff --git a/packages/playground/src/demo-routes.tsx b/packages/playground/src/demo-routes.tsx
index 135d2a310..542e91caa 100644
--- a/packages/playground/src/demo-routes.tsx
+++ b/packages/playground/src/demo-routes.tsx
@@ -11,6 +11,7 @@ import { CheckboxDemo } from "./demo/form/checkbox/checkbox-demo";
 import { NotificationDemo } from "./demo/form/notification-demo";
 import { DataGridLoadMoreDemo } from "./demo/display/task-grid/task-data-grid";
 import { TabSelectorDemo } from "./demo/form/tab-selector-demo";
+import { StringListDemo } from "./demo/form/stringlist/stringlist-demo";
 
 export const DEMO_MAP = {
     default: () => <DefaultPane />,
@@ -26,6 +27,7 @@ export const DEMO_MAP = {
     notification: () => <NotificationDemo />,
     certificatedisplay: () => <CertificateDisplayDemo />,
     dataGridLoadMore: () => <DataGridLoadMoreDemo />,
+    stringlist: () => <StringListDemo />,
 };
 
 export type DemoName = keyof typeof DEMO_MAP;
diff --git a/packages/playground/src/demo/form/action-form-demo.tsx b/packages/playground/src/demo/form/action-form-demo.tsx
index 5d43b33bb..14b7046e7 100644
--- a/packages/playground/src/demo/form/action-form-demo.tsx
+++ b/packages/playground/src/demo/form/action-form-demo.tsx
@@ -2,6 +2,7 @@ import { AbstractAction, Action } from "@azure/bonito-core/lib/action";
 import {
     Form,
     NumberParameter,
+    StringListParameter,
     StringParameter,
     ValidationStatus,
 } from "@azure/bonito-core/lib/form";
@@ -32,6 +33,7 @@ type CarFormValues = {
     model?: string;
     description?: string;
     milesPerCharge?: number;
+    addOns?: string[];
 };
 
 class CreateOrUpdateCarAction extends AbstractAction<CarFormValues> {
@@ -114,6 +116,10 @@ class CreateOrUpdateCarAction extends AbstractAction<CarFormValues> {
             },
         });
 
+        carSection.param("addOns", StringListParameter, {
+            label: "Add-ons",
+        });
+
         form.item("summary", {
             dynamic: {
                 hidden: (values) => values.make == null || values.model == null,
diff --git a/packages/playground/src/demo/form/stringlist/stringlist-demo.tsx b/packages/playground/src/demo/form/stringlist/stringlist-demo.tsx
new file mode 100644
index 000000000..14bfcb452
--- /dev/null
+++ b/packages/playground/src/demo/form/stringlist/stringlist-demo.tsx
@@ -0,0 +1,25 @@
+import { StringListParameter } from "@azure/bonito-core/lib/form";
+import { createParam } from "@azure/bonito-ui";
+import { StringList } from "@azure/bonito-ui/lib/components/form";
+import React from "react";
+import { DemoComponentContainer } from "../../../layout/demo-component-container";
+import { DemoPane } from "../../../layout/demo-pane";
+
+export const StringListDemo: React.FC = () => {
+    return (
+        <DemoPane title="StringList">
+            <DemoComponentContainer>
+                <StringList
+                    param={createParam(StringListParameter, {
+                        label: "String List",
+                        value: [],
+                    })}
+                    onChange={(_, value) => {
+                        // eslint-disable-next-line no-console
+                        console.log("String List change:", value);
+                    }}
+                />
+            </DemoComponentContainer>
+        </DemoPane>
+    );
+};
diff --git a/packages/playground/src/layout/demo-nav-menu.tsx b/packages/playground/src/layout/demo-nav-menu.tsx
index 779fcf84b..2dd8020da 100644
--- a/packages/playground/src/layout/demo-nav-menu.tsx
+++ b/packages/playground/src/layout/demo-nav-menu.tsx
@@ -63,6 +63,11 @@ export const DemoNavMenu: React.FC = () => {
                     name: "Notification",
                     url: getDemoHash("notification"),
                 },
+                {
+                    key: "StringList",
+                    name: "StringList",
+                    url: getDemoHash("stringlist"),
+                },
             ],
         },
         {