Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[release-4.4] Bug 1810195: Fix monaco editor interaction with notification drawer #4641

Merged
merged 1 commit into from Mar 5, 2020
Merged

[release-4.4] Bug 1810195: Fix monaco editor interaction with notification drawer #4641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 17 additions & 4 deletions frontend/public/components/app.jsx
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@ import '../style.scss';
import { Page } from '@patternfly/react-core';

const breakpointMD = 768;
const breakpointLG = 1600;
const NOTIFICATION_DRAWER_BREAKPOINT = 1800;

const cvResource = [
{
Expand All @@ -48,6 +48,7 @@ class App extends React.PureComponent {

this._onNavToggle = this._onNavToggle.bind(this);
this._onNavSelect = this._onNavSelect.bind(this);
this._onNotificationDrawerToggle = this._onNotificationDrawerToggle.bind(this);
this._isDesktop = this._isDesktop.bind(this);
this._onResize = this._onResize.bind(this);
this.previousDesktopState = this._isDesktop();
Expand Down Expand Up @@ -81,7 +82,7 @@ class App extends React.PureComponent {
}

_isLargeLayout() {
return window.innerWidth >= breakpointLG;
return window.innerWidth >= NOTIFICATION_DRAWER_BREAKPOINT;
}

_isDesktop() {
Expand All @@ -92,7 +93,7 @@ class App extends React.PureComponent {
// Some components, like svg charts, need to reflow when nav is toggled.
// Fire event after a short delay to allow nav animation to complete.
setTimeout(() => {
window.dispatchEvent(new Event('nav_toggle'));
window.dispatchEvent(new Event('sidebar_toggle'));
}, 100);

this.setState((prevState) => {
Expand All @@ -102,6 +103,15 @@ class App extends React.PureComponent {
});
}

_onNotificationDrawerToggle() {
if (this._isLargeLayout()) {
// Fire event after the drawer animation speed delay.
setTimeout(() => {
window.dispatchEvent(new Event('sidebar_toggle'));
}, 250);
}
}

_onNavSelect() {
//close nav on mobile nav selects
if (!this._isDesktop()) {
Expand Down Expand Up @@ -141,7 +151,10 @@ class App extends React.PureComponent {
}
>
<Firehose resources={cvResource}>
<ConnectedNotificationDrawer isDesktop={isDrawerInline}>
<ConnectedNotificationDrawer
isDesktop={isDrawerInline}
onDrawerChange={this._onNotificationDrawerToggle}
>
<AppContents />
</ConnectedNotificationDrawer>
</Firehose>
Expand Down
2 changes: 0 additions & 2 deletions frontend/public/components/edit-yaml.jsx
View file
Open in desktop
Expand Up @@ -143,13 +143,11 @@ const EditYAML_ = connect(stateToProps)(
componentDidMount() {
this.loadYaml();
window.addEventListener('resize', this.resize);
window.addEventListener('nav_toggle', this.resize);
window.addEventListener('sidebar_toggle', this.resize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.resize);
window.removeEventListener('nav_toggle', this.resize);
window.removeEventListener('sidebar_toggle', this.resize);
}

Expand Down
5 changes: 5 additions & 0 deletions frontend/public/components/notification-drawer.tsx
View file
Open in desktop
Expand Up @@ -125,6 +125,7 @@ export const ConnectedNotificationDrawer_: React.FC<ConnectedNotificationDrawerP
toggleNotificationDrawer,
toggleNotificationsRead,
isDrawerExpanded,
onDrawerChange,
notificationsRead,
alerts,
resources,
Expand Down Expand Up @@ -202,6 +203,9 @@ export const ConnectedNotificationDrawer_: React.FC<ConnectedNotificationDrawerP
isDrawerExpanded,
prevDrawerToggleState,
]);
React.useEffect(() => {
onDrawerChange();
}, [isDrawerExpanded, onDrawerChange]);

const emptyState = !_.isEmpty(loadError) ? (
<AlertErrorState errorText={loadError.message} />
Expand Down Expand Up @@ -282,6 +286,7 @@ export type ConnectedNotificationDrawerProps = {
toggleNotificationDrawer: () => any;
isDrawerExpanded: boolean;
notificationsRead: boolean;
onDrawerChange: () => void;
alerts: {
data: Alert[];
loaded: boolean;
Expand Down
4 changes: 2 additions & 2 deletions frontend/public/components/utils/ref-width-hook.ts
View file
Open in desktop
Expand Up @@ -9,10 +9,10 @@ export const useRefWidth = () => {
useEffect(() => {
const handleResize = () => setWidth(ref && ref.current && ref.current.clientWidth);
window.addEventListener('resize', handleResize);
window.addEventListener('nav_toggle', handleResize);
window.addEventListener('sidebar_toggle', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('nav_toggle', handleResize);
window.removeEventListener('sidebar_toggle', handleResize);
};
}, []);

Expand Down