Restyle developer tools UI and add a notification for new dash versions #3121
Conversation
marthacryan
changed the title
dash/dash-renderer/src/components/error/menu/DebugMenu.react.js
Outdated
Show resolved
Hide resolved
|
|
||
| class DebugMenu extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| const {config} = props; | ||
|
|
||
| requestDashVersionInfo(config.dash_version).then(body => { |
There was a problem hiding this comment.
I don't think this is the right place for that call. I suggest creating a new functional component and using useEffect to trigger the call and attach the result to a redux action/reducer.
There was a problem hiding this comment.
Done! Does that look ok? I use react state rather than redux.
| }; | ||
|
|
||
| // Close the upgrade tooltip if the user clicks outside of it | ||
| document.addEventListener('click', e => { |
There was a problem hiding this comment.
This also need to be unattached if the component gets unmounted. Move to useEffect in the new component and have it return () => document.removeEventListener(...)
| <div className='dash-debug-menu__version'> | ||
| {this.state.upgradeTooltipOpened ? ( | ||
| <div className='dash-debug-menu__upgrade-tooltip'> | ||
| <a | ||
| target='_blank' | ||
| href='https://dash.plotly.com/installation' | ||
| > | ||
| Read details | ||
| </a> | ||
| <button onClick={setSkipThisVersion}> | ||
| Skip this version | ||
| </button> | ||
| <button onClick={setRemindMeLater}> | ||
| Remind me tomorrow | ||
| </button> | ||
| <button onClick={setDontShowAgain}> | ||
| Silence all version notifications | ||
| </button> | ||
| </div> | ||
| ) : null} | ||
| <span>v{config.dash_version}</span> | ||
| {shouldShowUpgradeNotification( | ||
| config.dash_version, | ||
| newDashVersion | ||
| ) ? ( | ||
| <button | ||
| className='dash-debug-menu__upgrade-button' | ||
| onClick={toggleShowUpgradeTooltip} | ||
| > | ||
| Dash update available - v{newDashVersion} | ||
| </button> | ||
| ) : null} | ||
| </div> |
There was a problem hiding this comment.
Maybe move this part to a new component and maybe also a component for each entry that was previously buttonFactory but I think it could have been a component DebugButton
There was a problem hiding this comment.
Good point! I moved the upgrade info (current version and if necessary the upgrade button / tooltip) into VersionInfo.react.js, let me know if that looks ok.
For the other buttons, they each have a bit of custom logic to the point that I'm not sure it will save any lines of code for them to be separate. But let me know if you think otherwise.
| className={classes('dash-debug-menu__icon', 'debug')} | ||
| /> | ||
| </div> | ||
| <GlobalErrorOverlay |
There was a problem hiding this comment.
Is this comoponent not used anymore?
There was a problem hiding this comment.
Ah yeah I did remove that. It had very little logic in it so I just moved it into the DebugMenu.react.js. The only thing I see it doing is concatenating the frontend and the backend errors, which I now do on line 148. Here's the current file:
We're still deciding how opt outs should happen so I'm going to wait on this! |
Updates developer tools to have a new UI.
The notification prompts the developer to upgrade their version of dash and has 3 options for actions:
Note: Currently requires plotly VPN to test until we make the server public.
Todos: