From c4a063d36a3bd3148f91e3ec7d14c426dcff8f78 Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 21:10:02 +0200 Subject: [PATCH 1/7] add Modal component --- assets/js/components/modal.js | 43 +++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 assets/js/components/modal.js diff --git a/assets/js/components/modal.js b/assets/js/components/modal.js new file mode 100644 index 00000000000..07156d46147 --- /dev/null +++ b/assets/js/components/modal.js @@ -0,0 +1,43 @@ +/** + * Modal component. + * + * Site Kit by Google, Copyright 2019 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +const { Component, createPortal } = wp.element; + +export default class Modal extends Component { + constructor( props ) { + super( props ); + this.el = document.createElement( 'div' ); + // This class is the outermost wrapper which is present on all Site Kit pages. + this.root = document.querySelector( '.googlesitekit-plugin' ); + } + + componentDidMount() { + this.root.appendChild( this.el ); + } + + componentWillUnmount() { + this.root.removeChild( this.el ); + } + + render() { + return createPortal( + this.props.children, + this.el, + ); + } +} From 3f24226b920410c2759980628ff597b62fe0ceae Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 21:10:31 +0200 Subject: [PATCH 2/7] add ResetButton component --- assets/js/components/reset-button.js | 112 +++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 assets/js/components/reset-button.js diff --git a/assets/js/components/reset-button.js b/assets/js/components/reset-button.js new file mode 100644 index 00000000000..181622d9c85 --- /dev/null +++ b/assets/js/components/reset-button.js @@ -0,0 +1,112 @@ +/** + * ResetButton component. + * + * Site Kit by Google, Copyright 2019 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import Link from './link'; +import Modal from './modal'; +const { __ } = wp.i18n; + +/** + * External dependencies + */ +import data, { TYPE_CORE } from 'GoogleComponents/data'; +import { + clearAppLocalStorage, + getSiteKitAdminURL, +} from 'GoogleUtil'; +import Dialog from 'GoogleComponents/dialog'; +import { Fragment } from 'react'; +const { Component } = wp.element; + +export default class ResetButton extends Component { + constructor( props ) { + super( props ); + + this.state = { + dialogActive: false, + }; + + this.handleDialog = this.handleDialog.bind( this ); + this.handleUnlinkConfirm = this.handleUnlinkConfirm.bind( this ); + this.handleCloseModal = this.handleCloseModal.bind( this ); + } + + componentDidMount() { + window.addEventListener( 'keyup', this.handleCloseModal, false ); + } + + componentWillUnmount() { + window.removeEventListener( 'keyup', this.handleCloseModal ); + } + + async handleUnlinkConfirm() { + await data.set( TYPE_CORE, 'site', 'reset' ); + clearAppLocalStorage(); + this.handleDialog(); + document.location = getSiteKitAdminURL( 'googlesitekit-splash' ); + } + + handleCloseModal( e ) { + if ( 27 === e.keyCode ) { + this.setState( { + dialogActive: false, + } ); + } + } + + handleDialog() { + this.setState( ( prevState ) => { + return { + dialogActive: ! prevState.dialogActive, + }; + } ); + } + + render() { + const { + children, + } = this.props; + const { + dialogActive, + } = this.state; + + return ( + + this.setState( { dialogActive: true } ) } + inherit + > + { children || __( 'Reset Site Kit', 'google-site-kit' ) } + + + + + + ); + } +} From 4ab7e7d38bb871f59f85c45561b082caf6fbf153 Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 21:10:49 +0200 Subject: [PATCH 3/7] refactor SettingsAdmin with ResetButton --- .../js/components/settings/settings-admin.js | 68 ++----------------- 1 file changed, 6 insertions(+), 62 deletions(-) diff --git a/assets/js/components/settings/settings-admin.js b/assets/js/components/settings/settings-admin.js index 5fb76266881..831c43b2761 100644 --- a/assets/js/components/settings/settings-admin.js +++ b/assets/js/components/settings/settings-admin.js @@ -20,14 +20,12 @@ * External dependencies */ import Layout from 'GoogleComponents/layout/layout'; -import Link from 'GoogleComponents/link'; -import Dialog from 'GoogleComponents/dialog'; import Optin from 'GoogleComponents/optin'; -import data, { TYPE_CORE } from 'GoogleComponents/data'; -import { - clearAppLocalStorage, - getSiteKitAdminURL, -} from 'GoogleUtil'; + +/** + * Internal dependencies + */ +import ResetButton from '../reset-button'; const { Component, Fragment } = wp.element; const { __ } = wp.i18n; @@ -44,50 +42,10 @@ class SettingsAdmin extends Component { img: picture, user: name, }, - dialogActive: false, }; - - this.handleDialog = this.handleDialog.bind( this ); - this.handleUnlinkConfirm = this.handleUnlinkConfirm.bind( this ); - this.handleCloseModal = this.handleCloseModal.bind( this ); - } - - componentDidMount() { - window.addEventListener( 'keyup', this.handleCloseModal, false ); - } - - componentWillUnmount() { - window.removeEventListener( 'keyup', this.handleCloseModal ); - } - - handleDialog() { - this.setState( ( prevState ) => { - return { - dialogActive: ! prevState.dialogActive, - }; - } ); - } - - async handleUnlinkConfirm() { - await data.set( TYPE_CORE, 'site', 'reset' ); - clearAppLocalStorage(); - this.handleDialog(); - document.location = getSiteKitAdminURL( 'googlesitekit-splash' ); - } - - handleCloseModal( e ) { - if ( 27 === e.keyCode ) { - this.setState( { - dialogActive: false, - } ); - } } render() { - const { - dialogActive, - } = this.state; - return (
- - { __( 'Reset Site Kit', 'google-site-kit' ) } - +
@@ -199,15 +152,6 @@ class SettingsAdmin extends Component { - ); } From 34aee477aecfbc928ae2577f4b61b0af4698afbe Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 21:26:03 +0200 Subject: [PATCH 4/7] add class to reset button --- assets/js/components/reset-button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/js/components/reset-button.js b/assets/js/components/reset-button.js index 181622d9c85..0197de63567 100644 --- a/assets/js/components/reset-button.js +++ b/assets/js/components/reset-button.js @@ -90,6 +90,7 @@ export default class ResetButton extends Component { return ( this.setState( { dialogActive: true } ) } inherit > From 434b9ad1968ace0cf1db39ab5d12b3b4ce497b02 Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 21:28:17 +0200 Subject: [PATCH 5/7] add ResetButton to setup screen --- assets/js/components/setup/setup-proxy.js | 3 +++ assets/sass/admin.scss | 1 + .../dashboard/wizard/_googlesitekit-wizard-setup.scss | 6 ++++++ 3 files changed, 10 insertions(+) create mode 100644 assets/sass/components/dashboard/wizard/_googlesitekit-wizard-setup.scss diff --git a/assets/js/components/setup/setup-proxy.js b/assets/js/components/setup/setup-proxy.js index 329a00a0a4c..0e8473ef18b 100644 --- a/assets/js/components/setup/setup-proxy.js +++ b/assets/js/components/setup/setup-proxy.js @@ -21,6 +21,7 @@ */ import Header from 'GoogleComponents/header'; import Button from 'GoogleComponents/button'; +import ResetButton from 'GoogleComponents/reset-button'; import Layout from 'GoogleComponents/layout/layout'; import Optin from 'GoogleComponents/optin'; import { sendAnalyticsTrackingEvent } from 'GoogleUtil'; @@ -118,6 +119,7 @@ class SetupUsingProxy extends Component { ) } + diff --git a/assets/sass/admin.scss b/assets/sass/admin.scss index 577ba9264ac..42e4f238e99 100644 --- a/assets/sass/admin.scss +++ b/assets/sass/admin.scss @@ -126,6 +126,7 @@ @import "components/dashboard/wizard/googlesitekit-wizard-progress"; @import "components/dashboard/wizard/googlesitekit-wizard-progress-step"; @import "components/dashboard/wizard/googlesitekit-wizard-step"; +@import "components/dashboard/wizard/googlesitekit-wizard-setup"; // Setup @import "components/setup/googlesitekit-setup"; diff --git a/assets/sass/components/dashboard/wizard/_googlesitekit-wizard-setup.scss b/assets/sass/components/dashboard/wizard/_googlesitekit-wizard-setup.scss new file mode 100644 index 00000000000..988af3e7d7a --- /dev/null +++ b/assets/sass/components/dashboard/wizard/_googlesitekit-wizard-setup.scss @@ -0,0 +1,6 @@ +.googlesitekit-wizard { + + .googlesitekit-start-setup { + margin-right: 16px; + } +} From 670fdd3aa7d6c91a87a7eb6f8de596d41c51b8b7 Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 22:20:44 +0200 Subject: [PATCH 6/7] add createPortal to storybook wp.element --- .storybook/config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.storybook/config.js b/.storybook/config.js index 2160dce5e75..0e4f0132c04 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -13,6 +13,7 @@ import { createRef, Fragment, createElement, + createPortal, } from '@wordpress/element'; import { withFilters, @@ -68,6 +69,7 @@ wp.element.Component = Component; wp.element.createRef = createRef; wp.element.Fragment = Fragment; wp.element.createElement = createElement; +wp.element.createPortal = createPortal; wp.components.withFilters = withFilters; window.lodash = lodash; wp.i18n.__ = __ || {}; From df21816d0e8a72f7159a36eda43f8eb05ffa1a88 Mon Sep 17 00:00:00 2001 From: Evan Mattson Date: Thu, 31 Oct 2019 22:21:10 +0200 Subject: [PATCH 7/7] fallback to document body in Modal --- assets/js/components/modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/components/modal.js b/assets/js/components/modal.js index 07156d46147..1b3c555af6d 100644 --- a/assets/js/components/modal.js +++ b/assets/js/components/modal.js @@ -23,7 +23,7 @@ export default class Modal extends Component { super( props ); this.el = document.createElement( 'div' ); // This class is the outermost wrapper which is present on all Site Kit pages. - this.root = document.querySelector( '.googlesitekit-plugin' ); + this.root = document.querySelector( '.googlesitekit-plugin' ) || document.body; } componentDidMount() {