feat: add switch for action enabled and action access

Author: pyphilia

public/app/config/channels.js

@@ -52,6 +52,8 @@ module.exports = {
   SET_USER_MODE_CHANNEL: 'user:mode:set',
   SET_SPACE_AS_FAVORITE_CHANNEL: 'user:set-space-favorite:set',
   SET_SPACE_AS_RECENT_CHANNEL: 'user:set-space-recent:set',
+  SET_ACTION_ACCESSIBILITY_CHANNEL: 'user:action:accessibility:set',
+  SET_ACTION_ENABLED_CHANNEL: 'user:action:enabled:set',
   GET_CLASSROOMS_CHANNEL: 'classrooms:get',
   ADD_CLASSROOM_CHANNEL: 'classroom:add',
   DELETE_CLASSROOM_CHANNEL: 'classroom:delete',

public/app/config/config.js

@@ -52,6 +52,8 @@ const DEFAULT_PROTOCOL = 'https';
 const DEFAULT_LOGGING_LEVEL = 'info';
 const AUTHENTICATED = 'authenticated';
 const DEFAULT_AUTHENTICATION = false;
+const DEFAULT_ACTION_ACCESSIBILITY = false;
+const DEFAULT_ACTION_ENABLED = true;
 
 const DEFAULT_USER = {
   geolocation: null,
@@ -61,6 +63,8 @@ const DEFAULT_USER = {
     geolocationEnabled: DEFAULT_GEOLOCATION_ENABLED,
     syncMode: DEFAULT_SYNC_MODE,
     userMode: DEFAULT_USER_MODE,
+    actionAccessibility: DEFAULT_ACTION_ACCESSIBILITY,
+    actionEnabled: DEFAULT_ACTION_ENABLED,
   },
   favoriteSpaces: [],
   recentSpaces: [],

public/app/config/messages.js

@@ -99,6 +99,10 @@ const ERROR_INVALID_USERNAME_MESSAGE = 'This username is invalid';
 const ERROR_NO_USER_TO_DELETE_MESSAGE = 'There is no user to delete';
 const ERROR_GETTING_SPACE_IN_CLASSROOM_MESSAGE =
   'There was an error getting the space in this classroom';
+const ERROR_SETTING_ACTION_ACCESSIBILITY =
+  'There was an error setting the action accessibility';
+const ERROR_SETTING_ACTION_ENABLED =
+  'There was an error setting the action enabled';
 
 module.exports = {
   ERROR_GETTING_DEVELOPER_MODE,
@@ -167,4 +171,6 @@ module.exports = {
   ERROR_NO_USER_TO_DELETE_MESSAGE,
   ERROR_GETTING_SPACE_IN_CLASSROOM_MESSAGE,
   ERROR_INVALID_USERNAME_MESSAGE,
+  ERROR_SETTING_ACTION_ACCESSIBILITY,
+  ERROR_SETTING_ACTION_ENABLED,
 };

public/app/listeners/index.js

@@ -47,6 +47,8 @@ const deleteUsersInClassroom = require('./deleteUsersInClassroom');
 const editUserInClassroom = require('./editUserInClassroom');
 const getSpaceInClassroom = require('./getSpaceInClassroom');
 const loadSpaceInClassroom = require('./loadSpaceInClassroom');
+const setActionAccessibility = require('./setActionAccessibility');
+const setActionEnabled = require('./setActionEnabled');
 
 module.exports = {
   loadSpace,
@@ -97,4 +99,6 @@ module.exports = {
   editUserInClassroom,
   getSpaceInClassroom,
   loadSpaceInClassroom,
+  setActionAccessibility,
+  setActionEnabled,
 };

public/app/listeners/setActionAccessibility.js

@@ -0,0 +1,24 @@
+const { SET_ACTION_ACCESSIBILITY_CHANNEL } = require('../config/channels');
+const { ERROR_GENERAL } = require('../config/errors');
+const logger = require('../logger');
+
+const setActionAccessibility = (mainWindow, db) => async (
+  event,
+  actionAccessibility
+) => {
+  try {
+    db.set('user.settings.actionAccessibility', actionAccessibility).write();
+    mainWindow.webContents.send(
+      SET_ACTION_ACCESSIBILITY_CHANNEL,
+      actionAccessibility
+    );
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(
+      SET_ACTION_ACCESSIBILITY_CHANNEL,
+      ERROR_GENERAL
+    );
+  }
+};
+
+module.exports = setActionAccessibility;

public/app/listeners/setActionEnabled.js

@@ -0,0 +1,19 @@
+const { SET_ACTION_ENABLED_CHANNEL } = require('../config/channels');
+const { ERROR_GENERAL } = require('../config/errors');
+const { DEFAULT_ACTION_ENABLED } = require('../config/config');
+const logger = require('../logger');
+
+const setActionEnabled = (mainWindow, db) => async (event, actionEnabled) => {
+  try {
+    db.set('user.settings.actionEnabled', actionEnabled).write();
+    mainWindow.webContents.send(
+      SET_ACTION_ENABLED_CHANNEL,
+      actionEnabled || DEFAULT_ACTION_ENABLED
+    );
+  } catch (e) {
+    logger.error(e);
+    mainWindow.webContents.send(SET_ACTION_ENABLED_CHANNEL, ERROR_GENERAL);
+  }
+};
+
+module.exports = setActionEnabled;

public/electron.js

@@ -72,6 +72,8 @@ const {
   EDIT_USER_IN_CLASSROOM_CHANNEL,
   GET_SPACE_IN_CLASSROOM_CHANNEL,
   LOAD_SPACE_IN_CLASSROOM_CHANNEL,
+  SET_ACTION_ACCESSIBILITY_CHANNEL,
+  SET_ACTION_ENABLED_CHANNEL,
 } = require('./app/config/channels');
 const env = require('./env.json');
 const {
@@ -122,6 +124,8 @@ const {
   editUserInClassroom,
   getSpaceInClassroom,
   loadSpaceInClassroom,
+  setActionAccessibility,
+  setActionEnabled,
 } = require('./app/listeners');
 const isMac = require('./app/utils/isMac');
 
@@ -463,6 +467,15 @@ app.on('ready', async () => {
     setGeolocationEnabled(mainWindow, db)
   );
 
+  // called when setting action accessibility
+  ipcMain.on(
+    SET_ACTION_ACCESSIBILITY_CHANNEL,
+    setActionAccessibility(mainWindow, db)
+  );
+
+  // called when setting action enabled
+  ipcMain.on(SET_ACTION_ENABLED_CHANNEL, setActionEnabled(mainWindow, db));
+
   // called when getting student mode
   ipcMain.on(GET_USER_MODE_CHANNEL, getUserMode(mainWindow, db));
 

src/actions/user.js

@@ -28,6 +28,10 @@ import {
   SET_SPACE_AS_FAVORITE_SUCCEEDED,
   FLAG_SETTING_SPACE_AS_RECENT,
   SET_SPACE_AS_RECENT_SPACES_SUCCEEDED,
+  FLAG_SETTING_ACTION_ACCESSIBILITY,
+  SET_ACTION_ACCESSIBILITY_SUCCEEDED,
+  FLAG_SETTING_ACTION_ENABLED,
+  SET_ACTION_ENABLED_SUCCEEDED,
 } from '../types';
 import {
   ERROR_GETTING_GEOLOCATION,
@@ -45,6 +49,8 @@ import {
   ERROR_SETTING_USER_MODE,
   ERROR_SETTING_SPACE_AS_FAVORITE,
   ERROR_SETTING_SPACE_AS_RECENT,
+  ERROR_SETTING_ACTION_ACCESSIBILITY,
+  ERROR_SETTING_ACTION_ENABLED,
 } from '../config/messages';
 import {
   GET_USER_FOLDER_CHANNEL,
@@ -60,6 +66,8 @@ import {
   SET_USER_MODE_CHANNEL,
   SET_SPACE_AS_FAVORITE_CHANNEL,
   SET_SPACE_AS_RECENT_CHANNEL,
+  SET_ACTION_ACCESSIBILITY_CHANNEL,
+  SET_ACTION_ENABLED_CHANNEL,
 } from '../config/channels';
 import { createFlag } from './common';
 import { ERROR_GENERAL } from '../config/errors';
@@ -81,6 +89,10 @@ const flagGettingUserMode = createFlag(FLAG_GETTING_USER_MODE);
 const flagSettingUserMode = createFlag(FLAG_SETTING_USER_MODE);
 const flagSettingSpaceAsFavorite = createFlag(FLAG_SETTING_SPACE_AS_FAVORITE);
 const flagSettingSpaceAsRecent = createFlag(FLAG_SETTING_SPACE_AS_RECENT);
+const flagSettingActionAccessibility = createFlag(
+  FLAG_SETTING_ACTION_ACCESSIBILITY
+);
+const flagSettingActionEnabled = createFlag(FLAG_SETTING_ACTION_ENABLED);
 
 const getGeolocation = async () => async dispatch => {
   // only fetch location if online
@@ -399,6 +411,54 @@ const setSpaceAsRecent = payload => dispatch => {
   }
 };
 
+const setActionAccessibility = payload => dispatch => {
+  try {
+    dispatch(flagSettingActionAccessibility(true));
+    window.ipcRenderer.send(SET_ACTION_ACCESSIBILITY_CHANNEL, payload);
+    window.ipcRenderer.once(
+      SET_ACTION_ACCESSIBILITY_CHANNEL,
+      (event, response) => {
+        if (response === ERROR_GENERAL) {
+          toastr.error(
+            ERROR_MESSAGE_HEADER,
+            ERROR_SETTING_ACTION_ACCESSIBILITY
+          );
+        } else {
+          dispatch({
+            type: SET_ACTION_ACCESSIBILITY_SUCCEEDED,
+            payload,
+          });
+        }
+        dispatch(flagSettingActionAccessibility(false));
+      }
+    );
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_ACTION_ACCESSIBILITY);
+  }
+};
+
+const setActionEnabled = payload => dispatch => {
+  try {
+    dispatch(flagSettingActionEnabled(true));
+    window.ipcRenderer.send(SET_ACTION_ENABLED_CHANNEL, payload);
+    window.ipcRenderer.once(SET_ACTION_ENABLED_CHANNEL, (event, response) => {
+      if (response === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_ACTION_ENABLED);
+      } else {
+        dispatch({
+          type: SET_ACTION_ENABLED_SUCCEEDED,
+          payload,
+        });
+      }
+      dispatch(flagSettingActionEnabled(false));
+    });
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_ACTION_ENABLED);
+  }
+};
+
 export {
   getUserFolder,
   getGeolocation,
@@ -414,4 +474,6 @@ export {
   setUserMode,
   setSpaceAsFavorite,
   setSpaceAsRecent,
+  setActionAccessibility,
+  setActionEnabled,
 };

src/components/Settings.js

@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import { connect } from 'react-redux';
 import { FormGroup } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
+import Divider from '@material-ui/core/Divider';
 import Styles from '../Styles';
 import LanguageSelect from './common/LanguageSelect';
 import DeveloperSwitch from './common/DeveloperSwitch';
@@ -14,8 +15,17 @@ import Main from './common/Main';
 import { SETTINGS_MAIN_ID } from '../config/selectors';
 import SyncAdvancedSwitch from './space/sync/SyncAdvancedSwitch';
 import StudentModeSwitch from './common/StudentModeSwitch';
+import ActionEnabledSwitch from './common/ActionEnabledSwitch';
+import ActionAccessibilitySwitch from './common/ActionAccessibilitySwitch';
 import { USER_MODES } from '../config/constants';
 
+const styles = theme => ({
+  ...Styles(theme),
+  divider: {
+    margin: theme.spacing(2, 0),
+  },
+});
+
 // eslint-disable-next-line react/prefer-stateless-function
 export class Settings extends Component {
   static propTypes = {
@@ -27,6 +37,7 @@ export class Settings extends Component {
       content: PropTypes.string.isRequired,
       contentShift: PropTypes.string.isRequired,
       settings: PropTypes.string.isRequired,
+      divider: PropTypes.string.isRequired,
     }).isRequired,
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
@@ -40,7 +51,7 @@ export class Settings extends Component {
     return (
       <Main id={SETTINGS_MAIN_ID}>
         <div className={classes.settings}>
-          <Typography variant="h5" color="inherit">
+          <Typography variant="h4" color="inherit">
             {t('Settings')}
           </Typography>
           <FormGroup>
@@ -50,6 +61,14 @@ export class Settings extends Component {
             <StudentModeSwitch />
             {userMode === USER_MODES.TEACHER ? <DeveloperSwitch /> : null}
           </FormGroup>
+          <Divider variant="middle" classes={{ root: classes.divider }} />
+          <Typography variant="h5" color="inherit" className="mt-2">
+            {t('Actions')}
+          </Typography>
+          <FormGroup>
+            <ActionEnabledSwitch />
+            <ActionAccessibilitySwitch />
+          </FormGroup>
         </div>
       </Main>
     );
@@ -62,7 +81,7 @@ const mapStateToProps = ({ authentication }) => ({
 
 const ConnectedComponent = connect(mapStateToProps, null)(Settings);
 
-const StyledComponent = withStyles(Styles, { withTheme: true })(
+const StyledComponent = withStyles(styles, { withTheme: true })(
   ConnectedComponent
 );
 

src/components/Settings.test.js

@@ -50,7 +50,7 @@ describe('<Settings />', () => {
   });
 
   it('renders one <Typography /> component with text Settings', () => {
-    const typography = wrapper.find(Typography);
+    const typography = wrapper.find(Typography).find({ variant: 'h4' });
     expect(typography).toHaveLength(1);
     expect(typography.contains('Settings')).toBeTruthy();
   });

src/components/__snapshots__/Settings.test.js.snap

@@ -9,7 +9,7 @@ exports[`<Settings /> renders correctly 1`] = `
   >
     <WithStyles(ForwardRef(Typography))
       color="inherit"
-      variant="h5"
+      variant="h4"
     >
       Settings
     </WithStyles(ForwardRef(Typography))>
@@ -20,6 +20,25 @@ exports[`<Settings /> renders correctly 1`] = `
       <withI18nextTranslation(WithStyles(Connect(StudentModeSwitch))) />
       <withI18nextTranslation(WithStyles(Connect(DeveloperSwitch))) />
     </WithStyles(ForwardRef(FormGroup))>
+    <WithStyles(ForwardRef(Divider))
+      classes={
+        Object {
+          "root": undefined,
+        }
+      }
+      variant="middle"
+    />
+    <WithStyles(ForwardRef(Typography))
+      className="mt-2"
+      color="inherit"
+      variant="h5"
+    >
+      Actions
+    </WithStyles(ForwardRef(Typography))>
+    <WithStyles(ForwardRef(FormGroup))>
+      <withI18nextTranslation(WithStyles(Connect(ActionEnabledSwitch))) />
+      <withI18nextTranslation(WithStyles(Connect(ActionAccessibilitySwitch))) />
+    </WithStyles(ForwardRef(FormGroup))>
   </div>
 </withI18nextTranslation(WithStyles(Connect(Main)))>
 `;