[FR] Switch UI to React #2789
Labels
api
Relates to the API
CI
CI / unit testing ecosystem
enhancement
This is an suggested enhancement or new feature
user interface
User interface
Milestone
Comments
matmair
added
enhancement
|
@SchrodingersGat can we get a 1.0 milestone for that? @eeintech |
|
@eeintech huge adoption, not very opinionated, good toolset ecosystem and a lot of examples that this sort of application can be done in react. |
|
Sounds good thanks! |
|
@eeintech always open for feedback but I think react is a good compromise. I will do a prototype for how I would tackle it so we can discuss the architecture, todos etc. in the coming months. It is a lot but not as much one would think - we can reuse all the API forms from what I can see. |
|
I dislike React. I'm working on a project that uses it, and at the end of every day I want to go out to the garage and hang myself. Please stay clear of React. |
|
@4jag we are open for other suggestions. |
This was referenced May 4, 2022
Closed
|
Tutorial for Vue: https://realpython.com/python-django-blog/#step-6-set-up-vue-router |
This was referenced May 18, 2022
This was referenced Aug 3, 2022
3 tasks
2 tasks
This was referenced Nov 13, 2022
|
Geniunely, why? Your front end seems clear, simple, and capable. You could acheive more UI testing with your current frontend. You could even use this sort of system: https://playwright.dev/ |
|
Have you worked with the front-end code? A lot of bugs are because of missing typing and lazy linking of important parts via jquery. It also needs full reloads for a lot of actions. |
matmair
added a commit
to matmair/InvenTree
that referenced
this issue
Jun 9, 2023
Merged
2 tasks
This was referenced Jul 10, 2023
SchrodingersGat
added a commit
that referenced
this issue
Jul 18, 2023
* Add SPA views for react #2789 * split up frontend urls * Add settings for frontend url loading * add new UI scaffold * remove tracking insert * add platform app * ensure static indexes work too * add lingui * add lingui config * add mgmt tasks * add base locales * settings for frontend dev * fix typo * update deps * add pre-commit * add eslint * add testing scaffold * fix paths * remove error - tests trip correctly * merge workflow * cleanup samples * use name inline with other tests * Add real worl frontend tests * setup env * tun migrations first * optimize setup time * setup demo dataset * optimize run setup * add test for class ui * rename * fix typo * and another typo * do install * run migrations first * fix name * cleanup * use other credentials * use other credentials * fix qc * move envs to qc * remove create_site * reduce testing env * fix test * fix test call * allaccess user * add ui plattform check * add better check * remove unneeded env * enable debug * reduce wait time * also build frontend on static * add sort plugin * fix order * run pre-commit fixes * add node min version * Docker container (#129) * Fix allocation check for completing build order (#5199) - Allocation check only applies to untracked line items * docker dev Install required node packages to docker development image * add import order settings * cleanout built ui * remove default arg from build * remove eslint * optimize svg * add build step for plattform UI * fix install command * use alpine commands * do not use cache when creating image --------- Co-authored-by: Oliver <oliver.henry.walters@gmail.com>
SchrodingersGat
added a commit
that referenced
this issue
Jul 20, 2023
* Add SPA views for react #2789 * split up frontend urls * Add settings for frontend url loading * add new UI scaffold * remove tracking insert * add platform app * ensure static indexes work too * add lingui * add lingui config * add mgmt tasks * add base locales * settings for frontend dev * fix typo * update deps * add pre-commit * add eslint * add testing scaffold * fix paths * remove error - tests trip correctly * merge workflow * cleanup samples * use name inline with other tests * Add real worl frontend tests * setup env * tun migrations first * optimize setup time * setup demo dataset * optimize run setup * add test for class ui * rename * fix typo * and another typo * do install * run migrations first * fix name * cleanup * use other credentials * use other credentials * fix qc * move envs to qc * remove create_site * reduce testing env * fix test * fix test call * allaccess user * add ui plattform check * add better check * remove unneeded env * enable debug * reduce wait time * also build frontend on static * add sort plugin * fix order * run pre-commit fixes * add node min version * Docker container (#129) * Fix allocation check for completing build order (#5199) - Allocation check only applies to untracked line items * docker dev Install required node packages to docker development image * add import order settings * cleanout built ui * remove default arg from build * remove eslint * optimize svg * add build step for plattform UI * fix install command * use alpine commands * do not use cache when creating image * Added release pipeline * trigger: ci * Fix ci * Fix ci * Fix ci * fix: workflow * fix: workflow * fix: doubble zipping * fix: doubble zipping * fix: doubble zipping * fix: doubble zipping * fix: doubble zipping * Added frontend-download helper to tasks.py * revert unrelated change * Add frontend step to update task * add frontend stuff to version info * small change to trigger ci * keep terminal output clean * return found versions * fix suggested command * revert small change * move to multiline * add flag to stop frontend compile * make node building optional on static * add node trans to transalte task * ammend commands to use new flag * remove unneeded flag * add warning * add yarn bypass * docstrings * check for docker env --------- Co-authored-by: Oliver <oliver.henry.walters@gmail.com> Co-authored-by: wolflu05 <76838159+wolflu05@users.noreply.github.com>
SchrodingersGat
added a commit
that referenced
this issue
Jul 20, 2023
* update deps * remove @mantine/rte * add icons again * Create dependency-review.yml * Create scan.yml * Create sonar-project.properties * add option to use sections and refactro * translate error messages * remove unneeded vars * move function code * move data inside * add global section * add plugin section * use translated section titles * add translation strings * rename scan action * add user settings * use ordered data * fix settings url * use debounced value for strings (not choices!) * rename contex to context * move i18n provider up * move theme options into seperate context/ component * renmae statrtup vars * move translations out * reactivate sentry * move i18n provider to seperate context * move langauge state completly out of App * use theme out * move theme context * move LanguageContext * move function into state * make sentry optional for now * add key to accordion * init langauge context on top * remove unneeded css files * move errorpage to tsx * add translation for error page * Add error to title * add typecast for error * move type definition out * remove todo -> type was already added * upgrade deps * add bootstrap * remove @mantine/core * readd core * switch to bootstrap * simplify import * Add SPA views for react #2789 * split up frontend urls * Add settings for frontend url loading * add new UI scaffold * remove tracking insert * add platform app * ensure static indexes work too * add lingui * add lingui config * add mgmt tasks * add base locales * settings for frontend dev * fix typo * update deps * add pre-commit * add eslint * add testing scaffold * fix paths * remove error - tests trip correctly * merge workflow * cleanup samples * use name inline with other tests * Add real worl frontend tests * setup env * tun migrations first * optimize setup time * setup demo dataset * optimize run setup * add test for class ui * rename * fix typo * and another typo * do install * run migrations first * fix name * cleanup * use other credentials * use other credentials * fix qc * move envs to qc * remove create_site * reduce testing env * fix test * fix test call * allaccess user * add ui plattform check * add better check * remove unneeded env * enable debug * reduce wait time * also build frontend on static * add sekeleton * fix various issues * add locales * clean output before building * cleanup dir * remove bootstrap * clean up deps * fix settings panel * remove assets * move logo * split out router * split up chunks * fix zustand import syntax * bundl * update pre-render * use vendor splitting * maximes space usage * enlarge breakpoints * remove wired color changes * cleanup tabs * fix error * update auth functions * default to mail login * add placeholder marking * Add text to placeholder * readd codespell * add another test * add sort plugin * add sort plugin * sort imports * fix order * Add mega menu * run pre-commit fixes * add node min version * Docker container (#129) * Fix allocation check for completing build order (#5199) - Allocation check only applies to untracked line items * docker dev Install required node packages to docker development image * add import order settings * cleanup settings * cleanup dashboard * clanup part tab * refactor header to only use 1 line * cleanup reqs for py3.9 * remove compiled UI * revert reqs change * cleanup tasks * cleanout built ui * remove default user * cleanup package.json * fix doctip * remove sentry * optimize loading * reset versions * clean * factor out menu items * refactor Navtabs * refactor HoverMenu * remove part * remove prettier * remove default arg from build * remove eslint * Merge branch 'plattform' of https://github.com/matmair/InvenTree into platform-ui_base * optimize svg * add build step for plattform UI * fix install command * fix test * remove extra test * set default host if none is set * set nicer names * fix tests * fix logged-in test * update translations * ensure more path matches * make loading of serverrefs dynamic * use default radius * fix issues / code smells * clean code smell * fix password reset * fix error messages * detect small screens * use loader meachanism for views * refactor structure * move auth functions out * use text * refactor defaults * Add email login FR] Add email link based logins Closes #3531 * fix name error * fix reqs * fix backend for magic login * fix frontend * remove unused route * remove now unneeded test section * cleanup code * add navigation header * fix logo component for nesting * factor out menu * refactor style * clean code * Translate items and use unique ids * use alpine commands * increase margins to remove drawer scroller * only render plugins if they are defined * remove sample content * fix assertation * open on hover * refactor * merge fix * cleanup navigation drawer * change dependencies for UI testing * add highlight filter * Add correct menu items * move design component out * move pre-commit out * move deps again * move js styles in * revert CI changes * remove unneeded exclution * changed placeholder user * refactored EditButton to component * refactored app loading to useEffect * moved color lookup into global scope * reafactored UserPanel render block * marked placeholder pages in doc links * made doc tooltip optional for MenuLink * changed MenuLinkItem names * fixes missing Link item in MenuLink * fixed merge error --------- Co-authored-by: Oliver <oliver.henry.walters@gmail.com>
SchrodingersGat
added a commit
that referenced
this issue
Jul 23, 2023
* add option to use sections and refactro * translate error messages * remove unneeded vars * move function code * move data inside * add global section * add plugin section * use translated section titles * add translation strings * rename scan action * add user settings * use ordered data * fix settings url * use debounced value for strings (not choices!) * rename contex to context * move i18n provider up * move theme options into seperate context/ component * renmae statrtup vars * move translations out * reactivate sentry * move i18n provider to seperate context * move langauge state completly out of App * use theme out * move theme context * move LanguageContext * move function into state * make sentry optional for now * add key to accordion * init langauge context on top * remove unneeded css files * move errorpage to tsx * add translation for error page * Add error to title * add typecast for error * move type definition out * remove todo -> type was already added * upgrade deps * add bootstrap * remove @mantine/core * readd core * switch to bootstrap * simplify import * Add SPA views for react #2789 * split up frontend urls * Add settings for frontend url loading * add new UI scaffold * remove tracking insert * add platform app * ensure static indexes work too * add lingui * add lingui config * add mgmt tasks * add base locales * settings for frontend dev * fix typo * update deps * add pre-commit * add eslint * add testing scaffold * fix paths * remove error - tests trip correctly * merge workflow * cleanup samples * use name inline with other tests * Add real worl frontend tests * setup env * tun migrations first * optimize setup time * setup demo dataset * optimize run setup * add test for class ui * rename * fix typo * and another typo * do install * run migrations first * fix name * cleanup * use other credentials * use other credentials * fix qc * move envs to qc * remove create_site * reduce testing env * fix test * fix test call * allaccess user * add ui plattform check * add better check * remove unneeded env * enable debug * reduce wait time * also build frontend on static * add sekeleton * fix various issues * add locales * clean output before building * cleanup dir * remove bootstrap * clean up deps * fix settings panel * remove assets * move logo * split out router * split up chunks * fix zustand import syntax * bundl * update pre-render * use vendor splitting * maximes space usage * enlarge breakpoints * remove wired color changes * cleanup tabs * fix error * update auth functions * default to mail login * add placeholder marking * Add text to placeholder * readd codespell * add another test * add sort plugin * add sort plugin * sort imports * fix order * Add mega menu * run pre-commit fixes * add node min version * Docker container (#129) * Fix allocation check for completing build order (#5199) - Allocation check only applies to untracked line items * docker dev Install required node packages to docker development image * add import order settings * cleanup settings * cleanup dashboard * clanup part tab * refactor header to only use 1 line * cleanup reqs for py3.9 * remove compiled UI * revert reqs change * cleanup tasks * cleanout built ui * remove default user * cleanup package.json * fix doctip * remove sentry * optimize loading * reset versions * clean * factor out menu items * refactor Navtabs * refactor HoverMenu * remove part * remove prettier * remove default arg from build * remove eslint * Merge branch 'plattform' of https://github.com/matmair/InvenTree into platform-ui_base * optimize svg * add build step for plattform UI * fix install command * fix test * remove extra test * set default host if none is set * set nicer names * fix tests * fix logged-in test * update translations * ensure more path matches * make loading of serverrefs dynamic * use default radius * fix issues / code smells * clean code smell * fix password reset * fix error messages * detect small screens * use loader meachanism for views * refactor structure * move auth functions out * use text * refactor defaults * Add email login FR] Add email link based logins Closes #3531 * fix name error * fix reqs * fix backend for magic login * fix frontend * remove unused route * remove now unneeded test section * cleanup code * add navigation header * fix logo component for nesting * factor out menu * refactor style * clean code * Translate items and use unique ids * use alpine commands * increase margins to remove drawer scroller * only render plugins if they are defined * remove sample content * fix assertation * open on hover * refactor * merge fix * cleanup navigation drawer * change dependencies for UI testing * add highlight filter * Add correct menu items * move design component out * move pre-commit out * move deps again * move js styles in * revert CI changes * remove unneeded exclution * changed placeholder user * refactored EditButton to component * refactored app loading to useEffect * moved color lookup into global scope * reafactored UserPanel render block * marked placeholder pages in doc links * made doc tooltip optional for MenuLink * changed MenuLinkItem names * fixes missing Link item in MenuLink * fixed merge error * bump deps * bump python * downgrade for py3.9 * bump further --------- Co-authored-by: Oliver <oliver.henry.walters@gmail.com>
SchrodingersGat
added a commit
that referenced
this issue
Jul 27, 2023
* Create dependency-review.yml * Create scan.yml * Create sonar-project.properties * add option to use sections and refactro * translate error messages * remove unneeded vars * move function code * move data inside * add global section * add plugin section * use translated section titles * add translation strings * rename scan action * add user settings * use ordered data * fix settings url * use debounced value for strings (not choices!) * rename contex to context * move i18n provider up * move theme options into seperate context/ component * renmae statrtup vars * move translations out * reactivate sentry * move i18n provider to seperate context * move langauge state completly out of App * use theme out * move theme context * move LanguageContext * move function into state * make sentry optional for now * add key to accordion * init langauge context on top * remove unneeded css files * move errorpage to tsx * add translation for error page * Add error to title * add typecast for error * move type definition out * remove todo -> type was already added * upgrade deps * add bootstrap * remove @mantine/core * readd core * switch to bootstrap * simplify import * Add SPA views for react #2789 * split up frontend urls * Add settings for frontend url loading * add new UI scaffold * remove tracking insert * add platform app * ensure static indexes work too * add lingui * add lingui config * add mgmt tasks * add base locales * settings for frontend dev * fix typo * update deps * add pre-commit * add eslint * add testing scaffold * fix paths * remove error - tests trip correctly * merge workflow * cleanup samples * use name inline with other tests * Add real worl frontend tests * setup env * tun migrations first * optimize setup time * setup demo dataset * optimize run setup * add test for class ui * rename * fix typo * and another typo * do install * run migrations first * fix name * cleanup * use other credentials * use other credentials * fix qc * move envs to qc * remove create_site * reduce testing env * fix test * fix test call * allaccess user * add ui plattform check * add better check * remove unneeded env * enable debug * reduce wait time * also build frontend on static * add sekeleton * fix various issues * add locales * clean output before building * cleanup dir * remove bootstrap * clean up deps * fix settings panel * remove assets * move logo * split out router * split up chunks * fix zustand import syntax * bundl * update pre-render * use vendor splitting * maximes space usage * enlarge breakpoints * remove wired color changes * cleanup tabs * fix error * update auth functions * default to mail login * add placeholder marking * Add text to placeholder * readd codespell * add another test * add sort plugin * add sort plugin * sort imports * fix order * Add mega menu * run pre-commit fixes * add node min version * Docker container (#129) * Fix allocation check for completing build order (#5199) - Allocation check only applies to untracked line items * docker dev Install required node packages to docker development image * add import order settings * cleanout built ui * Add "parttable" component * Add task to serve front-end code dev * remove default arg from build * remove eslint * optimize svg * Adds generic function for rendering a table with server-side data * Implement pagination and sorting * Add more example columns * Enable selection of table data rows * add build step for plattform UI * fix install command * optional parameters * Add simple stock table * Add optional parameter for default sort * Change "no records" text based on query result * Translate * Start writing some helper functions * Add thumbnail component * Fill out more columns for stock table * Add simple skeleton for table search input * Adjust default table properties * Change loader variant * Drop-down for selecting table columns * Add search text callback * use alpine commands * do not use cache when creating image * More updates for inventree table - Fix search text entry - Add "refresh" button - Adjust variable names * Search input improvements - Add button to clear search input * Enable mantine notification system * Add "not yet implemented" notification message * Add download action button * Adds ButtonMenu component - Button which expands to show other actions - Add hooks for adding action menus to tables * Add basic build order list table * Add custom filters button for table * Allow columns to be toggled * Column visibility saved across table loads * Adds display for table filters - Define interface for table filter definition - Add component for displaying filters - Cleanup for part table * Cleanup * Define type for controlling column data * Allow custom ordering term for table column - Replaces "sortName" concept from bootstrap-table * Improve build order table - Fancy progress bars * Reimplement invoke task to serve frontend files via yarn * Update package files with mantine * Implement callback when record selection is changed * Adds generic "actionbutton" component * Remove duplicate form components * Remove tracked files in web/static * Remove a bunch of files - tracked in from the wrong original branch * More page fixes * Revert changes to reqiurements-dev.txt * Spelling fix * Component updates * Cleanup components * Cleanup * Use spread operator * Add some new dummy pages for testing * Cleanup / simplify stockitem table * Cleanup for part table * Cleanup build order table * Cleanup column toggle function * Remove hard-coded URL * Format updates * Update deps * npm required for inventree-python checks * Fix search input - Better debouncing - Cleaner code * Update package files * vite polling fixes * Implementation for download button - Dropdown menu with file format options * Implement callback for download of table data * Better state management for hidden columns * Implement state framework for active custom filters * Silence some errors * Revert change to vite config * Implement collapsible filter list group - Save active filters to local storage - Add some example filters to the part table - Add FilterBadge component * Fix page names * Simplify search input - useDebouncedValue * linting * Refactor * Remove debug msg * Simplify search state * Refactor function for constructing API query * Add tooltip * Update icons * Add modal for selecting filter options * Add more table filters for part table * render custom item for filter select * Complete implementation for selectable filters - Allow choices to be specified as attribute - Allow choices to be specified as function - Handle state management for filter choice form * Tweak badge * Cleanup top-level yarn and npm files * Less roundy --------- Co-authored-by: Matthias Mair <code@mjmair.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is your feature request the result of a bug?
No - More of a vision
Problem
Currently we build a lot of html templates and js. As there is a disconnect between the server and the frontend we do not really have tests for the frontend. Also there is a lot more data transmitted than needed.
Suggested solution
Describe alternatives you've considered
Current solution works fine but this FR would be cool.
Examples of other systems
A lot seems to run on this - an example in our field would be https://partsbox.com/
Do you want to develop this?
I would love to help but this would be a team effort.
The text was updated successfully, but these errors were encountered: