Add setting to enable nightly releases updates (#742)

Co-authored-by: Amine Mouafik <amine@mouafik.fr>

3 files changed, 88 insertions, 0 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 3b732e602..a60270a6f 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -9,6 +9,7 @@ import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as ShareFranz } from '../../features/shareFranz';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
+import { Component as NightlyBuilds } from '../../features/nightlyBuilds';
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
 import ErrorBoundary from '../util/ErrorBoundary';
 
@@ -197,6 +198,7 @@ class AppLayout extends Component {
               <BasicAuth />
               <ShareFranz />
               <QuickSwitch />
+              <NightlyBuilds />
               <PublishDebugInfo />
               {services}
               {children}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 031203308..b6698b8e2 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -7,6 +7,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
+import ToggleRaw from '../../ui/ToggleRaw';
 import Select from '../../ui/Select';
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 import Input from '../../ui/Input';
@@ -170,6 +171,7 @@ export default @observer class EditSettingsForm extends Component {
     hibernationEnabled: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
+    isNightlyEnabled: PropTypes.bool.isRequired,
     openProcessManager: PropTypes.func.isRequired,
   };
 
@@ -224,6 +226,7 @@ export default @observer class EditSettingsForm extends Component {
       isDarkmodeEnabled,
       openProcessManager,
       isTodosActivated,
+      isNightlyEnabled,
     } = this.props;
     const { intl } = this.context;
 
@@ -593,6 +596,15 @@ export default @observer class EditSettingsForm extends Component {
               {automaticUpdates && (
               <div>
                 <Toggle field={form.$('beta')} />
+                <ToggleRaw
+                  field={{
+                    value: isNightlyEnabled,
+                    id: 'nightly',
+                    label: 'Include nightly versions',
+                    name: 'Nightly builds',
+                  }}
+                  onChange={window.ferdi.features.nightlyBuilds.toggleFeature}
+                />
                 {updateIsReadyToInstall ? (
                   <Button
                     label={intl.formatMessage(messages.buttonInstallUpdate)}
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
new file mode 100644
index 000000000..ee817356b
--- /dev/null
+++ b/src/components/ui/ToggleRaw.js
@@ -0,0 +1,74 @@
+/**
+ * "Raw" Toggle - for usage without a MobX Form element
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+export default @observer class ToggleRaw extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    field: PropTypes.shape({
+      value: PropTypes.bool.isRequired,
+      id: PropTypes.string,
+      name: PropTypes.string,
+      label: PropTypes.string,
+    }).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    showLabel: true,
+    disabled: false,
+  };
+
+  onChange(e) {
+    const { onChange } = this.props;
+
+    onChange(e);
+  }
+
+  render() {
+    const {
+      field,
+      className,
+      showLabel,
+      disabled,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__toggle-wrapper',
+          'franz-form__toggle-disabled',
+          className,
+        ])}
+      >
+        <label
+          htmlFor={field.id}
+          className={classnames({
+            'franz-form__toggle': true,
+            'is-active': field.value,
+          })}
+        >
+          <div className="franz-form__toggle-button" />
+          <input
+            type="checkbox"
+            id={field.id}
+            name={field.name}
+            value={field.name}
+            checked={field.value}
+            onChange={e => (!disabled ? this.onChange(e) : null)}
+          />
+        </label>
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+      </div>
+    );
+  }
+}