fix(dashboard-css): make to load saved css template #19840
Conversation
| @@ -314,7 +311,7 @@ class HeaderActionsDropdown extends React.PureComponent { | |||
| <Menu.Item key={MENU_KEYS.EDIT_CSS}> | |||
| <CssEditor | |||
| triggerNode={<span>{t('Edit CSS')}</span>} | |||
| initialCss={this.state.css} | |||
| initialCss={customCss} | |||
There was a problem hiding this comment.
@prosdev0107 did you check how initialCss works?
I believe initialCss is required in mounting only, not in every rendering. If we use props value directly, intialCss will be defined every rendering, which is not its purpose.
What about the following?
componentDidMount() {
this.setState({
css: this.props.customCss
});
}
...
...
<CssEditor
initialCss={this.state.css}
...
/>
What do you think @diegomedina248 ?
There was a problem hiding this comment.
I tried to resolve it with componentDidMount but it doesn't work.
There was a problem hiding this comment.
I resolved this with componentWillReceiveProps.
Codecov Report
@@ Coverage Diff @@
## master #19840 +/- ##
==========================================
- Coverage 66.55% 66.48% -0.08%
==========================================
Files 1692 1713 +21
Lines 64802 64996 +194
Branches 6657 6699 +42
==========================================
+ Hits 43129 43212 +83
- Misses 19973 20077 +104
- Partials 1700 1707 +7
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
| @@ -136,6 +136,12 @@ class HeaderActionsDropdown extends React.PureComponent { | |||
| }); | |||
| } | |||
|
|
|||
| UNSAFE_componentWillReceiveProps(nextProps) { | |||
| if (this.props.customCss !== nextProps.customCss) { | |||
| this.setState({ css: nextProps.customCss }); | |||
There was a problem hiding this comment.
seems like customCss comes from redux store, which is updated via updateCss.
Maybe we can try removing the following from changeCss, and inject the custom css after saving it here?:
this.setState({ css }, () => {
injectCustomCss(css);
});That would leave us with a single source of truth, which is better (if it works as desired)
|
/testenv up |
|
@rusackas Ephemeral environment spinning up at http://54.203.4.231:8080. Credentials are |
|
Ephemeral environment shutdown and build artifacts deleted. |
* fix(dashboard-css): make to load saved css template * fix(dashboard-css): make to update state css with componentDidMount * fix(dashobard-css): make to inject custom css after updateCss * fix(dashboard-css): make to add RTL for custom css * fix(dashboard-css): make to fix lint issue
* fix(dashboard-css): make to load saved css template * fix(dashboard-css): make to update state css with componentDidMount * fix(dashobard-css): make to inject custom css after updateCss * fix(dashboard-css): make to add RTL for custom css * fix(dashboard-css): make to fix lint issue
mistercrunch
added
🏷️ bot
SUMMARY
CSS template not saving
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
BEFORE:
AFTER:
https://user-images.githubusercontent.com/47900232/165148019-2adf38ac-dd71-4989-84be-9c78b7a72ab6.mov
TESTING INSTRUCTIONS
How to reproduce issues
ADDITIONAL INFORMATION