Nested params in modal state - importing server vs pushed configs

src/js/locale/en.yaml

@@ -421,7 +421,10 @@ settings:
       upgrade_available: 'Upgrade available (%{version})'
       upgrade: 'Upgrade to %{version}'
       up_to_date: Up to date
-    share_configuration: Share configuration
+    shared_configuration:
+      label: Share configuration
+      share: Export/share
+      import: Import from server
     restart: Restart server
     reset: Reset settings
   about:
@@ -571,8 +574,12 @@ modal:
     lyrics: Lyrics
   import_configuration:
     title: Import configuration
-    subtitle: Import third-party authorizations and other settings
-    subtitle_push: Another user has shared their configuration with you
+    pushed:
+      title: Configuration received
+      subtitle: Another user has shared their configuration with you
+    server:
+      title: Import configuration
+      subtitle: Import third-party authorizations and other settings
     configurations: Configurations to import
     import_now: Import now
   share_configuration:

src/js/services/pusher/middleware.js

@@ -92,7 +92,12 @@ const PusherMiddleware = (function () {
           store.dispatch(spotifyActions.tokenChanged(params.spotify_token));
           break;
         case 'share_configuration_received':
-          store.dispatch(uiActions.openModal('import-configuration', params));
+          store.dispatch(
+            uiActions.openModal(
+              'import-configuration',
+              { context: 'pushed', configuration: params },
+            ),
+          );
           break;
         case 'notification':
           store.dispatch(uiActions.createNotification(params.notification));

src/js/services/ui/actions.js

@@ -265,13 +265,13 @@ export function removeNotification(key, manual = false) {
   };
 }
 
-export function openModal(name, data) {
+export function openModal(name, props) {
   return {
     type: 'OPEN_MODAL',
     name,
-    data: {
+    modal_state: {
       name,
-      ...data,
+      props,
     },
   };
 }

src/js/services/ui/middleware.js

@@ -37,6 +37,7 @@ const UIMiddleware = (function () {
         break;
 
       case 'CLOSE_MODAL':
+        next(action);
         if (action.url) {
           window.location = action.url;
         } else {

src/js/services/ui/reducer.js

@@ -51,9 +51,6 @@ export default function reducer(ui = {}, action) {
     case 'INSTALL_PROMPT':
       return { ...ui, install_prompt: action.event };
 
-      /**
-         * Context menu
-         * */
     case 'SHOW_CONTEXT_MENU':
       return { ...ui, context_menu: action.data };
 
@@ -72,18 +69,12 @@ export default function reducer(ui = {}, action) {
     case 'REMOVE_TOUCH_CONTEXT_MENU':
       return { ...ui, touch_context_menu: null };
 
-      /**
-         * Modals
-         * */
     case 'OPEN_MODAL':
-      return { ...ui, modal: action.data };
+      return { ...ui, modal: action.modal_state };
 
     case 'CLOSE_MODAL':
       return { ...ui, modal: null };
 
-      /**
-         * Notifications
-         * */
     case 'CREATE_NOTIFICATION':
       var notifications = { ...ui.notifications };
       notifications[action.notification.key] = action.notification;
@@ -101,10 +92,6 @@ export default function reducer(ui = {}, action) {
       delete notifications[action.key];
       return { ...ui, notifications };
 
-      /**
-         * Loading and processes
-         * */
-
     case 'START_LOADING': {
       return {
         ...ui,

src/js/views/Modals/ImportConfiguration.js

@@ -19,7 +19,10 @@ import { titleCase } from '../../util/helpers';
 const ImportConfiguration = () => {
   const dispatch = useDispatch();
   const [selected, setSelected] = useState([]);
-  const configuration = useSelector((state) => state.ui?.modal || {});
+  const {
+    configuration = {},
+    context = 'server',
+  } = useSelector((state) => state.ui.modal?.props || {});
 
   useEffect(() => {
     setWindowTitle(i18n('modal.import_configuration.title'));
@@ -72,10 +75,10 @@ const ImportConfiguration = () => {
   return (
     <Modal className="modal--share-configuration">
       <h1>
-        <I18n path="modal.import_configuration.title" />
+        <I18n path={`modal.import_configuration.${context}.title`} />
       </h1>
       <h2>
-        <I18n path="modal.import_configuration.subtitle" />
+        <I18n path={`modal.import_configuration.${context}.subtitle`} />
       </h2>
 
       <form onSubmit={onSubmit}>
@@ -85,12 +88,12 @@ const ImportConfiguration = () => {
           </div>
           <div className="input">
 
-            {Object.keys(configuration).map((name) => (
-              <div className="checkbox-group__item">
+            {Object.keys(configuration).filter((i) => i !== 'name').map((name) => (
+              <div className="checkbox-group__item" key={`configuration_${name}`}>
                 <label>
                   <input
                     type="checkbox"
-                    name={`configuration_to_import${name}`}
+                    name={`configuration_to_import_${name}`}
                     checked={selected.indexOf(name) > -1}
                     onChange={() => onSelectedChanged(name)}
                   />

src/js/views/Settings.js

@@ -113,6 +113,20 @@ class Settings extends React.Component {
     localScan();
   }
 
+  doImportSharedConfig = () => {
+    const {
+      uiActions: {
+        openModal,
+      },
+      pusher: {
+        config: {
+          shared_config: configuration,
+        },
+      },
+    } = this.props;
+    openModal('import-configuration', { context: 'server', configuration });
+  }
+
   renderLocalScanButton = () => {
     const {
       ui: { processes },
@@ -471,20 +485,29 @@ class Settings extends React.Component {
                   )}
                 </span>
                 {pusher.version.upgrade_available ? (
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flag flag--dark"
-                    href={`https://github.com/jaedb/Iris/releases/tag/${pusher.version.latest}`}
-                  >
-                    <Icon name="cloud_download" className="blue-text" />
-                    <I18n
-                      path="settings.advanced.version.upgrade_available"
-                      version={pusher.version.latest}
+                  <>
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flag flag--dark"
+                      href={`https://github.com/jaedb/Iris/releases/tag/${pusher.version.latest}`}
                     >
-                      {' '}
-                    </I18n>
-                  </a>
+                      <Icon name="cloud_download" className="blue-text" />
+                      <I18n
+                        path="settings.advanced.version.upgrade_available"
+                        version={pusher.version.latest}
+                      >
+                        {' '}
+                      </I18n>
+                    </a>
+                    <Button
+                      type="secondary"
+                      onClick={this.doUpgrade}
+                      tracking={{ category: 'System', action: 'Upgrade', label: pusher.version.latest }}
+                    >
+                      <I18n path="settings.advanced.version.upgrade" version={pusher.version.latest} />
+                    </Button>
+                  </>
                 ) : (
                   <span className="flag flag--dark">
                     <Icon name="check" className="green-text" />
@@ -498,22 +521,23 @@ class Settings extends React.Component {
           </div>
 
           <div className="field">
-            {this.renderLocalScanButton()}
-            <Button to="/modal/share-configuration">
-              <I18n path="settings.advanced.share_configuration" />
-            </Button>
+            <div className="name">
+              <I18n path="settings.advanced.shared_configuration.label" />
+            </div>
+            <div className="input">
+              <Button to="/modal/share-configuration">
+                <I18n path="settings.advanced.shared_configuration.share" />
+              </Button>
+              {pusher.config?.shared_config && (
+                <Button onClick={this.doImportSharedConfig}>
+                  <I18n path="settings.advanced.shared_configuration.import" />
+                </Button>
+              )}
+            </div>
           </div>
 
           <div className="field">
-            {pusher.version.upgrade_available && (
-              <Button
-                type="secondary"
-                onClick={this.doUpgrade}
-                tracking={{ category: 'System', action: 'Upgrade', label: pusher.version.latest }}
-              >
-                <I18n path="settings.advanced.version.upgrade" version={pusher.version.latest} />
-              </Button>
-            )}
+            {this.renderLocalScanButton()}
             <Button
               type="destructive"
               working={mopidy.restarting}