Merge pull request #430 from gemini-testing/HERMIONE-335.fix_deps

fix: delete deprecated reapop-theme-wybo which conflict with reapop

Author: DudaGod

lib/static/components/gui.js

@@ -1,8 +1,7 @@
 import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import Notifications from 'reapop';
-import wybo from 'reapop-theme-wybo';
+import NotificationsSystem, {wyboTheme} from 'reapop';
 import {bindActionCreators} from 'redux';
 
 import {ROOT} from '../../constants/extension-points';
@@ -25,7 +24,8 @@ class Gui extends Component {
             active: PropTypes.bool,
             content: PropTypes.string
         }).isRequired,
-        customScripts: PropTypes.array
+        customScripts: PropTypes.array,
+        notifications: PropTypes.array
     }
 
     componentDidMount() {
@@ -64,12 +64,13 @@ class Gui extends Component {
     }
 
     render() {
-        const {allRootSuiteIds, loading, customScripts} = this.props;
+        const {allRootSuiteIds, loading, customScripts, notifications, actions} = this.props;
+        const notificationElem = <NotificationsSystem theme={wyboTheme} notifications={notifications} dismissNotification={actions.dismissNotification} />;
 
         if (!allRootSuiteIds.length) {
             return (
                 <Fragment>
-                    <Notifications theme={wybo}/>
+                    {notificationElem}
                     <Loading active={true} />
                 </Fragment>
             );
@@ -79,7 +80,7 @@ class Gui extends Component {
             <Fragment>
                 <ExtensionPoint name={ROOT}>
                     <CustomScripts scripts={customScripts}/>
-                    <Notifications theme={wybo}/>
+                    {notificationElem}
                     <FaviconChanger />
                     <ControlButtons />
                     <main className="container">
@@ -96,10 +97,11 @@ class Gui extends Component {
 }
 
 export default connect(
-    ({tree, loading, config: {customScripts}}) => ({
+    ({tree, loading, config: {customScripts}, notifications}) => ({
         allRootSuiteIds: tree.suites.allRootIds,
         loading,
-        customScripts
+        customScripts,
+        notifications
     }),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(Gui);

lib/static/components/report.js

@@ -1,8 +1,7 @@
 import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import Notifications from 'reapop';
-import wybo from 'reapop-theme-wybo';
+import NotificationsSystem, {wyboTheme} from 'reapop';
 import {bindActionCreators} from 'redux';
 
 import {ROOT} from '../../constants/extension-points';
@@ -22,7 +21,8 @@ class Report extends Component {
         // from store
         allRootSuiteIds: PropTypes.arrayOf(PropTypes.string).isRequired,
         fetchDbDetails: PropTypes.array.isRequired,
-        customScripts: PropTypes.array
+        customScripts: PropTypes.array,
+        notifications: PropTypes.array
     }
 
     componentDidMount() {
@@ -34,12 +34,13 @@ class Report extends Component {
     }
 
     render() {
-        const {allRootSuiteIds, fetchDbDetails} = this.props;
+        const {allRootSuiteIds, fetchDbDetails, notifications, actions} = this.props;
+        const notificationElem = <NotificationsSystem theme={wyboTheme} notifications={notifications} dismissNotification={actions.dismissNotification} />;
 
         if (!allRootSuiteIds.length && !fetchDbDetails.length) {
             return (
                 <Fragment>
-                    <Notifications theme={wybo}/>
+                    {notificationElem}
                     <Loading active={true} />
                 </Fragment>
             );
@@ -49,7 +50,7 @@ class Report extends Component {
             <Fragment>
                 <ExtensionPoint name={ROOT}>
                     <CustomScripts scripts={this.props.customScripts}/>
-                    <Notifications theme={wybo} />
+                    {notificationElem}
                     <FaviconChanger />
                     <Header/>
                     <ControlButtons/>
@@ -65,10 +66,11 @@ class Report extends Component {
 }
 
 export default connect(
-    ({tree, fetchDbDetails, config}) => ({
+    ({tree, fetchDbDetails, config, notifications}) => ({
         allRootSuiteIds: tree.suites.allRootIds,
         fetchDbDetails,
-        customScripts: config.customScripts
+        customScripts: config.customScripts,
+        notifications
     }),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(Report);

lib/static/modules/actions.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import {isEmpty, difference} from 'lodash';
-import {addNotification as notify} from 'reapop';
+import {notify, dismissNotification as dismissNotify, POSITIONS} from 'reapop';
 import StaticTestsTreeBuilder from '../../tests-tree-builder/static';
 import actionNames from './action-names';
 import {types as modalTypes} from '../components/modals';
@@ -12,12 +12,24 @@ import {fetchDataFromDatabases, mergeDatabases, connectToDatabase, getMainDataba
 import {setFilteredBrowsers} from './query-params';
 import plugins from './plugins';
 
-export const createNotification = (id, status, message, props) =>
-    notify({id, status, message, ...props});
+export const createNotification = (id, status, message, props = {}) => {
+    const notificationProps = {
+        position: POSITIONS.topCenter,
+        dismissAfter: 5000,
+        dismissible: true,
+        showDismissButton: true,
+        allowHTML: true,
+        ...props
+    };
+
+    return notify({id, status, message, ...notificationProps});
+};
 
 export const createNotificationError = (id, error, props = {dismissAfter: 0}) =>
     createNotification(id, 'error', getHttpErrorMessage(error), props);
 
+export const dismissNotification = dismissNotify;
+
 export const initGuiReport = () => {
     return async (dispatch) => {
         try {

lib/static/modules/default-state.js

@@ -80,5 +80,6 @@ export default Object.assign(defaults, {
     fetchDbDetails: [],
     progressBar: {
         currentRootSuiteId: null
-    }
+    },
+    notifications: []
 });

lib/static/modules/reducers/notifications.js

@@ -1,16 +1,12 @@
-import {POSITIONS, reducer} from 'reapop';
-
-const notificationsReducer = reducer({
-    position: POSITIONS.topCenter,
-    dismissAfter: 5000,
-    dismissible: true,
-    closeButton: true,
-    allowHTML: true
-});
+import {reducer} from 'reapop';
 
 export default (state, action) => {
+    if (!action.type.startsWith('reapop/')) {
+        return state;
+    }
+
     return {
         ...state,
-        notifications: notificationsReducer(state.notifications, action)
+        notifications: reducer()([], action)
     };
 };