added export/import user preferences

desktop-app/app/actions/browser.js

@@ -38,6 +38,7 @@ export const NEW_DRAWER_CONTENT = 'NEW_DRAWER_CONTENT';
 export const NEW_PREVIEWER_CONFIG = 'NEW_PREVIEWER_CONFIG';
 export const NEW_ACTIVE_DEVICES = 'NEW_ACTIVE_DEVICES';
 export const NEW_CUSTOM_DEVICE = 'NEW_CUSTOM_DEVICE';
+export const LOAD_CUSTOM_DEVICES = 'LOAD_CUSTOM_DEVICES';
 export const DELETE_CUSTOM_DEVICE = 'DELETE_CUSTOM_DEVICE';
 export const NEW_FILTERS = 'NEW_FILTERS';
 export const NEW_USER_PREFERENCES = 'NEW_USER_PREFERENCES';
@@ -184,6 +185,13 @@ export function newCustomDevice(device) {
   };
 }
 
+export function loadCustomDevices(devices) {
+  return {
+    type: LOAD_CUSTOM_DEVICES,
+    devices,
+  };
+}
+
 export function deleteCustomDevice(device) {
   return {
     type: DELETE_CUSTOM_DEVICE,
@@ -691,6 +699,39 @@ export function onDevToolsClose(devToolsInfo, closeAll) {
   };
 }
 
+export function downloadPreferences(url) {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    ipcRenderer.send('download-preferences', {url});
+  };
+}
+
+export function uploadPreferences() {
+  return (dispatch: Dispatch, getState: RootStateType) => {
+    remote.dialog
+      .showOpenDialog({
+        title: 'Select user configuration file',
+        buttonLabel: 'Upload',
+        filters: [
+          {
+            name: 'Json file',
+            extensions: ['json'],
+          },
+        ],
+        properties: ['openFile'],
+      })
+      .then(async file => {
+        if (!file.canceled) {
+          const response = await (await fetch(file.filePaths[0])).json();
+          const preferencesObj = response;
+          dispatch(newActiveDevices(preferencesObj.devices));
+          dispatch(loadCustomDevices(preferencesObj.customDevices));
+          dispatch(newUserPreferences(preferencesObj.userPreferences));
+          dispatch(setTheme(preferencesObj.userPreferences.theme));
+        }
+      });
+  };
+}
+
 export function setCurrentAddressAsHomepage() {
   return (dispatch: Dispatch, getState: RootStateType) => {
     const {

desktop-app/app/components/UserPreferences/index.js

@@ -19,8 +19,14 @@ import {userPreferenceSettings} from '../../settings/userPreferenceSettings';
 import {SCREENSHOT_MECHANISM, STARTUP_PAGE} from '../../constants/values';
 import {notifyPermissionPreferenceChanged} from '../../utils/permissionUtils.js';
 import {PERMISSION_MANAGEMENT_OPTIONS} from '../../constants/permissionsManagement';
-import {setTheme} from '../../actions/browser';
+import {
+  setTheme,
+  downloadPreferences,
+  uploadPreferences,
+} from '../../actions/browser';
 import {deleteSearchResults} from '../../services/searchUrlSuggestions';
+import FileDownloadIcon from '@material-ui/icons/CloudDownload';
+import FileUploadIcon from '@material-ui/icons/CloudUpload';
 
 function UserPreference({
   devToolsConfig,
@@ -31,7 +37,8 @@ function UserPreference({
   const classes = useStyles();
   const commonClasses = useCommonStyles();
   const dispatch = useDispatch();
-  const themeSource = useSelector(state => state.browser.theme);
+  const state = useSelector(state => state.browser);
+  const themeSource = state.theme;
   const selectedThemeOption = useMemo(
     () => themeOptions.find(option => option.value === themeSource),
     [themeSource]
@@ -52,6 +59,26 @@ function UserPreference({
     onUserPreferencesChange({...userPreferences, [field]: value});
   };
 
+  const downloadConfiguration = () => {
+    console.log();
+    const configuration = {
+      devices: state.devices,
+      homepage: state.homepage,
+      userPreferences: state.userPreferences,
+      customDevices: state.allDevices.slice(
+        0,
+        state.allDevices.findIndex(item => item.id === '1')
+      ),
+    };
+    const data = JSON.stringify(configuration);
+    const blob = new Blob([data], {type: 'application/json'});
+    const url = window.URL.createObjectURL(blob);
+    dispatch(downloadPreferences(url));
+  };
+
+  const uploadConfiguration = () => {
+    dispatch(uploadPreferences());
+  };
   return (
     <div className={commonClasses.sidebarContentSection}>
       <div className={commonClasses.sidebarContentSectionTitleBar}>
@@ -325,6 +352,39 @@ function UserPreference({
             Clear Address History
           </Button>
         </div>
+        <div
+          className={cx(
+            commonClasses.flexAlignVerticalMiddle,
+            classes.sectionHeader
+          )}
+        >
+          Import / Export preferences
+        </div>
+        <div
+          className={cx(
+            commonClasses.sidebarContentSectionContainer,
+            classes.exportPreferencesButtons
+          )}
+        >
+          <Button
+            variant="contained"
+            color="secondary"
+            aria-label="download preferences"
+            component="span"
+            onClick={downloadConfiguration}
+          >
+            <FileDownloadIcon />
+          </Button>
+          <Button
+            variant="contained"
+            color="secondary"
+            aria-label="upload preferences"
+            component="span"
+            onClick={uploadConfiguration}
+          >
+            <FileUploadIcon />
+          </Button>
+        </div>
       </div>
     </div>
   );

desktop-app/app/components/UserPreferences/useStyles.js

@@ -46,6 +46,10 @@ const useStyles = makeStyles(theme => ({
     margin: 0,
     fontSize: '10px',
   },
+  exportPreferencesButtons: {
+    display: 'flex',
+    justifyContent: 'space-around',
+  },
 }));
 
 export default useStyles;

desktop-app/app/main.dev.js

@@ -681,6 +681,10 @@ const createWindow = async () => {
     devToolsView.setBounds(bounds);
   });
 
+  ipcMain.on('download-preferences', (event, ...args) => {
+    session.defaultSession.downloadURL(args[0].url);
+  });
+
   mainWindow.on('closed', () => {
     mainWindow = null;
   });

desktop-app/app/reducers/browser.js

@@ -34,6 +34,7 @@ import {
   SET_STARTUP_PAGE,
   UPDATE_PAGE_NAVIGATOR,
   TOGGLE_PAGE_NAVIGATOR,
+  LOAD_CUSTOM_DEVICES,
 } from '../actions/browser';
 import {
   CHANGE_ACTIVE_THROTTLING_PROFILE,
@@ -451,6 +452,10 @@ export default function browser(
       const existingDevices = settings.get(CUSTOM_DEVICES) || [];
       settings.set(CUSTOM_DEVICES, [action.device, ...existingDevices]);
       return {...state, allDevices: getAllDevices()};
+    case LOAD_CUSTOM_DEVICES:
+      const actualDevices = settings.get(CUSTOM_DEVICES);
+      settings.set(CUSTOM_DEVICES, [...action.devices, ...actualDevices]);
+      return {...state, allDevices: getAllDevices()};
     case DELETE_CUSTOM_DEVICE:
       const existingCustomDevices = settings.get(CUSTOM_DEVICES) || [];
       settings.set(