From 99844ec47009dea9141c75ccba77f22cb93b87a8 Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Fri, 2 Oct 2020 18:22:43 +0200
Subject: [PATCH 1/3] Extend CounterAlert and SelectBox components

CounterAlert:
1. onDismiss prop - callback fired when alert is closed
2. children prop - rendered below title
---
 src/components/CounterAlert.js | 11 ++++++++---
 src/components/SelectBox.js    |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/CounterAlert.js b/src/components/CounterAlert.js
index 31a830e13..b589084de 100644
--- a/src/components/CounterAlert.js
+++ b/src/components/CounterAlert.js
@@ -39,30 +39,35 @@ class CounterAlert extends React.Component {
       this.timer = null
     }
     this.setState({ showAlert: false })
+    this.props.onDismiss()
   }
 
   render () {
-    const { title, type } = this.props
+    const { title, type, children } = this.props
     return this.state.showAlert &&
       <Alert type={type} onDismiss={this.handleDismiss} className={style['text-align-left']}>
         {title}
+        {children}
       </Alert>
   }
 }
 
 CounterAlert.propTypes = {
-  title: PropTypes.string.isRequired,
-
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  children: PropTypes.node,
   /**
    * A timeout of <= 0 will force a manual dismiss of the alert.
    */
   timeout: PropTypes.number,
 
   type: PropTypes.string,
+
+  onDismiss: PropTypes.func,
 }
 
 CounterAlert.defaultProps = {
   type: 'success',
+  onDismiss: () => {},
 }
 
 export default CounterAlert
diff --git a/src/components/SelectBox.js b/src/components/SelectBox.js
index 41c343e57..44f92f2cd 100644
--- a/src/components/SelectBox.js
+++ b/src/components/SelectBox.js
@@ -96,9 +96,9 @@ class SelectBox extends React.Component {
 
 SelectBox.propTypes = {
   /* eslint-disable react/no-unused-prop-types */
-  selected: PropTypes.string, // id of a selected item, false-ish for the first item
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // id of a selected item, false-ish for the first item
   items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     value: PropTypes.string,
   })).isRequired, // Array<{ id: string, value: string }>, order matters if sort is false-ish
   sort: PropTypes.bool, // sorted alphabetically by current locale with { numeric: true } if true

From 2d49d1c245dd4fba67db5fd62e99a2d0f3e11799 Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Fri, 2 Oct 2020 18:59:47 +0200
Subject: [PATCH 2/3] Add Account Settings

Summary:
1. Remove existing Options dialog
   a) move SSH Key to Account Settings
   b) continue using existing REST endpoint: users/${id}/sshpublickeys
2. support following (local) settings via Redux-store:
   a) showNotifications (do not disturb)
   b) notificationSnoozeDuration (do not disturb for)
3. add typing for user settings related entities
4. in Settings use data-driven 3-way diff for change detection.
   Change is detected by comparing current content of Redux store
   with user changes(draft values) and base values(store content
   before at the beginning of user settings updates)
---
 packaging/ovirt-web-ui.war/WEB-INF/web.xml    |   2 +
 src/actions/index.js                          |  17 +-
 src/actions/options.js                        | 107 +++++++-
 src/actions/types.js                          |  24 ++
 src/components/OptionsDialog/actions.js       |  35 ---
 src/components/OptionsDialog/constants.js     |   4 -
 src/components/OptionsDialog/index.js         | 122 ---------
 src/components/OptionsDialog/reducer.js       |  15 --
 src/components/OptionsDialog/sagas.js         |  27 --
 src/components/Pages/index.js                 |   6 +
 src/components/Settings/Settings.js           | 140 ++++++++++
 src/components/Settings/SettingsBase.js       |  83 ++++++
 src/components/Settings/SettingsToolbar.js    |  53 ++++
 src/components/Settings/index.js              |   2 +
 src/components/Settings/style.css             |  63 +++++
 src/components/Toolbar/index.js               |   3 +
 src/components/UserSettings/GlobalSettings.js | 251 ++++++++++++++++++
 src/components/UserSettings/index.js          |   1 +
 src/components/UserSettings/style.css         |   3 +
 src/components/VmsPageHeader/UserMenu.js      |   4 -
 src/components/VmsPageHeader/index.js         |  12 +
 src/config.js                                 |   1 +
 src/constants/index.js                        |  12 +
 src/constants/pages.js                        |   1 +
 src/intl/index.js                             |   7 +-
 src/intl/localeWithFullName.json              |  13 +
 src/intl/messages.js                          |  33 ++-
 src/intl/translated-messages.json             |   8 -
 src/ovirtapi/index.js                         |  38 ++-
 src/ovirtapi/types.js                         |  32 ++-
 src/reducers/config.js                        |   4 +
 src/reducers/index.js                         |   2 -
 src/reducers/options.js                       |  81 ++++--
 src/routes.js                                 |  37 ++-
 src/sagas/background-refresh.js               |   5 +
 src/sagas/index.js                            |   4 +-
 src/sagas/login.js                            |   6 +-
 src/sagas/options.js                          | 118 ++++++++
 38 files changed, 1118 insertions(+), 258 deletions(-)
 create mode 100644 src/actions/types.js
 delete mode 100644 src/components/OptionsDialog/actions.js
 delete mode 100644 src/components/OptionsDialog/constants.js
 delete mode 100644 src/components/OptionsDialog/index.js
 delete mode 100644 src/components/OptionsDialog/reducer.js
 delete mode 100644 src/components/OptionsDialog/sagas.js
 create mode 100644 src/components/Settings/Settings.js
 create mode 100644 src/components/Settings/SettingsBase.js
 create mode 100644 src/components/Settings/SettingsToolbar.js
 create mode 100644 src/components/Settings/index.js
 create mode 100644 src/components/Settings/style.css
 create mode 100644 src/components/UserSettings/GlobalSettings.js
 create mode 100644 src/components/UserSettings/index.js
 create mode 100644 src/components/UserSettings/style.css
 create mode 100644 src/intl/localeWithFullName.json
 create mode 100644 src/sagas/options.js

diff --git a/packaging/ovirt-web-ui.war/WEB-INF/web.xml b/packaging/ovirt-web-ui.war/WEB-INF/web.xml
index cbdcdfe4a..b2b0a3276 100644
--- a/packaging/ovirt-web-ui.war/WEB-INF/web.xml
+++ b/packaging/ovirt-web-ui.war/WEB-INF/web.xml
@@ -83,6 +83,7 @@
         <servlet-name>logout</servlet-name>
         <servlet-class>org.ovirt.engine.core.aaa.servlet.SsoLogoutServlet</servlet-class>
     </servlet>
+
     <servlet-mapping>
         <servlet-name>logout</servlet-name>
         <url-pattern>/sso/logout</url-pattern>
@@ -124,6 +125,7 @@
         <servlet-name>index</servlet-name>
         <url-pattern>/vm/*</url-pattern>
         <url-pattern>/pool/*</url-pattern>
+        <url-pattern>/settings/*</url-pattern>
     </servlet-mapping>
 
     <!-- Default page to serve -->
diff --git a/src/actions/index.js b/src/actions/index.js
index dc5121527..5f921a54b 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,10 +1,11 @@
-import AppConfiguration from '../config'
+import AppConfiguration from '_/config'
 import {
   APP_CONFIGURED,
   CHANGE_PAGE,
   CHECK_TOKEN_EXPIRED,
   GET_BY_PAGE,
   GET_OPTION,
+  GET_USER,
   GET_USER_GROUPS,
   MANUAL_REFRESH,
   SET_ADMINISTRATOR,
@@ -13,6 +14,7 @@ import {
   SET_DEFAULT_TIMEZONE,
   SET_USB_AUTOSHARE,
   SET_USB_FILTER,
+  SET_USER,
   SET_USER_FILTER_PERMISSION,
   SET_USER_GROUPS,
   SET_USER_SESSION_TIMEOUT_INTERVAL,
@@ -194,6 +196,19 @@ export function getUserGroups () {
   return { type: GET_USER_GROUPS }
 }
 
+export function setUser ({ user }) {
+  return {
+    type: SET_USER,
+    payload: {
+      user,
+    },
+  }
+}
+
+export function getUser () {
+  return { type: GET_USER }
+}
+
 export function setCpuTopologyOptions ({
   maxNumberOfSockets,
   maxNumberOfCores,
diff --git a/src/actions/options.js b/src/actions/options.js
index da4ae91ed..cfa4cd553 100644
--- a/src/actions/options.js
+++ b/src/actions/options.js
@@ -1,10 +1,24 @@
+// @flow
+
+import type { UserOptionsType, SshKeyType } from '_/ovirtapi/types'
+import type { LoadUserOptionsActionType, SaveGlobalOptionsActionType } from '_/actions/types'
+
 import {
   GET_CONSOLE_OPTIONS,
   SAVE_CONSOLE_OPTIONS,
   SET_CONSOLE_OPTIONS,
+  GET_SSH_KEY,
+  SAVE_GLOBAL_OPTIONS,
+  SAVE_SSH_KEY,
+  SET_SSH_KEY,
+  SET_OPTION,
+  LOAD_USER_OPTIONS,
+  LOAD_USER_OPTIONS_IN_PROGRESS,
+  LOAD_USER_OPTIONS_FINISHED,
+  PERSIST_OPTIONS,
 } from '_/constants'
 
-export function setConsoleOptions ({ vmId, options }) {
+export function setConsoleOptions ({ vmId, options }: Object): Object {
   return {
     type: SET_CONSOLE_OPTIONS,
     payload: {
@@ -14,7 +28,7 @@ export function setConsoleOptions ({ vmId, options }) {
   }
 }
 
-export function getConsoleOptions ({ vmId }) {
+export function getConsoleOptions ({ vmId }: Object): Object {
   return {
     type: GET_CONSOLE_OPTIONS,
     payload: {
@@ -23,7 +37,7 @@ export function getConsoleOptions ({ vmId }) {
   }
 }
 
-export function saveConsoleOptions ({ vmId, options }) {
+export function saveConsoleOptions ({ vmId, options }: Object): Object {
   return {
     type: SAVE_CONSOLE_OPTIONS,
     payload: {
@@ -32,3 +46,90 @@ export function saveConsoleOptions ({ vmId, options }) {
     },
   }
 }
+
+export function getSSHKey ({ userId }: Object): Object {
+  return {
+    type: GET_SSH_KEY,
+    payload: {
+      userId,
+    },
+  }
+}
+
+export function setSSHKey ({ key, id }: SshKeyType): Object {
+  return {
+    type: SET_SSH_KEY,
+    payload: {
+      key,
+      id,
+    },
+  }
+}
+
+export function setOption ({ key, value }: Object): Object {
+  return {
+    type: SET_OPTION,
+    payload: {
+      key,
+      value,
+    },
+  }
+}
+
+export function loadUserOptions (userOptions: UserOptionsType): LoadUserOptionsActionType {
+  return {
+    type: LOAD_USER_OPTIONS,
+    payload: {
+      userOptions,
+    },
+  }
+}
+
+export function loadingUserOptionsInProgress (): Object {
+  return {
+    type: LOAD_USER_OPTIONS_IN_PROGRESS,
+  }
+}
+
+export function loadingUserOptionsFinished (): Object {
+  return {
+    type: LOAD_USER_OPTIONS_FINISHED,
+  }
+}
+
+export function saveGlobalOptions ({ values: { sshKey, language, showNotifications, notificationSnoozeDuration, updateRate } = {} }: Object, { transactionId }: Object): SaveGlobalOptionsActionType {
+  return {
+    type: SAVE_GLOBAL_OPTIONS,
+    payload: {
+      sshKey,
+      language,
+      showNotifications,
+      notificationSnoozeDuration,
+      updateRate,
+    },
+    meta: {
+      transactionId,
+    },
+  }
+}
+
+export function saveSSHKey ({ key, userId, sshId }: Object): Object {
+  return {
+    type: SAVE_SSH_KEY,
+    payload: {
+      key,
+      userId,
+      sshId,
+    },
+  }
+}
+
+export function persistUserOptions ({ options, userId }: Object): Object {
+  return {
+    type: PERSIST_OPTIONS,
+    payload: {
+      options,
+      userId,
+    },
+  }
+}
diff --git a/src/actions/types.js b/src/actions/types.js
new file mode 100644
index 000000000..9b863d3e2
--- /dev/null
+++ b/src/actions/types.js
@@ -0,0 +1,24 @@
+// @flow
+import * as C from '_/constants'
+import type { UserOptionsType } from '_/ovirtapi/types'
+
+export type LoadUserOptionsActionType = {
+  type: C.LOAD_USER_OPTIONS,
+  payload: {
+    userOptions: UserOptionsType
+  }
+}
+
+export type SaveGlobalOptionsActionType = {
+  type: C.SAVE_GLOBAL_OPTIONS,
+  payload: {|
+    updateRate?: number,
+    language?: string,
+    showNotifications?: boolean,
+    notificationSnoozeDuration?: number,
+    sshKey?: string
+  |},
+  meta: {|
+    transactionId: string
+  |}
+}
diff --git a/src/components/OptionsDialog/actions.js b/src/components/OptionsDialog/actions.js
deleted file mode 100644
index 318852942..000000000
--- a/src/components/OptionsDialog/actions.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { SET_SSH_KEY, GET_SSH_KEY, SAVE_SSH_KEY, SET_UNLOADED } from './constants'
-
-export function setSSHKey ({ key, id }) {
-  return {
-    type: SET_SSH_KEY,
-    payload: {
-      key,
-      id,
-    },
-  }
-}
-
-export function saveSSHKey ({ key, userId, sshId }) {
-  return {
-    type: SAVE_SSH_KEY,
-    payload: {
-      key,
-      userId,
-      sshId,
-    },
-  }
-}
-
-export function getSSHKey ({ userId }) {
-  return {
-    type: GET_SSH_KEY,
-    payload: {
-      userId,
-    },
-  }
-}
-
-export function setUnloaded () {
-  return { type: SET_UNLOADED }
-}
diff --git a/src/components/OptionsDialog/constants.js b/src/components/OptionsDialog/constants.js
deleted file mode 100644
index c7b52ef24..000000000
--- a/src/components/OptionsDialog/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const GET_SSH_KEY = 'OPTIONS_DIALOG_HEADER_GET_SSH_KEY'
-export const SAVE_SSH_KEY = 'OPTIONS_DIALOG_HEADER_SAVE_SSH_KEY'
-export const SET_SSH_KEY = 'OPTIONS_DIALOG_HEADER_SET_SSH_KEY'
-export const SET_UNLOADED = 'OPTIONS_DIALOG_HEADER_SET_UNLOADED'
diff --git a/src/components/OptionsDialog/index.js b/src/components/OptionsDialog/index.js
deleted file mode 100644
index beef43975..000000000
--- a/src/components/OptionsDialog/index.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-
-import { Modal } from 'patternfly-react'
-
-import FieldHelp from '../FieldHelp/index'
-
-import {
-  getSSHKey,
-  saveSSHKey,
-} from './actions'
-
-import { msg } from '_/intl'
-
-class OptionsDialog extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      sshKey: props.optionsDialog.get('sshKey') || '',
-      openModal: false,
-    }
-    this.onSSHKeyChange = this.onSSHKeyChange.bind(this)
-    this.onSaveClick = this.onSaveClick.bind(this)
-    this.handleModalOpen = this.handleModalOpen.bind(this)
-  }
-
-  handleModalOpen () {
-    if (this.props.userId) {
-      this.props.getSSH()
-    }
-    this.setState({ 'sshKey': 'Loading...', openModal: true })
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.optionsDialog.get('loaded')) {
-      this.setState({ 'sshKey': nextProps.optionsDialog.get('sshKey') })
-    }
-  }
-
-  onSSHKeyChange (event) {
-    this.setState({ sshKey: event.target.value })
-  }
-
-  onSaveClick () {
-    this.props.onSave({ key: this.state.sshKey, sshId: this.props.optionsDialog.get('sshId') })
-    this.setState({ openModal: false })
-  }
-
-  render () {
-    const { oVirtApiVersion } = this.props
-    const idPrefix = `optionsdialog`
-
-    let content = (
-      <form>
-        <div className='form-group'>
-          <FieldHelp content={msg.publicSSHKey()} text={msg.SSHKey()} />
-          <textarea
-            type='text'
-            className='form-control'
-            rows='7'
-            onChange={this.onSSHKeyChange}
-            value={this.state.sshKey || ''}
-            id={`${idPrefix}-sshkey`} />
-        </div>
-      </form>
-    )
-
-    if (!this.props.userId) {
-      const apiVersion = oVirtApiVersion && oVirtApiVersion.get('major')
-        ? `${oVirtApiVersion.get('major')}.${oVirtApiVersion.get('minor')}`
-        : 'unknown'
-
-      content = (
-        <div>
-          <p id={`${idPrefix}-lowversion`}>{msg.lowOVirtVersion({ apiVersion })}</p>
-        </div>
-      )
-    }
-    return (
-      <React.Fragment>
-        <a id='usermenu-options' href='#' onClick={this.handleModalOpen}>{msg.options()}</a>
-        { this.state.openModal &&
-          <Modal onHide={() => this.setState({ openModal: false })} show>
-            <Modal.Header>
-              <Modal.CloseButton onClick={() => this.setState({ openModal: false })} />
-              <Modal.Title id={`${idPrefix}-title`}>{msg.options()}</Modal.Title>
-            </Modal.Header>
-            <Modal.Body id={`${idPrefix}-body`}>
-              {content}
-            </Modal.Body>
-            <Modal.Footer>
-              {this.props.userId ? <button type='button' onClick={this.onSaveClick} className='btn btn-default' id={`${idPrefix}-button-save`}>{msg.save()}</button> : null}
-              <button onClick={() => this.setState({ openModal: false })} type='button' className='btn btn-danger' id={`${idPrefix}-button-cancel`}>
-                {msg.cancel()}
-              </button>
-            </Modal.Footer>
-          </Modal>
-        }
-      </React.Fragment>
-    )
-  }
-}
-
-OptionsDialog.propTypes = {
-  userId: PropTypes.string,
-  optionsDialog: PropTypes.object.isRequired,
-  oVirtApiVersion: PropTypes.object,
-  getSSH: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-}
-
-export default connect(
-  (state) => ({
-    optionsDialog: state.OptionsDialog,
-    oVirtApiVersion: state.config.get('oVirtApiVersion'),
-  }),
-  (dispatch, { userId }) => ({
-    getSSH: () => dispatch(getSSHKey({ userId })),
-    onSave: ({ key, sshId }) => dispatch(saveSSHKey({ key, userId, sshId })),
-  })
-)(OptionsDialog)
diff --git a/src/components/OptionsDialog/reducer.js b/src/components/OptionsDialog/reducer.js
deleted file mode 100644
index f72d9f0f7..000000000
--- a/src/components/OptionsDialog/reducer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Immutable from 'immutable'
-import { SET_SSH_KEY, SET_UNLOADED } from './constants'
-
-export function reducer (state, action) {
-  state = state || Immutable.fromJS({ sshKey: null, sshId: undefined, loaded: false })
-
-  switch (action.type) {
-    case SET_SSH_KEY:
-      return state.set('sshKey', action.payload.key).set('sshId', action.payload.id).set('loaded', true)
-    case SET_UNLOADED:
-      return state.set('loaded', false)
-    default:
-      return state
-  }
-}
diff --git a/src/components/OptionsDialog/sagas.js b/src/components/OptionsDialog/sagas.js
deleted file mode 100644
index 0fed882db..000000000
--- a/src/components/OptionsDialog/sagas.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { put, takeEvery } from 'redux-saga/effects'
-import { SAVE_SSH_KEY, GET_SSH_KEY } from './constants'
-import { setSSHKey, setUnloaded } from './actions'
-import { callExternalAction } from '_/sagas/utils'
-import Api from '_/ovirtapi'
-
-function* saveSSHKey (action) {
-  yield callExternalAction('saveSSHKey', Api.saveSSHKey, action)
-}
-
-function* getSSHKey (action) {
-  yield put(setUnloaded())
-  const result = yield callExternalAction('getSSHKey', Api.getSSHKey, action)
-  if (result.error) {
-    return
-  }
-  if (result.ssh_public_key && result.ssh_public_key.length > 0) {
-    yield put(setSSHKey(Api.SSHKeyToInternal({ sshKey: result.ssh_public_key[0] })))
-  } else {
-    yield put(setSSHKey(Api.SSHKeyToInternal({ sshKey: '' })))
-  }
-}
-
-export default [
-  takeEvery(SAVE_SSH_KEY, saveSSHKey),
-  takeEvery(GET_SSH_KEY, getSSHKey),
-]
diff --git a/src/components/Pages/index.js b/src/components/Pages/index.js
index 0ae5ce5ef..87d0d1242 100644
--- a/src/components/Pages/index.js
+++ b/src/components/Pages/index.js
@@ -9,6 +9,7 @@ import VmsList from '../VmsList'
 import VmDetails from '../VmDetails'
 import VmConsole from '../VmConsole'
 import Handler404 from '_/Handler404'
+import { GlobalSettings } from '../UserSettings'
 
 /**
  * Route component (for PageRouter) to view the list of VMs and Pools
@@ -17,6 +18,10 @@ const VmsListPage = () => {
   return <VmsList />
 }
 
+const GlobalSettingsPage = () => {
+  return <GlobalSettings />
+}
+
 /**
  * Route component (for PageRouter) to view a VM's details
  */
@@ -105,4 +110,5 @@ export {
   VmConsolePageConnected as VmConsolePage,
   VmDetailsPageConnected as VmDetailsPage,
   VmsListPage,
+  GlobalSettingsPage,
 }
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
new file mode 100644
index 000000000..daf81a01f
--- /dev/null
+++ b/src/components/Settings/Settings.js
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import SettingsToolbar from './SettingsToolbar'
+import NavigationPrompt from 'react-router-navigation-prompt'
+import NavigationConfirmationModal from '../NavigationConfirmationModal'
+import CounterAlert from '_/components/CounterAlert'
+import { generateUnique } from '_/helpers'
+import { msg } from '_/intl'
+import style from './style.css'
+
+const changedInTheMeantime = ({ currentValues = {}, baseValues = {}, draftValues = {}, sentValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    currentValues[name] !== baseValues[name] && !(
+      // draft is the same as 3rd party change - no risk of losing data
+      currentValues[name] === draftValues[name] ||
+      // it's your own update but user modified draft in the meantime
+      currentValues[name] === sentValues[name]))
+}
+
+const pendingUserChanges = ({ currentValues = {}, draftValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    currentValues[name] !== draftValues[name] &&
+    draftValues[name] !== undefined
+  )
+}
+
+const changedInLastTransaction = ({ currentValues = {}, sentValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    currentValues[name] === sentValues[name] && currentValues[name] !== undefined)
+}
+
+const stillPending = ({ currentValues = {}, sentValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    sentValues[name] !== undefined &&
+      currentValues[name] !== sentValues[name])
+}
+
+const Settings = ({ draftValues, onSave, lastTransactionId, onCancel,
+  translatedLabels, baseValues, sentValues, currentValues,
+  resetBaseValues, children }) => {
+  const [transactionId, setTransactionId] = useState(null)
+
+  const handleSave = () => {
+    const saveFields = pendingUserChanges({ currentValues, draftValues }).reduce((acc, cur) => ({ ...acc, [cur]: draftValues[cur] }), {})
+    const id = generateUnique('Settings-save_')
+    setTransactionId(id)
+    onSave(saveFields, id)
+  }
+
+  const conflictingChanges = changedInTheMeantime({ currentValues, baseValues, draftValues, sentValues }).map(field => translatedLabels[field])
+  const pendingChanges = pendingUserChanges({ currentValues, draftValues })
+  const stillPendingAfterSave = stillPending({ currentValues, sentValues })
+  const changedInLastTrans = changedInLastTransaction({ currentValues, sentValues })
+
+  if (conflictingChanges.length) {
+    console.warn(`Store content changed while editing settings for fields: ${JSON.stringify(conflictingChanges)}`)
+  }
+
+  const fullSuccess = changedInLastTrans.length !== 0 &&
+   stillPendingAfterSave.length === 0 &&
+   transactionId === lastTransactionId
+  const completeFailure = changedInLastTrans.length === 0 &&
+   stillPendingAfterSave.length !== 0 &&
+   transactionId === lastTransactionId
+  const partialSuccess = changedInLastTrans.length !== 0 &&
+   stillPendingAfterSave.length !== 0 &&
+   transactionId === lastTransactionId
+
+  const [showFullSuccess, setShowFullSuccess] = useState(false)
+  const [showCompleteFailure, setShowCompleteFailure] = useState(false)
+  const [partialSave, setShowPartialSave] = useState({ show: false, fields: [] })
+
+  useEffect(() => {
+    const partialSaveState = {
+      show: partialSuccess,
+      fields: pendingChanges.map(e => <p key={translatedLabels[e]}>{translatedLabels[e]}</p>),
+    }
+    if (partialSaveState.show) { setShowPartialSave(partialSaveState) }
+    if (completeFailure) { setShowCompleteFailure(completeFailure) }
+    if (fullSuccess) { setShowFullSuccess(fullSuccess) }
+    if (fullSuccess || completeFailure || partialSuccess) {
+      // the transaction has finished - remove tracking id
+      setTransactionId(null)
+      // reset to new base level that contains last modifications
+      resetBaseValues()
+    }
+  }, [partialSuccess, completeFailure, fullSuccess, pendingChanges])
+
+  return <React.Fragment>
+    <NavigationPrompt when={(currentLocation, nextLocation) => !!pendingChanges.length}>
+      {({ isActive, onConfirm, onCancel }) => (
+        <NavigationConfirmationModal show={isActive} onYes={onConfirm} onNo={onCancel} />
+      )}
+    </NavigationPrompt>
+    <div className={showFullSuccess || partialSave.show || showCompleteFailure ? style['alert-container'] : null}>
+      { showFullSuccess &&
+        <CounterAlert
+          timeout={10}
+          title={msg.changesSavedSuccesfully()}
+          type='success'
+          onDismiss={() => setShowFullSuccess(false)}
+        />
+      }
+      { partialSave.show &&
+        <CounterAlert
+          timeout={10}
+          type='error'
+          title={<p>{msg.failedToSaveChangesToFields()}</p>}
+          onDismiss={() => setShowPartialSave({ show: false, fields: [] })} >
+          {partialSave.fields}
+        </CounterAlert>
+      }
+      { showCompleteFailure &&
+        <CounterAlert
+          timeout={10}
+          type='error'
+          title={msg.failedToSaveChanges()}
+          onDismiss={() => setShowCompleteFailure(false)}
+        />
+      }
+    </div>
+    <SettingsToolbar onSave={handleSave} onCancel={onCancel} enableSave={!!pendingChanges.length} />
+    {children}
+  </React.Fragment>
+}
+Settings.propTypes = {
+  draftValues: PropTypes.object.isRequired,
+  currentValues: PropTypes.object.isRequired,
+  baseValues: PropTypes.object.isRequired,
+  sentValues: PropTypes.object.isRequired,
+  translatedLabels: PropTypes.object.isRequired,
+  lastTransactionId: PropTypes.string,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  resetBaseValues: PropTypes.func.isRequired,
+}
+
+export default Settings
diff --git a/src/components/Settings/SettingsBase.js b/src/components/Settings/SettingsBase.js
new file mode 100644
index 000000000..067581794
--- /dev/null
+++ b/src/components/Settings/SettingsBase.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  Card,
+  Col,
+  ControlLabel,
+  FormGroup,
+} from 'patternfly-react'
+import { InfoTooltip } from '_/components/tooltips'
+
+import style from './style.css'
+
+const LabelCol = ({ children, tooltip, fieldPath, ...props }) => {
+  return <Col componentClass={ControlLabel} {...props}>
+    { children } { tooltip && <InfoTooltip tooltip={tooltip} id={`${fieldPath}-info-tooltip`} /> }
+  </Col>
+}
+LabelCol.propTypes = {
+  children: PropTypes.node.isRequired,
+  tooltip: PropTypes.string,
+  fieldPath: PropTypes.string,
+}
+
+const Item = ({ title, isActive, onClick }) => {
+  return <li className={`list-group-item ${isActive && 'active'}`}>
+    <a href='#' onClick={(e) => { e.preventDefault(); onClick() }}>
+      <span className='list-group-item-value'>{title}</span>
+      <div className='badge-container-pf' />
+    </a>
+  </li>
+}
+
+Item.propTypes = {
+  title: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+}
+
+const Section = ({ name, section }) => (
+  <React.Fragment>
+    <h3>
+      <a id={name} />
+      {section.title}
+      { section.tooltip && <InfoTooltip id={`${name}-info-tooltip`} tooltip={section.tooltip} /> }
+    </h3>
+    { section.fields.map((field) => (
+      <FormGroup key={field.title} className={style['settings-field']}>
+        <LabelCol fieldPath={`${name}-${field.title}`} tooltip={field.tooltip} sm={3} className={style['field-label']}>
+          { field.title }
+        </LabelCol>
+        <Col sm={9}>
+          {field.body}
+        </Col>
+      </FormGroup>
+    )) }
+  </React.Fragment>
+)
+
+Section.propTypes = {
+  name: PropTypes.string.isRequired,
+  section: PropTypes.object.isRequired,
+}
+
+const SettingsBase = ({ sections }) => {
+  const existingSections = Object.entries(sections).filter(([key, section]) => !!section)
+  return (
+    <div className={style['search-content-box']}>
+      { existingSections.map(([key, section]) => (
+        <Card key={key} className={style['main-content']}>
+          <div className={style['main-content-container']}>
+            <Section name={key} section={section} />
+          </div>
+        </Card>
+      ))
+      }
+    </div>
+  )
+}
+SettingsBase.propTypes = {
+  sections: PropTypes.object.isRequired,
+}
+
+export default SettingsBase
diff --git a/src/components/Settings/SettingsToolbar.js b/src/components/Settings/SettingsToolbar.js
new file mode 100644
index 000000000..b8008f080
--- /dev/null
+++ b/src/components/Settings/SettingsToolbar.js
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import { Toolbar } from 'patternfly-react'
+import { msg } from '_/intl'
+
+import style from './style.css'
+
+const SettingsToolbar = ({ onSave, onCancel, enableSave }) => {
+  const [container] = useState(document.createElement('div'))
+  useEffect(() => {
+    const root = document.getElementById('settings-toolbar')
+    if (root) {
+      root.appendChild(container)
+    }
+    return () => root && root.removeChild(container)
+  })
+
+  return ReactDOM.createPortal(
+    <Toolbar className={style['toolbar']}>
+      <Toolbar.RightContent>
+        <button
+          onClick={e => {
+            e.preventDefault()
+            onCancel()
+          }}
+          className='btn btn-default'
+        >
+          {msg.cancel()}
+        </button>
+        <button
+          disabled={!enableSave}
+          onClick={e => {
+            e.preventDefault()
+            onSave()
+          }}
+          className='btn btn-primary'
+        >
+          {msg.save()}
+        </button>
+      </Toolbar.RightContent>
+    </Toolbar>,
+    container
+  )
+}
+
+SettingsToolbar.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  enableSave: PropTypes.bool,
+}
+
+export default SettingsToolbar
diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js
new file mode 100644
index 000000000..59a1266a5
--- /dev/null
+++ b/src/components/Settings/index.js
@@ -0,0 +1,2 @@
+export { default as Settings } from './Settings'
+export { default as SettingsBase } from './SettingsBase'
diff --git a/src/components/Settings/style.css b/src/components/Settings/style.css
new file mode 100644
index 000000000..c55cbc694
--- /dev/null
+++ b/src/components/Settings/style.css
@@ -0,0 +1,63 @@
+.settings-box {
+    display: flex;
+    margin-top: 20px;
+}
+
+.navigation-content {
+    padding: 0;
+    margin-right: 30px;
+    display: table;
+}
+
+.search-content-box {
+    flex-grow: 1;
+    height: min-content;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.main-content {
+    margin-top: 20px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.main-content-container {
+    display: grid;
+}
+
+.field-label {
+    text-align: right;
+}
+
+.settings-field {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    border-bottom: solid 1px #0000001f;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 0;
+}
+
+.alert-container {
+    position: absolute;
+    top: 5%;
+    left: 25%;
+    width: 50%;
+}
+
+.toolbar :global(.toolbar-pf.row) {
+    padding-bottom: 10px;
+    margin-left: 0;
+}
+
+.toolbar :global(.toolbar-pf-action-right) button {
+    margin-right: 10px;
+}
+
+:global(#settings-toolbar) {
+    margin-left: -20px;
+}
diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
index ba9afae5d..596a1e68a 100644
--- a/src/components/Toolbar/index.js
+++ b/src/components/Toolbar/index.js
@@ -73,8 +73,11 @@ const VmConsoleToolbarConnected = connect(
   })
 )(VmConsoleToolbar)
 
+const SettingsToolbar = () => <div id='settings-toolbar' />
+
 export {
   VmDetailToolbarConnected as VmDetailToolbar,
   VmConsoleToolbarConnected as VmConsoleToolbar,
   VmsListToolbar,
+  SettingsToolbar,
 }
diff --git a/src/components/UserSettings/GlobalSettings.js b/src/components/UserSettings/GlobalSettings.js
new file mode 100644
index 000000000..45a47f0fd
--- /dev/null
+++ b/src/components/UserSettings/GlobalSettings.js
@@ -0,0 +1,251 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { connect } from 'react-redux'
+import { push } from 'connected-react-router'
+import { saveGlobalOptions } from '_/actions'
+import { FormControl, Switch } from 'patternfly-react'
+import { msg } from '_/intl'
+import style from './style.css'
+
+import { Settings, SettingsBase } from '../Settings'
+import SelectBox from '../SelectBox'
+import moment from 'moment'
+
+class GlobalSettings extends Component {
+  dontDisturbList = [
+    {
+      id: 10,
+      value: moment.duration(10, 'minutes').humanize(),
+    },
+    {
+      id: 60,
+      value: moment.duration(1, 'hours').humanize(),
+    },
+    {
+      id: 60 * 24,
+      value: moment.duration(1, 'days').humanize(),
+    },
+    {
+      id: Number.MAX_SAFE_INTEGER,
+      value: msg.sessionDuration(),
+    },
+  ]
+
+  updateRateList = [
+    {
+      id: 30,
+      value: msg.every30Seconds(),
+    },
+    {
+      id: 60,
+      value: msg.everyMinute(),
+    },
+    {
+      id: 120,
+      value: msg.every2Minute(),
+    },
+    {
+      id: 300,
+      value: msg.every5Minute(),
+    },
+  ]
+
+  constructor (props) {
+    super(props)
+    /**
+     * Typical flow (happy path):
+     * 1. at the begining:
+     *    baseValues == draftValues == currentValues
+     * 2. after user edit:
+     *    baseValues == currentValues
+     *    BUT
+     *    baseValues != draftValues
+     * 3. after 'save' but before action finished:
+     *    baseValues == currentValues
+     *    AND
+     *    baseValue + sentValues == draftValues
+     * 4. successful 'save' triggers re-basing (back to step 1.)
+     */
+    this.state = {
+      // editable by the user (used by the widgets)
+      // represent the current state of user work
+      draftValues: {
+        ...props.currentValues,
+      },
+      // state before editing
+      // allows to detect changes by comparing values (baseValues - draftValues == changes)
+      // note that it's perfectly legal to have: baseValues != currentValues
+      // store can change i.e. after fetching data from the server
+      // or after some action i.e. 'do not disturb' expired
+      baseValues: {
+        ...props.currentValues,
+      },
+      // values submitted using 'save' action
+      // inlcude both remote(server and store) or local(store only)
+      sentValues: {},
+      // required for error handling: the case of partial success(only some fields saved)
+      // the alert shows the names of the fields that were NOT saved
+      translatedLabels: {
+        sshKey: msg.sshKey(),
+        language: msg.language(),
+        showNotifications: msg.dontDisturb(),
+        notificationSnoozeDuration: msg.dontDisturbFor(),
+        updateRate: msg.uiRefresh(),
+      },
+    }
+    this.handleCancel = this.handleCancel.bind(this)
+    this.buildSections = this.buildSections.bind(this)
+    this.saveOptions = this.saveOptions.bind(this)
+    this.resetBaseValues = this.resetBaseValues.bind(this)
+    this.onChange = this.onChange.bind(this)
+  }
+
+  resetBaseValues () {
+    const { currentValues } = this.props
+    this.setState({
+      sentValues: {},
+      baseValues: { ...currentValues },
+    })
+  }
+
+  saveOptions (values, transactionId) {
+    this.props.saveOptions(values, transactionId)
+    this.setState({
+      sentValues: { ...values },
+    })
+  }
+
+  handleCancel () {
+    this.props.goToMainPage()
+  }
+
+  onChange (field) {
+    return (value) => {
+      this.setState((state) => ({
+        draftValues: {
+          ...state.draftValues,
+          [field]: value,
+        },
+      }))
+    }
+  }
+
+  buildSections (onChange) {
+    const { draftValues, translatedLabels } = this.state
+    const { config } = this.props
+    const idPrefix = 'global-user-settings'
+    return {
+      general: {
+        title: msg.general(),
+        fields: [
+          {
+            title: msg.username(),
+            body: <span>{config.userName}</span>,
+          },
+          {
+            title: translatedLabels.sshKey,
+            tooltip: msg.sshKeyTooltip(),
+            body: (
+              <div className={style['half-width']}>
+                <FormControl
+                  id={`${idPrefix}-ssh-key`}
+                  componentClass='textarea'
+                  onChange={e => onChange('sshKey')(e.target.value)}
+                  value={draftValues.sshKey || ''}
+                  rows={8}
+                />
+              </div>
+            ),
+          },
+        ],
+      },
+      notifications: {
+        title: msg.notifications(),
+        tooltip: msg.notificationSettingsAffectAllNotifications(),
+        fields: [
+          {
+            title: translatedLabels.showNotifications,
+            body: (
+              <Switch
+                id={`${idPrefix}-dont-disturb`}
+                bsSize='normal'
+                title='normal'
+                value={!draftValues.showNotifications}
+                onChange={(e, dontDisturb) => {
+                  onChange('showNotifications')(!dontDisturb)
+                }}
+              />
+            ),
+          },
+          {
+            title: translatedLabels.notificationSnoozeDuration,
+            body: (
+              <div className={style['half-width']}>
+                <SelectBox
+                  id={`${idPrefix}-dont-disturb-for`}
+                  items={this.dontDisturbList}
+                  selected={draftValues.notificationSnoozeDuration}
+                  onChange={onChange('notificationSnoozeDuration')}
+                  disabled={draftValues.showNotifications}
+                />
+              </div>
+            ),
+          },
+        ],
+      },
+    }
+  }
+
+  render () {
+    const { lastTransactionId, currentValues } = this.props
+    const { draftValues, baseValues, sentValues, translatedLabels } = this.state
+
+    return (
+      <div className='container'>
+        <Settings
+          draftValues={draftValues}
+          baseValues={baseValues}
+          currentValues={currentValues}
+          sentValues={sentValues}
+          translatedLabels={translatedLabels}
+          lastTransactionId={lastTransactionId}
+          resetBaseValues={this.resetBaseValues}
+          onSave={this.saveOptions}
+          onCancel={this.handleCancel}
+        >
+          <SettingsBase sections={this.buildSections(this.onChange)} />
+        </Settings>
+      </div>
+    )
+  }
+}
+GlobalSettings.propTypes = {
+  currentValues: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+  lastTransactionId: PropTypes.string,
+  saveOptions: PropTypes.func.isRequired,
+  goToMainPage: PropTypes.func.isRequired,
+}
+
+export default connect(
+  ({ options, config }) => ({
+    config: {
+      userName: config.getIn(['user', 'name']),
+      email: config.getIn(['user', 'email']),
+    },
+    currentValues: {
+      sshKey: options.getIn(['ssh', 'key']),
+      language: options.getIn(['global', 'language']),
+      showNotifications: options.getIn(['global', 'showNotifications']),
+      notificationSnoozeDuration: options.getIn(['global', 'notificationSnoozeDuration']),
+      updateRate: options.getIn(['global', 'updateRate']),
+    },
+    lastTransactionId: options.getIn(['lastTransactions', 'global', 'transactionId'], ''),
+  }),
+
+  (dispatch) => ({
+    saveOptions: (values, transactionId) => dispatch(saveGlobalOptions({ values }, { transactionId })),
+    goToMainPage: () => dispatch(push('/')),
+  })
+)(GlobalSettings)
diff --git a/src/components/UserSettings/index.js b/src/components/UserSettings/index.js
new file mode 100644
index 000000000..5df2867c7
--- /dev/null
+++ b/src/components/UserSettings/index.js
@@ -0,0 +1 @@
+export { default as GlobalSettings } from './GlobalSettings'
diff --git a/src/components/UserSettings/style.css b/src/components/UserSettings/style.css
new file mode 100644
index 000000000..41ba69242
--- /dev/null
+++ b/src/components/UserSettings/style.css
@@ -0,0 +1,3 @@
+.half-width {
+    width: 50%;
+}
\ No newline at end of file
diff --git a/src/components/VmsPageHeader/UserMenu.js b/src/components/VmsPageHeader/UserMenu.js
index a6699989c..a87796721 100644
--- a/src/components/VmsPageHeader/UserMenu.js
+++ b/src/components/VmsPageHeader/UserMenu.js
@@ -6,7 +6,6 @@ import { logout } from '_/actions'
 
 import { msg } from '_/intl'
 import AboutDialog from '../About'
-import OptionsDialog from '../OptionsDialog'
 import { Tooltip } from '_/components/tooltips'
 
 const UserMenu = ({ config, onLogout }) => {
@@ -19,9 +18,6 @@ const UserMenu = ({ config, onLogout }) => {
         </a>
       </Tooltip>
       <ul className='dropdown-menu'>
-        <li>
-          <OptionsDialog userId={config.getIn(['user', 'id'])} />
-        </li>
         <li>
           <AboutDialog />
         </li>
diff --git a/src/components/VmsPageHeader/index.js b/src/components/VmsPageHeader/index.js
index 8b5749611..b1ff9848a 100644
--- a/src/components/VmsPageHeader/index.js
+++ b/src/components/VmsPageHeader/index.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { Icon } from 'patternfly-react'
 
 import VmUserMessages from '../VmUserMessages'
 import Bellicon from '../VmUserMessages/Bellicon'
@@ -32,6 +34,16 @@ const VmsPageHeader = ({ onRefresh }) => {
               </a>
             </Tooltip>
           </li>
+          <li>
+            <Tooltip id={`${idPrefix}-tooltip`} tooltip={msg.accountSettings()} placement='bottom'>
+              <Link to='/settings' className='nav-item-iconic'>
+                <Icon
+                  name='cog'
+                  type='fa'
+                />
+              </Link>
+            </Tooltip>
+          </li>
           <UserMenu />
           <Bellicon handleclick={() => setShow(!show)} />
         </ul>
diff --git a/src/config.js b/src/config.js
index 34b040e3c..7c8d038c0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -12,6 +12,7 @@ const AppConfiguration = {
   applicationLogoutURL: '', // url to invalidate the user's SSO token ('' skips SSO token invalidation)
   pageLimit: 20,
   schedulerFixedDelayInSeconds: 60,
+  notificationSnoozeDurationInMinutes: 10,
 
   consoleClientResourcesURL: 'https://www.ovirt.org/documentation/admin-guide/virt/console-client-resources/',
   cockpitPort: '9090',
diff --git a/src/constants/index.js b/src/constants/index.js
index 14f99e3ee..9f09f4012 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -21,6 +21,7 @@ export const DELAYED_REMOVE_ACTIVE_REQUEST = 'DELAYED_REMOVE_ACTIVE_REQUEST'
 export const DELETE_VM_NIC = 'DELETE_VM_NIC'
 export const DISMISS_USER_MSG = 'DISMISS_USER_MSG'
 export const DISMISS_EVENT = 'DISMISS_EVENT'
+export const DONT_DISTURB = 'DONT_DISTURB'
 export const DOWNLOAD_CONSOLE_VM = 'DOWNLOAD_CONSOLE_VM'
 export const EDIT_VM = 'EDIT_VM'
 export const EDIT_VM_DISK = 'EDIT_VM_DISK'
@@ -37,14 +38,19 @@ export const GET_BY_PAGE = 'GET_BY_PAGE'
 export const GET_CONSOLE_OPTIONS = 'GET_CONSOLE_OPTIONS'
 export const GET_ISO_FILES = 'GET_ISO_FILES'
 export const GET_OPTION = 'GET_OPTION'
+export const GET_SSH_KEY = 'GET_SSH_KEY'
 export const GET_POOL = 'GET_POOL'
 export const GET_POOLS = 'GET_POOLS'
 export const GET_RDP_VM = 'GET_RDP_VM'
 export const GET_ROLES = 'GET_ROLES'
+export const GET_USER = 'GET_USER'
 export const GET_USER_GROUPS = 'GET_USER_GROUPS'
 export const GET_VM = 'GET_VM'
 export const GET_VM_CDROM = 'GET_VM_CDROM'
 export const GET_VMS = 'GET_VMS'
+export const LOAD_USER_OPTIONS = 'LOAD_USER_OPTIONS'
+export const LOAD_USER_OPTIONS_FINISHED = 'LOAD_USER_OPTIONS_FINISHED'
+export const LOAD_USER_OPTIONS_IN_PROGRESS = 'LOAD_USER_OPTIONS_IN_PROGRESS'
 export const LOGIN = 'LOGIN'
 export const LOGIN_FAILED = 'LOGIN_FAILED'
 export const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL'
@@ -52,6 +58,7 @@ export const LOGOUT = 'LOGOUT'
 export const MANUAL_REFRESH = 'MANUAL_REFRESH'
 export const MAX_VM_MEMORY_FACTOR = 4 // see Edit VM flow; magic constant to stay aligned with Web Admin
 export const OPEN_CONSOLE_VM = 'OPEN_CONSOLE_VM'
+export const PERSIST_OPTIONS = 'PERSIST_OPTIONS'
 export const POOL_ACTION_IN_PROGRESS = 'POOL_ACTION_IN_PROGRESS'
 export const REDIRECT = 'REDIRECT'
 export const REFRESH_DATA = 'REFRESH_DATA'
@@ -70,6 +77,8 @@ export const REMOVE_VMS = 'REMOVE_VMS'
 export const RESTART_VM = 'RESTART_VM'
 export const SAVE_CONSOLE_OPTIONS = 'SAVE_CONSOLE_OPTIONS'
 export const SAVE_FILTERS = 'SAVE_FILTERS'
+export const SAVE_GLOBAL_OPTIONS = 'SAVE_GLOBAL_OPTIONS'
+export const SAVE_SSH_KEY = 'SAVE_SSH_KEY'
 export const SELECT_POOL_DETAIL = 'SELECT_POOL_DETAIL'
 export const SELECT_VM_DETAIL = 'SELECT_VM_DETAIL'
 export const SET_ADMINISTRATOR = 'SET_ADMINISTRATOR'
@@ -88,13 +97,16 @@ export const SET_DEFAULT_TIMEZONE = 'SET_DEFAULT_TIMEZONE'
 export const SET_FILTERS = 'SET_FILTERS'
 export const SET_HOSTS = 'SET_HOSTS'
 export const SET_OPERATING_SYSTEMS = 'SET_OPERATING_SYSTEMS'
+export const SET_OPTION = 'SET_OPTION'
 export const SET_OVIRT_API_VERSION = 'SET_OVIRT_API_VERSION'
 export const SET_ROLES = 'SET_ROLES'
+export const SET_SSH_KEY = 'SET_SSH_KEY'
 export const SET_STORAGE_DOMAIN_FILES = 'SET_STORAGE_DOMAIN_FILES'
 export const SET_STORAGE_DOMAINS = 'SET_STORAGE_DOMAINS'
 export const SET_TEMPLATES = 'SET_TEMPLATES'
 export const SET_USB_AUTOSHARE = 'SET_USB_AUTOSHARE'
 export const SET_USB_FILTER = 'SET_USB_FILTER'
+export const SET_USER = 'SET_USER'
 export const SET_USER_FILTER_PERMISSION = 'SET_USER_FILTER_PERMISSION'
 export const SET_USER_GROUPS = 'SET_USER_GROUPS'
 export const SET_USER_SESSION_TIMEOUT_INTERVAL = 'SET_USER_SESSION_TIMEOUT_INTERVAL'
diff --git a/src/constants/pages.js b/src/constants/pages.js
index e28e69fd1..ad2a897b9 100644
--- a/src/constants/pages.js
+++ b/src/constants/pages.js
@@ -4,3 +4,4 @@ export const DETAIL_PAGE_TYPE = 'detailPage'
 export const LIST_PAGE_TYPE = 'listPage'
 export const NO_REFRESH_TYPE = 'noRefreshPage'
 export const EMPTY_VNIC_PROFILE_ID = ''
+export const SETTINGS_PAGE_TYPE = 'settingsPage'
diff --git a/src/intl/index.js b/src/intl/index.js
index 0af8cdbca..634122fdc 100644
--- a/src/intl/index.js
+++ b/src/intl/index.js
@@ -5,16 +5,13 @@ import { initIntl } from './initialize'
 
 import { messages, type MessageIdType, type MessageType } from './messages'
 import translatedMessages from './translated-messages.json'
+import localeWithFullName from './localeWithFullName.json'
 
 export const DEFAULT_LOCALE: string = 'en'
 
 export const DUMMY_LOCALE: string = 'aa' // NOTE: Used for development and testing
 
-export const BASE_LOCALE_SET: Set<string> = new Set([
-  DEFAULT_LOCALE,
-  'cs', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'pt-BR', 'zh-CN',
-])
-
+export const BASE_LOCALE_SET: Set<string> = new Set(Object.keys(localeWithFullName))
 /**
  * Currently selected locale
  */
diff --git a/src/intl/localeWithFullName.json b/src/intl/localeWithFullName.json
new file mode 100644
index 000000000..ed25afc39
--- /dev/null
+++ b/src/intl/localeWithFullName.json
@@ -0,0 +1,13 @@
+{
+  "cs" : "Česky",
+  "de": "Deutsch - Deutschland",
+  "en":"U.S. English",
+  "es":"español - España",
+  "fr":"français - France",
+  "it":"italiano - Italia",
+  "ja":"日本語 - 日本",
+  "ko":"한국어 - 대한민국",
+  "pt-BR":"português do Brasil",
+  "zh-CN":"中文（简体） - 中国"
+}
+
diff --git a/src/intl/messages.js b/src/intl/messages.js
index 63d2a49c4..ae66dcd2d 100644
--- a/src/intl/messages.js
+++ b/src/intl/messages.js
@@ -23,6 +23,7 @@ export const messages: { [messageId: string]: MessageType } = {
   aboutDialogDocumentationText: 'Documentation',
   aboutDialogReportIssuesLink: 'Please report issues on {link}',
   aboutDialogVersion: 'Version {version}',
+  accountSettings: 'Account Settings',
   actionFailed: '{action} failed',
   actionFeedbackShutdownVm: 'Request to shutdown VM - {VmName} has been received.',
   actionFeedbackRestartVm: 'Request to restart VM - {VmName} has been received.',
@@ -65,6 +66,10 @@ export const messages: { [messageId: string]: MessageType } = {
   cd: 'CD',
   cdCanOnlyChangeWhenVmRunning: 'CD can only be changed when the VM is running.',
   cdromBoot: 'CD-ROM',
+  changesSavedSuccesfully: {
+    message: 'Changes to settings saved succesfully!',
+    description: 'Message displayed when all user settings have been saved successfully',
+  },
   clear: 'Clear',
   clearAll: 'Clear all',
   clearAllFilters: 'Clear All Filters',
@@ -218,6 +223,8 @@ export const messages: { [messageId: string]: MessageType } = {
   disks: 'Disks',
   diskSizeHasToBeAPositiveInteger: 'Disk size has to be a positive integer.',
   displayAll: 'Display all',
+  dontDisturb: 'Do not disturb',
+  dontDisturbFor: 'Do not disturb for',
   downloadVirtManagerMSI: 'Download the MSI from virt-manager.org',
   downloadVVFile: 'Download VV File',
   downloadedSPICE: 'The VV file has been downloaded. Select the file to view the SPICE console on a desktop viewer.',
@@ -229,6 +236,7 @@ export const messages: { [messageId: string]: MessageType } = {
   editDisk: 'Edit Disk',
   editNic: 'Edit NIC',
   editVm: 'Edit the VM',
+  email: 'Email',
   empty: 'Empty',
   emptySnapshotDescription: 'Snapshot description is missing.',
   enterVmDescription: 'Enter VM Description (optional)',
@@ -317,6 +325,10 @@ export const messages: { [messageId: string]: MessageType } = {
     description: 'VM is not responding. One of states of a virtual machine. Other are e.g. Up, Down, Powering-Up',
   },
   errorWhileCreatingNewDisk: 'Error while creating new disk:',
+  every30Seconds: 'Every 30 seconds',
+  everyMinute: 'Every minute',
+  every2Minute: 'Every 2 minutes',
+  every5Minute: 'Every 5 minutes',
   failedToChangeVmIcon: 'Failed to change VM icon',
   failedToChangeVmIconToDefault: 'Failed to change VM icon to default',
   failedToGetVmConsole: 'Failed to get the VM console',
@@ -329,6 +341,14 @@ export const messages: { [messageId: string]: MessageType } = {
   failedToRetrieveVmDetails: 'Failed to retrieve VM details',
   failedToRetrieveVmDisks: 'Failed to retrieve VM disks',
   failedToRetrieveVmIcon: 'Failed to retrieve VM icon',
+  failedToSaveChangesToFields: {
+    message: 'Failed to save changes to:',
+    description: 'Some fields have not been saved. List of fields is displayed below in a horizontal list',
+  },
+  failedToSaveChanges: {
+    message: 'Failed to save changes to settings',
+    description: 'No fields have been saved',
+  },
   failedToShutdownVm: 'Failed to shutdown the VM',
   failedToStartVm: 'Failed to start the VM',
   failedToSuspendVm: 'Failed to suspend the VM',
@@ -339,6 +359,7 @@ export const messages: { [messageId: string]: MessageType } = {
   freeBrowsers: 'Free browsers:',
   fullScreen: 'Full Screen',
   fullyQualifiedDomainName: 'Fully Qualified Domain Name (FQDN) of the virtual machine. Please note, guest agent must be installed within the virtual machine to retrieve this value.',
+  general: 'General',
   gitHub: 'GitHub',
   globalErrorBoundaryTitle: 'Sorry, VM Portal is currently having some issues.',
   globalErrorBoundaryDescription: 'Please refresh the page or log out and log back in. If the issue persists, please report a bug on {bugUrl}',
@@ -369,6 +390,7 @@ export const messages: { [messageId: string]: MessageType } = {
   ipAddress: { message: 'IP Address', description: 'Label for IP addresses reported by VM guest agent' },
   isPersistMemorySnapshot: 'Content of the memory of the virtual machine is included in the snapshot.',
   itemDoesntExistOrDontHavePermissions: 'The item doesn\'t exist or you do not have the permissions to view it.',
+  language: 'Language',
   less: {
     message: 'less',
     description: 'more/less pair used to control collapsible long listing',
@@ -463,8 +485,9 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'This field is only available when the VM is running and the guest agent is installed and running.',
     description: 'Tooltip displayed next to \'notAvailable\' for fields that require the VM to be up and a running guest agent',
   },
-  notifications: 'Notifications',
   notEditableForPoolsOrPoolVms: 'Not editable for Pools or pool VMs.',
+  notifications: 'Notifications',
+  notificationSettingsAffectAllNotifications: 'Notification settings applied here affect all notifications (including VMs and Pools notifications).',
   noVmAvailable: 'No VM available.',
   noVmAvailableForLoggedUser: 'No VM is available for the logged user.',
   off: 'Off',
@@ -503,6 +526,8 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Refresh',
     description: 'Reload data from server',
   },
+  refreshInterval: 'Refresh Interval',
+  refreshIntervalTooltip: 'Interval at which each screen gets refreshed.',
   remoteViewerConnection: 'Remote Viewer Connection',
   remoteViewerAvailable: 'Remote Viewer is available for most operating systems. To install it, search for it in GNOME Software or run the following:',
   remove: 'Remove',
@@ -532,6 +557,7 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Your session is about to timeout due to inactivity.',
     description: 'Primary message for SessionTimeout modal component',
   },
+  sessionDuration: 'session duration',
   shutdown: 'Shutdown',
   shutdownStatelessPoolVm: 'This virtual machine belongs to {poolName} and is stateless so any data that is currently attached to the virtual machine will be lost if it is shutdown. The virtual machine will be returned to {poolName} if shutdown.',
   shutdownVm: 'Shutdown the VM',
@@ -552,7 +578,8 @@ export const messages: { [messageId: string]: MessageType } = {
   snapshotsTooltip: 'VM snapshots.',
   sshAuthorizedKeys: 'SSH Authorized Keys',
   sshAuthorizedKeysTooltip: 'New line separated public SSH keys allowing for passwordless remote login.',
-  SSHKey: 'SSH Key',
+  sshKey: 'SSH Key',
+  sshKeyTooltip: 'This public key provides access to the guest serial console via SSH authentication.',
   spiceConsole: 'SPICE Console',
   startVmOnCreation: 'Start virtual machine on creation',
   state: 'State',
@@ -592,6 +619,7 @@ export const messages: { [messageId: string]: MessageType } = {
   totalMemoryVmWillBeEquippedWith: 'Total memory the virtual machine will be equipped with.',
   troubleWithFindingPage: 'We\'re having trouble finding that page.',
   typeOfWorkloadVmConfigurationIsOptimizedFor: 'Type of workload the virtual machine configuration is optimized for.',
+  uiRefresh: 'UI refresh',
   uniqueNameOfTheVirtualMachine: 'Unique name of the virtual machine.',
   unknown: {
     message: 'unknown',
@@ -657,6 +685,7 @@ export const messages: { [messageId: string]: MessageType } = {
   utilizationNoNetStats: 'Network utilization is not currently available for this VM.',
   useBrowserBelow: 'Please use one of the browsers below.',
   useCtrlAltEnd: 'Use Ctrl+Alt+End',
+  username: 'Username',
   usingRemoteViewer: 'Using a remote viewer relies on a downloaded .vv file.',
   vcpuTopology: 'VCPU Topology',
   viewAllVirtualMachines: 'View All Virtual Machines',
diff --git a/src/intl/translated-messages.json b/src/intl/translated-messages.json
index 3288aa801..ada07378a 100644
--- a/src/intl/translated-messages.json
+++ b/src/intl/translated-messages.json
@@ -1,6 +1,5 @@
 {
   "cs": {
-    "SSHKey": "SSH Klíč",
     "about": "O aplikaci",
     "actionFailed": "{action} se nezdařilo",
     "actualStateVmIsIn": "Skutečný stav virtuálního stroje.",
@@ -155,7 +154,6 @@
     "yes": "Ano"
   },
   "de": {
-    "SSHKey": "SSH-Schlüssel",
     "about": "Über",
     "aboutDialogDocumentationLink": "Weiter Informationen finden Sie unter {link}",
     "aboutDialogDocumentationText": "Dokumentation",
@@ -607,7 +605,6 @@
     "youHaveNoAllowedVnicProfiles": "Sie können NICs nicht erstellen oder bearbeiten, da Sie nicht die Berechtigung haben, vNIC-Profile im Data-Center der VM zu verwenden."
   },
   "es": {
-    "SSHKey": "Clave SSH",
     "about": "Acerca de",
     "aboutDialogDocumentationLink": "Para más información, consulte {link}.",
     "aboutDialogDocumentationText": "Documentación",
@@ -1059,7 +1056,6 @@
     "youHaveNoAllowedVnicProfiles": "No puede crear o editar las NIC porque no tiene permiso para usar ningún perfil vNIC en el centro de datos de la MV."
   },
   "fr": {
-    "SSHKey": "Clé SSH",
     "about": "À propos de",
     "aboutDialogDocumentationLink": "pour plus d'informations voir {link}",
     "aboutDialogDocumentationText": "Documentation",
@@ -1598,7 +1594,6 @@
     "yes": "Si"
   },
   "ja": {
-    "SSHKey": "ユーザーの公開鍵",
     "about": "バージョン情報",
     "aboutDialogDocumentationLink": "詳細は {link} を参照してください",
     "aboutDialogDocumentationText": "ドキュメント",
@@ -2050,7 +2045,6 @@
     "youHaveNoAllowedVnicProfiles": "仮想マシンのデータセンターで vNIC プロファイルを使用するパーミッションがないので、NIC を作成または編集することはできません。"
   },
   "ko": {
-    "SSHKey": "SSH 키 ",
     "about": "정보 ",
     "aboutDialogDocumentationLink": "자세한 내용은 {link}를 참조하십시오",
     "aboutDialogDocumentationText": "문서",
@@ -2502,7 +2496,6 @@
     "youHaveNoAllowedVnicProfiles": "가상 머신 데이터 센터에서 vNIC 프로파일을 사용할 수있는 권한이 없으므로 NIC를 만들거나 편집할 수 없습니다."
   },
   "pt-BR": {
-    "SSHKey": "Chave SSH",
     "about": "Sobre",
     "aboutDialogDocumentationLink": "Para mais informações, consulte {link}",
     "aboutDialogDocumentationText": "Documentação",
@@ -2954,7 +2947,6 @@
     "youHaveNoAllowedVnicProfiles": "Não é possível criar ou editar NICs porque você não tem permissão para usar perfis de vNIC no data center da MV."
   },
   "zh-CN": {
-    "SSHKey": "SSH 密钥",
     "about": "关于",
     "aboutDialogDocumentationLink": "更多信息 {link}",
     "aboutDialogDocumentationText": "文档",
diff --git a/src/ovirtapi/index.js b/src/ovirtapi/index.js
index 132abc43b..a3119b390 100644
--- a/src/ovirtapi/index.js
+++ b/src/ovirtapi/index.js
@@ -71,7 +71,10 @@ const OvirtApi = {
     assertLogin({ methodName: 'icon' })
     return httpGet({ url: `${AppConfiguration.applicationContext}/api/icons/${id}` })
   },
-
+  user ({ userId }: { userId: string }): Promise<Object> {
+    assertLogin({ methodName: 'user' })
+    return httpGet({ url: `${AppConfiguration.applicationContext}/api/users/${userId}` })
+  },
   groups ({ userId }: { userId: string }): Promise<Object> {
     assertLogin({ methodName: 'groups' })
     return httpGet({ url: `${AppConfiguration.applicationContext}/api/users/${userId}/groups` })
@@ -482,28 +485,53 @@ const OvirtApi = {
     assertLogin({ methodName: 'saveSSHKey' })
     const input = JSON.stringify({ content: key })
     if (sshId && key) {
-      // update existing key
+      /**
+       * Update existing key.
+       * Expected result: { user: <> , content: <>, id: <>, href: <> }
+       */
       return httpPut({
         url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys/${sshId}`,
         input,
       })
     } else if (sshId && !key) {
-      // delete existing key
+      /**
+       * Delete existing key.
+       * Expected result: { status: 'complete'}
+      */
       return httpDelete({
         url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys/${sshId}`,
         input: '',
       })
     } else {
-      // create new key
+      /**
+       * Create new key.
+       * Expected result from POST: { status: 'complete'}
+       *
+       * Since POST method does not return the newly created key/key_id we need to
+       * fetch it imemdiately after (successful) creation.
+       */
       return httpPost({
         url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys`,
         input,
-      })
+      }).then(() => OvirtApi.getSSHKey({ userId }))
     }
   },
+
   getSSHKey ({ userId }: { userId: string }): Promise<Object> {
     assertLogin({ methodName: 'getSSHKey' })
+    // Expected result from GET: { ssh_public_key : [ { user: <> , content: <>, id: <>, href: <> }]}
+    // return empty key if there are no keys
     return httpGet({ url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys` })
+      .then(({ ssh_public_key: [firstKey = {}] = [] }) => firstKey)
+  },
+
+  persistUserOptions ({ options, userId }: Object): Promise<Object> {
+    assertLogin({ methodName: 'persistUserOptions' })
+    const input = JSON.stringify(options)
+    return httpPut({
+      url: `${AppConfiguration.applicationContext}/api/users/${userId}`,
+      input,
+    })
   },
 
   /**
diff --git a/src/ovirtapi/types.js b/src/ovirtapi/types.js
index b5e0c275b..12bb384bb 100644
--- a/src/ovirtapi/types.js
+++ b/src/ovirtapi/types.js
@@ -2,7 +2,6 @@
 //
 // Types used in the API and the types used internal to the App.
 //
-
 export type ApiVmType = Object
 export type VmType = Object
 
@@ -149,7 +148,10 @@ export type ApiIconType = Object
 export type IconType = Object
 
 export type ApiSshKeyType = Object
-export type SshKeyType = Object
+export type SshKeyType = {
+  key: string,
+  id: string
+}
 
 export type ApiVmConsolesType = Object
 export type VmConsolesType = Object
@@ -157,6 +159,32 @@ export type VmConsolesType = Object
 export type ApiVmSessionsType = Object
 export type VmSessionsType = Object
 
+export type ApiUserType = Object
+
+export type GlobalUserSettingsType = {|
+  // merging logic assumes thee is no nested object
+  updateRate: number,
+  language: string,
+  showNotifications?: boolean,
+  notificationSnoozeDuration?: number
+|}
+
+export type UserOptionsType = {|
+  global: GlobalUserSettingsType,
+  ssh?: SshKeyType,
+  lastTransactions: { global?: { transactionId: string } },
+  consoleOptions: {[vmId: string]: { autoconnect?: boolean}},
+  loadingFinished: boolean
+|}
+
+export type UserType = {
+  userName: string,
+  lastName: string,
+  email: string,
+  principal: string,
+  receivedOptions?: Object
+}
+
 export type ApiPermissionType = {
   role: {
     id: string,
diff --git a/src/reducers/config.js b/src/reducers/config.js
index 84ad1792c..63aa4e90e 100644
--- a/src/reducers/config.js
+++ b/src/reducers/config.js
@@ -12,6 +12,7 @@ import {
   SET_OVIRT_API_VERSION,
   SET_USB_AUTOSHARE,
   SET_USB_FILTER,
+  SET_USER,
   SET_USER_FILTER_PERMISSION,
   SET_USER_GROUPS,
   SET_USER_SESSION_TIMEOUT_INTERVAL,
@@ -95,6 +96,9 @@ const config = actionReducer(initialState, {
   [SET_WEBSOCKET] (state, { payload: { websocket } }) {
     return state.set('websocket', Immutable.fromJS(websocket))
   },
+  [SET_USER] (state, { payload: { user } }) {
+    return state.mergeDeep({ user })
+  },
   [SET_USER_GROUPS] (state, { payload: { groups } }) {
     return state.set('userGroups', groups)
   },
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 1e14bf377..17e2d573b 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -17,7 +17,6 @@ import consoles from './consoles'
 import pendingTasks from './pendingTasks'
 import roles from './roles'
 
-import { reducer as OptionsDialog } from '../components/OptionsDialog/reducer'
 import NewDiskDialog from '../components/NewDiskDialog/reducers'
 
 export default combineReducers({
@@ -38,6 +37,5 @@ export default combineReducers({
   pendingTasks,
   roles,
 
-  OptionsDialog,
   NewDiskDialog,
 })
diff --git a/src/reducers/options.js b/src/reducers/options.js
index db0a343e3..28cd076c5 100644
--- a/src/reducers/options.js
+++ b/src/reducers/options.js
@@ -1,24 +1,75 @@
-import Immutable from 'immutable'
-import { SET_CONSOLE_OPTIONS } from '_/constants'
+// @flow
+
+import { fromJS } from 'immutable'
+
+import {
+  SET_CONSOLE_OPTIONS,
+  SET_SSH_KEY,
+  SET_OPTION,
+  LOAD_USER_OPTIONS,
+  LOAD_USER_OPTIONS_IN_PROGRESS,
+  LOAD_USER_OPTIONS_FINISHED,
+} from '_/constants'
 import { actionReducer } from './utils'
+import { locale } from '_/intl'
+import AppConfiguration from '_/config'
+import type { UserOptionsType } from '_/ovirtapi/types'
+import type { LoadUserOptionsActionType } from '_/actions/types'
 
-function setOptions ({ state, type, options }) {
-  const optionsObj = {}
-  optionsObj[type] = options
-  return state.mergeIn(['options'], optionsObj)
+const defaultOptions: UserOptionsType = {
+  global: {
+    updateRate: AppConfiguration.schedulerFixedDelayInSeconds,
+    language: locale,
+    showNotifications: true,
+    notificationSnoozeDuration: AppConfiguration.notificationSnoozeDurationInMinutes,
+  },
+  ssh: undefined,
+  lastTransactions: {},
+  consoleOptions: {},
+  loadingFinished: false,
 }
 
-const initialState = Immutable.fromJS({
-  options: {
-    consoleOptions: {}, // It contains vmId: { autoConnect: boolean }
-  },
-})
+const initialState = fromJS({ ...defaultOptions })
 
 const options = actionReducer(initialState, {
-  [SET_CONSOLE_OPTIONS] (state, { payload: { vmId, options } }) {
-    const optionsTemp = {}
-    optionsTemp[vmId] = options
-    return setOptions({ state, type: 'consoleOptions', options: optionsTemp })
+  [SET_CONSOLE_OPTIONS] (clientState: any, { payload: { vmId, options } }: any): any {
+    return clientState.setIn(['consoleOptions', vmId], options)
+  },
+  [LOAD_USER_OPTIONS_IN_PROGRESS]: (clientState: any, action: any) => {
+    return clientState.setIn(['loadingFinished'], false)
+  },
+  [LOAD_USER_OPTIONS_FINISHED]: (clientState: any, action: any) => {
+    return clientState.setIn(['loadingFinished'], true)
+  },
+  [LOAD_USER_OPTIONS]: (clientState: any, action: LoadUserOptionsActionType) => {
+    const serverState = fromJS(action.payload.userOptions || {})
+
+    const choosePrevIfNextUndefined = (prev, next, key) => {
+      return next === undefined ? prev : next
+    }
+
+    const merged = clientState.mergeWith((client, server, key) => {
+      if (key === 'global') {
+        // choose server property if it exists
+        // but fallback to client's defaults if missing
+        return client.mergeWith(choosePrevIfNextUndefined, server)
+      }
+
+      if (['ssh', 'lastTransactions', 'consoleOptions', 'loadingFinished'].includes(key)) {
+        return client
+      }
+
+      // overwrite all other properties
+      return server
+    }, serverState)
+
+    return merged
+  },
+  [SET_OPTION] (state: any, { payload: { key, value } }: any): any {
+    return state.setIn(key, fromJS(value))
+  },
+  [SET_SSH_KEY] (state: any, { payload: { key, id } }: any): any {
+    return state.setIn(['ssh'], fromJS({ key: key || '', id }))
   },
 })
 
diff --git a/src/routes.js b/src/routes.js
index 75272c26b..b08167781 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,12 +1,29 @@
 import React from 'react'
 
-import { DETAIL_PAGE_TYPE, LIST_PAGE_TYPE, CONSOLE_PAGE_TYPE, NO_REFRESH_TYPE } from '_/constants'
-import { msg } from '_/intl'
-
 import PageRouter from './components/PageRouter'
+
 import Handler404 from './Handler404'
-import { VmDetailToolbar, VmConsoleToolbar, VmsListToolbar } from './components/Toolbar'
-import { VmDetailsPage, VmsListPage, VmConsolePage } from './components/Pages'
+import {
+  VmDetailToolbar,
+  VmConsoleToolbar,
+  VmsListToolbar,
+  SettingsToolbar,
+} from './components/Toolbar'
+import {
+  VmDetailsPage,
+  VmsListPage,
+  GlobalSettingsPage,
+  VmConsolePage,
+} from './components/Pages'
+
+import { msg } from '_/intl'
+import {
+  DETAIL_PAGE_TYPE,
+  LIST_PAGE_TYPE,
+  CONSOLE_PAGE_TYPE,
+  NO_REFRESH_TYPE,
+  SETTINGS_PAGE_TYPE,
+} from '_/constants'
 
 /**
  * Function get vms object, and return routes object
@@ -52,6 +69,16 @@ export default function getRoutes (vms) {
         ],
       },
 
+      {
+        path: '/settings',
+        exact: true,
+        title: msg.accountSettings(),
+        component: GlobalSettingsPage,
+        toolbars: SettingsToolbar,
+        isToolbarFullWidth: true,
+        type: SETTINGS_PAGE_TYPE,
+      },
+
       {
         title: '404',
         component: Handler404,
diff --git a/src/sagas/background-refresh.js b/src/sagas/background-refresh.js
index e3ba992fc..d6a9897d1 100644
--- a/src/sagas/background-refresh.js
+++ b/src/sagas/background-refresh.js
@@ -1,3 +1,7 @@
+import {
+  loadUserOptions,
+} from './options'
+
 import {
   all,
   call,
@@ -64,6 +68,7 @@ const pagesRefreshers = {
   [C.DETAIL_PAGE_TYPE]: refreshDetailPage,
   [C.CREATE_PAGE_TYPE]: refreshCreatePage,
   [C.CONSOLE_PAGE_TYPE]: refreshConsolePage,
+  [C.SETTINGS_PAGE_TYPE]: loadUserOptions,
 }
 
 function* getIdsByType (type) {
diff --git a/src/sagas/index.js b/src/sagas/index.js
index 09ed73c12..b03b3e2aa 100644
--- a/src/sagas/index.js
+++ b/src/sagas/index.js
@@ -12,10 +12,10 @@ import { push } from 'connected-react-router'
 import Api, { Transforms } from '_/ovirtapi'
 import { saveToLocalStorage } from '_/storage'
 
+import sagasOptions from './options'
 import sagasRefresh from './background-refresh'
 import sagasDisks from './disks'
 import sagasLogin from './login'
-import sagasOptionsDialog from '_/components/OptionsDialog/sagas'
 import sagasRoles from './roles'
 import sagasStorageDomains from './storageDomains'
 import sagasVmChanges from './vmChanges'
@@ -575,9 +575,9 @@ export function* rootSaga () {
 
     // Sagas from Components
     ...sagasDisks,
-    ...sagasOptionsDialog,
     ...sagasRoles,
     ...sagasStorageDomains,
+    ...sagasOptions,
     ...sagasVmChanges,
     ...sagasVmSnapshots,
   ])
diff --git a/src/sagas/login.js b/src/sagas/login.js
index 5bb89d47e..6c409184a 100644
--- a/src/sagas/login.js
+++ b/src/sagas/login.js
@@ -55,9 +55,12 @@ import { fetchRoles } from './roles'
 import { fetchServerConfiguredValues } from './server-configs'
 import { fetchDataCentersAndStorageDomains, fetchIsoFiles } from './storageDomains'
 import { loadIconsFromLocalStorage } from './osIcons'
-import { transformAndPermitVm } from './index'
+import {
+  transformAndPermitVm,
+} from './index'
 
 import { loadFromLocalStorage } from '_/storage'
+import { loadUserOptions } from './options'
 
 /**
  * Perform login checks, and if they pass, perform initial data loading
@@ -204,6 +207,7 @@ function* initialLoad () {
     call(fetchAllOS, getAllOperatingSystems()),
     call(fetchAllHosts, getAllHosts()),
     call(loadFilters),
+    call(loadUserOptions),
   ])
   console.log('\u2714 data loads with no prerequisites are complete')
   console.groupEnd('no data prerequisites')
diff --git a/src/sagas/options.js b/src/sagas/options.js
new file mode 100644
index 000000000..85f79bb4b
--- /dev/null
+++ b/src/sagas/options.js
@@ -0,0 +1,118 @@
+// @flow
+
+import Api from '_/ovirtapi'
+import { all, put, select, takeLatest, call } from 'redux-saga/effects'
+
+import * as A from '_/actions'
+import { callExternalAction } from './utils'
+
+import * as C from '_/constants'
+
+import type { SaveGlobalOptionsActionType } from '_/actions/types'
+
+/**
+ * Internal type to formalize result returned from
+ * saveSSHKey and saveRemoteOptions sagas.
+ */
+type ResultType = {
+  // list of field names submitted as changed
+  changes: Array<string>,
+  // true if no changes were detected
+  // all submitted values are the same as currently stored
+  sameAsCurrent: boolean,
+  // true if error was reported by ovirtapi query
+  error: boolean,
+  // query specific data packed into one object
+  data: Object
+}
+
+/**
+ * Simple mapper providing default values and type safety.
+ */
+function toResult ({ error = false, changes = [], sameAsCurrent = false, ...data }: Object = {}): ResultType {
+  return {
+    changes,
+    sameAsCurrent,
+    error,
+    data,
+  }
+}
+
+function* fetchSSHKey (action: Object): any {
+  const result = yield call(callExternalAction, 'getSSHKey', Api.getSSHKey, action)
+  if (result.error) {
+    return
+  }
+
+  yield put(A.setSSHKey(Api.SSHKeyToInternal({ sshKey: result })))
+}
+
+function* saveSSHKey ([ sshPropName, submittedKey ]: any): any | ResultType {
+  if (submittedKey === undefined) {
+    // check strictly for undefined
+    // it should be possible to clear ssh key by setting to empty string
+    return toResult()
+  }
+  const sshId = yield select((state) => state.options.getIn(['ssh', 'id']))
+  const currentKey = yield select((state) => state.options.getIn(['ssh', 'key']))
+  if (currentKey === submittedKey) {
+    return toResult({ changes: [sshPropName], sameAsCurrent: true })
+  }
+  const userId = yield select((state) => state.config.getIn(['user', 'id']))
+  const result = yield call(
+    callExternalAction,
+    'saveSSHKey',
+    Api.saveSSHKey,
+    A.saveSSHKey({ sshId, key: submittedKey, userId }),
+    true)
+
+  return toResult({ ...result, changes: [sshPropName] })
+}
+
+/**
+ * Required to delay destructive side effects of user option changes.
+ * Effect should wait until 'finish' event was dispatched.
+ * Primary use case is page reload after locale change.
+ */
+function withLoadingUserOptions (delegateGenerator: (any) => Generator<any, any, any>): any {
+  return function* (action: any): any {
+    yield put(A.loadingUserOptionsInProgress())
+    try {
+      yield call(delegateGenerator, action)
+    } finally {
+      yield put(A.loadingUserOptionsFinished())
+    }
+  }
+}
+
+function* saveGlobalOptions ({ payload: { sshKey, showNotifications, notificationSnoozeDuration }, meta: { transactionId } }: SaveGlobalOptionsActionType): Generator<any, any, any> {
+  const { ssh } = yield all({
+    ssh: call(saveSSHKey, ...Object.entries({ sshKey })),
+  })
+
+  if (!ssh.error && ssh.changes.length && !ssh.sameAsCurrent) {
+    yield put(A.setSSHKey(Api.SSHKeyToInternal({ sshKey: ssh.data })))
+  }
+
+  if (showNotifications !== undefined || notificationSnoozeDuration !== undefined) {
+
+  }
+
+  yield put(
+    A.setOption(
+      { key: ['lastTransactions', 'global'], value: { transactionId } },
+    ),
+  )
+}
+
+export function* loadUserOptions (): any {
+  const userId = yield select(state => state.config.getIn(['user', 'id']))
+  yield put(A.getSSHKey({ userId }))
+  yield put(A.loadingUserOptionsFinished())
+}
+
+export default [
+  takeLatest(C.SAVE_SSH_KEY, saveSSHKey),
+  takeLatest(C.SAVE_GLOBAL_OPTIONS, withLoadingUserOptions(saveGlobalOptions)),
+  takeLatest(C.GET_SSH_KEY, fetchSSHKey),
+]

From ae9a27cac782eeb139dff4cc3feb7e134d4b3a3b Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Mon, 5 Oct 2020 14:11:25 +0200
Subject: [PATCH 3/3] Allow blocking toast notifications ('do not disturb')

Allow user to block system notifications via Account Settings:
1. each change to the snooze duration resets the snooze timer
2. notification settings are not persisted - page reload clears them.
3. only displaying is blocked - logs continue to be accumulated in the
   store (userMessages -> records)
---
 src/actions/index.js                          | 15 +++++++
 src/actions/userMessages.js                   | 10 +++++
 src/components/UserSettings/GlobalSettings.js |  2 +-
 src/constants/index.js                        |  3 ++
 src/intl/messages.js                          |  7 +++-
 src/reducers/userMessages.js                  |  9 ++++-
 src/sagas/background-refresh.js               | 16 ++++++++
 src/sagas/options.js                          | 39 ++++++++++++++++++-
 8 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 5f921a54b..51df8d118 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -21,7 +21,9 @@ import {
   SET_WEBSOCKET,
   SHOW_TOKEN_EXPIRED_MSG,
   START_SCHEDULER_FIXED_DELAY,
+  START_SCHEDULER_FOR_RESUMING_NOTIFICATIONS,
   STOP_SCHEDULER_FIXED_DELAY,
+  STOP_SCHEDULER_FOR_RESUMING_NOTIFICATIONS,
   UPDATE_PAGING_DATA,
 } from '_/constants'
 
@@ -69,6 +71,19 @@ export function stopSchedulerFixedDelay () {
   return { type: STOP_SCHEDULER_FIXED_DELAY }
 }
 
+export function startSchedulerForResumingNotifications (delayInSeconds) {
+  return {
+    type: START_SCHEDULER_FOR_RESUMING_NOTIFICATIONS,
+    payload: {
+      delayInSeconds,
+    },
+  }
+}
+
+export function stopSchedulerForResumingNotifications () {
+  return { type: STOP_SCHEDULER_FOR_RESUMING_NOTIFICATIONS }
+}
+
 export function setUserFilterPermission (filter) {
   return {
     type: SET_USER_FILTER_PERMISSION,
diff --git a/src/actions/userMessages.js b/src/actions/userMessages.js
index 0773b3cbb..303c64a65 100644
--- a/src/actions/userMessages.js
+++ b/src/actions/userMessages.js
@@ -1,5 +1,6 @@
 import {
   ADD_USER_MESSAGE,
+  AUTO_ACKNOWLEDGE,
   CLEAR_USER_MSGS,
   DISMISS_EVENT,
   DISMISS_USER_MSG,
@@ -23,6 +24,15 @@ export function clearUserMessages () {
   return { type: CLEAR_USER_MSGS }
 }
 
+export function setAutoAcknowledge (autoAcknowledge) {
+  return {
+    type: AUTO_ACKNOWLEDGE,
+    payload: {
+      autoAcknowledge,
+    },
+  }
+}
+
 export function setNotificationNotified ({ eventId }) {
   return {
     type: SET_USERMSG_NOTIFIED,
diff --git a/src/components/UserSettings/GlobalSettings.js b/src/components/UserSettings/GlobalSettings.js
index 45a47f0fd..1d7b4b911 100644
--- a/src/components/UserSettings/GlobalSettings.js
+++ b/src/components/UserSettings/GlobalSettings.js
@@ -28,7 +28,7 @@ class GlobalSettings extends Component {
     },
     {
       id: Number.MAX_SAFE_INTEGER,
-      value: msg.sessionDuration(),
+      value: msg.untilNextPageReload(),
     },
   ]
 
diff --git a/src/constants/index.js b/src/constants/index.js
index 9f09f4012..21cf6e93c 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -9,6 +9,7 @@ export const ADD_SNAPSHOT_RESTORE_PENDING_TASK = 'ADD_SNAPSHOT_RESTORE_PENDING_T
 export const ADD_VM_NIC = 'ADD_VM_NIC'
 export const ADD_USER_MESSAGE = 'ADD_USER_MESSAGE'
 export const APP_CONFIGURED = 'APP_CONFIGURED'
+export const AUTO_ACKNOWLEDGE = 'AUTO_ACKNOWLEDGE'
 export const CHANGE_PAGE = 'CHANGE_PAGE'
 export const CHANGE_VM_CDROM = 'CHANGE_VM_CDROM'
 export const CHECK_CONSOLE_IN_USE = 'CHECK_CONSOLE_IN_USE'
@@ -125,8 +126,10 @@ export const NAVIGATE_TO_VM_DETAILS = 'NAVIGATE_TO_VM_DETAILS'
 export const SHUTDOWN_VM = 'SHUTDOWN_VM'
 export const START_POOL = 'START_POOL'
 export const START_SCHEDULER_FIXED_DELAY = 'START_SCHEDULER_FIXED_DELAY'
+export const START_SCHEDULER_FOR_RESUMING_NOTIFICATIONS = 'START_SCHEDULER_FOR_RESUMING_NOTIFICATIONS'
 export const START_VM = 'START_VM'
 export const STOP_SCHEDULER_FIXED_DELAY = 'STOP_SCHEDULER_FIXED_DELAY'
+export const STOP_SCHEDULER_FOR_RESUMING_NOTIFICATIONS = 'STOP_SCHEDULER_FOR_RESUMING_NOTIFICATIONS'
 export const SUSPEND_VM = 'SUSPEND_VM'
 export const UPDATE_ICONS = 'UPDATE_ICONS'
 export const UPDATE_PAGING_DATA = 'UPDATE_PAGING_DATA'
diff --git a/src/intl/messages.js b/src/intl/messages.js
index ae66dcd2d..13c852f7c 100644
--- a/src/intl/messages.js
+++ b/src/intl/messages.js
@@ -487,7 +487,7 @@ export const messages: { [messageId: string]: MessageType } = {
   },
   notEditableForPoolsOrPoolVms: 'Not editable for Pools or pool VMs.',
   notifications: 'Notifications',
-  notificationSettingsAffectAllNotifications: 'Notification settings applied here affect all notifications (including VMs and Pools notifications).',
+  notificationSettingsAffectAllNotifications: 'Notification settings applied here affect all notifications (including all VMs and Pools notifications) and are not persisted (a page reload will clear them).',
   noVmAvailable: 'No VM available.',
   noVmAvailableForLoggedUser: 'No VM is available for the logged user.',
   off: 'Off',
@@ -557,7 +557,6 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Your session is about to timeout due to inactivity.',
     description: 'Primary message for SessionTimeout modal component',
   },
-  sessionDuration: 'session duration',
   shutdown: 'Shutdown',
   shutdownStatelessPoolVm: 'This virtual machine belongs to {poolName} and is stateless so any data that is currently attached to the virtual machine will be lost if it is shutdown. The virtual machine will be returned to {poolName} if shutdown.',
   shutdownVm: 'Shutdown the VM',
@@ -637,6 +636,10 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Dialog contains unsaved changes',
     description: 'Title of modal dialog opened when a user tried to navigate off an editor page after changes have been made.',
   },
+  untilNextPageReload: {
+    message: 'until next page reload',
+    description: 'Phrase used to describe a time period. Will be used in a dropdown (labeled "Do not disturb for") as one of the possible durations (together with typical durations like 1 hour or 1 day).',
+  },
   updateCloudInit: 'Do you want update Cloud-init hostname on new VM name?',
   updateVm: 'Update VM',
   upload: 'Upload',
diff --git a/src/reducers/userMessages.js b/src/reducers/userMessages.js
index 9e5923ee8..dece163a6 100644
--- a/src/reducers/userMessages.js
+++ b/src/reducers/userMessages.js
@@ -1,6 +1,7 @@
 import Immutable from 'immutable'
 import {
   ADD_USER_MESSAGE,
+  AUTO_ACKNOWLEDGE,
   DISMISS_USER_MSG,
   FAILED_EXTERNAL_ACTION,
   LOGIN_FAILED,
@@ -23,13 +24,14 @@ function addLogEntry ({ state, message, type = 'ERROR', failedAction }) {
       type,
       failedAction,
       time: Date.now(),
-      notified: false,
+      notified: state.get('autoAcknowledge'),
       source: 'local',
     })))
 }
 
 const initialState = Immutable.fromJS({
   records: [],
+  autoAcknowledge: false,
 })
 
 const userMessages = actionReducer(initialState, {
@@ -75,6 +77,11 @@ const userMessages = actionReducer(initialState, {
   [DISMISS_USER_MSG] (state, { payload: { eventId } }) {
     return state.update('records', records => records.delete(state.get('records').findIndex(r => r.get('id') === eventId)))
   },
+
+  [AUTO_ACKNOWLEDGE] (state, { payload: { autoAcknowledge = false } }) {
+    return state.set('autoAcknowledge', autoAcknowledge)
+  },
+
 })
 
 export default userMessages
diff --git a/src/sagas/background-refresh.js b/src/sagas/background-refresh.js
index d6a9897d1..2b85c2131 100644
--- a/src/sagas/background-refresh.js
+++ b/src/sagas/background-refresh.js
@@ -1,4 +1,5 @@
 import {
+  resumeNotifications,
   loadUserOptions,
 } from './options'
 
@@ -263,6 +264,20 @@ function* schedulerWithFixedDelay ({
     console.log(`⏰ schedulerWithFixedDelay[${myId}] 🡒 running after delay of: ${delayInSeconds}`)
   }
 }
+let _SchedulerForNotificationsCount = 0
+function* scheduleResumingNotifications ({ payload: { delayInSeconds } }) {
+  yield put(Actions.stopSchedulerForResumingNotifications())
+  const myId = _SchedulerForNotificationsCount++
+  console.log(`notification timer [${myId}] - delay [${delayInSeconds}] sec`)
+  const { stopped } = yield call(schedulerWaitFor, delayInSeconds, C.STOP_SCHEDULER_FOR_RESUMING_NOTIFICATIONS)
+  if (stopped) {
+    console.log(`notification timer [${myId}] - stopped`)
+  } else {
+    console.log(`notification timer [${myId}] - resume notifications`)
+    yield call(resumeNotifications)
+  }
+}
+
 /**
  * When ovirt-web-ui is installed to ovirt-engine, a logout should push the user to the
  * base ovirt welcome page.  But when running in dev mode or via container, the logout
@@ -280,4 +295,5 @@ export default [
   throttle(5000, C.REFRESH_DATA, refreshData),
   takeLatest(C.CHANGE_PAGE, changePage),
   takeEvery(C.LOGOUT, logoutAndCancelScheduler),
+  takeEvery(C.START_SCHEDULER_FOR_RESUMING_NOTIFICATIONS, scheduleResumingNotifications),
 ]
diff --git a/src/sagas/options.js b/src/sagas/options.js
index 85f79bb4b..421e88633 100644
--- a/src/sagas/options.js
+++ b/src/sagas/options.js
@@ -95,7 +95,16 @@ function* saveGlobalOptions ({ payload: { sshKey, showNotifications, notificatio
   }
 
   if (showNotifications !== undefined || notificationSnoozeDuration !== undefined) {
-
+    yield call(
+      updateNotifications,
+      {
+        current: yield select((state) => state.options.getIn(['global', 'showNotifications'])),
+        next: showNotifications,
+      },
+      {
+        current: yield select((state) => state.options.getIn(['global', 'notificationSnoozeDuration'])),
+        next: notificationSnoozeDuration,
+      })
   }
 
   yield put(
@@ -105,6 +114,34 @@ function* saveGlobalOptions ({ payload: { sshKey, showNotifications, notificatio
   )
 }
 
+function* updateNotifications (show: {current: boolean, next?: boolean}, snooze: {current: number, next?: number}): any {
+  const snoozeDuration = snooze.next || snooze.current
+  const showNotifications = show.next === undefined ? show.current : show.next
+  const snoozeUntilPageReload = snoozeDuration === Number.MAX_SAFE_INTEGER
+
+  yield put(A.setOption({ key: ['global', 'showNotifications'], value: showNotifications }))
+  yield put(A.setOption({ key: ['global', 'notificationSnoozeDuration'], value: snoozeDuration }))
+  yield put(A.setAutoAcknowledge(!showNotifications))
+  if (showNotifications || snoozeUntilPageReload) {
+    yield put(A.stopSchedulerForResumingNotifications())
+  } else {
+    // minutes -> seconds
+    yield put(A.startSchedulerForResumingNotifications(snoozeDuration * 60))
+  }
+}
+
+export function* resumeNotifications (): any {
+  yield call(
+    updateNotifications,
+    {
+      current: yield select((state) => state.options.getIn(['global', 'showNotifications'])),
+      next: true,
+    },
+    {
+      current: yield select((state) => state.options.getIn(['global', 'notificationSnoozeDuration'])),
+    })
+}
+
 export function* loadUserOptions (): any {
   const userId = yield select(state => state.config.getIn(['user', 'id']))
   yield put(A.getSSHKey({ userId }))