diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss
new file mode 100644
index 00000000000..50145f32930
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.scss
@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+// Forked from user-dataset-version-creator.component.scss, dropping the uploader selectors.
+// Convergence with the dataset creator is tracked under #6494.
+
+.texera-user-model-creator-form {
+ width: 80%;
+ margin: auto;
+}
+
+.create-btn {
+ background-color: #ffffff;
+ color: #007bff;
+ border: 1px solid lightgray;
+ padding: 5px 20px;
+ cursor: pointer;
+ margin-left: 15%;
+ margin-right: 5%;
+ width: 30%;
+ text-align: center;
+ &:hover {
+ background-color: #0069d9;
+ color: #ffffff;
+ }
+}
+
+.cancel-btn {
+ background-color: #ffffff;
+ color: #ff0000;
+ border: 1px solid lightgray;
+ padding: 5px 20px;
+ cursor: pointer;
+ margin-right: 15%;
+ margin-left: 5%;
+ margin-top: 10%;
+ width: 30%;
+ text-align: center;
+ &:hover {
+ background-color: #cc0000;
+ color: #ffffff;
+ }
+}
+
+.model-toggles {
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+
+.toggle-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12px;
+
+ label {
+ margin-right: 12px;
+ min-width: 80px;
+ font-weight: 500;
+ }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts
new file mode 100644
index 00000000000..a2a1699dde2
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.spec.ts
@@ -0,0 +1,219 @@
+/**
+ * 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 } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { FieldType, FieldTypeConfig, FormlyModule } from "@ngx-formly/core";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { NzModalRef } from "ng-zorro-antd/modal";
+import { of, throwError } from "rxjs";
+
+import { sanitizeModelName, UserModelCreatorComponent } from "./user-model-creator.component";
+import { MODEL_FORMATS, MODEL_FRAMEWORKS, ModelService } from "../../../../service/user/model/model.service";
+import { NotificationService } from "../../../../../common/service/notification/notification.service";
+import { commonTestProviders } from "../../../../../common/testing/test-utils";
+
+@Component({ template: "", standalone: true })
+class StubFormlyFieldComponent extends FieldType {}
+
+describe("sanitizeModelName", () => {
+ it("keeps underscores and hyphens, unlike the dataset sanitizer", () => {
+ // MODEL_NAME_PATTERN allows _ and -, so collapsing them would reject valid names.
+ expect(sanitizeModelName("churn_predictor-v2")).toBe("churn_predictor-v2");
+ });
+
+ it("lower-cases and replaces disallowed runs with a single hyphen", () => {
+ expect(sanitizeModelName("My Model!!Name")).toBe("my-model-name");
+ });
+
+ it("trims leading whitespace", () => {
+ expect(sanitizeModelName(" spaced")).toBe("spaced");
+ });
+});
+
+describe("UserModelCreatorComponent", () => {
+ let modalClose: ReturnType;
+ let createModel: ReturnType;
+ let notifySuccess: ReturnType;
+ let notifyError: ReturnType;
+
+ async function createFixture(): Promise> {
+ modalClose = vi.fn();
+ createModel = vi.fn();
+ notifySuccess = vi.fn();
+ notifyError = vi.fn();
+
+ await TestBed.configureTestingModule({
+ imports: [
+ UserModelCreatorComponent,
+ BrowserAnimationsModule,
+ FormsModule,
+ ReactiveFormsModule,
+ FormlyModule.forRoot({
+ types: [
+ { name: "input", component: StubFormlyFieldComponent },
+ { name: "select", component: StubFormlyFieldComponent },
+ ],
+ }),
+ HttpClientTestingModule,
+ ],
+ providers: [
+ { provide: NzModalRef, useValue: { close: modalClose } },
+ { provide: ModelService, useValue: { createModel } },
+ { provide: NotificationService, useValue: { success: notifySuccess, error: notifyError } },
+ ...commonTestProviders,
+ ],
+ }).compileComponents();
+
+ return TestBed.createComponent(UserModelCreatorComponent);
+ }
+
+ it("renders the four create fields, with no version-description field", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+
+ // Create-only: the dataset creator's dual-purpose version branch is deliberately not forked.
+ expect(fixture.componentInstance.fields.map(f => f.key)).toEqual(["name", "description", "framework", "format"]);
+ expect(fixture.componentInstance.form.contains("name")).toBe(true);
+ });
+
+ it("offers exactly the framework and format values the backend accepts", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+ const optionsFor = (key: string) =>
+ (
+ fixture.componentInstance.fields.find(f => f.key === key)?.templateOptions?.options as Array<{ value: string }>
+ ).map(o => o.value);
+
+ // A drift here becomes a 400 from ModelResource's whitelist at create time.
+ expect(optionsFor("framework")).toEqual([...MODEL_FRAMEWORKS]);
+ expect(optionsFor("format")).toEqual([...MODEL_FORMATS]);
+ });
+
+ it("does nothing when the required name is empty", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+
+ fixture.componentInstance.onClickCreate();
+
+ expect(createModel).not.toHaveBeenCalled();
+ expect(modalClose).not.toHaveBeenCalled();
+ });
+
+ it("creates the model with the sanitized name and the toggle values", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+ const component = fixture.componentInstance;
+ createModel.mockReturnValue(of({ model: { mid: 9 } }));
+
+ component.form.get("name")?.setValue("churn_predictor");
+ component.form.get("description")?.setValue("tabular");
+ component.form.get("framework")?.setValue("sklearn");
+ component.form.get("format")?.setValue("joblib");
+ component.onPublicStatusChange(true);
+ component.onDownloadableStatusChange(true);
+
+ component.onClickCreate();
+
+ expect(createModel).toHaveBeenCalledWith(
+ expect.objectContaining({
+ name: "churn_predictor",
+ description: "tabular",
+ framework: "sklearn",
+ format: "joblib",
+ isPublic: true,
+ isDownloadable: true,
+ })
+ );
+ expect(notifySuccess).toHaveBeenCalledWith("Model 'churn_predictor' created successfully.");
+ expect(modalClose).toHaveBeenCalledWith({ model: { mid: 9 } });
+ });
+
+ it("reports the rename when the entered name had to be sanitized", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+ const component = fixture.componentInstance;
+ createModel.mockReturnValue(of({ model: { mid: 3 } }));
+
+ component.form.get("name")?.setValue("My Model");
+ component.onClickCreate();
+
+ expect(createModel).toHaveBeenCalledWith(expect.objectContaining({ name: "my-model" }));
+ expect(notifySuccess).toHaveBeenCalledWith(
+ "Model 'My Model' was sanitized to 'my-model' and created successfully."
+ );
+ });
+
+ it("refuses a name that sanitizes to nothing, without calling the backend", async () => {
+ // Whitespace survives `required` but sanitizes to "", which the backend answers with a 400.
+ // Punctuation does not belong here: "!!" sanitizes to "-", which is a legal name.
+ const fixture = await createFixture();
+ fixture.detectChanges();
+ const component = fixture.componentInstance;
+
+ for (const typed of [" ", "\t\n "]) {
+ notifyError.mockClear();
+ component.form.get("name")?.setValue(typed);
+ component.onClickCreate();
+
+ expect(notifyError).toHaveBeenCalledWith("Model name cannot be empty.");
+ }
+ expect(createModel).not.toHaveBeenCalled();
+ expect(modalClose).not.toHaveBeenCalled();
+ });
+
+ it("refuses a name past the length limit, without calling the backend", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+ const component = fixture.componentInstance;
+
+ component.form.get("name")?.setValue("a".repeat(129));
+ component.onClickCreate();
+
+ expect(createModel).not.toHaveBeenCalled();
+ expect(notifyError).toHaveBeenCalledWith(expect.stringContaining("Invalid model name"));
+ });
+
+ it("surfaces the server message and keeps the modal open when creation fails", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+ const component = fixture.componentInstance;
+ createModel.mockReturnValue(throwError(() => ({ error: { message: "name already taken" } })));
+
+ component.form.get("name")?.setValue("dupe");
+ component.onClickCreate();
+
+ expect(notifyError).toHaveBeenCalledWith("Model dupe creation failed: name already taken");
+ // The modal stays open so the rejected name can be corrected rather than retyped.
+ expect(modalClose).not.toHaveBeenCalled();
+ expect(component.isCreating).toBe(false);
+ });
+
+ it("closes with null on cancel without calling the backend", async () => {
+ const fixture = await createFixture();
+ fixture.detectChanges();
+
+ fixture.componentInstance.onClickCancel();
+
+ expect(modalClose).toHaveBeenCalledWith(null);
+ expect(createModel).not.toHaveBeenCalled();
+ });
+});
diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts
new file mode 100644
index 00000000000..44696238042
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model-creator/user-model-creator.component.ts
@@ -0,0 +1,200 @@
+/**
+ * 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, OnInit } from "@angular/core";
+import { FormGroup, FormsModule } from "@angular/forms";
+import { FormlyFieldConfig, FormlyModule } from "@ngx-formly/core";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { HttpErrorResponse } from "@angular/common/http";
+import { NzModalRef } from "ng-zorro-antd/modal";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
+import { NgClass } from "@angular/common";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+
+import {
+ MODEL_FORMATS,
+ MODEL_FRAMEWORKS,
+ ModelService,
+ validateModelName,
+} from "../../../../service/user/model/model.service";
+import { Model } from "../../../../../common/type/model";
+import { NotificationService } from "../../../../../common/service/notification/notification.service";
+
+export function sanitizeModelName(name: string): string {
+ return name
+ .trimStart()
+ .replace(/[^a-zA-Z0-9_-]+/g, "-")
+ .toLowerCase();
+}
+
+@UntilDestroy()
+@Component({
+ selector: "texera-user-model-creator",
+ templateUrl: "./user-model-creator.component.html",
+ styleUrls: ["./user-model-creator.component.scss"],
+ imports: [
+ NzSpinComponent,
+ NgClass,
+ FormlyModule,
+ NzSwitchComponent,
+ FormsModule,
+ NzButtonComponent,
+ NzWaveDirective,
+ ɵNzTransitionPatchDirective,
+ ],
+})
+export class UserModelCreatorComponent implements OnInit {
+ public form: FormGroup = new FormGroup({});
+ formModel: any = {};
+ fields: FormlyFieldConfig[] = [];
+
+ isModelPublic: boolean = false;
+ isModelDownloadable: boolean = false;
+ isModelNameSanitized: boolean = false;
+ isCreating: boolean = false;
+
+ constructor(
+ private modalRef: NzModalRef,
+ private modelService: ModelService,
+ private notificationService: NotificationService
+ ) {}
+
+ ngOnInit() {
+ this.setFormFields();
+ this.isModelNameSanitized = false;
+ }
+
+ private setFormFields() {
+ this.fields = [
+ {
+ key: "name",
+ type: "input",
+ templateOptions: {
+ label: "Name",
+ required: true,
+ },
+ },
+ {
+ key: "description",
+ type: "input",
+ defaultValue: "",
+ templateOptions: {
+ label: "Description",
+ },
+ },
+ // Options mirror ModelResource's whitelists, which reject anything else with a 400.
+ {
+ key: "framework",
+ type: "select",
+ defaultValue: MODEL_FRAMEWORKS[0],
+ templateOptions: {
+ label: "Framework",
+ required: true,
+ options: MODEL_FRAMEWORKS.map(value => ({ label: value, value })),
+ },
+ },
+ {
+ key: "format",
+ type: "select",
+ defaultValue: MODEL_FORMATS[0],
+ templateOptions: {
+ label: "Format",
+ required: true,
+ options: MODEL_FORMATS.map(value => ({ label: value, value })),
+ },
+ },
+ ];
+ }
+
+ private triggerValidation() {
+ Object.keys(this.form.controls).forEach(field => {
+ this.form.get(field)?.markAsTouched({ onlySelf: true });
+ });
+ }
+
+ onClickCancel() {
+ this.modalRef.close(null);
+ }
+
+ onClickCreate() {
+ this.triggerValidation();
+
+ if (!this.form.valid) {
+ return;
+ }
+
+ const originalName = this.form.get("name")?.value as string;
+ const sanitizedName = sanitizeModelName(originalName);
+ this.isModelNameSanitized = sanitizedName !== originalName;
+
+ // A name of only punctuation or whitespace sanitizes to "", which passes `required` but the
+ // backend rejects. Check the sanitized name against the same rule the rename path uses.
+ const nameError = sanitizedName === "" ? "Model name cannot be empty." : validateModelName(sanitizedName);
+ if (nameError) {
+ this.notificationService.error(nameError);
+ return;
+ }
+
+ const model: Model = {
+ name: sanitizedName,
+ description: this.form.get("description")?.value ?? "",
+ framework: this.form.get("framework")?.value,
+ format: this.form.get("format")?.value,
+ isPublic: this.isModelPublic,
+ isDownloadable: this.isModelDownloadable,
+ mid: undefined,
+ ownerUid: undefined,
+ repositoryName: undefined,
+ creationTime: undefined,
+ coverImage: undefined,
+ };
+
+ this.isCreating = true;
+ this.modelService
+ .createModel(model)
+ .pipe(untilDestroyed(this))
+ .subscribe({
+ next: res => {
+ const msg = this.isModelNameSanitized
+ ? `Model '${originalName}' was sanitized to '${sanitizedName}' and created successfully.`
+ : `Model '${sanitizedName}' created successfully.`;
+ this.notificationService.success(msg);
+ this.isCreating = false;
+ this.modalRef.close(res);
+ },
+ error: (res: unknown) => {
+ const err = res as HttpErrorResponse;
+ this.notificationService.error(`Model ${sanitizedName} creation failed: ${err.error?.message}`);
+ // Left open on purpose, so a rejected name can be corrected rather than retyped.
+ this.isCreating = false;
+ },
+ });
+ }
+
+ onPublicStatusChange(newValue: boolean): void {
+ this.isModelPublic = newValue;
+ }
+
+ onDownloadableStatusChange(newValue: boolean): void {
+ this.isModelDownloadable = newValue;
+ }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.html b/frontend/src/app/dashboard/component/user/user-model/user-model.component.html
new file mode 100644
index 00000000000..0c8ff840106
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.html
@@ -0,0 +1,101 @@
+
+
+
+
+
Models
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.scss b/frontend/src/app/dashboard/component/user/user-model/user-model.component.scss
new file mode 100644
index 00000000000..4b699f09198
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.scss
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+@use "../../dashboard.component" as *;
+@use "../../section-style" as *;
+@use "../../button-style" as *;
diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts b/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts
new file mode 100644
index 00000000000..2b7b28b6171
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.spec.ts
@@ -0,0 +1,437 @@
+/**
+ * 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 { of, Subject, throwError } from "rxjs";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { provideRouter } from "@angular/router";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { en_US, NZ_I18N } from "ng-zorro-antd/i18n";
+import { commonTestImports, commonTestProviders } from "../../../../common/testing/test-utils";
+import { SearchResultsComponent } from "../search-results/search-results.component";
+import { NgModel } from "@angular/forms";
+import { UserService } from "../../../../common/service/user/user.service";
+import { StubUserService } from "../../../../common/service/user/stub-user.service";
+import { SearchService } from "../../../service/user/search.service";
+import { ModelService } from "../../../service/user/model/model.service";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { SortMethod } from "../../../type/sort-method";
+import { EntityType } from "../../../../hub/service/hub.service";
+import { User } from "../../../../common/type/user";
+import { UserModelComponent } from "./user-model.component";
+import { UserModelCreatorComponent } from "./user-model-creator/user-model-creator.component";
+
+type LoadMoreFn = (start: number, count: number) => Promise<{ entries: any[]; more: boolean }>;
+
+describe("UserModelComponent", () => {
+ let component: UserModelComponent;
+
+ let userChangedSubject: Subject;
+ let isLoginSpy: ReturnType;
+ let getCurrentUserSpy: ReturnType;
+
+ let modalServiceMock: { create: ReturnType };
+ let searchServiceMock: { getUserInfo: ReturnType };
+ let modelServiceMock: {
+ deleteModel: ReturnType;
+ retrieveAccessibleModels: ReturnType;
+ };
+
+ let searchResultsStub: any;
+ let capturedLoadMoreFn: LoadMoreFn | null;
+ let modalAfterClose: Subject;
+
+ const buildEntry = (mid: number | undefined, name = `model-${mid}`) =>
+ ({
+ type: EntityType.Model,
+ model: { model: { mid, name } },
+ }) as unknown as DashboardEntry;
+
+ /** A /model/list row. */
+ const listedModel = (mid: number, overrides: Partial> = {}): any => ({
+ isOwner: true,
+ ownerEmail: "owner@example.com",
+ accessPrivilege: "WRITE",
+ size: 0,
+ ...overrides,
+ model: {
+ mid,
+ ownerUid: 1,
+ name: `model-${mid}`,
+ description: "",
+ framework: "pytorch",
+ format: "torchscript",
+ creationTime: mid,
+ isPublic: false,
+ isDownloadable: false,
+ repositoryName: undefined,
+ coverImage: undefined,
+ ...((overrides["model"] as object) ?? {}),
+ },
+ });
+
+ beforeEach(() => {
+ userChangedSubject = new Subject();
+ isLoginSpy = vi.fn(() => true);
+ getCurrentUserSpy = vi.fn(() => ({ uid: 42 }) as User);
+
+ const userServiceMock = {
+ userChanged: () => userChangedSubject.asObservable(),
+ isLogin: isLoginSpy,
+ getCurrentUser: getCurrentUserSpy,
+ };
+
+ modalAfterClose = new Subject();
+ modalServiceMock = { create: vi.fn(() => ({ afterClose: modalAfterClose.asObservable() })) };
+ searchServiceMock = { getUserInfo: vi.fn(() => of({})) };
+ modelServiceMock = {
+ deleteModel: vi.fn(() => of({} as Response)),
+ retrieveAccessibleModels: vi.fn(() => of([])),
+ };
+
+ component = new UserModelComponent(
+ modalServiceMock as any,
+ userServiceMock as any,
+ searchServiceMock as any,
+ modelServiceMock as any
+ );
+
+ capturedLoadMoreFn = null;
+ searchResultsStub = {
+ entries: [] as DashboardEntry[],
+ reset: vi.fn((fn: LoadMoreFn) => {
+ capturedLoadMoreFn = fn;
+ }),
+ loadMore: vi.fn(async () => {}),
+ };
+
+ component.searchResultsComponent = searchResultsStub;
+ });
+
+ // ─── wiring ───────────────────────────────────────────────────────────────
+
+ it("defaults to newest-first, since models carry no last-modified time", () => {
+ expect(component.sortMethod).toBe(SortMethod.CreateTimeDesc);
+ });
+
+ it("tracks login state as the user changes", () => {
+ expect(component.isLogin).toBe(true);
+ expect(component.currentUid).toBe(42);
+
+ isLoginSpy.mockReturnValue(false);
+ getCurrentUserSpy.mockReturnValue(undefined);
+ userChangedSubject.next(undefined);
+
+ expect(component.isLogin).toBe(false);
+ expect(component.currentUid).toBeUndefined();
+ });
+
+ it("re-searches whenever the signed-in user changes", () => {
+ const searchSpy = vi.spyOn(component, "search").mockResolvedValue();
+ component.ngAfterViewInit();
+
+ expect(searchSpy).not.toHaveBeenCalled();
+ userChangedSubject.next({ uid: 42 } as User);
+ expect(searchSpy).toHaveBeenCalledTimes(1);
+ });
+
+ // ─── listing ──────────────────────────────────────────────────────────────
+
+ it("lists the accessible models rather than going through unified search", async () => {
+ // Models must not reach global search before the hub backend lands, so this page reads
+ // /model/list directly.
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1), listedModel(2)]));
+
+ await component.search();
+ const page = await capturedLoadMoreFn!(0, 20);
+
+ expect(modelServiceMock.retrieveAccessibleModels).toHaveBeenCalled();
+ expect(page.entries.map((e: DashboardEntry) => e.id)).toEqual([2, 1]);
+ expect(page.more).toBe(false);
+ });
+
+ it("fetches the list once and re-slices it, refetching only when forced", async () => {
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1)]));
+
+ await component.search();
+ await capturedLoadMoreFn!(0, 20);
+ await capturedLoadMoreFn!(0, 20);
+ expect(modelServiceMock.retrieveAccessibleModels).toHaveBeenCalledTimes(1);
+
+ await component.search(true);
+ await capturedLoadMoreFn!(0, 20);
+ expect(modelServiceMock.retrieveAccessibleModels).toHaveBeenCalledTimes(2);
+ });
+
+ it("reports more pages while the filtered list runs past the window", async () => {
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1), listedModel(2), listedModel(3)]));
+
+ await component.search();
+
+ expect((await capturedLoadMoreFn!(0, 2)).more).toBe(true);
+ expect((await capturedLoadMoreFn!(2, 2)).more).toBe(false);
+ });
+
+ it("sorts by name in both directions, and by newest first otherwise", async () => {
+ const names = async (): Promise => {
+ await component.search(true);
+ return (await capturedLoadMoreFn!(0, 20)).entries.map((e: DashboardEntry) => e.name);
+ };
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(
+ of([listedModel(1, { model: { name: "b" } }), listedModel(2, { model: { name: "a" } })])
+ );
+
+ component.sortMethod = SortMethod.NameAsc;
+ expect(await names()).toEqual(["a", "b"]);
+
+ component.sortMethod = SortMethod.NameDesc;
+ expect(await names()).toEqual(["b", "a"]);
+
+ component.sortMethod = SortMethod.CreateTimeDesc;
+ expect(await names()).toEqual(["a", "b"]); // mid 2 was created later
+ });
+
+ // ─── keyword matching ─────────────────────────────────────────────────────
+
+ it("matches keywords against name, description, framework, format and owner", async () => {
+ const matches = async (keyword: string): Promise => {
+ component.searchKeywords = [keyword];
+ await component.search();
+ return (await capturedLoadMoreFn!(0, 20)).entries.map((e: DashboardEntry) => e.id!);
+ };
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(
+ of([
+ listedModel(1, { model: { name: "resnet", description: "vision", framework: "pytorch" } }),
+ listedModel(2, { ownerEmail: "someone@else.com", model: { name: "tree", format: "joblib" } }),
+ ])
+ );
+
+ expect(await matches("resnet")).toEqual([1]);
+ expect(await matches("VISION")).toEqual([1]); // case-insensitive
+ expect(await matches("joblib")).toEqual([2]);
+ expect(await matches("else.com")).toEqual([2]);
+ expect(await matches(" ")).toEqual([2, 1]); // a blank term filters nothing
+ });
+
+ it("requires every keyword to match, not just one", async () => {
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(
+ of([listedModel(1, { model: { name: "resnet", description: "vision" } }), listedModel(2)])
+ );
+ component.searchKeywords = ["resnet", "vision"];
+
+ await component.search();
+ expect((await capturedLoadMoreFn!(0, 20)).entries.map((e: DashboardEntry) => e.id)).toEqual([1]);
+
+ component.searchKeywords = ["resnet", "absent"];
+ await component.search();
+ expect((await capturedLoadMoreFn!(0, 20)).entries).toEqual([]);
+ });
+
+ // ─── owner names ──────────────────────────────────────────────────────────
+
+ it("labels each card with its owner's display name", async () => {
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1)]));
+ searchServiceMock.getUserInfo.mockReturnValue(of({ 1: { userName: "ada", avatar: "a.png" } }));
+
+ await component.search();
+ const [entry] = (await capturedLoadMoreFn!(0, 20)).entries;
+
+ expect(searchServiceMock.getUserInfo).toHaveBeenCalledWith([1]);
+ expect(entry.ownerName).toBe("ada");
+ });
+
+ it("still lists the models when the owner lookup fails", async () => {
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([listedModel(1)]));
+ searchServiceMock.getUserInfo.mockReturnValue(throwError(() => new Error("offline")));
+
+ await component.search();
+
+ expect((await capturedLoadMoreFn!(0, 20)).entries).toHaveLength(1);
+ });
+
+ it("skips the owner lookup when there is nobody to look up", async () => {
+ modelServiceMock.retrieveAccessibleModels.mockReturnValue(of([]));
+
+ await component.search();
+ await capturedLoadMoreFn!(0, 20);
+
+ expect(searchServiceMock.getUserInfo).not.toHaveBeenCalled();
+ });
+
+ // ─── view mode ────────────────────────────────────────────────────────────
+
+ it("remembers the chosen view for the next visit, and ignores a no-op change", () => {
+ const setItem = vi.spyOn(Storage.prototype, "setItem");
+ try {
+ component.setViewType("card"); // already the default
+ expect(setItem).not.toHaveBeenCalled();
+
+ component.setViewType("list");
+ expect(component.viewType).toBe("list");
+ expect(setItem).toHaveBeenCalledWith("texera.userModel.viewMode", "list");
+ } finally {
+ setItem.mockRestore();
+ }
+ });
+
+ // ─── create ───────────────────────────────────────────────────────────────
+
+ it("opens the creator and refreshes the list with whatever it created", () => {
+ // There is no model detail page yet, so the new model has to appear in this list instead.
+ const searchSpy = vi.spyOn(component, "search").mockResolvedValue();
+ component.onClickOpenModelAddComponent();
+
+ expect(modalServiceMock.create).toHaveBeenCalledWith(
+ expect.objectContaining({ nzContent: UserModelCreatorComponent })
+ );
+
+ modalAfterClose.next({ model: { mid: 9 } });
+
+ expect(searchSpy).toHaveBeenCalledWith(true);
+ });
+
+ it("does not refresh when the creator was cancelled", () => {
+ const searchSpy = vi.spyOn(component, "search").mockResolvedValue();
+ component.onClickOpenModelAddComponent();
+
+ modalAfterClose.next(null);
+
+ expect(searchSpy).not.toHaveBeenCalled();
+ });
+
+ // ─── delete ───────────────────────────────────────────────────────────────
+
+ it("deletes the model and drops just that row from the list", () => {
+ searchResultsStub.entries = [buildEntry(1), buildEntry(2)];
+
+ component.deleteModel(buildEntry(1));
+
+ expect(modelServiceMock.deleteModel).toHaveBeenCalledWith(1);
+ expect(searchResultsStub.entries.map((e: DashboardEntry) => e.model.model.mid)).toEqual([2]);
+ });
+
+ it("does not call the backend for a model that was never persisted", () => {
+ component.deleteModel(buildEntry(undefined));
+
+ expect(modelServiceMock.deleteModel).not.toHaveBeenCalled();
+ });
+});
+
+/**
+ * The suite above constructs the component directly, so its template has never been rendered.
+ * These mount it for real: the toolbar, the view toggle and the bindings handed to the filters and
+ * the results list live only in the template.
+ */
+/** Mirrors UserModelComponent's private static VIEW_MODE_STORAGE_KEY. */
+const VIEW_MODE_STORAGE_KEY = "texera.userModel.viewMode";
+
+describe("UserModelComponent rendering", () => {
+ let fixture: ComponentFixture;
+ let component: UserModelComponent;
+ let modalCreate: ReturnType;
+
+ beforeEach(async () => {
+ // viewType is seeded from localStorage at construction, so a view chosen by an earlier test
+ // would leak into this one.
+ localStorage.removeItem(VIEW_MODE_STORAGE_KEY);
+ modalCreate = vi.fn(() => ({ afterClose: of(null) }));
+ await TestBed.configureTestingModule({
+ imports: [UserModelComponent, ...commonTestImports],
+ providers: [
+ { provide: NzModalService, useValue: { create: modalCreate } },
+ { provide: UserService, useClass: StubUserService },
+ { provide: SearchService, useValue: { getUserInfo: vi.fn(() => of({})) } },
+ {
+ provide: ModelService,
+ useValue: { deleteModel: vi.fn(() => of({} as Response)), retrieveAccessibleModels: vi.fn(() => of([])) },
+ },
+ { provide: NZ_I18N, useValue: en_US },
+ provideRouter([]),
+ ...commonTestProviders,
+ ],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(UserModelComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ afterEach(() => {
+ localStorage.removeItem(VIEW_MODE_STORAGE_KEY);
+ vi.restoreAllMocks();
+ });
+
+ const host = (): HTMLElement => fixture.nativeElement as HTMLElement;
+
+ it("titles the page and offers the create button", () => {
+ expect(host().querySelector(".page-title")?.textContent).toContain("Models");
+ const create = host().querySelector(".create-btn");
+ expect(create?.textContent).toContain("Create Model");
+
+ create!.click();
+
+ expect(modalCreate).toHaveBeenCalled();
+ });
+
+ it("renders no shared filter bar", () => {
+ // The dropdowns it offers (owner, id, ctime, operator, project) are server-side criteria, and
+ // this page filters client-side. It returns with the hub and unified-search work.
+ expect(host().querySelector("texera-filters")).toBeNull();
+ });
+
+ it("writes the tags typed into the search box back to the keyword list, and re-filters", () => {
+ // nz-select's value arrives through its ControlValueAccessor, so the edit has to be driven at
+ // the NgModel. With a one-way binding the tags would render but never reach the filter.
+ const searchSpy = vi.spyOn(component, "search").mockResolvedValue();
+ const select = fixture.debugElement.query(By.css("nz-select"));
+ expect(select, "no nz-select in the search bar").not.toBeNull();
+ // Free-text keywords only exist in tag mode.
+ expect(select.componentInstance.nzMode).toBe("tags");
+
+ select.injector.get(NgModel).viewToModelUpdate(["resnet", "vision"]);
+ fixture.detectChanges();
+
+ expect(component.searchKeywords).toEqual(["resnet", "vision"]);
+ expect(searchSpy).toHaveBeenCalled();
+ });
+
+ it("starts in card view and moves the highlight when the list view is chosen", () => {
+ // nz-button renders nzType="primary" as ant-btn-primary; the highlight is how the user can tell
+ // which view they are in, so it has to follow viewType.
+ const buttonTitled = (title: string) => host().querySelector(`button[title="${title}"]`)!;
+ expect(component.viewType).toBe("card");
+ expect(buttonTitled("Card View").classList).toContain("ant-btn-primary");
+ expect(buttonTitled("List View").classList).not.toContain("ant-btn-primary");
+
+ buttonTitled("List View").click();
+ fixture.detectChanges();
+
+ expect(component.viewType).toBe("list");
+ expect(buttonTitled("List View").classList).toContain("ant-btn-primary");
+ expect(localStorage.getItem(VIEW_MODE_STORAGE_KEY)).toBe("list");
+ });
+
+ it("hands the results list the page's view settings", () => {
+ const results = fixture.debugElement.query(By.directive(SearchResultsComponent)).componentInstance;
+ expect(results.viewMode).toBe(component.viewType);
+ expect(results.editable).toBe(true);
+ expect(results.isPrivateSearch).toBe(true);
+ expect(results.currentUid).toBe(component.currentUid);
+ });
+});
diff --git a/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts b/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts
new file mode 100644
index 00000000000..907bc4ca3e6
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-model/user-model.component.ts
@@ -0,0 +1,244 @@
+/**
+ * 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 { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { AfterViewInit, Component, ViewChild } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+import { isDefined } from "../../../../common/util/predicate";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzSpaceCompactItemDirective, NzSpaceCompactComponent } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSelectComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
+import { UserService } from "../../../../common/service/user/user.service";
+import { SearchService } from "../../../service/user/search.service";
+import { ModelService } from "../../../service/user/model/model.service";
+import { SortMethod } from "../../../type/sort-method";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { DashboardModel } from "../../../type/dashboard-model.interface";
+import { SearchResultsComponent } from "../search-results/search-results.component";
+import { CardItemComponent } from "../list-item/card-item/card-item.component";
+import { SortButtonComponent } from "../sort-button/sort-button.component";
+import { UserModelCreatorComponent } from "./user-model-creator/user-model-creator.component";
+
+@UntilDestroy()
+@Component({
+ selector: "texera-model-section",
+ templateUrl: "user-model.component.html",
+ styleUrls: ["user-model.component.scss"],
+ imports: [
+ NzCardComponent,
+ NzSpaceCompactItemDirective,
+ NzSpaceCompactComponent,
+ NzButtonComponent,
+ NzWaveDirective,
+ ɵNzTransitionPatchDirective,
+ NzIconDirective,
+ SortButtonComponent,
+ NzSelectComponent,
+ FormsModule,
+ SearchResultsComponent,
+ CardItemComponent,
+ ],
+})
+export class UserModelComponent implements AfterViewInit {
+ private static readonly VIEW_MODE_STORAGE_KEY = "texera.userModel.viewMode";
+ // Models carry no "last modified" timestamp, so sorting by edit time would leave the key NULL on
+ // every row. Newest-first is the useful default, as on the Datasets page.
+ public sortMethod = SortMethod.CreateTimeDesc;
+ public isLogin = this.userService.isLogin();
+ public currentUid = this.userService.getCurrentUser()?.uid;
+ public viewType: "list" | "card" =
+ localStorage.getItem(UserModelComponent.VIEW_MODE_STORAGE_KEY) === "list" ? "list" : "card";
+
+ private _searchResultsComponent?: SearchResultsComponent;
+ @ViewChild(SearchResultsComponent) get searchResultsComponent(): SearchResultsComponent {
+ if (this._searchResultsComponent) {
+ return this._searchResultsComponent;
+ }
+ throw new Error("Property cannot be accessed before it is initialized.");
+ }
+
+ set searchResultsComponent(value: SearchResultsComponent) {
+ this._searchResultsComponent = value;
+ }
+
+ /** Free-text terms from the search box; matched client-side against the listed models. */
+ public searchKeywords: string[] = [];
+
+ private cachedModels: DashboardModel[] | null = null;
+
+ constructor(
+ private modalService: NzModalService,
+ private userService: UserService,
+ private searchService: SearchService,
+ private modelService: ModelService
+ ) {
+ this.userService
+ .userChanged()
+ .pipe(untilDestroyed(this))
+ .subscribe(() => {
+ this.isLogin = this.userService.isLogin();
+ this.currentUid = this.userService.getCurrentUser()?.uid;
+ });
+ }
+
+ ngAfterViewInit() {
+ this.userService
+ .userChanged()
+ .pipe(untilDestroyed(this))
+ .subscribe(() => this.search());
+ }
+
+ public setViewType(viewType: "list" | "card"): void {
+ if (this.viewType === viewType) {
+ return;
+ }
+ this.viewType = viewType;
+ localStorage.setItem(UserModelComponent.VIEW_MODE_STORAGE_KEY, viewType);
+ }
+
+ /**
+ * Re-filters and re-sorts the accessible models.
+ *
+ * Models are listed from /model/list and filtered here rather than through unified search: the
+ * backend does not accept `resourceType=model` until the hub work lands, and models must not
+ * surface in global search before then.
+ *
+ * @param forced discards the cached list and refetches
+ */
+ async search(forced: Boolean = false): Promise {
+ if (forced) {
+ this.cachedModels = null;
+ }
+
+ this.searchResultsComponent.reset(async (start, count) => {
+ const models = await this.accessibleModels();
+ const matching = this.sortModels(models.filter(model => this.matchesKeyword(model)));
+ const entries = matching.slice(start, start + count).map(model => new DashboardEntry(model));
+ await this.attachOwnerNames(entries);
+ return { entries, more: start + count < matching.length };
+ });
+ await this.searchResultsComponent.loadMore();
+ }
+
+ private async accessibleModels(): Promise {
+ if (this.cachedModels === null) {
+ this.cachedModels = await firstValueFrom(this.modelService.retrieveAccessibleModels());
+ }
+ return this.cachedModels;
+ }
+
+ private matchesKeyword(model: DashboardModel): boolean {
+ const keywords = this.searchKeywords.map(keyword => keyword.trim().toLowerCase()).filter(keyword => keyword !== "");
+ if (keywords.length === 0) {
+ return true;
+ }
+ const haystack = [
+ model.model.name,
+ model.model.description,
+ model.model.framework,
+ model.model.format,
+ model.ownerEmail,
+ ]
+ .filter((field): field is string => typeof field === "string")
+ .map(field => field.toLowerCase());
+
+ return keywords.every(keyword => haystack.some(field => field.includes(keyword)));
+ }
+
+ private sortModels(models: DashboardModel[]): DashboardModel[] {
+ const byName = (a: DashboardModel, b: DashboardModel) => a.model.name.localeCompare(b.model.name);
+ const byCreation = (a: DashboardModel, b: DashboardModel) =>
+ (a.model.creationTime ?? 0) - (b.model.creationTime ?? 0);
+
+ switch (this.sortMethod) {
+ case SortMethod.NameAsc:
+ return [...models].sort(byName);
+ case SortMethod.NameDesc:
+ return [...models].sort((a, b) => byName(b, a));
+ default:
+ return [...models].sort((a, b) => byCreation(b, a));
+ }
+ }
+
+ /** Resolves owner uids to display names, so cards show a username rather than the placeholder. */
+ private async attachOwnerNames(entries: DashboardEntry[]): Promise {
+ const ownerIds = Array.from(new Set(entries.map(entry => entry.model.model.ownerUid).filter(isDefined)));
+ if (ownerIds.length === 0) {
+ return;
+ }
+ try {
+ const userInfo = await firstValueFrom(this.searchService.getUserInfo(ownerIds));
+ entries.forEach(entry => {
+ const info = userInfo[entry.model.model.ownerUid!];
+ if (info) {
+ entry.setOwnerName(info.userName);
+ entry.setOwnerAvatar(info.avatar ?? "");
+ }
+ });
+ } catch {
+ // Decoration only: a lookup failure must not empty the list.
+ }
+ }
+
+ public onClickOpenModelAddComponent(): void {
+ const modal = this.modalService.create({
+ nzTitle: "Create New Model",
+ nzContent: UserModelCreatorComponent,
+ nzFooter: null,
+ nzBodyStyle: {
+ resize: "both",
+ overflow: "auto",
+ minHeight: "200px",
+ minWidth: "550px",
+ maxWidth: "90vw",
+ maxHeight: "80vh",
+ },
+ nzWidth: "fit-content",
+ });
+
+ // Refreshes rather than opening the new model: it has no detail page yet.
+ modal.afterClose.pipe(untilDestroyed(this)).subscribe(result => {
+ if (result != null) {
+ void this.search(true);
+ }
+ });
+ }
+
+ public deleteModel(entry: DashboardEntry): void {
+ const mid = entry.model.model.mid;
+ if (mid === undefined) {
+ return;
+ }
+ this.modelService
+ .deleteModel(mid)
+ .pipe(untilDestroyed(this))
+ .subscribe(() => {
+ this.cachedModels = this.cachedModels?.filter(model => model.model.mid !== mid) ?? null;
+ this.searchResultsComponent.entries = this.searchResultsComponent.entries.filter(
+ modelEntry => modelEntry.model.model.mid !== mid
+ );
+ });
+ }
+}
diff --git a/frontend/src/app/dashboard/service/user/model/model.service.spec.ts b/frontend/src/app/dashboard/service/user/model/model.service.spec.ts
new file mode 100644
index 00000000000..f99a8ff4ed9
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/model/model.service.spec.ts
@@ -0,0 +1,164 @@
+/**
+ * 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 { TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
+import { firstValueFrom } from "rxjs";
+import {
+ DEFAULT_MODEL_NAME,
+ MODEL_FORMATS,
+ MODEL_FRAMEWORKS,
+ MODEL_NAME_MAX_LENGTH,
+ ModelService,
+ validateModelName,
+} from "./model.service";
+import { Model } from "../../../../common/type/model";
+import { DashboardModel } from "../../../type/dashboard-model.interface";
+import { commonTestProviders } from "../../../../common/testing/test-utils";
+
+const API = "api";
+
+const newModel = (overrides: Partial = {}): Model => ({
+ mid: undefined,
+ ownerUid: undefined,
+ name: "resnet-50",
+ repositoryName: undefined,
+ isPublic: false,
+ isDownloadable: false,
+ description: "a model",
+ creationTime: undefined,
+ coverImage: undefined,
+ framework: "pytorch",
+ format: "torchscript",
+ ...overrides,
+});
+
+describe("validateModelName", () => {
+ it("accepts letters, digits, underscores and hyphens", () => {
+ expect(validateModelName("resnet-50")).toBeNull();
+ expect(validateModelName("my_model_2")).toBeNull();
+ expect(validateModelName("A")).toBeNull();
+ });
+
+ it("rejects anything else, including the empty name", () => {
+ for (const name of ["", "has spaces", "slash/es", "dots.", "emoji-🙂", "semi;colon"]) {
+ expect(validateModelName(name)).toContain("Invalid model name");
+ }
+ });
+
+ it("rejects a name one character past the limit but accepts the limit itself", () => {
+ expect(validateModelName("a".repeat(MODEL_NAME_MAX_LENGTH))).toBeNull();
+ expect(validateModelName("a".repeat(MODEL_NAME_MAX_LENGTH + 1))).toContain("Invalid model name");
+ });
+
+ it("offers a default name that is itself valid", () => {
+ expect(validateModelName(DEFAULT_MODEL_NAME)).toBeNull();
+ });
+});
+
+describe("model whitelists", () => {
+ it("mirror the backend's accepted frameworks and formats", () => {
+ // The backend answers anything outside these with a 400, so drift here is a broken create form.
+ expect([...MODEL_FRAMEWORKS]).toEqual(["pytorch", "tensorflow", "onnx", "sklearn", "other"]);
+ expect([...MODEL_FORMATS]).toEqual([
+ "torchscript",
+ "state-dict",
+ "safetensors",
+ "onnx",
+ "savedmodel",
+ "joblib",
+ "pickle",
+ "other",
+ ]);
+ });
+});
+
+describe("ModelService", () => {
+ let service: ModelService;
+ let http: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ providers: [ModelService, ...commonTestProviders],
+ });
+ service = TestBed.inject(ModelService);
+ http = TestBed.inject(HttpTestingController);
+ });
+
+ afterEach(() => {
+ http.verify();
+ });
+
+ it("posts a create request under the model-shaped field names", () => {
+ // The backend reads modelName/isModelPublic; the dataset spellings would be silently dropped.
+ service.createModel(newModel({ isPublic: true, isDownloadable: true })).subscribe();
+
+ const req = http.expectOne(`${API}/model/create`);
+ expect(req.request.method).toBe("POST");
+ expect(req.request.body).toEqual({
+ modelName: "resnet-50",
+ modelDescription: "a model",
+ isModelPublic: true,
+ isModelDownloadable: true,
+ framework: "pytorch",
+ format: "torchscript",
+ });
+ req.flush({});
+ });
+
+ it("returns the created model to the caller", async () => {
+ const created = { model: { mid: 7 } } as DashboardModel;
+ const pending = firstValueFrom(service.createModel(newModel()));
+
+ http.expectOne(`${API}/model/create`).flush(created);
+
+ expect(await pending).toEqual(created);
+ });
+
+ it("lists the accessible models, including when the user has none", async () => {
+ const pending = firstValueFrom(service.retrieveAccessibleModels());
+ http.expectOne(`${API}/model/list`).flush([]);
+ expect(await pending).toEqual([]);
+ });
+
+ it("deletes by id", () => {
+ service.deleteModel(7).subscribe();
+ expect(http.expectOne(`${API}/model/7`).request.method).toBe("DELETE");
+ http.verify();
+ });
+
+ it("sends renames and description edits with the id in the body", () => {
+ service.updateModelName(7, "new-name").subscribe();
+ const rename = http.expectOne(`${API}/model/update/name`);
+ expect(rename.request.body).toEqual({ mid: 7, name: "new-name" });
+ rename.flush({});
+
+ service.updateModelDescription(7, "new description").subscribe();
+ const describe = http.expectOne(`${API}/model/update/description`);
+ expect(describe.request.body).toEqual({ mid: 7, description: "new description" });
+ describe.flush({});
+ });
+
+ it("surfaces a server error rather than swallowing it", async () => {
+ const outcome = firstValueFrom(service.retrieveAccessibleModels()).catch((err: unknown) => err);
+ http.expectOne(`${API}/model/list`).flush({ message: "nope" }, { status: 500, statusText: "Server Error" });
+ expect(await outcome).toMatchObject({ status: 500 });
+ });
+});
diff --git a/frontend/src/app/dashboard/service/user/model/model.service.ts b/frontend/src/app/dashboard/service/user/model/model.service.ts
new file mode 100644
index 00000000000..c83f1369193
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/model/model.service.ts
@@ -0,0 +1,97 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { AppSettings } from "../../../../common/app-setting";
+import { Model } from "../../../../common/type/model";
+import { DashboardModel } from "../../../type/dashboard-model.interface";
+
+export const MODEL_BASE_URL = "model";
+export const MODEL_CREATE_URL = MODEL_BASE_URL + "/create";
+export const MODEL_UPDATE_BASE_URL = MODEL_BASE_URL + "/update";
+export const MODEL_UPDATE_NAME_URL = MODEL_UPDATE_BASE_URL + "/name";
+export const MODEL_UPDATE_DESCRIPTION_URL = MODEL_UPDATE_BASE_URL + "/description";
+export const MODEL_LIST_URL = MODEL_BASE_URL + "/list";
+
+export const DEFAULT_MODEL_NAME = "Untitled-model";
+
+export const MODEL_NAME_MAX_LENGTH = 128;
+const MODEL_NAME_PATTERN = /^[A-Za-z0-9_-]+$/;
+
+// Both lists mirror ModelResource's whitelists, which reject anything else with a 400.
+export const MODEL_FRAMEWORKS = ["pytorch", "tensorflow", "onnx", "sklearn", "other"] as const;
+export const MODEL_FORMATS = [
+ "torchscript",
+ "state-dict",
+ "safetensors",
+ "onnx",
+ "savedmodel",
+ "joblib",
+ "pickle",
+ "other",
+] as const;
+
+export function validateModelName(name: string): string | null {
+ if (!MODEL_NAME_PATTERN.test(name) || name.length > MODEL_NAME_MAX_LENGTH) {
+ return "Invalid model name: only letters, numbers, underscores, and hyphens are allowed (max 128 characters)";
+ }
+ return null;
+}
+
+@Injectable({
+ providedIn: "root",
+})
+export class ModelService {
+ constructor(private http: HttpClient) {}
+
+ public createModel(model: Model): Observable {
+ return this.http.post(`${AppSettings.getApiEndpoint()}/${MODEL_CREATE_URL}`, {
+ modelName: model.name,
+ modelDescription: model.description,
+ isModelPublic: model.isPublic,
+ isModelDownloadable: model.isDownloadable,
+ framework: model.framework,
+ format: model.format,
+ });
+ }
+
+ public retrieveAccessibleModels(): Observable {
+ return this.http.get(`${AppSettings.getApiEndpoint()}/${MODEL_LIST_URL}`);
+ }
+
+ public deleteModel(mid: number): Observable {
+ return this.http.delete(`${AppSettings.getApiEndpoint()}/${MODEL_BASE_URL}/${mid}`);
+ }
+
+ public updateModelName(mid: number, name: string): Observable {
+ return this.http.post(`${AppSettings.getApiEndpoint()}/${MODEL_UPDATE_NAME_URL}`, {
+ mid: mid,
+ name: name,
+ });
+ }
+
+ public updateModelDescription(mid: number, description: string): Observable {
+ return this.http.post(`${AppSettings.getApiEndpoint()}/${MODEL_UPDATE_DESCRIPTION_URL}`, {
+ mid: mid,
+ description: description,
+ });
+ }
+}
diff --git a/frontend/src/app/dashboard/service/user/model/stub-model.service.ts b/frontend/src/app/dashboard/service/user/model/stub-model.service.ts
new file mode 100644
index 00000000000..d7f37a637c3
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/model/stub-model.service.ts
@@ -0,0 +1,47 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { Observable, of } from "rxjs";
+import { DashboardModel } from "../../../type/dashboard-model.interface";
+
+/**
+ * In-memory ModelService double, so specs rendering a Models view need no HttpTestingController.
+ */
+@Injectable()
+export class StubModelService {
+ constructor(private models: DashboardModel[] = []) {}
+
+ public retrieveAccessibleModels(): Observable {
+ return of(this.models);
+ }
+
+ public deleteModel(mid: number): Observable {
+ this.models = this.models.filter(model => model.model.mid !== mid);
+ return of({} as Response);
+ }
+
+ public updateModelName(): Observable {
+ return of({} as Response);
+ }
+
+ public updateModelDescription(): Observable {
+ return of({} as Response);
+ }
+}
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts
new file mode 100644
index 00000000000..727ff7c2805
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/dataset-resource.descriptor.ts
@@ -0,0 +1,47 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { ResourceDescriptor } from "../../../type/resource-descriptor";
+import { EntityType } from "../../../../hub/service/hub.service";
+import { DatasetService, DEFAULT_DATASET_NAME, validateDatasetName } from "../dataset/dataset.service";
+import { HUB_DATASET_RESULT_DETAIL, USER_DATASET } from "../../../../app-routing.constant";
+
+@Injectable({
+ providedIn: "root",
+})
+export class DatasetResourceDescriptor implements ResourceDescriptor {
+ readonly type = EntityType.Dataset;
+ readonly iconType = "database";
+ readonly privateRoute = USER_DATASET;
+ readonly hubRoute = HUB_DATASET_RESULT_DETAIL;
+ readonly hasSize = true;
+ readonly defaultName = DEFAULT_DATASET_NAME;
+
+ constructor(private datasetService: DatasetService) {}
+
+ isOwner = (entry: DashboardEntry): boolean => entry.dataset.isOwner;
+ validateName = validateDatasetName;
+ rename = (id: number, name: string) => this.datasetService.updateDatasetName(id, name);
+ updateDescription = (id: number, description: string) =>
+ this.datasetService.updateDatasetDescription(id, description);
+ retrieveOwners = () => this.datasetService.retrieveOwners();
+ // No dataset-id endpoint exists, so `retrieveIds` stays absent and the id filter hides itself.
+}
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts
new file mode 100644
index 00000000000..ba90117b27b
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/file-resource.descriptor.ts
@@ -0,0 +1,33 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { ResourceDescriptor } from "../../../type/resource-descriptor";
+import { EntityType } from "../../../../hub/service/hub.service";
+
+@Injectable({
+ providedIn: "root",
+})
+export class FileResourceDescriptor implements ResourceDescriptor {
+ readonly type = EntityType.File;
+ readonly iconType = "folder-open";
+ // Files have no page of their own, so entries of this kind stay unrouted.
+
+ isOwner = (): boolean => true;
+}
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts
new file mode 100644
index 00000000000..25b36b03ab4
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/model-resource.descriptor.ts
@@ -0,0 +1,45 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { ResourceDescriptor } from "../../../type/resource-descriptor";
+import { EntityType } from "../../../../hub/service/hub.service";
+import { DEFAULT_MODEL_NAME, ModelService, validateModelName } from "../model/model.service";
+import { MODEL_ICON } from "../../../../common/icon/model-icon";
+
+@Injectable({
+ providedIn: "root",
+})
+export class ModelResourceDescriptor implements ResourceDescriptor {
+ readonly type = EntityType.Model;
+ readonly iconType = MODEL_ICON;
+ // `privateRoute` is deliberately absent: /user/model/:mid has no component yet, so
+ // entryLink returns [] and a model card does not navigate.
+ readonly hasSize = true;
+ readonly defaultName = DEFAULT_MODEL_NAME;
+
+ constructor(private modelService: ModelService) {}
+
+ isOwner = (entry: DashboardEntry): boolean => entry.model.isOwner;
+ validateName = validateModelName;
+ rename = (id: number, name: string) => this.modelService.updateModelName(id, name);
+ updateDescription = (id: number, description: string) => this.modelService.updateModelDescription(id, description);
+ // `retrieveOwners` arrives with the share modal and the filters, which need it.
+}
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts
new file mode 100644
index 00000000000..f7fb69b9f2b
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/project-resource.descriptor.ts
@@ -0,0 +1,35 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { ResourceDescriptor } from "../../../type/resource-descriptor";
+import { EntityType } from "../../../../hub/service/hub.service";
+import { USER_PROJECT } from "../../../../app-routing.constant";
+
+@Injectable({
+ providedIn: "root",
+})
+export class ProjectResourceDescriptor implements ResourceDescriptor {
+ readonly type = EntityType.Project;
+ readonly iconType = "container";
+ readonly privateRoute = USER_PROJECT;
+
+ // Projects are only ever listed to the user who owns them.
+ isOwner = (): boolean => true;
+}
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts
new file mode 100644
index 00000000000..4701cf643e4
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.spec.ts
@@ -0,0 +1,181 @@
+/**
+ * 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 { TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { of } from "rxjs";
+import { ResourceRegistryService } from "./resource-registry.service";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { EntityType } from "../../../../hub/service/hub.service";
+import { DatasetService } from "../dataset/dataset.service";
+import { ModelService } from "../model/model.service";
+import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
+import {
+ HUB_DATASET_RESULT_DETAIL,
+ HUB_WORKFLOW_RESULT_DETAIL,
+ USER_DATASET,
+ USER_PROJECT,
+ USER_WORKSPACE,
+} from "../../../../app-routing.constant";
+import { commonTestProviders } from "../../../../common/testing/test-utils";
+import { MODEL_ICON } from "../../../../common/icon/model-icon";
+
+const entry = (overrides: Partial>): DashboardEntry =>
+ ({ id: 7, accessibleUserIds: [], ...overrides }) as unknown as DashboardEntry;
+
+describe("ResourceRegistryService", () => {
+ let registry: ResourceRegistryService;
+ let workflowPersistService: { [k: string]: ReturnType };
+ let datasetService: { [k: string]: ReturnType };
+ let modelService: { [k: string]: ReturnType };
+
+ beforeEach(() => {
+ // Partial spies on purpose: the descriptors must not touch these until a caller asks.
+ workflowPersistService = {
+ updateWorkflowName: vi.fn().mockReturnValue(of({})),
+ updateWorkflowDescription: vi.fn().mockReturnValue(of({})),
+ retrieveOwners: vi.fn().mockReturnValue(of(["wf-owner"])),
+ retrieveWorkflowIDs: vi.fn().mockReturnValue(of([1, 2])),
+ };
+ datasetService = {
+ updateDatasetName: vi.fn().mockReturnValue(of({})),
+ updateDatasetDescription: vi.fn().mockReturnValue(of({})),
+ retrieveOwners: vi.fn().mockReturnValue(of(["ds-owner"])),
+ };
+
+ modelService = {
+ updateModelName: vi.fn().mockReturnValue(of({})),
+ updateModelDescription: vi.fn().mockReturnValue(of({})),
+ };
+
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ providers: [
+ { provide: WorkflowPersistService, useValue: workflowPersistService },
+ { provide: DatasetService, useValue: datasetService },
+ { provide: ModelService, useValue: modelService },
+ ...commonTestProviders,
+ ],
+ });
+ registry = TestBed.inject(ResourceRegistryService);
+ });
+
+ // ─── lookup ───────────────────────────────────────────────────────────────
+
+ it("resolves every kind the dashboard renders", () => {
+ expect(registry.get(EntityType.Workflow).iconType).toBe("project");
+ expect(registry.get(EntityType.Dataset).iconType).toBe("database");
+ expect(registry.get(EntityType.Project).iconType).toBe("container");
+ expect(registry.get(EntityType.File).iconType).toBe("folder-open");
+ expect(registry.get(EntityType.Model).iconType).toBe(MODEL_ICON);
+ });
+
+ it("refuses a kind it does not carry", () => {
+ // Computing units reach the dashboard as entities but never as list entries.
+ expect(() => registry.get(EntityType.ComputingUnit)).toThrowError("Unexpected type in DashboardEntry.");
+ expect(() => registry.get("quantum" as EntityType)).toThrowError("Unexpected type in DashboardEntry.");
+ });
+
+ // ─── capability checks ────────────────────────────────────────────────────
+
+ it("exposes rename and description only for the kinds that support them", () => {
+ for (const type of [EntityType.Workflow, EntityType.Dataset, EntityType.Model]) {
+ expect(registry.get(type).rename).toBeDefined();
+ expect(registry.get(type).updateDescription).toBeDefined();
+ }
+ // Models gain `retrieveOwners` with the share modal and the filters, which are the only callers.
+ expect(registry.get(EntityType.Model).retrieveOwners).toBeUndefined();
+ for (const type of [EntityType.Project, EntityType.File]) {
+ expect(registry.get(type).rename).toBeUndefined();
+ expect(registry.get(type).updateDescription).toBeUndefined();
+ }
+ });
+
+ it("offers an id filter only where the backend has an id endpoint", () => {
+ expect(registry.get(EntityType.Workflow).retrieveIds).toBeDefined();
+ expect(registry.get(EntityType.Dataset).retrieveIds).toBeUndefined();
+ expect(registry.get(EntityType.Model).retrieveIds).toBeUndefined();
+ });
+
+ it("validates names only where the backend restricts them", () => {
+ expect(registry.get(EntityType.Workflow).validateName).toBeUndefined();
+ expect(registry.get(EntityType.Dataset).validateName!("has spaces")).toContain("Invalid dataset name");
+ expect(registry.get(EntityType.Dataset).validateName!("fine-name_1")).toBeNull();
+ expect(registry.get(EntityType.Model).validateName!("has spaces")).toContain("Invalid model name");
+ expect(registry.get(EntityType.Model).validateName!("resnet-50")).toBeNull();
+ });
+
+ // ─── delegation ───────────────────────────────────────────────────────────
+
+ it("delegates each operation to the owning service", () => {
+ registry.get(EntityType.Workflow).rename!(1, "wf");
+ registry.get(EntityType.Workflow).updateDescription!(1, "d");
+ registry.get(EntityType.Dataset).rename!(2, "ds");
+ registry.get(EntityType.Dataset).updateDescription!(2, "d");
+ registry.get(EntityType.Model).rename!(3, "m");
+ registry.get(EntityType.Model).updateDescription!(3, "d");
+
+ expect(workflowPersistService["updateWorkflowName"]).toHaveBeenCalledWith(1, "wf");
+ expect(workflowPersistService["updateWorkflowDescription"]).toHaveBeenCalledWith(1, "d");
+ expect(datasetService["updateDatasetName"]).toHaveBeenCalledWith(2, "ds");
+ expect(datasetService["updateDatasetDescription"]).toHaveBeenCalledWith(2, "d");
+ expect(modelService["updateModelName"]).toHaveBeenCalledWith(3, "m");
+ expect(modelService["updateModelDescription"]).toHaveBeenCalledWith(3, "d");
+ });
+
+ it("reads ownership off the kind's own payload", () => {
+ expect(registry.get(EntityType.Workflow).isOwner(entry({ workflow: { isOwner: false } }))).toBe(false);
+ expect(registry.get(EntityType.Dataset).isOwner(entry({ dataset: { isOwner: true } }))).toBe(true);
+ expect(registry.get(EntityType.Model).isOwner(entry({ model: { isOwner: false } }))).toBe(false);
+ // Project and file entries carry no ownership payload at all, so theirs must not read one.
+ expect(registry.get(EntityType.Project).isOwner(entry({}))).toBe(true);
+ expect(registry.get(EntityType.File).isOwner(entry({}))).toBe(true);
+ });
+
+ // ─── entryLink ────────────────────────────────────────────────────────────
+
+ it("routes a viewer with access to the private page and everyone else to the hub", () => {
+ const workflow = entry({ type: EntityType.Workflow, id: 7, accessibleUserIds: [42] });
+ expect(registry.entryLink(workflow, 42)).toEqual([USER_WORKSPACE, "7"]);
+ expect(registry.entryLink(workflow, 99)).toEqual([HUB_WORKFLOW_RESULT_DETAIL, "7"]);
+ // An anonymous viewer is not on anyone's access list.
+ expect(registry.entryLink(workflow, undefined)).toEqual([HUB_WORKFLOW_RESULT_DETAIL, "7"]);
+
+ const dataset = entry({ type: EntityType.Dataset, id: 5, accessibleUserIds: [42] });
+ expect(registry.entryLink(dataset, 42)).toEqual([USER_DATASET, "5"]);
+ expect(registry.entryLink(dataset, 99)).toEqual([HUB_DATASET_RESULT_DETAIL, "5"]);
+ });
+
+ it("routes a kind with no hub page straight to its private page", () => {
+ // Projects have no hub presence, so access lists never come into it.
+ expect(registry.entryLink(entry({ type: EntityType.Project, id: 3 }), undefined)).toEqual([USER_PROJECT, "3"]);
+ });
+
+ it("leaves models unrouted until they have a page to open", () => {
+ // /user/model/:mid has no component yet; a link would hit the ** wildcard and land on Workflows.
+ expect(registry.get(EntityType.Model).privateRoute).toBeUndefined();
+ expect(registry.entryLink(entry({ type: EntityType.Model, id: 9 }), 42)).toEqual([]);
+ });
+
+ it("leaves an unroutable or unsaved entry unlinked", () => {
+ expect(registry.entryLink(entry({ type: EntityType.File, id: 8 }), 42)).toEqual([]);
+ expect(registry.entryLink(entry({ type: EntityType.Dataset, id: undefined }), 42)).toEqual([]);
+ expect(registry.entryLink(entry({ type: EntityType.Workflow, id: "draft" }), 42)).toEqual([]);
+ });
+});
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts
new file mode 100644
index 00000000000..4c472d678d8
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/resource-registry.service.ts
@@ -0,0 +1,77 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { ResourceDescriptor } from "../../../type/resource-descriptor";
+import { EntityType } from "../../../../hub/service/hub.service";
+import { WorkflowResourceDescriptor } from "./workflow-resource.descriptor";
+import { DatasetResourceDescriptor } from "./dataset-resource.descriptor";
+import { ProjectResourceDescriptor } from "./project-resource.descriptor";
+import { FileResourceDescriptor } from "./file-resource.descriptor";
+import { ModelResourceDescriptor } from "./model-resource.descriptor";
+
+/**
+ * The one place that knows every dashboard resource kind. Descriptors are injectable rather than a
+ * const map because each needs an HttpClient-backed service, which `inject()` cannot supply at
+ * module scope.
+ */
+@Injectable({
+ providedIn: "root",
+})
+export class ResourceRegistryService {
+ private readonly descriptors: ReadonlyMap;
+
+ constructor(
+ workflow: WorkflowResourceDescriptor,
+ dataset: DatasetResourceDescriptor,
+ project: ProjectResourceDescriptor,
+ file: FileResourceDescriptor,
+ model: ModelResourceDescriptor
+ ) {
+ // Computing units are deliberately absent: nothing in the dashboard renders them as entries.
+ this.descriptors = new Map(
+ [workflow, dataset, project, file, model].map(descriptor => [descriptor.type, descriptor])
+ );
+ }
+
+ public get(type: EntityType): ResourceDescriptor {
+ const descriptor = this.descriptors.get(type);
+ if (!descriptor) {
+ throw new Error("Unexpected type in DashboardEntry.");
+ }
+ return descriptor;
+ }
+
+ /**
+ * Where an entry's card links to: the owner-facing page when the viewer can reach it, the hub page
+ * otherwise. An entry with no route, or one not yet persisted, links nowhere.
+ */
+ public entryLink(entry: DashboardEntry, currentUid: number | undefined): string[] {
+ const descriptor = this.get(entry.type);
+ if (descriptor.privateRoute === undefined || typeof entry.id !== "number") {
+ return [];
+ }
+ if (descriptor.hubRoute === undefined) {
+ return [descriptor.privateRoute, String(entry.id)];
+ }
+ const reachableByViewer = currentUid !== undefined && entry.accessibleUserIds.includes(currentUid);
+ return [reachableByViewer ? descriptor.privateRoute : descriptor.hubRoute, String(entry.id)];
+ }
+}
diff --git a/frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts b/frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts
new file mode 100644
index 00000000000..79e1e4bec17
--- /dev/null
+++ b/frontend/src/app/dashboard/service/user/resource-registry/workflow-resource.descriptor.ts
@@ -0,0 +1,51 @@
+/**
+ * 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 { Injectable } from "@angular/core";
+import { DashboardEntry } from "../../../type/dashboard-entry";
+import { ResourceDescriptor } from "../../../type/resource-descriptor";
+import { EntityType } from "../../../../hub/service/hub.service";
+import {
+ DEFAULT_WORKFLOW_NAME,
+ WorkflowPersistService,
+} from "../../../../common/service/workflow-persist/workflow-persist.service";
+import { HUB_WORKFLOW_RESULT_DETAIL, USER_WORKSPACE } from "../../../../app-routing.constant";
+
+@Injectable({
+ providedIn: "root",
+})
+export class WorkflowResourceDescriptor implements ResourceDescriptor {
+ readonly type = EntityType.Workflow;
+ readonly iconType = "project";
+ readonly privateRoute = USER_WORKSPACE;
+ readonly hubRoute = HUB_WORKFLOW_RESULT_DETAIL;
+ readonly hasSize = true;
+ readonly defaultName = DEFAULT_WORKFLOW_NAME;
+
+ constructor(private workflowPersistService: WorkflowPersistService) {}
+
+ // Bound lazily, never in the constructor: specs hand these descriptors partial service spies,
+ // and reading an absent method up front would fail the whole TestBed.
+ isOwner = (entry: DashboardEntry): boolean => entry.workflow.isOwner;
+ rename = (id: number, name: string) => this.workflowPersistService.updateWorkflowName(id, name);
+ updateDescription = (id: number, description: string) =>
+ this.workflowPersistService.updateWorkflowDescription(id, description);
+ retrieveOwners = () => this.workflowPersistService.retrieveOwners();
+ retrieveIds = () => this.workflowPersistService.retrieveWorkflowIDs();
+}
diff --git a/frontend/src/app/dashboard/type/dashboard-entry.ts b/frontend/src/app/dashboard/type/dashboard-entry.ts
index 995618fb5f7..e4eac2688ba 100644
--- a/frontend/src/app/dashboard/type/dashboard-entry.ts
+++ b/frontend/src/app/dashboard/type/dashboard-entry.ts
@@ -21,10 +21,12 @@ import { DashboardFile } from "./dashboard-file.interface";
import { DashboardWorkflow } from "./dashboard-workflow.interface";
import { DashboardProject } from "./dashboard-project.interface";
import { DashboardDataset } from "./dashboard-dataset.interface";
+import { DashboardModel } from "./dashboard-model.interface";
import { DashboardWorkflowComputingUnit } from "../../common/type/workflow-computing-unit";
import {
isDashboardDataset,
isDashboardFile,
+ isDashboardModel,
isDashboardProject,
isDashboardWorkflow,
isDashboardWorkflowComputingUnit,
@@ -63,6 +65,7 @@ export class DashboardEntry {
| DashboardProject
| DashboardFile
| DashboardDataset
+ | DashboardModel
| DashboardWorkflowComputingUnit
) {
if (isDashboardWorkflow(value)) {
@@ -139,6 +142,25 @@ export class DashboardEntry {
this.isLiked = false;
this.accessibleUserIds = [];
this.coverImageUrl = value.dataset.coverImage;
+ } else if (isDashboardModel(value)) {
+ this.type = EntityType.Model;
+ this.id = value.model.mid;
+ this.name = value.model.name;
+ this.description = value.model.description;
+ this.creationTime = value.model.creationTime;
+ this.lastModifiedTime = value.model.creationTime;
+ this.accessLevel = value.accessPrivilege;
+ this.ownerName = "";
+ this.ownerEmail = value.ownerEmail;
+ this.ownerAvatar = "";
+ this.ownerId = value.model.ownerUid;
+ this.size = value.size;
+ this.viewCount = 0;
+ this.cloneCount = 0;
+ this.likeCount = 0;
+ this.isLiked = false;
+ this.accessibleUserIds = [];
+ this.coverImageUrl = value.model.coverImage;
} else if (isDashboardWorkflowComputingUnit(value)) {
this.type = EntityType.ComputingUnit;
this.id = value.computingUnit.cuid;
@@ -212,6 +234,13 @@ export class DashboardEntry {
return this.value;
}
+ get model(): DashboardModel {
+ if (!isDashboardModel(this.value)) {
+ throw new Error("Value is not of type DashboardModel");
+ }
+ return this.value;
+ }
+
get computingUnit(): DashboardWorkflowComputingUnit {
if (!isDashboardWorkflowComputingUnit(this.value)) {
throw new Error("Value is not of type DashboardWorkflowComputingUnit");
diff --git a/frontend/src/app/dashboard/type/dashboard-model.interface.ts b/frontend/src/app/dashboard/type/dashboard-model.interface.ts
new file mode 100644
index 00000000000..886ea250b53
--- /dev/null
+++ b/frontend/src/app/dashboard/type/dashboard-model.interface.ts
@@ -0,0 +1,28 @@
+/**
+ * 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 { Model } from "../../common/type/model";
+
+export interface DashboardModel {
+ isOwner: boolean;
+ ownerEmail: string;
+ model: Model;
+ accessPrivilege: "READ" | "WRITE" | "NONE";
+ size: number;
+}
diff --git a/frontend/src/app/dashboard/type/resource-descriptor.ts b/frontend/src/app/dashboard/type/resource-descriptor.ts
new file mode 100644
index 00000000000..bfba83a1679
--- /dev/null
+++ b/frontend/src/app/dashboard/type/resource-descriptor.ts
@@ -0,0 +1,50 @@
+/**
+ * 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 { Observable } from "rxjs";
+import { DashboardEntry } from "./dashboard-entry";
+import { EntityType } from "../../hub/service/hub.service";
+
+/**
+ * What one dashboard resource kind can do. Optional members are the capability check: a component
+ * asks `if (descriptor.rename)` instead of testing the entry type, so adding a resource is a new
+ * descriptor rather than another arm in every branch chain.
+ */
+export interface ResourceDescriptor {
+ readonly type: EntityType;
+ /** ng-zorro icon shown on this kind's cards and rows. */
+ readonly iconType: string;
+ /** Route to the owner-facing page; absent when the kind has no page of its own. */
+ readonly privateRoute?: string;
+ /** Route to the public hub page; absent when the kind is never browsed in the hub. */
+ readonly hubRoute?: string;
+ /** Whether an entry of this kind carries a size worth showing. */
+ readonly hasSize?: boolean;
+ isOwner(entry: DashboardEntry): boolean;
+ /** Applied when the user clears the name field; absent when the kind cannot be renamed. */
+ readonly defaultName?: string;
+ /** Returns an error message, or null when the name is acceptable. */
+ validateName?(name: string): string | null;
+ rename?(id: number, name: string): Observable;
+ updateDescription?(id: number, description: string): Observable;
+ /** Owners of this kind, for the filter dropdown. */
+ retrieveOwners?(): Observable;
+ /** Entry ids of this kind; absent when the backend exposes no such endpoint. */
+ retrieveIds?(): Observable;
+}
diff --git a/frontend/src/app/dashboard/type/search-result.ts b/frontend/src/app/dashboard/type/search-result.ts
index 8fc14361b17..8f0e64364d1 100644
--- a/frontend/src/app/dashboard/type/search-result.ts
+++ b/frontend/src/app/dashboard/type/search-result.ts
@@ -24,7 +24,9 @@ import { DashboardDataset } from "./dashboard-dataset.interface";
import { DashboardEntry } from "./dashboard-entry";
export interface SearchResultItem {
- resourceType: "workflow" | "project" | "file" | "dataset" | "computing-unit";
+ // "model" is listed because EntityType carries it; nothing populates a model result until the hub
+ // and unified-search backend lands.
+ resourceType: "workflow" | "project" | "file" | "dataset" | "model" | "computing-unit";
workflow?: DashboardWorkflow;
project?: DashboardProject;
file?: DashboardFile;
diff --git a/frontend/src/app/dashboard/type/type-predicates.ts b/frontend/src/app/dashboard/type/type-predicates.ts
index 8c128b2c113..81002675710 100644
--- a/frontend/src/app/dashboard/type/type-predicates.ts
+++ b/frontend/src/app/dashboard/type/type-predicates.ts
@@ -21,6 +21,7 @@ import { DashboardWorkflow } from "./dashboard-workflow.interface";
import { DashboardProject } from "./dashboard-project.interface";
import { DashboardFile } from "./dashboard-file.interface";
import { DashboardDataset } from "./dashboard-dataset.interface";
+import { DashboardModel } from "./dashboard-model.interface";
import { DashboardWorkflowComputingUnit } from "../../common/type/workflow-computing-unit";
import { isNonNullObject } from "../../common/util/predicate";
@@ -40,6 +41,10 @@ export function isDashboardDataset(value: any): value is DashboardDataset {
return !!value && isNonNullObject(value.dataset);
}
+export function isDashboardModel(value: any): value is DashboardModel {
+ return !!value && isNonNullObject(value.model);
+}
+
export function isDashboardWorkflowComputingUnit(value: any): value is DashboardWorkflowComputingUnit {
return !!value && isNonNullObject(value.computingUnit);
}
diff --git a/frontend/src/app/hub/component/hub.component.spec.ts b/frontend/src/app/hub/component/hub.component.spec.ts
index 5a883606394..dae531e4a52 100644
--- a/frontend/src/app/hub/component/hub.component.spec.ts
+++ b/frontend/src/app/hub/component/hub.component.spec.ts
@@ -44,6 +44,7 @@ function makeSidebarTabs(overrides: Partial = {}): SidebarTabs {
workflows_enabled: false,
compute_enabled: false,
datasets_enabled: false,
+ models_enabled: false,
quota_enabled: false,
forum_enabled: false,
about_enabled: false,
diff --git a/frontend/src/app/hub/service/hub.service.ts b/frontend/src/app/hub/service/hub.service.ts
index 4562ae9c8c8..61913fad3a2 100644
--- a/frontend/src/app/hub/service/hub.service.ts
+++ b/frontend/src/app/hub/service/hub.service.ts
@@ -29,6 +29,7 @@ export const WORKFLOW_BASE_URL = `${AppSettings.getApiEndpoint()}/workflow`;
export enum EntityType {
Workflow = "workflow",
Dataset = "dataset",
+ Model = "model",
Project = "project",
File = "file",
ComputingUnit = "computing-unit",