F #3951: Add option to disable animations (#856)

src/fireedge/src/client/actions/user.js

@@ -22,15 +22,18 @@ module.exports = {
   updateSetting: (dispatch, getState) => {
     const current = getState()
 
-    const userScheme = current.Authenticated?.user?.TEMPLATE?.FIREEDGE?.SCHEME
-    const userLang = current.Authenticated?.user?.TEMPLATE?.FIREEDGE?.LANG
+    const userSetting = current.Authenticated?.user?.TEMPLATE?.FIREEDGE
+
+    if (!userSetting) return
+
+    const mapSetting = Object.entries(userSetting)
+      .reduce((res, [key, value]) =>
+        ({ ...res, [String(key).toLowerCase()]: value })
+      , {})
 
     dispatch(({
       type: CHANGE_SETTINGS,
-      payload: {
-        scheme: userScheme,
-        lang: userLang
-      }
+      payload: mapSetting
     }))
   },
   selectFilterGroup: payload => ({

src/fireedge/src/client/apps/flow/theme.js

@@ -1,18 +1,21 @@
 import Color from 'client/constants/color'
 
-export default {
+export default (scheme = 'dark') => ({
   palette: {
-    type: 'dark',
-    common: { black: '#000', white: '#ffffff' },
+    type: scheme,
+    common: {
+      black: '#000000',
+      white: '#ffffff'
+    },
     background: {
-      paper: '#2a2d3d',
-      default: '#222431'
+      paper: scheme === 'dark' ? '#2a2d3d' : '#ffffff',
+      default: scheme === 'dark' ? '#222431' : '#f2f4f8'
     },
     primary: {
       light: '#2a2d3d',
       main: '#222431',
       dark: '#191924',
-      contrastText: '#fff'
+      contrastText: '#ffffff'
     },
     secondary: {
       light: 'rgba(191, 230, 242, 1)',
@@ -22,4 +25,4 @@ export default {
     },
     ...Color
   }
-}
+})

src/fireedge/src/client/apps/provision/theme.js

@@ -1,15 +1,15 @@
 import Color from 'client/constants/color'
 
-export default (mode = 'dark') => ({
+export default (scheme = 'dark') => ({
   palette: {
-    type: mode,
+    type: scheme,
     common: {
       black: '#000000',
       white: '#ffffff'
     },
     background: {
-      paper: mode === 'dark' ? '#2a2d3d' : '#ffffff',
-      default: mode === 'dark' ? '#222431' : '#f2f4f8'
+      paper: scheme === 'dark' ? '#2a2d3d' : '#ffffff',
+      default: scheme === 'dark' ? '#222431' : '#f2f4f8'
     },
     primary: {
       light: '#2a2d3d',

src/fireedge/src/client/components/Cards/WavesCard.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import clsx from 'clsx'
 import { Paper, Typography, makeStyles, lighten, darken } from '@material-ui/core'
+
 import { addOpacityToColor } from 'client/utils'
 
 const useStyles = makeStyles(theme => {
@@ -55,8 +56,8 @@ const WavesCard = React.memo(({ text, value, bgColor, icon: Icon }) => {
     <Paper className={classes.root}>
       <Typography variant='h6'>{text}</Typography>
       <Typography variant='h4'>{value}</Typography>
-      <span className={clsx(classes.wave, classes.wave1)}></span>
-      <span className={clsx(classes.wave, classes.wave2)}></span>
+      <span className={clsx(classes.wave, classes.wave1)} />
+      <span className={clsx(classes.wave, classes.wave2)} />
       {Icon && <Icon className={classes.icon} />}
     </Paper>
   )

src/fireedge/src/client/components/FormControl/CheckboxController.js

@@ -15,15 +15,15 @@ import { Tr } from 'client/components/HOC/Translate'
 const CheckboxController = memo(
   ({ control, cy, name, label, tooltip, error, fieldProps }) => (
     <Controller
-      render={({ onChange, value }) => (
+      render={({ onChange, value = false }) => (
         <Tooltip title={Tr(tooltip) ?? ''}>
           <FormControl error={Boolean(error)}>
             <FormControlLabel
               control={
                 <Checkbox
                   onChange={e => onChange(e.target.checked)}
                   name={name}
-                  checked={value}
+                  checked={Boolean(value)}
                   color="secondary"
                   inputProps={{ 'data-cy': cy }}
                   {...fieldProps}

src/fireedge/src/client/constants/translates.js

@@ -50,6 +50,7 @@ module.exports = {
   ConfigureTiers: 'Configure Tiers',
   ConfigurePolicies: 'Configure policies',
   ConfigureTemplate: 'Configure template',
+
   /* steps form - provision */
   ProviderOverview: 'Provider overview',
   ProvisionOverview: 'Provision overview',
@@ -61,12 +62,16 @@ module.exports = {
 
   /* sections */
   Dashboard: 'Dashboard',
+
   /* sections - settings */
   Settings: 'Settings',
   Schema: 'Schema',
   Dark: 'Dark',
   Light: 'Light',
   System: 'System',
+  Language: 'Language',
+  DisableDashboardAnimations: 'Disable dashboard animations',
+
   /* sections - system */
   User: 'User',
   Users: 'Users',
@@ -76,20 +81,23 @@ module.exports = {
   VDCs: 'VDCs',
   ACL: 'ACL',
   ACLs: 'ACLs',
+
   /* sections - infrastructure */
   Zone: 'Zone',
   Zones: 'Zones',
   Cluster: 'Cluster',
   Clusters: 'Clusters',
   Host: 'Host',
   Hosts: 'Hosts',
+
   /* sections - network */
   Network: 'Network',
   Networks: 'Networks',
   VirtualNetwork: 'Virtual network',
   VirtualsNetworks: 'Virtuals networks',
   NetworkTopology: 'Network topology',
   NetworksTopologies: 'Networks topologies',
+
   /* sections - storage */
   Datastore: 'Datastore',
   Datastores: 'Datastores',
@@ -101,18 +109,21 @@ module.exports = {
   Marketplaces: 'Marketplaces',
   App: 'App',
   Apps: 'Apps',
+
   /* sections - templates & instances */
   VM: 'VM',
   VMs: 'VMs',
   VirtualRouter: 'VirtualRouter',
   VirtualRouters: 'VirtualRouters',
   VMGroup: 'VMGroup',
   VMGroups: 'VMGroups',
+
   /* sections - flow */
   ApplicationsTemplates: 'Applications templates',
   ApplicationsInstances: 'Applications instances',
   Tier: 'Tier',
   Tiers: 'Tiers',
+
   /* sections - provision */
   Provider: 'Provider',
   Providers: 'Providers',
@@ -143,8 +154,5 @@ module.exports = {
   /* ownership */
   Ownership: 'Ownership',
   Owner: 'Owner',
-  Other: 'Other',
-
-  Language: 'Language',
-  Response: 'Response'
+  Other: 'Other'
 }

src/fireedge/src/client/containers/Dashboard/Provision/index.js

@@ -1,20 +1,30 @@
 import * as React from 'react'
 
+import clsx from 'clsx'
 import { Container, Box, Grid } from '@material-ui/core'
 
-import { useFetchAll, useProvision } from 'client/hooks'
+import { useAuth, useFetchAll, useProvision } from 'client/hooks'
 import * as Widgets from 'client/components/Widgets'
+import dashboardStyles from 'client/containers/Dashboard/Provision/styles'
 
 function Dashboard () {
+  const { settings: { disableanimations } = {} } = useAuth()
   const { getProviders, getProvisions } = useProvision()
   const { fetchRequestAll } = useFetchAll()
 
+  const classes = dashboardStyles({ disableanimations })
+
   React.useEffect(() => {
     fetchRequestAll([getProviders(), getProvisions()])
   }, [])
 
+  const withoutAnimations = String(disableanimations).toUpperCase() === 'YES'
+
   return (
-    <Container disableGutters>
+    <Container
+      disableGutters
+      className={clsx({ [classes.withoutAnimations]: withoutAnimations })}
+    >
       <Box py={3}>
         <Grid container spacing={3}>
           <Grid item xs={12}>

src/fireedge/src/client/containers/Dashboard/Provision/styles.js

@@ -1,6 +1,9 @@
 import { makeStyles } from '@material-ui/core'
 
-export default makeStyles(theme => ({
-  root: {},
-  title: { color: theme.palette.common.black }
+export default makeStyles(() => ({
+  withoutAnimations: {
+    '& *, & *::before, & *::after': {
+      animation: 'none !important'
+    }
+  }
 }))

src/fireedge/src/client/containers/Settings/index.js

@@ -28,6 +28,7 @@ import { Tr } from 'client/components/HOC'
 import { T } from 'client/constants'
 
 import { FORM_FIELDS, FORM_SCHEMA } from 'client/containers/Settings/schema'
+import { mapUserInputs } from 'client/utils'
 
 const useStyles = makeStyles(theme => ({
   header: {
@@ -55,7 +56,7 @@ const useStyles = makeStyles(theme => ({
 const Settings = () => {
   const classes = useStyles()
 
-  const { updateUser, settings } = useAuth()
+  const { updateUser, settings = {} } = useAuth()
 
   const { handleSubmit, setError, reset, formState, ...methods } = useForm({
     reValidateMode: 'onSubmit',
@@ -65,16 +66,20 @@ const Settings = () => {
 
   React.useEffect(() => {
     // set user settings values
-    reset(settings, { isSubmitted: false, error: false })
-  }, [settings])
+    reset(
+      FORM_SCHEMA.cast(settings),
+      { isSubmitted: false, error: false }
+    )
+  }, [])
 
   const onSubmit = dataForm => {
-    const values = Object.entries(dataForm)
+    const inputs = mapUserInputs(dataForm)
+
+    const values = Object.entries(inputs)
       .map(([key, value]) => `\n ${String(key).toUpperCase()} = "${value}"`)
       .join(',')
 
     return updateUser({ template: `FIREEDGE = [${values}]\n` })
-    // .then(() => context.changeLang(dataForm.lang))
   }
 
   return (

src/fireedge/src/client/containers/Settings/schema.js

@@ -2,34 +2,31 @@ import * as yup from 'yup'
 import { T, INPUT_TYPES, SCHEMES, DEFAULT_SCHEME, DEFAULT_LANGUAGE } from 'client/constants'
 import { getValidationFromFields } from 'client/utils'
 
-const SCHEME_VALUES = [
-  { text: T.System, value: SCHEMES.SYSTEM },
-  { text: T.Dark, value: SCHEMES.DARK },
-  { text: T.Light, value: SCHEMES.LIGHT }
-]
-
-const LANGUAGE_VALUES =
-  window?.langs?.map(({ key, value }) => ({ text: value, value: key })) ?? []
-
 const SCHEME = {
   name: 'scheme',
   label: T.Schema,
   type: INPUT_TYPES.SELECT,
-  values: SCHEME_VALUES,
+  values: [
+    { text: T.System, value: SCHEMES.SYSTEM },
+    { text: T.Dark, value: SCHEMES.DARK },
+    { text: T.Light, value: SCHEMES.LIGHT }
+  ],
   validation: yup
     .string()
     .trim()
     .required('Scheme field is required')
     .default(DEFAULT_SCHEME),
   grid: { md: 12 },
+  native: true,
   fieldProps: { variant: 'outlined' }
 }
 
 const LANGUAGES = {
   name: 'lang',
   label: T.Language,
   type: INPUT_TYPES.SELECT,
-  values: LANGUAGE_VALUES,
+  values: () =>
+    window?.langs?.map(({ key, value }) => ({ text: value, value: key })) ?? [],
   validation: yup
     .string()
     .trim()
@@ -40,7 +37,22 @@ const LANGUAGES = {
   fieldProps: { variant: 'outlined' }
 }
 
-export const FORM_FIELDS = [SCHEME, LANGUAGES]
+const DISABLE_ANIMATIONS = {
+  name: 'disableanimations',
+  label: T.DisableDashboardAnimations,
+  type: INPUT_TYPES.CHECKBOX,
+  validation: yup
+    .boolean()
+    .transform(value => {
+      if (typeof value === 'boolean') return value
+
+      return String(value).toUpperCase() === 'YES'
+    })
+    .default(false),
+  grid: { md: 12 }
+}
+
+export const FORM_FIELDS = [SCHEME, LANGUAGES, DISABLE_ANIMATIONS]
 
 export const FORM_SCHEMA = yup.object(
   getValidationFromFields(FORM_FIELDS)

src/fireedge/src/client/providers/muiProvider.js

@@ -12,14 +12,14 @@ const MuiProvider = ({ theme: appTheme, children }) => {
   const { settings: { scheme } = {} } = useAuth()
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
 
-  const changeThemeType = () => {
+  const changeScheme = () => {
     const prefersScheme = prefersDarkMode ? DARK : LIGHT
     const newScheme = scheme === SYSTEM ? prefersScheme : scheme
 
     return createTheme(appTheme(newScheme))
   }
 
-  const [muitheme, setTheme] = React.useState(changeThemeType)
+  const [muitheme, setTheme] = React.useState(changeScheme)
 
   React.useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
@@ -28,7 +28,9 @@ const MuiProvider = ({ theme: appTheme, children }) => {
     }
   }, [])
 
-  React.useEffect(() => setTheme(changeThemeType), [scheme, prefersDarkMode])
+  React.useEffect(() => {
+    setTheme(changeScheme)
+  }, [scheme, prefersDarkMode])
 
   return (
     <ThemeProvider theme={muitheme}>