Secret Dev Settings Page

frontend/src/App/AppRoutes.js

@@ -8,6 +8,7 @@ import IndexerIndexConnector from 'Indexer/Index/IndexerIndexConnector';
 import StatsConnector from 'Indexer/Stats/StatsConnector';
 import SearchIndexConnector from 'Search/SearchIndexConnector';
 import ApplicationSettingsConnector from 'Settings/Applications/ApplicationSettingsConnector';
+import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Settings from 'Settings/Settings';
@@ -113,6 +114,11 @@ function AppRoutes(props) {
         component={UISettingsConnector}
       />
 
+      <Route
+        path="/settings/development"
+        component={DevelopmentSettingsConnector}
+      />
+
       {/*
         System
       */}

frontend/src/Settings/Development/DevelopmentSettings.js

@@ -0,0 +1,143 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FieldSet from 'Components/FieldSet';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { inputTypes } from 'Helpers/Props';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
+
+const logLevelOptions = [
+  { key: 'info', value: 'Info' },
+  { key: 'debug', value: 'Debug' },
+  { key: 'trace', value: 'Trace' }
+];
+
+class DevelopmentSettings extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      error,
+      settings,
+      hasSettings,
+      onInputChange,
+      onSavePress,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <PageContent title={translate('DevelopmentSettings')}>
+        <SettingsToolbarConnector
+          {...otherProps}
+          onSavePress={onSavePress}
+        />
+
+        <PageContentBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && error &&
+              <div>
+                {translate('UnableToLoadDevelopmentSettings')}
+              </div>
+          }
+
+          {
+            hasSettings && !isFetching && !error &&
+              <Form
+                id="developmentSettings"
+                {...otherProps}
+              >
+                <FieldSet legend={translate('Logging')}>
+                  <FormGroup>
+                    <FormLabel>{translate('SettingsLogRotate')}</FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.NUMBER}
+                      name="logRotate"
+                      helpText={translate('SettingsLogRotateHelpText')}
+                      onChange={onInputChange}
+                      {...settings.logRotate}
+                    />
+                  </FormGroup>
+
+                  <FormGroup>
+                    <FormLabel>{translate('SettingsConsoleLogLevel')}</FormLabel>
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="consoleLogLevel"
+                      values={logLevelOptions}
+                      onChange={onInputChange}
+                      {...settings.consoleLogLevel}
+                    />
+                  </FormGroup>
+
+                  <FormGroup>
+                    <FormLabel>{translate('SettingsLogSql')}</FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.CHECK}
+                      name="logSql"
+                      helpText={translate('SettingsSqlLoggingHelpText')}
+                      onChange={onInputChange}
+                      {...settings.logSql}
+                    />
+                  </FormGroup>
+
+                  <FormGroup>
+                    <FormLabel>{translate('SettingsIndexerLogging')}</FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.CHECK}
+                      name="logIndexerResponse"
+                      helpText={translate('SettingsIndexerLoggingHelpText')}
+                      onChange={onInputChange}
+                      {...settings.logIndexerResponse}
+                    />
+                  </FormGroup>
+                </FieldSet>
+
+                <FieldSet legend={translate('Analytics')}>
+                  <FormGroup>
+                    <FormLabel>{translate('SettingsFilterSentryEvents')}</FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.CHECK}
+                      name="filterSentryEvents"
+                      helpText={translate('SettingsFilterSentryEventsHelpText')}
+                      onChange={onInputChange}
+                      {...settings.filterSentryEvents}
+                    />
+                  </FormGroup>
+                </FieldSet>
+              </Form>
+          }
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+
+}
+
+DevelopmentSettings.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  settings: PropTypes.object.isRequired,
+  hasSettings: PropTypes.bool.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
+
+export default DevelopmentSettings;

frontend/src/Settings/Development/DevelopmentSettingsConnector.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { fetchDevelopmentSettings, saveDevelopmentSettings, setDevelopmentSettingsValue } from 'Store/Actions/settingsActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import DevelopmentSettings from './DevelopmentSettings';
+
+const SECTION = 'development';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createSettingsSectionSelector(SECTION),
+    (advancedSettings, sectionSettings) => {
+      return {
+        advancedSettings,
+        ...sectionSettings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setDevelopmentSettingsValue,
+  saveDevelopmentSettings,
+  fetchDevelopmentSettings,
+  clearPendingChanges
+};
+
+class DevelopmentSettingsConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchDevelopmentSettings();
+  }
+
+  componentWillUnmount() {
+    this.props.clearPendingChanges({ section: `settings.${SECTION}` });
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setDevelopmentSettingsValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.saveDevelopmentSettings();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <DevelopmentSettings
+        onInputChange={this.onInputChange}
+        onSavePress={this.onSavePress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+DevelopmentSettingsConnector.propTypes = {
+  setDevelopmentSettingsValue: PropTypes.func.isRequired,
+  saveDevelopmentSettings: PropTypes.func.isRequired,
+  fetchDevelopmentSettings: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(DevelopmentSettingsConnector);

frontend/src/Store/Actions/Settings/development.js

@@ -0,0 +1,64 @@
+import { createAction } from 'redux-actions';
+import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
+import createSaveHandler from 'Store/Actions/Creators/createSaveHandler';
+import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
+import { createThunk } from 'Store/thunks';
+
+//
+// Variables
+
+const section = 'settings.development';
+
+//
+// Actions Types
+
+export const FETCH_DEVELOPMENT_SETTINGS = 'settings/development/fetchDevelopmentSettings';
+export const SET_DEVELOPMENT_SETTINGS_VALUE = 'settings/development/setDevelopmentSettingsValue';
+export const SAVE_DEVELOPMENT_SETTINGS = 'settings/development/saveDevelopmentSettings';
+
+//
+// Action Creators
+
+export const fetchDevelopmentSettings = createThunk(FETCH_DEVELOPMENT_SETTINGS);
+export const saveDevelopmentSettings = createThunk(SAVE_DEVELOPMENT_SETTINGS);
+export const setDevelopmentSettingsValue = createAction(SET_DEVELOPMENT_SETTINGS_VALUE, (payload) => {
+  return {
+    section,
+    ...payload
+  };
+});
+
+//
+// Details
+
+export default {
+
+  //
+  // State
+
+  defaultState: {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    pendingChanges: {},
+    isSaving: false,
+    saveError: null,
+    item: {}
+  },
+
+  //
+  // Action Handlers
+
+  actionHandlers: {
+    [FETCH_DEVELOPMENT_SETTINGS]: createFetchHandler(section, '/config/development'),
+    [SAVE_DEVELOPMENT_SETTINGS]: createSaveHandler(section, '/config/development')
+  },
+
+  //
+  // Reducers
+
+  reducers: {
+    [SET_DEVELOPMENT_SETTINGS_VALUE]: createSetSettingValueReducer(section)
+  }
+
+};

frontend/src/Store/Actions/settingsActions.js

@@ -2,6 +2,7 @@ import { createAction } from 'redux-actions';
 import { handleThunks } from 'Store/thunks';
 import createHandleActions from './Creators/createHandleActions';
 import applications from './Settings/applications';
+import development from './Settings/development';
 import general from './Settings/general';
 import indexerCategories from './Settings/indexerCategories';
 import indexerFlags from './Settings/indexerFlags';
@@ -15,6 +16,7 @@ export * from './Settings/indexerFlags';
 export * from './Settings/languages';
 export * from './Settings/notifications';
 export * from './Settings/applications';
+export * from './Settings/development';
 export * from './Settings/ui';
 
 //
@@ -34,6 +36,7 @@ export const defaultState = {
   languages: languages.defaultState,
   notifications: notifications.defaultState,
   applications: applications.defaultState,
+  development: development.defaultState,
   ui: ui.defaultState
 };
 
@@ -61,6 +64,7 @@ export const actionHandlers = handleThunks({
   ...languages.actionHandlers,
   ...notifications.actionHandlers,
   ...applications.actionHandlers,
+  ...development.actionHandlers,
   ...ui.actionHandlers
 });
 
@@ -79,6 +83,7 @@ export const reducers = createHandleActions({
   ...languages.reducers,
   ...notifications.reducers,
   ...applications.reducers,
+  ...development.reducers,
   ...ui.reducers
 
 }, defaultState, section);