* Scaffold new UI homepage, hide current nav bar
* Layout set up
Divider was fiddly, but got the same setup as Figma now.
* Config to allow svg loading and imports etc. in Vite
Also moved preact from dev deps to deps (recommended).
* Configure app to use Poppins
Was a little tricky, had to isolate this from the rest of the app.
* Move icons from figma to app, set up menus
SVGs have to be exported from Figma, moved into assets in app, etc.
* Layout and SideMenu
Components and layout all set.
* Some basic global themeing knocked off from Web3
* Datagrid Layout complete
Nothing works and the data is contrived, but it's all matchy-matchy with the Figma view and so on.
* Menu items hover and rollover states
* Add card row
* useProcessInstances hook
Knocked off from the call logic in ProcessInstanceListTable
* Responsiveness
* Responsive tweaks
* Live data in grid etc.
* Phone responsive
* Responsivness working across all breakpoints
* Side menu height simplification
* more chips for milestone and status
* Basic client grid search
* Newui README and component notes.
* Add docs, cleanups, etc.
* Component docs
* Theme more robust
Also added framework for dark mode.
* Dark mode and theme enhancements
* Install signals integration for vite, cleanup, and working darkmode toggle.
* Update SpiffUIV2.tsx
* Toggle feature for menu items
Includes ability to swap icon and text on a toggle. Useful for dark mode toggle and possibly other things.
* User menu pinned to bottom of VH
Doesn't get lost if datagrid is long.
* Color fixes for dark mode, added in tokens where possible.
* Responsive Side Menu
* adjusted filter cards to dark mode
* Customize global themes for light and dark success/light/info/warning/error
Pushing use of tokens everywhere, took some wrangling but it's in place now.
Also fixed cards and a few other things to size more cleanly in responsive modes.
* Fix tab light/dark mode swap
Requires a bit more customiization of the theme.
* Slide transition for menu
* Solved very annoying MUI problem
If there is a scrollbar on the screen, opening a Select removes it. This is intentional (use can not scroll the screen while select is open) but it has the unfortunate consequence of removing the browser scrollbar is that it increases the viewport size, causing all responsive layout to shift. This tells it "leave it be".
Also add ability to feed in info to process instance hook.
* Refactor some items to make layouts more declarative.
We want the info window to be in the center-right of the view all the time, with some appropriate padding on the top-bottom, so regardless of the scroll position or window size they never lose it.
Also, responsiveness (will resize until MD breakpoint then hide).
* Refactor Dashboard to switch grids more cleanly
* Info panel wired up
* Task Collection, view hook etc.
* My Tasks search working
* Tab nav set up
* "Old" forms loading into "new" flyout window.
Had to move a few things around and dig into the routes, but got it up and running for demo.
* InfoPanel displays selections from different grid views
Built mini-factory to feed InfoPanel ReactNodes to render using selected grid item data.
* Info panel toolbar, formatting and light/dark settings.
* InfoPanel display with tasks
APIs need to be sorted out, there doesn't appear to be an easy way to get all Tasks for a given ProcessId at this point.
* Format dates in grids
* Wire everything up for working workflow (demo-worthy)
* Toggle for Row click panel open/close
* Completed and waiting tasks in info panel.
* Scrollable grids in the Dashboard view (no more page scrolling)
* Remove mystery zero
Stray truthy test was rendering the result (false, 0)
* Tweak to prevent child scrollbars from overlaying infopanel windows.
* had to install jsdom for Vue testing.
* Update package-lock.json
* Possibly ran npm i in the wrong directory hmm...
* add optional platform dep
* update lock file with optional dep info
* Add ESBuild (this package was not found)
There might be a global install but Vite/npm ain't seein' it.
* Trying to make esbuild optional (it might already be global)
* Accordions for tasks, and create a hook to enable some flexible customization.
* Updates and refactoring to make more (possibly) extension-ready components for the data displays.
* PI times summary report
Also cleaned up some MUI Dom errors/warnings.
* build images for newui
* revert some changes in package-lock that did not help
* Rebuilding repo (had "bad objects" error)
* Charts (mostly for demo)
* Responsive!
* Collapsible side menu
Added a button component suitable for the positioning/display, adjusted responsiveness (when the menu is collapsed, we need the grid to take up more room, and when the menu is naturally collapsed by screen size, we don't want the toggle button, etc.)
* Adjust menu to display abbreviated spiff logo when collapsed.
* Update DashboardCharts.tsx
* Inserted Paper wrapper for sidemenu
Makes the background responsive to dark mode (so it's not just more black surface).
* Update SideMenu.tsx
Fix positioning to accommodate new wrapper padding.
* First wave of theme changes, global font alterations, restructure nav to top
* Moving the design revamp along
Walking the line between the new ideas but using the current functionality and components (we don't have designs for where things lik the dark mode and logout buttons go, the toolbar was removed but now we need a place for the start process button, we still need the tabs, etc.).
* Moving new style along
Had to add custom background palette for dark/light mode.
* Carousel display and task cards for new display
* Grids, carousels, accordions, etc.
All in design requirement Desktop 27 (Figma file)
* All finished
Revamped, workflow implemented, rotating charts, dark mode checked, new scrollbars for more ipad-like feel, search working, etc. etc.
* Tweaks and good to go.
* Update MyProcesses.tsx
Remove console.log.
* Collapse process detail by default, and fix tasks label.
* Full screen containers
We don't want th default max width enforced by MUI.
* TopNav responsiveness and speedial
* Responsive grid areas
* Add task counts
* create a top level route for the new spiff ui from App.tsx w/ burnettk (#1586)
Co-authored-by: jasquat <jasquat@users.noreply.github.com>
* Unused imports
* Clean up wonky pie chart.
* Remove hardcoded url
* Clean up info panel
* Fix menu button responsive text wrap wonk
* Put grid back
With data changes since there is more stuff in the first column (based on the design). I took a best guess.
* Remove cell focus outline with CSS overrides MUI
* Flyout Panel for demo (new look etc.)
* Task switching in panel.
* Cleanup tweaks pre-demo.
There is a bug in the "first select" of a row with tasks, I'm aware of it.
* Rework flow of data, make it simpler
Fixes a bug; when you clicked a PI row the first time, its tasks wouldn't load. If you did it again, everything worked. The way the code moved data to the InfoPanel was unclear, cleaning that up made the bug obvious.
* put back psycopg2 and mysqlclient
* Create useProcessModels.tsx
* Create useProcessGroups.tsx
* Update ProcessInstanceCard.tsx
Fixes task count display
* Refactor for top level routing
Keeping all views as children of SpiffUIV2 (will make swapping app easier).
* Update SpiffUIV2.tsx
Routing and view scaffolding set.
* Menu and button nice nice in dark mode etc.
* View transitions
* Process group/model data under control and feeding into view.
* Using RXJS for broadcasting to menu items.
* Update SpiffUIV2.tsx
* Config seemed broken (I couldn't start the app, Vite not found etc.)
I fixed by moving @preact/preset-vite to dependencies (this seems required, probably because it adds types and primitives that are used in runtime code or something) and making sure Node was up to date.
* Fix for Preact breaking rendering lifecycle
One of their PRs put a ridiculously low check on rerenders, and in dev/debug mode throws an app-crashing error, which affected the MUI-X Datagrid.
* Button components aware of stream
Also had to add a way for buttons to know what the view they nav to was loaded from the URL (e.g. a bookmark) to meet the design req.
* Have to make sure buttons that have no paths don't respond to href load logic.
* Layout for components, menu, treeview, theme tweaks
Needed to alter text.secondary at theme level to accommodate designs.
* Recurse through Process Group data to PM tree build tree for display
All set.
* Treeview complete
Also moved some things around to track with evolving app structure.
* Fully working tree with counters.
* Favorites/Recently used layout, components, icons, etc.
* Favorites and process groups displays
A bit naive, but for now gets the job done.
* Select of a group CArdor a group in the Tree updates view
Display PMs and PGs for any group, and some ideas to tie selecting a Card into the Tree. This kind of has to work, if you don't do it the tree seems useless.
* Create TreeItem wrapper
TreeItems don't carry any data that could be used for crumbs. Need to wrap TreeItem and add a property that lets you expand any node anywhere in the hierarchy.
* Update __init__.py
* Update StartProcess.tsx
Scrolling content area
* Tree expansion from cards working as expected
Have to do the collapse side of it, but so far so good. Also tweaks to scrolling area.
* Wrap search bar and padding tweaks
More explicit layout around child components.
* Tree/card tracking working.
Highlighting based on clicks, etc, very fancy.
* Tree -> Cards -> Tree fully working, starting breadcrumbs.
Breadcrumbs will be how this works on mobile, nobody will use the tree on a phone.
* Collapse button will be used all over
* More wiring details tree -> card -> tree -> search
When search returns results, the tree or card nav is no longer the control. Use imperative ref to wipe expanded nodes. Also, make sure that if models and groups are returned that the accordions expand.
Remove console logs.
* Cross group model highlighting
Tricky one: If you have several folders expanded in the tree, and are clicking through the models, if you click a model in a "non active" group, we have to clear the current group assets and load that group's. Since the cards come after the switch, they don't hear the clickstream that initiated them, so the model that was selected in the tree won't update the associated card's style. Fix that by passing in the lastSelected object to the cards and inspecting on init.
* Localstorage, favorites, default favorite view (vs. groups), etc.
* Guard no groups.
* Update StartProcess.tsx
Padding change opened up window, needed to adjust.
* Update StartProcess.tsx
* Update LocalStorageService.ts
Update empty string to empty array.
* Tree panel collapse/expand
With everything else going on, this was tricky to get responsive, but working as expected now. Also tweak to fix annoying thing in MenuItems. Also made sure dark mode tracks.
* Hover effects for cards and text cleanups
Hover is useless on touch screens, but otherwise this is a bit more in keeping with the design.
* Breadcrumbs, root element and favorites in collapse tree view, etc.
This pretty much nails it.
* Add Favorite Count
Add count to favorites indicators. Helps user make sense of "I'm clicking it why are no items loading (because there are zero favorites).
* Docs, cleanup
Also fix that NavBar logo issue in the "old" app.
* fix breadcrumb re-render issue when saving json file for first time w/ burnettk
* fix / ignore eslint issues
* add types for react-slick
* ignore ts error
* revert nav bar to undo logout logo change w/ burnettk
* Update spiffworkflow-frontend/src/a-spiffui-v2/views/Dashboards/infopanels/ProcessInfo.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* Update spiffworkflow-frontend/src/a-spiffui-v2/views/StartProcess/StartProcess.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---------
Co-authored-by: Tim Consolazio <tcoz@tcoz.com>
Co-authored-by: burnettk <burnettk@users.noreply.github.com>
Co-authored-by: jasquat <jasquat@users.noreply.github.com>
Co-authored-by: Kevin Burnett <18027+burnettk@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* some base updates for vite w/ burnettk
* i can log in w/ burnettk
* a couple more fixes w/ burnettk
* make sure selectedTabIndex has been set before using it w/ burnettk
* fixed active-users db issue, added type module to package json to fix prerender issues, and various other issues w/ burnettk
* fixed issues with building and running from compiled w/ burnettk
* pyl
* eslint fix is running and removed both inferno and navigationBar warnings
* vim likes the Dockerfile suffix by default
* use process.env.HOME
* probably do not need alias
* a little clean up and fixed font warnings w/ burnettk
* updated elements to remove warnings in the console w/ burnettk
* fixed es lint issues w/ burnettk
* update docker build in frontend w/ burnettk
* set the specific tag of nginx w/ burnettk
* build docker imgaes for this branch to test w/ burnettk
* added vitest and updated Dockerfile to be nginx w/ burnettk
* tests are passing w/ burnettk
* add prefresh and more keys
* added cypress-vite to attempt to get cypress working again
* some coderabbit suggestions
* hopefully there is no reason to use PUBLIC_URL at all when using vite
* use the correct location of the index file in the docker image
* spaces are fine in index.html file variable declaration
---------
Co-authored-by: jasquat <jasquat@users.noreply.github.com>
Co-authored-by: burnettk <burnettk@users.noreply.github.com>
jasquat