Feat/react dashboard utils #1570

vani-walvekar1494 · 2025-06-17T02:05:29Z

Overview:

This PR adds three new features to the DesignSafe UI dashboard:

A ticket list interface with filtering, toggle between open/resolved tickets, and quick actions.
A Recently Accessed tools component that shows recent user tools from localStorage.
A Recent Projects tabular card displaying the user’s last 3 projects on the dashboard.

PR Status:

Ready.
Work in Progress.
Hold.

Related Jira tickets:

WP-709

Summary of Changes:

Implemented a ticket list view with client-side filtering and status toggle.
Added quick reply and close actions with confirmation modal in ticket list.
Created a Recently Accessed component fixed to bottom-right showing recent tools with clickable links.
Designed a Recent Projects card showing the last 3 projects in a tabular layout on the dashboard.
Applied styling and modularized CSS for better maintainability.

Testing Steps:

Navigate to the dashboard page.

Verify that the ticket list loads with open tickets by default.
Use the toggle button to switch between open and resolved tickets.
Test filtering tickets by subject or ID.
Click reply and close buttons; verify confirmation on close and that the list refreshes.
Check the Recently Accessed section at the bottom-right for correct tool links.
Verify the Recent Projects card shows exactly 3 most recent projects with clickable titles.

UI Photos:

Notes:

…t rules

…react-dashboard-utils

client/modules/dashboard/src/api/favouritesApi.ts

jarosenb · 2025-06-27T20:08:10Z

client/modules/workspace/src/AppsSideNav/AppsSideNav.tsx

+  getUserFavorites,
+  addFavorite,
+  removeFavorite,
+} from '../../../dashboard/src/api/favouritesApi';


Related to the comment about moving the API calls into the _hooks module, we need to be careful about imports between modules. If the Workspace imports Dashboard components and the Dashboard imports Workspace components, then we could end up with circular dependencies. I think the solution here is to set up module boundaries (https://nx.dev/features/enforce-module-boundaries) so that Dashboard can import from workspace but not the other way around.

jarosenb · 2025-06-27T20:10:09Z

client/package.json

    "react-error-boundary": "^4.0.13",
    "react-hook-form": "^7.51.3",
    "react-hook-form-antd": "^1.1.0",
+    "react-icons": "^5.5.0",


We have existing FontAwesome icons that we can probably use for this feature. I don't think we need this additional dependency. We can discuss on a case-by-case basis.

jarosenb · 2025-06-27T20:12:23Z

designsafe/urls.py

            name="django.contrib.sitemaps.views.sitemap",
        ),

+        #URL for Favourites


This change is probably unnecessary. We have existing URL configuration to support /api/datafiles paths.

designsafe/apps/api/datafiles/urls.py

jarosenb · 2025-06-27T20:20:32Z

designsafe/apps/api/filemeta/migrations/0003_remove_filemetamodel_unique_system_path.py

@@ -0,0 +1,17 @@
+# Generated by Django 4.2.15 on 2025-06-23 15:09


Let's remove this filemeta migration. It doesn't relate to any of the dashboard features. I'll need to check with the DesignSafe team to understand whether this migration is correct.

I’ve removed the filemeta migration. I believe it was created accidentally when running the migration.

…checks

…conflicts

…act-dashboard-utils

jarosenb · 2025-07-14T21:08:32Z

client/package-lock.json

These changes to package-lock.json should be reverted, since there aren't any corresponding changes to package.json.

Reverted package-lock.json.

jarosenb · 2025-07-14T21:10:49Z

designsafe/apps/api/datafiles/urls.py

-from django.urls import re_path as url
-from designsafe.apps.api.datafiles.views import DataFilesView, TransferFilesView, MicrosurveyView
+from django.urls import re_path as url, path
+from designsafe.apps.api.datafiles.views import (


Please revert any formatting changes to files in api/datafiles. In general, it's good practice to look over the changes in each PR and make sure that you're changing the minimum possible amount of code to accomplish the task.

Reverted formatting changes in api/datafiles.

jarosenb · 2025-07-14T21:14:40Z

client/modules/dashboard/src/Dashboard/FavoriteTools.tsx

+            <ul className={styles.favoriteList}>
+              {resolvedFavorites.map((tool) => (
+                <li className={styles.favoriteItem} key={tool.key}>
+                  <a


Clicking on the tool name in the Favorites panel doesn't navigate to the tool. You might need to remove the onClick handler if it's preventing the click event from propagating.

Clicking on the tool name now correctly opens the tool as expected.

jarosenb · 2025-07-14T21:22:05Z

client/modules/workspace/src/AppsSideNav/AppsSideNav.tsx

 import { NavLink } from 'react-router-dom';
 import { TAppCategory, TPortalApp } from '@client/hooks';
 import { useGetAppParams } from '../utils';
+import { getUserFavorites, addFavorite, removeFavorite } from '@client/hooks';


Please refactor the side nav code to use the Tanstack-Query hooks instead of these utility functions.

jarosenb · 2025-07-14T21:24:43Z

client/modules/workspace/src/AppsSideNav/AppsSideNav.tsx

+      const linkLabel = app.shortLabel || app.label || app.bundle_label;
+      const switchControl = (
+        <span onClick={(e) => e.stopPropagation()} style={{ marginLeft: 6 }}>
+          <Switch


The "favorites' switch is causing the sidebar to overflow its allotted space, and the font size has become tiny:

Please update the styling so that it matches the production site.

Updated the styling to prevent sidebar overflow

…les/

fnets

I think there's some changes to be made here to bring it more in-line with the other code we've written in the portal. Please don't hesitate to ask questions of us or your fellow SGX teammates.

client/modules/_hooks/src/favouritesApi.ts

client/modules/dashboard/src/api/favouritesApi.ts

client/modules/dashboard/src/Dashboard/Dashboard.module.css

fnets · 2025-07-22T21:05:02Z

client/modules/dashboard/src/Dashboard/Dashboard.tsx

+    <QueryClientProvider client={queryClient}>
+      <div style={{ display: 'flex' }}>
+        <Quicklinks />
+        <div style={{ marginLeft: '200px', padding: '10px', width: '100%' }}>


It seems like there's some lines that are handling styling in the JSX, but also there is styling being applied from the CSS. I think they could be consolidated. Especially lines like width: '100%'.

There also seems like a lot of repetition here. It might be more readable if it was written similar to how you wrote out Quicklinks.

Styles consolidated into CSS modules and collapsible sections refactored.

fnets · 2025-07-22T21:12:10Z

client/modules/dashboard/src/Dashboard/FavoriteTools.tsx

Keeping in mind what Jake said about module boundaries, I think this should be refactored to use existing schema and types, similar to how useAppsListing and useGetAppParams work. You probably don't need to reinvent the wheel with a tool_id and version when app_id and version already exist.

Again keeping in mind what Jake said about module boundaries, I think you also can probably handle some of these functions with existing code. Does handleClickOutside need to be used when you can use code similar to PreviewModal?

The updated code now uses existing app_id and version types consistently, it also removes the unnecessary handleClickOutside logic, relying on React state and Ant Design components for UI control.

client/modules/workspace/src/utils/apps.ts

jarosenb · 2025-08-01T18:28:39Z

Closing this PR- dashboard changes have been consolidated into #1612

vani-walvekar1494 added 6 commits June 16, 2025 20:43

feat: recently accessed components

0bf844a

fix: format files to pass nx format check

7a7c3b2

Fix: resolved merge conflicts and updated dashboard styles

6292b87

chore: format AppsSideNav to pass format:check

35f37ad

Fix: Replace 'any' with proper types in RecentProjects to satisfy lin…

3ccaa74

…t rules

chore: format files to pass nx format check

9a6aa1b

vani-walvekar1494 requested a review from jarosenb June 18, 2025 15:33

vani-walvekar1494 added 6 commits June 23, 2025 15:09

wip: partial DB connection setup and fix for recent tools issue

2fb2441

wip: partial DB connection setup and fix for recent tools issue

c439559

Merge remote-tracking branch 'origin/feat/react-dashboard' into feat/…

4ec4659

…react-dashboard-utils

Apply local changes after merging feat/react-dashboard

89f43e8

Fix lint error and other updates

ae7e243

Fix lint error and update files after merging feat/react-dashboard

9698ff4

jarosenb requested changes Jun 27, 2025

View reviewed changes

vani-walvekar1494 force-pushed the feat/react-dashboard-utils branch from e543b8e to 9698ff4 Compare June 27, 2025 20:47

vani-walvekar1494 added 10 commits June 27, 2025 16:07

Fix formatting issues

c4e91a4

Format migration files with Black

98b6f96

chore: refactor dashboard API, cleanup migrations, remove unused icons

db1aec1

fix: format files to pass lint checks

b5e6a15

fix(AppsSideNav): add Applications header text to resolve failing test

b5d0868

fix: resolve AppsSideNav formatting issues

b6045cd

fix: remove unused imports and variables in AppsSideNav to pass lint …

245cefe

…checks

Merge feat/react-dashboard into feat/react-dashboard-utils: resolved …

7af4852

…conflicts

feat(dashboard): update layout and fix recent projects visibility

03e9fa5

Resolved merge conflicts and merged feat/react-dashboard into feat/re…

aaeed75

…act-dashboard-utils

jarosenb requested changes Jul 14, 2025

View reviewed changes

vani-walvekar1494 added 4 commits July 17, 2025 12:00

Revert package-lock.json changes and formatting changes in api/datafi…

be8befc

…les/

changed sidebar styling and fixed tool navigation

913da5a

fixed linting for package-lock.json

294abbe

Fixed AppsSideNav hook usage

6092a55

fix: show Applications: header during loading to fix unit test

d23e6ef

vani-walvekar1494 requested a review from fnets July 21, 2025 19:41

fnets requested changes Jul 22, 2025

View reviewed changes

vani-walvekar1494 added 2 commits July 25, 2025 13:09

Refactored favorites logic, fix types,updated styling and dependencies

e582a90

Restore apps.ts from main to include missing comments/docstrings

63701fd

jarosenb closed this Aug 1, 2025

		@@ -0,0 +1,17 @@
		# Generated by Django 4.2.15 on 2025-06-23 15:09

Feat/react dashboard utils #1570

Feat/react dashboard utils #1570

Uh oh!

Conversation

vani-walvekar1494 commented Jun 17, 2025 • edited by fnets Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview:

PR Status:

Related Jira tickets:

Summary of Changes:

Testing Steps:

UI Photos:

Notes:

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fnets left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jarosenb commented Aug 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vani-walvekar1494 commented Jun 17, 2025 •

edited by fnets

Loading