You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@texera.apache.org by gi...@apache.org on 2026/06/07 02:57:50 UTC
(texera) 01/01: feat: Add Card View to Workflows (#4216)
This is an automated email from the ASF dual-hosted git repository.
github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-4216-f2f056455d850f6d4f99d81ac7e128fb74906a44
in repository https://gitbox.apache.org/repos/asf/texera.git
commit 66c2ff17ed58763c73682007754dbc4f2c797bb4
Author: Matthew B. <mg...@uci.edu>
AuthorDate: Sat Jun 6 19:57:31 2026 -0700
feat: Add Card View to Workflows (#4216)
<!--
Thanks for sending a pull request (PR)! Here are some tips for you:
1. If this is your first time, please read our contributor guidelines:
[Contributing to
Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md)
2. Ensure you have added or run the appropriate tests for your PR
3. If the PR is work in progress, mark it a draft on GitHub.
4. Please write your PR title to summarize what this PR proposes, we
are following Conventional Commits style for PR titles as well.
5. Be sure to keep the PR description updated to reflect all changes.
-->
### What changes were proposed in this PR?
<!--
Please clarify what changes you are proposing. The purpose of this
section
is to outline the changes. Here are some tips for you:
1. If you propose a new API, clarify the use case for a new API.
2. If you fix a bug, you can clarify why it is a bug.
3. If it is a refactoring, clarify what has been changed.
3. It would be helpful to include a before-and-after comparison using
screenshots or GIFs.
4. Please consider writing useful notes for better and faster reviews.
-->
This PR adds a Grid View (Tile View) for workflows in the dashboard.
- New Card Component: Displays workflows as tiles with a preview image.
- Grid Layout: Responsive grid that adapts to screen size.
- Enhanced Metadata: Shows size, dates, and view counts; pinned to the
bottom.
- Quick Actions: Edit description, rename, duplicate, and share directly
from the card.
- Toggle: Added a button to switch between List and Grid views.
### Old View
<img width="2269" height="1009" alt="image"
src="https://github.com/user-attachments/assets/0174952f-e760-4590-aed7-72c2dfdccd99"
/>
### New View
<img width="2269" height="1009" alt="image"
src="https://github.com/user-attachments/assets/10645c01-4142-4408-918c-69d463953985"
/>
### Any related issues, documentation, discussions?
<!--
Please use this section to link other resources if not mentioned
already.
1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves
#1234`
or `Closes #1234`. If it is only related, simply mention the issue
number.
2. If there is design documentation, please add the link.
3. If there is a discussion in the mailing list, please add the link.
-->
N/A
### How was this PR tested?
<!--
If tests were added, say they were added here. Or simply mention that if
the PR
is tested with existing test cases. Make sure to include/update test
cases that
check the changes thoroughly, including negative and positive cases if
possible.
If it was tested in a way different from regular unit tests, please
clarify how
you tested step by step, ideally copy and paste-able, so that other
reviewers can
test and check, and descendants can verify in the future. If tests were
not added,
please describe why they were not added and/or why it was difficult to
add.
-->
- Manually verified switching between views.
- Checked card layout responsiveness.
- Tested all card actions (edit, like, share, delete).
### Was this PR authored or co-authored using generative AI tooling?
<!--
If generative AI tooling has been used in the process of authoring this
PR,
please include the phrase: 'Generated-by: ' followed by the name of the
tool
and its version. If no, write 'No'.
Please refer to the [ASF Generative Tooling
Guidance](https://www.apache.org/legal/generative-tooling.html) for
details.
-->
Reviewed by Gemini 3
---------
Co-authored-by: Chen Li <ch...@gmail.com>
Co-authored-by: Claude Opus 4.7 (1M context) <no...@anthropic.com>
---
frontend/src/app/app.module.ts | 2 +
.../list-item/card-item/card-item.component.html | 245 +++++++++++
.../list-item/card-item/card-item.component.scss | 254 ++++++++++++
.../card-item/card-item.component.spec.ts | 160 ++++++++
.../list-item/card-item/card-item.component.ts | 450 +++++++++++++++++++++
.../user-workflow/user-workflow.component.html | 38 ++
.../user/user-workflow/user-workflow.component.ts | 3 +
7 files changed, 1152 insertions(+)
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 511395365d..5ddb97944a 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -162,6 +162,7 @@ import { ResultExportationComponent } from "./workspace/component/result-exporta
import { ReportGenerationService } from "./workspace/service/report-generation/report-generation.service";
import { SearchBarComponent } from "./dashboard/component/user/search-bar/search-bar.component";
import { ListItemComponent } from "./dashboard/component/user/list-item/list-item.component";
+import { CardItemComponent } from "./dashboard/component/user/list-item/card-item/card-item.component";
import { HubComponent } from "./hub/component/hub.component";
import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component";
import { LandingPageComponent } from "./hub/component/landing-page/landing-page.component";
@@ -347,6 +348,7 @@ registerLocaleData(en);
HighlightSearchTermsPipe,
SearchBarComponent,
ListItemComponent,
+ CardItemComponent,
SearchResultsComponent,
HubComponent,
HubWorkflowDetailComponent,
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
new file mode 100644
index 0000000000..66fec83bdd
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
@@ -0,0 +1,245 @@
+<!--
+ 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-card
+ class="card-item"
+ [class.selected]="entry.checked"
+ [nzBodyStyle]="{ padding: '0' }"
+ (mouseenter)="hovering = true"
+ (mouseleave)="hovering = false">
+ <!-- Preview Section (Blank Space) -->
+ <div
+ class="card-preview"
+ [routerLink]="entryLink">
+ <!-- Checkbox overlay -->
+ <div
+ class="card-checkbox"
+ *ngIf="isPrivateSearch && entry.type === 'workflow'"
+ (click)="$event.stopPropagation()">
+ <label
+ nz-checkbox
+ [(ngModel)]="entry.checked"
+ (ngModelChange)="onCheckboxChange(entry)"></label>
+ </div>
+ <!-- User Avatar Overlay -->
+ <div
+ class="card-user-avatar"
+ title="{{ entry.ownerName || 'User' }}">
+ <texera-user-avatar
+ [googleAvatar]="entry.ownerGoogleAvatar"
+ userColor="#1E90FF"
+ [userName]="entry.ownerName || 'User'"
+ [isOwner]="entry.ownerId === this.currentUid"></texera-user-avatar>
+ </div>
+ <!-- Placeholder or Preview Image -->
+ <img
+ class="card-preview-image"
+ src="assets/card_background.jpg"
+ alt="Workflow Preview" />
+ </div>
+
+ <!-- Content Section -->
+ <div class="card-content">
+ <!-- Header: Icon, Name, ID -->
+ <div
+ class="card-header"
+ [routerLink]="entryLink">
+ <div class="title-container">
+ <i
+ nz-icon
+ [nzType]="iconType"
+ class="type-icon"></i>
+
+ <div class="name-container">
+ <div
+ class="resource-name truncate-single-line"
+ *ngIf="!editingName"
+ title="{{ entry.name }}">
+ {{ entry.name }}
+ </div>
+ <input
+ *ngIf="editingName"
+ #nameInput
+ class="resource-name-edit-input"
+ [(ngModel)]="entry.name"
+ (blur)="confirmUpdateCustomName(entry.name)"
+ (keydown.enter)="confirmUpdateCustomName(entry.name)"
+ (click)="$event.stopPropagation()"
+ autofocus />
+ </div>
+ </div>
+
+ <!-- Edit Name Button -->
+ <button
+ *ngIf="isPrivateSearch"
+ nz-button
+ nzType="text"
+ size="small"
+ class="edit-btn"
+ (click)="onEditName(); $event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="edit"></i>
+ </button>
+ </div>
+
+ <!-- Description -->
+ <div
+ class="card-description"
+ [routerLink]="entryLink">
+ <div
+ class="resource-description"
+ *ngIf="!editingDescription"
+ (click)="onEditDescription(); $event.stopPropagation()"
+ title="{{ entry.description }}">
+ {{ entry.description ? entry.description : (hovering && editable ? 'Write a description...' : '') }}
+ </div>
+ <textarea
+ *ngIf="editingDescription"
+ #descriptionInput
+ class="resource-description-edit-textarea"
+ [(ngModel)]="entry.description"
+ (blur)="confirmUpdateCustomDescription(entry.description)"
+ (keydown.enter)="confirmUpdateCustomDescription(entry.description)"
+ (click)="$event.stopPropagation()"
+ autofocus></textarea>
+ </div>
+
+ <!-- Meta Info: Owner, Dates, Size, Views -->
+ <div class="card-meta">
+ <div class="meta-details">
+ <div class="meta-row">
+ <span title="Created"
+ ><i
+ nz-icon
+ nzType="calendar"
+ nzTheme="outline"></i>
+ {{ formatTime(entry.creationTime) }}</span
+ >
+ <span
+ *ngIf="size"
+ title="Size"
+ ><i
+ nz-icon
+ nzType="file"
+ nzTheme="outline"></i>
+ {{ formatSize(size) }}</span
+ >
+ </div>
+ <div class="meta-row">
+ <span title="Edited"
+ ><i
+ nz-icon
+ nzType="edit"
+ nzTheme="outline"></i>
+ {{ formatTime(entry.lastModifiedTime) }}</span
+ >
+ <span title="Views"
+ ><i
+ nz-icon
+ nzType="eye"
+ nzTheme="outline"></i>
+ {{ formatCount(viewCount) }}</span
+ >
+ </div>
+ </div>
+ </div>
+
+ <!-- Actions Footer -->
+ <div class="card-actions">
+ <!-- Like Button -->
+ <button
+ *ngIf="!isPrivateSearch"
+ nz-button
+ nzType="text"
+ class="action-btn like-btn"
+ [class.liked]="isLiked"
+ [disabled]="!currentUid"
+ (click)="toggleLike(); $event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="heart"
+ [nzTheme]="isLiked ? 'fill' : 'outline'"></i>
+ <span>{{ formatCount(this.likeCount) }}</span>
+ </button>
+
+ <!-- Private Search Actions -->
+ <div
+ class="private-actions"
+ *ngIf="isPrivateSearch">
+ <button
+ nz-button
+ nzType="text"
+ class="action-btn"
+ title="Detail"
+ *ngIf="entry.type==='workflow'"
+ (click)="openDetailModal(this.entry.id); $event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="eye"></i>
+ </button>
+ <button
+ nz-button
+ nzType="text"
+ class="action-btn"
+ title="Share"
+ (click)="onClickOpenShareAccess(); $event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="share-alt"></i>
+ </button>
+ <button
+ nz-button
+ nzType="text"
+ class="action-btn"
+ title="Copy"
+ *ngIf="entry.type==='workflow'"
+ (click)="duplicated.emit(); $event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="copy"></i>
+ </button>
+ <button
+ nz-button
+ nzType="text"
+ class="action-btn"
+ title="Download"
+ *ngIf="entry.type === 'workflow' || entry.type === 'dataset'"
+ (click)="onClickDownload(); $event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="cloud-download"></i>
+ </button>
+ <button
+ nz-button
+ nzType="text"
+ class="action-btn delete-btn"
+ title="Delete"
+ [disabled]="disableDelete"
+ nz-popconfirm
+ nzPopconfirmTitle="Confirm to delete this item."
+ (nzOnConfirm)="deleted.emit()"
+ (click)="$event.stopPropagation()">
+ <i
+ nz-icon
+ nzType="delete"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+</nz-card>
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss
new file mode 100644
index 0000000000..a0b7c89c79
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss
@@ -0,0 +1,254 @@
+/**
+ * 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.
+ */
+// Styled to match the dataset card view (dataset-card-item.component.scss) for
+// a consistent card look across the dashboard: 8px radius, 124px cover, a
+// muted #8c8c8c / #595959 meta palette, #f0f0f0 dividers and a #e0506e like
+// accent. Markup/structure intentionally unchanged.
+
+.card-item {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ transition: box-shadow 0.2s;
+ overflow: hidden;
+ border-radius: 8px;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+ }
+
+ &.selected {
+ border-color: #1e90ff;
+ background-color: #e6f7ff;
+ }
+
+ ::ng-deep .ant-card-body {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.card-preview {
+ height: 124px;
+ background-color: #f5f5f5;
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.card-preview-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+
+.card-checkbox {
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ z-index: 10;
+}
+
+.card-user-avatar {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ z-index: 10;
+ display: inline-flex;
+ padding: 2px;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.card-content {
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ flex: 1;
+ min-width: 0;
+}
+
+.card-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ gap: 6px;
+}
+
+.title-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ overflow: hidden;
+ flex: 1;
+ min-width: 0;
+}
+
+.type-icon {
+ flex-shrink: 0;
+ font-size: 16px;
+ color: #8c8c8c;
+}
+
+.name-container {
+ flex: 1;
+ overflow: hidden;
+}
+
+.resource-name {
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.35;
+ color: #1f1f1f;
+}
+
+.resource-name-edit-input {
+ width: 100%;
+ font-size: 15px;
+ font-weight: 600;
+ padding: 2px 4px;
+}
+
+.edit-btn {
+ flex-shrink: 0;
+ opacity: 0;
+ color: #8c8c8c;
+ transition: opacity 0.2s;
+
+ &:hover {
+ color: #1f1f1f;
+ }
+}
+
+.card-item:hover .edit-btn {
+ opacity: 1;
+}
+
+.card-description {
+ flex: 0 0 auto;
+ /* Do not grow */
+ height: 56px;
+ /* Fixed height */
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.resource-description {
+ font-size: 13px;
+ color: #8c8c8c;
+ line-height: 1.4;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ height: 100%;
+}
+
+.resource-description-edit-textarea {
+ width: 100%;
+ height: 100%;
+ resize: none;
+ font-size: 13px;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+}
+
+.card-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ font-size: 12px;
+ color: #8c8c8c;
+ margin-top: auto;
+}
+
+.meta-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.meta-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #595959;
+
+ span {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ white-space: nowrap;
+
+ i {
+ font-size: 12px;
+ color: #8c8c8c;
+ }
+ }
+}
+
+.card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top: 1px solid #f0f0f0;
+ padding-top: 8px;
+ margin-top: 8px;
+}
+
+.action-btn {
+ padding: 4px 8px;
+ border-radius: 4px;
+ color: #8c8c8c;
+
+ &:hover {
+ color: #1f1f1f;
+ background: #f0f0f0;
+ }
+}
+
+.like-btn {
+ &.liked,
+ &:not([disabled]):hover {
+ color: #e0506e;
+ }
+}
+
+.liked {
+ color: #e0506e;
+}
+
+.delete-btn:hover {
+ color: #ff4d4f;
+ background: #fff1f0;
+}
+
+.truncate-single-line {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts
new file mode 100644
index 0000000000..f39f318c34
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts
@@ -0,0 +1,160 @@
+/**
+ * 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 { ComponentFixture, TestBed } from "@angular/core/testing";
+import { CardItemComponent } from "./card-item.component";
+import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { of, throwError } from "rxjs";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterTestingModule } from "@angular/router/testing";
+import { StubUserService } from "../../../../../common/service/user/stub-user.service";
+import { UserService } from "../../../../../common/service/user/user.service";
+import { commonTestProviders } from "../../../../../common/testing/test-utils";
+import type { Mocked } from "vitest";
+import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
+import { HUB_WORKFLOW_RESULT_DETAIL, USER_WORKSPACE } from "../../../../../app-routing.constant";
+
+function makeWorkflowEntry(overrides: Partial<DashboardEntry> = {}): DashboardEntry {
+ return {
+ id: 1,
+ name: "wf",
+ description: "",
+ type: "workflow",
+ workflow: { isOwner: true },
+ accessibleUserIds: [],
+ likeCount: 0,
+ viewCount: 0,
+ isLiked: false,
+ size: 0,
+ ...overrides,
+ } as unknown as DashboardEntry;
+}
+
+describe("CardItemComponent", () => {
+ let component: CardItemComponent;
+ let fixture: ComponentFixture<CardItemComponent>;
+ let workflowPersistService: Mocked<WorkflowPersistService>;
+
+ beforeEach(async () => {
+ const workflowPersistServiceSpy = { updateWorkflowName: vi.fn(), updateWorkflowDescription: vi.fn() };
+
+ await TestBed.configureTestingModule({
+ imports: [CardItemComponent, HttpClientTestingModule, BrowserAnimationsModule, RouterTestingModule],
+ providers: [
+ { provide: WorkflowPersistService, useValue: workflowPersistServiceSpy },
+ { provide: UserService, useClass: StubUserService },
+ NzModalService,
+ ...commonTestProviders,
+ ],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CardItemComponent);
+ component = fixture.componentInstance;
+ workflowPersistService = TestBed.inject(WorkflowPersistService) as unknown as Mocked<WorkflowPersistService>;
+ component.entry = makeWorkflowEntry();
+ fixture.detectChanges();
+ });
+
+ it("should update workflow name successfully", () => {
+ const newName = "New Workflow Name";
+ component.entry = makeWorkflowEntry({ id: 1, name: "Old Name" });
+ workflowPersistService.updateWorkflowName.mockReturnValue(of({} as Response));
+
+ component.confirmUpdateCustomName(newName);
+
+ expect(workflowPersistService.updateWorkflowName).toHaveBeenCalledWith(1, newName);
+ expect(component.entry.name).toBe(newName);
+ expect(component.editingName).toBe(false);
+ });
+
+ it("should revert the name and exit edit mode when the update fails", () => {
+ component.entry = makeWorkflowEntry({ id: 1, name: "Old Name" });
+ component.originalName = "Old Name";
+ workflowPersistService.updateWorkflowName.mockReturnValue(throwError(() => new Error("Error")));
+
+ component.confirmUpdateCustomName("New Workflow Name");
+
+ expect(component.entry.name).toBe("Old Name");
+ expect(component.editingName).toBe(false);
+ });
+
+ it("should update workflow description successfully", () => {
+ component.entry = makeWorkflowEntry({ id: 1, description: "Old Description" });
+ workflowPersistService.updateWorkflowDescription.mockReturnValue(of({} as Response));
+
+ component.confirmUpdateCustomDescription("New Description");
+
+ expect(workflowPersistService.updateWorkflowDescription).toHaveBeenCalledWith(1, "New Description");
+ expect(component.entry.description).toBe("New Description");
+ expect(component.editingDescription).toBe(false);
+ });
+
+ it("should revert the description and exit edit mode when the update fails", () => {
+ component.entry = makeWorkflowEntry({ id: 1, description: "Old Description" });
+ component.originalDescription = "Old Description";
+ workflowPersistService.updateWorkflowDescription.mockReturnValue(throwError(() => new Error("Error")));
+
+ component.confirmUpdateCustomDescription("New Description");
+
+ expect(component.entry.description).toBe("Old Description");
+ expect(component.editingDescription).toBe(false);
+ });
+
+ it("should route owners to the workspace and non-owners to the hub detail view", () => {
+ component.currentUid = 42;
+ component.entry = makeWorkflowEntry({ id: 7, accessibleUserIds: [42] });
+ component.ngOnChanges({ entry: { currentValue: component.entry } as any });
+ expect(component.entryLink).toEqual([USER_WORKSPACE, "7"]);
+
+ component.entry = makeWorkflowEntry({ id: 7, accessibleUserIds: [99] });
+ component.ngOnChanges({ entry: { currentValue: component.entry } as any });
+ expect(component.entryLink).toEqual([HUB_WORKFLOW_RESULT_DETAIL, "7"]);
+ });
+
+ it("should format counts as kilo for values >= 1000", () => {
+ expect(component.formatCount(999)).toBe("999");
+ expect(component.formatCount(1500)).toBe("1.5k");
+ expect(component.formatCount(0)).toBe("0");
+ });
+
+ it("should return 'Unknown' for undefined timestamps", () => {
+ expect(component.formatTime(undefined)).toBe("Unknown");
+ });
+
+ it("should emit deleted when the parent triggers the delete confirmation", () => {
+ const spy = vi.fn();
+ component.deleted.subscribe(spy);
+ component.deleted.emit();
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it("should toggle the entry checked flag and emit checkboxChanged", () => {
+ const entry = makeWorkflowEntry({ checked: false } as any);
+ component.entry = entry;
+ const spy = vi.fn();
+ component.checkboxChanged.subscribe(spy);
+
+ component.onCheckboxChange(entry);
+
+ expect((entry as any).checked).toBe(true);
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
new file mode 100644
index 0000000000..c062b63fea
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
@@ -0,0 +1,450 @@
+/**
+ * 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 {
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChanges,
+ ViewChild,
+} from "@angular/core";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NgIf } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { RouterLink } from "@angular/router";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzCheckboxComponent } from "ng-zorro-antd/checkbox";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
+import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
+import { ShareAccessComponent } from "../../share-access/share-access.component";
+import { UserAvatarComponent } from "../../user-avatar/user-avatar.component";
+import {
+ DEFAULT_WORKFLOW_NAME,
+ WorkflowPersistService,
+} from "src/app/common/service/workflow-persist/workflow-persist.service";
+import { firstValueFrom } from "rxjs";
+import { HubWorkflowDetailComponent } from "../../../../../hub/component/workflow/detail/hub-workflow-detail.component";
+import { ActionType, HubService } from "../../../../../hub/service/hub.service";
+import { DownloadService } from "src/app/dashboard/service/user/download/download.service";
+import { formatSize } from "src/app/common/util/size-formatter.util";
+import { DatasetService, DEFAULT_DATASET_NAME } from "../../../../service/user/dataset/dataset.service";
+import { NotificationService } from "../../../../../common/service/notification/notification.service";
+import {
+ HUB_DATASET_RESULT_DETAIL,
+ HUB_WORKFLOW_RESULT_DETAIL,
+ USER_DATASET,
+ USER_PROJECT,
+ USER_WORKSPACE,
+} from "../../../../../app-routing.constant";
+import { isDefined } from "../../../../../common/util/predicate";
+
+@UntilDestroy()
+@Component({
+ selector: "texera-card-item",
+ templateUrl: "./card-item.component.html",
+ styleUrls: ["./card-item.component.scss"],
+ imports: [
+ NzCardComponent,
+ RouterLink,
+ NgIf,
+ FormsModule,
+ NzCheckboxComponent,
+ UserAvatarComponent,
+ NzIconDirective,
+ NzButtonComponent,
+ NzPopconfirmDirective,
+ NzWaveDirective,
+ ɵNzTransitionPatchDirective,
+ ],
+})
+export class CardItemComponent implements OnChanges {
+ private owners: number[] = [];
+ public originalName: string = "";
+ public originalDescription: string | undefined = undefined;
+ public disableDelete: boolean = false;
+ @Input() currentUid: number | undefined;
+ @ViewChild("nameInput") nameInput!: ElementRef;
+ @ViewChild("descriptionInput") descriptionInput!: ElementRef;
+ editingName = false;
+ editingDescription = false;
+ likeCount: number = 0;
+ viewCount = 0;
+ entryLink: string[] = [];
+ size: number | undefined = 0;
+ public iconType: string = "";
+ isLiked: boolean = false;
+ @Input() isPrivateSearch = false;
+ @Input() editable = false;
+ private _entry?: DashboardEntry;
+ hovering: boolean = false;
+
+ @Input()
+ get entry(): DashboardEntry {
+ if (!this._entry) {
+ throw new Error("entry property must be provided.");
+ }
+ return this._entry;
+ }
+
+ set entry(value: DashboardEntry) {
+ this._entry = value;
+ }
+
+ @Output() checkboxChanged = new EventEmitter<void>();
+ @Output() deleted = new EventEmitter<void>();
+ @Output() duplicated = new EventEmitter<void>();
+ @Output() refresh = new EventEmitter<void>();
+
+ constructor(
+ private modalService: NzModalService,
+ private workflowPersistService: WorkflowPersistService,
+ private datasetService: DatasetService,
+ private modal: NzModalService,
+ private hubService: HubService,
+ private downloadService: DownloadService,
+ private cdr: ChangeDetectorRef,
+ private notificationService: NotificationService
+ ) {}
+
+ initializeEntry() {
+ if (this.entry.type === "workflow") {
+ if (typeof this.entry.id === "number") {
+ this.disableDelete = !this.entry.workflow.isOwner;
+ this.owners = this.entry.accessibleUserIds;
+ if (this.currentUid !== undefined && this.owners.includes(this.currentUid)) {
+ this.entryLink = [USER_WORKSPACE, String(this.entry.id)];
+ } else {
+ this.entryLink = [HUB_WORKFLOW_RESULT_DETAIL, String(this.entry.id)];
+ }
+ this.size = this.entry.size;
+ }
+ this.iconType = "project";
+ } else if (this.entry.type === "project") {
+ this.entryLink = [USER_PROJECT, String(this.entry.id)];
+ this.iconType = "container";
+ } else if (this.entry.type === "dataset") {
+ if (typeof this.entry.id === "number") {
+ this.disableDelete = !this.entry.dataset.isOwner;
+ this.owners = this.entry.accessibleUserIds;
+ if (this.currentUid !== undefined && this.owners.includes(this.currentUid)) {
+ this.entryLink = [USER_DATASET, String(this.entry.id)];
+ } else {
+ this.entryLink = [HUB_DATASET_RESULT_DETAIL, String(this.entry.id)];
+ }
+ this.iconType = "database";
+ this.size = this.entry.size;
+ }
+ } else if (this.entry.type === "file") {
+ // not sure where to redirect
+ this.iconType = "folder-open";
+ } else {
+ throw new Error("Unexpected type in DashboardEntry.");
+ }
+ this.likeCount = this.entry.likeCount;
+ this.viewCount = this.entry.viewCount;
+ this.isLiked = this.entry.isLiked;
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes["entry"]) {
+ this.initializeEntry();
+ }
+ }
+
+ onCheckboxChange(entry: DashboardEntry): void {
+ entry.checked = !entry.checked;
+ this.cdr.markForCheck();
+ this.checkboxChanged.emit();
+ }
+
+ public async onClickOpenShareAccess(): Promise<void> {
+ let modal: NzModalRef<ShareAccessComponent> | undefined;
+
+ if (this.entry.type === "workflow") {
+ modal = this.modalService.create({
+ nzContent: ShareAccessComponent,
+ nzData: {
+ writeAccess: this.entry.workflow.accessLevel === "WRITE",
+ type: this.entry.type,
+ id: this.entry.id,
+ allOwners: await firstValueFrom(this.workflowPersistService.retrieveOwners()),
+ inWorkspace: false,
+ },
+ nzFooter: null,
+ nzTitle: "Share this workflow with others",
+ nzCentered: true,
+ nzWidth: "700px",
+ });
+ } else if (this.entry.type === "dataset") {
+ modal = this.modalService.create({
+ nzContent: ShareAccessComponent,
+ nzData: {
+ writeAccess: this.entry.accessLevel === "WRITE",
+ type: "dataset",
+ id: this.entry.id,
+ allOwners: await firstValueFrom(this.datasetService.retrieveOwners()),
+ },
+ nzFooter: null,
+ nzTitle: "Share this dataset with others",
+ nzCentered: true,
+ nzWidth: "700px",
+ });
+ }
+ if (modal) {
+ modal.componentInstance?.refresh.pipe(untilDestroyed(this)).subscribe(() => {
+ this.refresh.emit();
+ });
+ }
+ }
+
+ public onClickDownload = (): void => {
+ if (!this.entry.id) return;
+
+ if (this.entry.type === "workflow") {
+ this.downloadService
+ .downloadWorkflow(this.entry.id, this.entry.workflow.workflow.name)
+ .pipe(untilDestroyed(this))
+ .subscribe();
+ } else if (this.entry.type === "dataset") {
+ this.downloadService.downloadDataset(this.entry.id, this.entry.name).pipe(untilDestroyed(this)).subscribe();
+ }
+ };
+
+ onEditName(): void {
+ this.originalName = this.entry.name;
+ this.editingName = true;
+ setTimeout(() => {
+ if (this.nameInput) {
+ const inputElement = this.nameInput.nativeElement;
+ const valueLength = inputElement.value.length;
+ inputElement.focus();
+ inputElement.setSelectionRange(valueLength, valueLength);
+ }
+ }, 0);
+ }
+
+ onEditDescription(): void {
+ this.originalDescription = this.entry.description;
+ this.editingDescription = true;
+ setTimeout(() => {
+ if (this.descriptionInput) {
+ const textareaElement = this.descriptionInput.nativeElement;
+ const valueLength = textareaElement.value.length;
+ textareaElement.focus();
+ textareaElement.setSelectionRange(valueLength, valueLength);
+ }
+ }, 0);
+ }
+
+ private updateProperty(
+ updateMethod: (id: number, value: string) => any,
+ propertyName: "name" | "description",
+ newValue: string,
+ originalValue: string | undefined
+ ): void {
+ if (!this.entry.id) {
+ this.notificationService.error("Id is missing");
+ return;
+ }
+
+ updateMethod(this.entry.id, newValue)
+ .pipe(untilDestroyed(this))
+ .subscribe({
+ next: () => {
+ this.entry[propertyName] = newValue; // Dynamic property assignment
+ },
+ error: () => {
+ this.notificationService.error("Update failed");
+ (this.entry as any)[propertyName] = originalValue ?? ""; // Fallback to original value
+ this.setEditingState(propertyName, false);
+ },
+ complete: () => {
+ this.setEditingState(propertyName, false);
+ },
+ });
+ }
+
+ private setEditingState(propertyName: "name" | "description", state: boolean): void {
+ if (propertyName === "name") {
+ this.editingName = state;
+ } else if (propertyName === "description") {
+ this.editingDescription = state;
+ }
+ }
+
+ public confirmUpdateCustomName(name: string): void {
+ if (this.entry.name === this.originalName) {
+ this.editingName = false;
+ return;
+ }
+ const newName = this.entry.type === "workflow" ? name || DEFAULT_WORKFLOW_NAME : name || DEFAULT_DATASET_NAME;
+
+ if (this.entry.type === "workflow") {
+ this.updateProperty(
+ this.workflowPersistService.updateWorkflowName.bind(this.workflowPersistService),
+ "name",
+ newName,
+ this.originalName
+ );
+ } else if (this.entry.type === "dataset") {
+ this.updateProperty(
+ this.datasetService.updateDatasetName.bind(this.datasetService),
+ "name",
+ newName,
+ this.originalName
+ );
+ }
+ }
+
+ public confirmUpdateCustomDescription(description: string | undefined): void {
+ if (this.entry.description === this.originalDescription) {
+ this.editingDescription = false;
+ return;
+ }
+ const updatedDescription = description ?? "";
+
+ if (this.entry.type === "workflow") {
+ this.updateProperty(
+ this.workflowPersistService.updateWorkflowDescription.bind(this.workflowPersistService),
+ "description",
+ updatedDescription,
+ this.originalDescription
+ );
+ } else if (this.entry.type === "dataset") {
+ this.updateProperty(
+ this.datasetService.updateDatasetDescription.bind(this.datasetService),
+ "description",
+ updatedDescription,
+ this.originalDescription
+ );
+ }
+ }
+
+ formatTime(timestamp: number | undefined): string {
+ if (timestamp === undefined) {
+ return "Unknown"; // Return "Unknown" if the timestamp is undefined
+ }
+
+ const currentTime = new Date().getTime();
+ const timeDifference = currentTime - timestamp;
+
+ const minutesAgo = Math.floor(timeDifference / (1000 * 60));
+ const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60));
+ const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+ const weeksAgo = Math.floor(daysAgo / 7);
+
+ if (minutesAgo < 60) {
+ return `${minutesAgo} minutes ago`;
+ } else if (hoursAgo < 24) {
+ return `${hoursAgo} hours ago`;
+ } else if (daysAgo < 7) {
+ return `${daysAgo} days ago`;
+ } else if (weeksAgo < 4) {
+ return `${weeksAgo} weeks ago`;
+ } else {
+ return new Date(timestamp).toLocaleDateString();
+ }
+ }
+
+ openDetailModal(wid: number | undefined): void {
+ const modalRef = this.modal.create({
+ nzTitle: "Workflow Detail",
+ nzContent: HubWorkflowDetailComponent,
+ nzData: {
+ wid: wid ?? 0,
+ },
+ nzFooter: null,
+ nzStyle: { width: "60%" },
+ nzBodyStyle: { maxHeight: "70vh", overflow: "auto" },
+ });
+
+ const instance = modalRef.componentInstance;
+ if (instance) {
+ if (wid !== undefined) {
+ this.hubService
+ .getCounts([this.entry.type], [wid], [ActionType.View])
+ .pipe(untilDestroyed(this))
+ .subscribe(counts => {
+ const count = counts[0];
+ this.viewCount = (count?.counts.view ?? 0) + 1; // hacky fix to display view correctly
+ });
+ }
+ }
+ }
+
+ toggleLike(): void {
+ const userId = this.currentUid;
+ if (!isDefined(userId) || !isDefined(this.entry.id)) {
+ return;
+ }
+
+ const entryId = this.entry.id!;
+
+ if (this.isLiked) {
+ this.hubService
+ .postUnlike(entryId, this.entry.type)
+ .pipe(untilDestroyed(this))
+ .subscribe((success: boolean) => {
+ if (success) {
+ this.isLiked = false;
+ this.hubService
+ .getCounts([this.entry.type], [entryId], [ActionType.Like])
+ .pipe(untilDestroyed(this))
+ .subscribe(counts => {
+ this.likeCount = counts[0].counts.like ?? 0;
+ });
+ }
+ });
+ } else {
+ this.hubService
+ .postLike(entryId, this.entry.type)
+ .pipe(untilDestroyed(this))
+ .subscribe((success: boolean) => {
+ if (success) {
+ this.isLiked = true;
+ this.hubService
+ .getCounts([this.entry.type], [entryId], [ActionType.Like])
+ .pipe(untilDestroyed(this))
+ .subscribe(counts => {
+ this.likeCount = counts[0].counts.like ?? 0;
+ });
+ }
+ });
+ }
+ }
+
+ formatCount(count: number): string {
+ if (count >= 1000) {
+ return (count / 1000).toFixed(1) + "k";
+ }
+ return count.toString();
+ }
+
+ // alias for formatSize
+ formatSize = formatSize;
+}
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html
index 1873658797..7275b38895 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html
+++ b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html
@@ -131,6 +131,26 @@
nzTheme="outline"
nzType="minus-square"></i>
</button>
+ <button
+ nz-button
+ title="List View"
+ (click)="viewType = 'list'"
+ [nzType]="viewType === 'list' ? 'primary' : 'default'">
+ <i
+ nz-icon
+ nzType="bars"
+ nzTheme="outline"></i>
+ </button>
+ <button
+ nz-button
+ title="Card View"
+ (click)="viewType = 'card'"
+ [nzType]="viewType === 'card' ? 'primary' : 'default'">
+ <i
+ nz-icon
+ nzType="appstore"
+ nzTheme="outline"></i>
+ </button>
</nz-space-compact>
<texera-filters
[pid]="pid"
@@ -153,9 +173,27 @@
</nz-select>
</div>
+ <ng-template
+ #workflowCardTpl
+ let-entry>
+ <texera-card-item
+ class="workflow-card-item"
+ [entry]="entry"
+ [currentUid]="currentUid"
+ [isPrivateSearch]="true"
+ [editable]="true"
+ (deleted)="deleteWorkflow(entry)"
+ (duplicated)="onClickDuplicateWorkflow(entry)"
+ (refresh)="refreshSearchResult()"
+ (checkboxChanged)="searchResultsComponent.onEntryCheckboxChange()">
+ </texera-card-item>
+ </ng-template>
+
<texera-search-results
[editable]="true"
[isPrivateSearch]="true"
+ [viewMode]="viewType"
+ [cardTemplate]="workflowCardTpl"
(deleted)="deleteWorkflow($event)"
(refresh)="refreshSearchResult()"
(duplicated)="onClickDuplicateWorkflow($event)"
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts
index 584191f8bf..ad974e1ced 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts
@@ -36,6 +36,7 @@ import { NzUploadFile, NzUploadComponent } from "ng-zorro-antd/upload";
import * as JSZip from "jszip";
import { FiltersComponent } from "../filters/filters.component";
import { SearchResultsComponent } from "../search-results/search-results.component";
+import { CardItemComponent } from "../list-item/card-item/card-item.component";
import { SearchService } from "../../../service/user/search.service";
import { SortMethod } from "../../../type/sort-method";
import { isDefined } from "../../../../common/util/predicate";
@@ -107,6 +108,7 @@ import { FormsModule } from "@angular/forms";
NzSelectComponent,
FormsModule,
SearchResultsComponent,
+ CardItemComponent,
NzSpaceCompactComponent,
],
})
@@ -141,6 +143,7 @@ export class UserWorkflowComponent implements AfterViewInit {
@Input() public pid?: number = undefined;
@Input() public accessLevel?: string = undefined;
public sortMethod = SortMethod.EditTimeDesc;
+ public viewType: "list" | "card" = "list";
lastSortMethod: SortMethod | null = null;
constructor(