Skip to content

Commit

Permalink
Merge pull request #754 from google/feature/753-setup-reset-button
Browse files Browse the repository at this point in the history
Add reset button to setup screen
  • Loading branch information
felixarntz authored Oct 31, 2019
2 parents bff18b3 + df21816 commit 4ce8f88
Show file tree
Hide file tree
Showing 7 changed files with 174 additions and 62 deletions.
2 changes: 2 additions & 0 deletions .storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
createRef,
Fragment,
createElement,
createPortal,
} from '@wordpress/element';
import {
withFilters,
Expand Down Expand Up @@ -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.__ = __ || {};
Expand Down
43 changes: 43 additions & 0 deletions assets/js/components/modal.js
Original file line number Diff line number Diff line change
@@ -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' ) || document.body;
}

componentDidMount() {
this.root.appendChild( this.el );
}

componentWillUnmount() {
this.root.removeChild( this.el );
}

render() {
return createPortal(
this.props.children,
this.el,
);
}
}
113 changes: 113 additions & 0 deletions assets/js/components/reset-button.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/**
* 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 (
<Fragment>
<Link
className="googlesitekit-reset-button"
onClick={ () => this.setState( { dialogActive: true } ) }
inherit
>
{ children || __( 'Reset Site Kit', 'google-site-kit' ) }
</Link>
<Modal>
<Dialog
dialogActive={ dialogActive }
handleConfirm={ this.handleUnlinkConfirm }
handleDialog={ this.handleDialog }
title={ __( 'Reset Site Kit', 'google-site-kit' ) }
subtitle={ __( 'Resetting this site will remove access to all services. After disconnecting, you will need to re-authorize your access to restore service.', 'google-site-kit' ) }
confirmButton={ __( 'Reset', 'google-site-kit' ) }
provides={ [] }
/>
</Modal>
</Fragment>
);
}
}
68 changes: 6 additions & 62 deletions assets/js/components/settings/settings-admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 (
<Fragment>
<div className="
Expand Down Expand Up @@ -152,12 +110,7 @@ class SettingsAdmin extends Component {
mdc-layout-grid__cell--span-8-tablet
mdc-layout-grid__cell--span-4-phone
">
<Link
onClick={ this.handleDialog }
inherit
>
{ __( 'Reset Site Kit', 'google-site-kit' ) }
</Link>
<ResetButton />
</div>
</div>
</div>
Expand Down Expand Up @@ -199,15 +152,6 @@ class SettingsAdmin extends Component {
</div>
</Layout>
</div>
<Dialog
dialogActive={ dialogActive }
handleConfirm={ this.handleUnlinkConfirm }
handleDialog={ this.handleDialog }
title={ __( 'Reset Site Kit', 'google-site-kit' ) }
subtitle={ __( 'Resetting this site will remove access to all services. After disconnecting, you will need to re-authorize your access to restore service.', 'google-site-kit' ) }
confirmButton={ __( 'Reset', 'google-site-kit' ) }
provides={ [] }
/>
</Fragment>
);
}
Expand Down
3 changes: 3 additions & 0 deletions assets/js/components/setup/setup-proxy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -118,13 +119,15 @@ class SetupUsingProxy extends Component {
</Fragment>
) }
<Button
className="googlesitekit-start-setup"
href={ proxySetupURL }
onClick={ () => {
sendAnalyticsTrackingEvent( 'plugin_setup', 'proxy_start_setup_landing_page' );
} }
>
{ __( 'Start setup', 'google-site-kit' ) }
</Button>
<ResetButton />
<Optin />
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions assets/sass/admin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.googlesitekit-wizard {

.googlesitekit-start-setup {
margin-right: 16px;
}
}

0 comments on commit 4ce8f88

Please sign in to comment.