feat(gui): warehouse dashboard tab and per-execution warehouse picker

frontend/src/app/app-routing.constant.ts

@@ -36,6 +36,7 @@ export const USER_WORKFLOW = `${USER}/workflow`;
 export const USER_DATASET = `${USER}/dataset`;
 export const USER_DATASET_CREATE = `${USER_DATASET}/create`;
 export const USER_COMPUTING_UNIT = `${USER}/compute`;
+export const USER_WAREHOUSE = `${USER}/warehouse`;
 export const USER_PYTHON_VENV = `${USER}/python-venv`;
 export const USER_QUOTA = `${USER}/quota`;
 export const USER_DISCUSSION = `${USER}/discussion`;

frontend/src/app/app-routing.module.ts

@@ -25,6 +25,7 @@ import { UserQuotaComponent } from "./dashboard/component/user/user-quota/user-q
 import { UserProjectSectionComponent } from "./dashboard/component/user/user-project/user-project-section/user-project-section.component";
 import { UserProjectComponent } from "./dashboard/component/user/user-project/user-project.component";
 import { UserComputingUnitComponent } from "./dashboard/component/user/user-computing-unit/user-computing-unit.component";
+import { UserWarehouseComponent } from "./dashboard/component/user/user-warehouse/user-warehouse.component";
 import { UserVenvComponent } from "./dashboard/component/user/user-venv/user-venv.component";
 import { WorkspaceComponent } from "./workspace/component/workspace.component";
 import { AboutComponent } from "./hub/component/about/about.component";
@@ -139,6 +140,10 @@ routes.push({
           path: "compute",
           component: UserComputingUnitComponent,
         },
+        {
+          path: "warehouse",
+          component: UserWarehouseComponent,
+        },
         {
           path: "python-venv",
           component: UserVenvComponent,

frontend/src/app/common/component/warehouse-create-modal/warehouse-create-modal.component.html

@@ -0,0 +1,52 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<nz-modal
+  [nzVisible]="visible"
+  nzTitle="Create Warehouse"
+  [nzContent]="createWarehouseModalContent"
+  [nzFooter]="createWarehouseModalFooter"
+  (nzOnCancel)="handleCreateWarehouseModalCancel()">
+  <ng-template #createWarehouseModalContent>
+    <input
+      nz-input
+      placeholder="Warehouse name"
+      maxlength="64"
+      [(ngModel)]="newWarehouseName"
+      (keyup.enter)="createWarehouse()" />
+    <p class="warehouse-name-hint">Letters, digits, '-' and '_' only; must start with a letter or digit.</p>
+  </ng-template>
+  <ng-template #createWarehouseModalFooter>
+    <button
+      nz-button
+      nzType="default"
+      (click)="handleCreateWarehouseModalCancel()">
+      Cancel
+    </button>
+    <button
+      nz-button
+      nzType="primary"
+      id="confirm-create-warehouse-btn"
+      [disabled]="!newWarehouseName.trim()"
+      [nzLoading]="creating"
+      (click)="createWarehouse()">
+      Create
+    </button>
+  </ng-template>
+</nz-modal>

frontend/src/app/common/component/warehouse-create-modal/warehouse-create-modal.component.scss

@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.warehouse-name-hint {
+  margin: 8px 0 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}

frontend/src/app/common/component/warehouse-create-modal/warehouse-create-modal.component.spec.ts

@@ -0,0 +1,156 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { SimpleChange } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { of, throwError } from "rxjs";
+import { WarehouseCreateModalComponent } from "./warehouse-create-modal.component";
+import { NotificationService } from "../../service/notification/notification.service";
+import { WarehouseService } from "../../service/warehouse/warehouse.service";
+import { DashboardWarehouse } from "../../type/warehouse";
+import { commonTestProviders } from "../../testing/test-utils";
+
+describe("WarehouseCreateModalComponent", () => {
+  let fixture: ComponentFixture<WarehouseCreateModalComponent>;
+  let component: WarehouseCreateModalComponent;
+  let warehouseService: { createWarehouse: ReturnType<typeof vi.fn> };
+  let notificationService: { error: ReturnType<typeof vi.fn>; success: ReturnType<typeof vi.fn> };
+
+  const created: DashboardWarehouse = {
+    whid: 7,
+    name: "mybucket",
+    warehouseName: "user-1-mybucket",
+    flavor: "local",
+    createdAtMillis: 0,
+  };
+
+  beforeEach(async () => {
+    warehouseService = { createWarehouse: vi.fn().mockReturnValue(of(created)) };
+    notificationService = { error: vi.fn(), success: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [WarehouseCreateModalComponent, NoopAnimationsModule, HttpClientTestingModule],
+      providers: [
+        // The rendered <nz-modal> injects NzModalService itself.
+        NzModalService,
+        { provide: WarehouseService, useValue: warehouseService },
+        { provide: NotificationService, useValue: notificationService },
+        ...commonTestProviders,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WarehouseCreateModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture?.destroy();
+  });
+
+  it("renders the name input and a disabled Create button once opened", () => {
+    component.visible = true;
+    fixture.detectChanges();
+
+    // nz-modal renders into the CDK overlay on document, not into the fixture.
+    expect(document.querySelector("input[nz-input]")).toBeTruthy();
+    const createButton = document.querySelector<HTMLButtonElement>("#confirm-create-warehouse-btn");
+    expect(createButton?.disabled).toBe(true);
+
+    component.newWarehouseName = "mybucket";
+    fixture.detectChanges();
+    expect(createButton?.disabled).toBe(false);
+  });
+
+  it("creates the trimmed name, then emits the warehouse and closes", () => {
+    const createdSpy = vi.fn();
+    const visibleSpy = vi.fn();
+    component.warehouseCreated.subscribe(createdSpy);
+    component.visibleChange.subscribe(visibleSpy);
+    component.visible = true;
+    component.newWarehouseName = "  mybucket  ";
+
+    component.createWarehouse();
+
+    expect(warehouseService.createWarehouse).toHaveBeenCalledWith("mybucket");
+    expect(notificationService.success).toHaveBeenCalledWith('Warehouse "mybucket" created.');
+    expect(createdSpy).toHaveBeenCalledWith(created);
+    expect(component.visible).toBe(false);
+    expect(visibleSpy).toHaveBeenCalledWith(false);
+    expect(component.creating).toBe(false);
+  });
+
+  it("does nothing for a blank name", () => {
+    component.newWarehouseName = "   ";
+
+    component.createWarehouse();
+
+    expect(warehouseService.createWarehouse).not.toHaveBeenCalled();
+  });
+
+  it("does not double-submit while a create is in flight", () => {
+    component.newWarehouseName = "mybucket";
+    component.creating = true;
+
+    component.createWarehouse();
+
+    expect(warehouseService.createWarehouse).not.toHaveBeenCalled();
+  });
+
+  it("keeps the modal open and surfaces the backend message when the create fails", () => {
+    warehouseService.createWarehouse.mockReturnValue(
+      throwError(() => ({ error: "a warehouse named 'mybucket' already exists" }))
+    );
+    const visibleSpy = vi.fn();
+    component.visibleChange.subscribe(visibleSpy);
+    component.visible = true;
+    component.newWarehouseName = "mybucket";
+
+    component.createWarehouse();
+
+    expect(component.visible).toBe(true);
+    expect(visibleSpy).not.toHaveBeenCalled();
+    expect(component.creating).toBe(false);
+    expect(notificationService.error).toHaveBeenCalledWith("a warehouse named 'mybucket' already exists");
+  });
+
+  it("clears the previous name when the modal opens", () => {
+    component.newWarehouseName = "leftover";
+    component.visible = true;
+
+    component.ngOnChanges({ visible: new SimpleChange(false, true, false) });
+
+    expect(component.newWarehouseName).toBe("");
+  });
+
+  it("cancel closes without creating", () => {
+    const visibleSpy = vi.fn();
+    component.visibleChange.subscribe(visibleSpy);
+    component.visible = true;
+
+    component.handleCreateWarehouseModalCancel();
+
+    expect(component.visible).toBe(false);
+    expect(visibleSpy).toHaveBeenCalledWith(false);
+    expect(warehouseService.createWarehouse).not.toHaveBeenCalled();
+  });
+});

frontend/src/app/common/component/warehouse-create-modal/warehouse-create-modal.component.ts

@@ -0,0 +1,105 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzModalComponent } from "ng-zorro-antd/modal";
+import { NotificationService } from "../../service/notification/notification.service";
+import { WarehouseService } from "../../service/warehouse/warehouse.service";
+import { DashboardWarehouse } from "../../type/warehouse";
+import { extractErrorMessage } from "../../util/error";
+
+/**
+ * Shared create-warehouse modal (#6933), embedded by the dashboard tab and the
+ * workspace picker the same way ComputingUnitCreateModalComponent is: two-way
+ * `[(visible)]` controls the dialog and `(warehouseCreated)` returns the
+ * created warehouse.
+ */
+@UntilDestroy()
+@Component({
+  selector: "texera-warehouse-create-modal",
+  templateUrl: "./warehouse-create-modal.component.html",
+  styleUrls: ["./warehouse-create-modal.component.scss"],
+  imports: [
+    FormsModule,
+    NzModalComponent,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzInputDirective,
+  ],
+})
+export class WarehouseCreateModalComponent implements OnChanges {
+  // Must be bound two-way ([(visible)]): the modal closes itself.
+  @Input() visible = false;
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() warehouseCreated = new EventEmitter<DashboardWarehouse>();
+
+  newWarehouseName = "";
+  creating = false;
+
+  constructor(
+    private warehouseService: WarehouseService,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["visible"] && this.visible) {
+      this.newWarehouseName = "";
+    }
+  }
+
+  createWarehouse(): void {
+    const name = this.newWarehouseName.trim();
+    if (!name || this.creating) {
+      return;
+    }
+    this.creating = true;
+    this.warehouseService
+      .createWarehouse(name)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: created => {
+          this.creating = false;
+          this.notificationService.success(`Warehouse "${created.name}" created.`);
+          this.warehouseCreated.emit(created);
+          this.closeModal();
+        },
+        error: (err: unknown) => {
+          // Keep the modal open so the name can be corrected.
+          this.creating = false;
+          this.notificationService.error(extractErrorMessage(err));
+        },
+      });
+  }
+
+  handleCreateWarehouseModalCancel(): void {
+    this.closeModal();
+  }
+
+  private closeModal(): void {
+    this.visible = false;
+    this.visibleChange.emit(false);
+  }
+}