Notices: separate views from logic, component refactor

[mtias]

Work in progress...

<Notice> will be the base notice component in Calypso.

---

• Move simple-notice.jsx to components/notice.
• Consolidate scss code for the base component in component/notice.
• Cleanup component (ES6, etc).
• Update references to simple-notice in the codebase.
• Update sections using notices/notice to use components/notice if possible.
• Finally deprecate notices/notice and update notices-list to depend on the new component instead.

[artpi]

@johnHackworth , I heard that you did plugins.
We are trying to deprecate raw, button and href in notices and these are using those:
Basically, we want to use a component that was previously SimpleNotice and now will be Notice:
Can we do that here?
Can you help / advise?

/calypso/client/my-sites/plugins/plugin-item/plugin-item.jsx:

        if ( this.props.isSelectable ) {
            errors.forEach( function( error ) {
                errorNotices.push(
                    <Notice
                        type='message'
                        status='is-error'
                        text={ PluginNotices.getMessage( [ error ], PluginNotices.errorMessage.bind( PluginNotices ) ) }
                        isCompact={ true }
                        button={ PluginNotices.getErrorButton( error ) }
                        href={ PluginNotices.getErrorHref( error ) }
                        raw={ { onRemoveCallback: PluginsActions.removePluginsNotices.bind( this, [ error ] ) } }
                        inline={ true }
                        key={ 'notice-' + errorCounter } />
                );
                errorCounter++;
            }, this );
            return (
                <div>

/calypso/client/my-sites/plugins/plugin-meta/index.jsx:

    getUpdateWarning() {
        const newVersion = this.getAvailableNewVersion();
        if ( newVersion ) {
            return <Notice
                className="plugin-meta__version-notice"
                text={ i18n.translate( 'A new version is available.' ) }
                status="is-warning"
                button={ i18n.translate( 'Update to %(newPluginVersion)s', { args: { newPluginVersion: newVersion } } ) }
                onClick={ this.handlePluginUpdates }
                showDismiss={ false } />;
        }
    },

[johnHackworth]

What's the plan for notices that require an embed action then? are we going to have a different component for those cases? (sorry if I'm a little lost here, I didn't realize that this was already on development).

ping @enejb and @lezama, you also want to be aware about this :) (hmmm, and probably @ebinnion & @roccotripaldi ? I know you are using notices in people but I'm not sure if you are using embed actions there)

[artpi]

Not yet ported to components/notice

• /calypso/client/my-sites/draft/index.jsx:
  • using raw prop
• /calypso/client/my-sites/plugins/plugin-item/plugin-item.jsx
  • raw, href, button
• /calypso/client/my-sites/plugins/plugin-meta/index.jsx:
  • button
• /calypso/client/reader/post-errors/index.jsx:
  • raw

[scruffian]

I found an issue in /start:

The hebrew text should be right aligned.

[scruffian]

I found an issue with the email verification notice:

At the moment this is a shade of grey. The blue is too strong IMO.

[scruffian]

Another issue, possibly connected:

This only happens directly after signing up. Once you reload its fine.

[mtias]

@scruffian how did you hit that one? It seems there's state pollution from noSidebar, not related to this one.

[artpi]

I clicked through what I could,seems to work
If someone can have a look -- it would be good to have fresh eyes on it

[artpi]

🚢

[johnHackworth]

On /plugins (where we do a heavy use of notices) everything looks peachy... looks good to me!