Replace reactstrap by material UI #405
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* `npm run dev` did not succeed anymore, so the `contentBase` needed to be changed to `static`. * Deprecated `--watch` option is now removed from `dev` script.
It was missing and lead to errors when trying to build the app.
These changes also include a fix for where the previous version could mark multiple list items as active if they were similar (starting with same string). Now, the path is checked for being a sub path, rather than just starting with the same string. Also removes unused `TreeMenu`.
seveneleven
requested review from
MathoMathiasCamara,
jsonBackup and
1nf0rmagician
and removed request for
MathoMathiasCamara
1nf0rmagician
added
bug
seveneleven
force-pushed
the
update/replace-reactstrap-by-material-ui
branch
2 times, most recently
from
0baba11 to
1b89064
Compare
src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx
Outdated
Show resolved
Hide resolved
src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx
Show resolved
Hide resolved
src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/ConfigEditor.tsx
Show resolved
Hide resolved
This adds Material UI to the module list (navigation) and the module overview. `SectionInfo` and `ModuleInfoTile` got created for code reuse. The Notifications modal got removed in exchange for a collapsible list, which can be browsed like a log file.
Reactstrap hasn't just been replaced by Material UI components here. It seemed easier to slightly change the UI than adjusting all the styling to preserve the previous design: * The entry editors 'open' and 'expand/collapse' buttens have been replaced by a tree navigation. By removing the whole table, the informational column for item titles and descriptions has moved into the input fields and tooltips. * The 'Save and restart' and 'Save' buttons have been merged into a `DropDownButton` to reduce 'primary' actions Also fixes some problems with input change events.
seveneleven
force-pushed
the
update/replace-reactstrap-by-material-ui
branch
from
6385fb8 to
59e41e9
Compare
1nf0rmagician
previously approved these changes
Apr 30, 2024
This also fixes an issue with drop downs being stuck. For the migrations and setups, the issues with drop downs have been fixed by removing the drop downs at all and providing a list of available items instead. Every list item has an 'action button' for the item (migration or setup) to be executed. So that there is no state anymore to be cached. Also: * Correct or 'similar' configurator will be preselected, even on a version mismatch * UI updates properly, when switching between database contexts * If the database name is `null`, the context name will be used/prefilled as the default
By switching to Material UI, depending on reactstrap and related packages is not required anymore. Also, all the custom css definitions are obsolete. This stops styles from being overwritten by parent UIs and vice versa.
seveneleven
force-pushed
the
update/replace-reactstrap-by-material-ui
branch
from
59e41e9 to
2cbb7c8
Compare
1nf0rmagician
approved these changes
May 6, 2024
Merged
seveneleven
added a commit
that referenced
this pull request
May 6, 2024
…-by-material-ui Port #405 to MORYX 8
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is quite a big PR, so here is a short introduction, why that is and what's been tackled. Even though there are a lot of changes, the single commits shouldn't be too big.
One recent problem with the CommandCenter GUI was, when being 'loaded into' other UIs, that its (or the other UIs) styling got broken.
A proper solution to fix this, seemed to exchange the reactstrap package for material-ui, because material-ui creates some kind of unique css classes, which certainly wouldn't conflict with any other UIs.
While this required replacing many HTML elements, and thus testing, many bugs of the UI have been fixed alongside.
I also tried to stick with the Material Design Guidelines and improve UI where possible without higher effort. There is no more custom css, but still, some elements needed minor custom styling for positioning etc.
Module configuration
Entry navigation
After changing the HTML elements, it turned out to be easier to move UI elements
than trying to adjust css etc.
The table got replaced by a tree. The title and description column got moved to into
the combination of inputs and tooltips.
LoadError
LoadErrors will be displayed only if they occured. Also, the text field is not
only a bit more eye catching but also multiline so that errors might be read at
a glance. The field is enabled too, so one could copy the message if it's still
out of range.
Select button
To reduce the number of 'primary' buttons, the different save buttons have been
merged into one 'select button'. Right now, 'Save + restart' is always preselected
(and not stored) as I assumed that to be the most common use case.
Module overview
Notifications
The previous modal, that popped up when clicking a notification has been moved into collapsible list item. Also, the notification timestamp has been added, which makes going through notifications feel more like browsing a log file.
Database configuration
Loading indicator
Added a skeleton to indicate the UI is loading content from the backend.
Migrations and setups
Handling of executing migrations and setups has changed from drop downs to list
with action buttons. This not only fixed issues with drop downs and removes
state (of selected items), but gives a better overview of available items.
Fixes
#356