feat: add Settings Plugin

UI for app settings.

Related to #2913

client/src/plugins/index.js

@@ -20,6 +20,7 @@ import UserJourneyStatistics from './user-journey-statistics';
 import VersionInfo from './version-info';
 import ZeebePlugin from './zeebe-plugin';
 import ConnectorTemplates from './connector-templates';
+import Settings from './settings';
 
 export default [
   CamundaPlugin,
@@ -33,5 +34,6 @@ export default [
   VersionInfo,
   ZeebePlugin,
   UserJourneyStatistics,
-  ConnectorTemplates
+  ConnectorTemplates,
+  Settings
 ];

client/src/plugins/settings/SettingsForm.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import React, { useEffect } from 'react';
+
+import { Field, Form, useFormikContext } from 'formik';
+import { Section, TextInput, CheckBox } from '../../shared/ui';
+
+
+export function SettingsForm(props) {
+
+  const { schema, values } = props;
+
+  const { setFieldValue } = useFormikContext();
+
+  useEffect(() => {
+
+    Object.entries(values).forEach(([ id, value ]) => {
+      console.log('set',
+        id,
+        value
+      );
+      setFieldValue(id, value);
+    });
+
+  }, [ values ]);
+
+  return (<Form>
+
+    {Object.entries(schema).map(([ id, { title, properties } ]) => (
+      <Section key={ id }>
+        <Section.Header>{ title }</Section.Header>
+        <Section.Body>
+          {Object.entries(properties).map(([ key, props ]) => (
+            <SettingsField key={ key } id={ key } { ...props } />
+          ))}
+        </Section.Body>
+      </Section>
+    ))}
+
+    <Section>
+      <Section.Actions>
+        <div className="controls">
+          <button
+            className="btn btn-primary"
+            type="submit"
+
+            // disabled={ form.isSubmitting }
+          >
+            Save
+          </button>
+        </div>
+      </Section.Actions>
+    </Section>
+  </Form>);
+}
+
+function SettingsField(props) {
+
+  const { id, type, label, description } = props;
+
+  if (type === 'text') {
+    return <Field
+      id={ id }
+      name={ id }
+      label={ label }
+      description={ description }
+      component={ TextInput }
+    />;
+  }
+
+  if (type === 'boolean') {
+    return <Field
+      id={ id }
+      name={ id }
+      component={ CheckBox }
+      type="checkbox"
+      label={ label }
+      description={ description }
+    />;
+  }
+
+  return null;
+}

client/src/plugins/settings/SettingsPlugin.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { forEach } from 'min-dash';
+
+import { Formik } from 'formik';
+
+import { Modal } from '../../shared/ui';
+
+import { SettingsForm } from './SettingsForm';
+
+import * as css from './SettingsPlugin.less';
+
+export default function SettingsPlugin(props) {
+
+  const {
+    settings: settingsProvider,
+    subscribe,
+  } = props;
+
+  const [ open, setOpen ] = useState(false);
+  const [ schema, setSchema ] = useState({});
+  const [ values, setValues ] = useState({});
+
+  const loadSettings = () => {
+    setSchema(settingsProvider.getSchema());
+    setValues(settingsProvider.getAll());
+  };
+
+  const handleSave = (values) => {
+    const flattenValues = {};
+
+    forEach(values, (properties, prefix) => {
+      forEach(properties, (value, name) => {
+        flattenValues[`${prefix}.${name}`] = value;
+      });
+    });
+
+    settingsProvider.set(flattenValues);
+  };
+
+  useEffect(() => {
+    subscribe('app.settings-open', () => {
+      setOpen(true);
+    });
+  }, [ ]);
+
+  useEffect(() => {
+    loadSettings();
+  }, [ open ]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Modal onClose={ () => setOpen(false) }>
+      <div className={ css.SettingsPlugin }>
+        <h1>Settings</h1>
+        <Formik
+          initialValues={ { } }
+          onSubmit={ handleSave }
+        >
+          <SettingsForm schema={ schema } values={ values } />
+        </Formik>
+      </div>
+    </Modal>
+  );
+}

client/src/plugins/settings/SettingsPlugin.less

@@ -0,0 +1,15 @@
+:local(.SettingsPlugin) {
+  margin: 20px;
+
+  .form-group p {
+    margin-bottom: 15px !important;
+  }
+
+  .controls {
+    height: 60px;
+    margin-right: 10px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}

client/src/plugins/settings/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+export { default } from './SettingsPlugin';