chore: use monorepo organization

packages/admin-ui/src/pages/Services/FormRenderer.jsx

@@ -0,0 +1,86 @@
+import classnames from 'classnames'
+import { Formik, Form, FastField } from 'formik'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+import ErrorMessage from 'src/components/ErrorMessage'
+
+import { Button } from 'src/components/buttons'
+import { SecretInput } from 'src/components/inputs/formik'
+
+const FormRenderer = ({
+  validationSchema,
+  elements,
+  value,
+  save,
+  buttonLabel = 'Save changes',
+  buttonClass,
+  xs = 12
+}) => {
+  const initialValues = R.compose(
+    R.mergeAll,
+    R.map(({ code }) => ({ [code]: (value && value[code]) ?? '' }))
+  )(elements)
+
+  const values = R.merge(initialValues, value)
+
+  const [saveError, setSaveError] = useState([])
+
+  const saveNonEmptySecret = it => {
+    const emptySecretFields = R.compose(
+      R.map(R.prop('code')),
+      R.filter(
+        elem =>
+          R.prop('component', elem) === SecretInput &&
+          R.isEmpty(it[R.prop('code', elem)])
+      )
+    )(elements)
+    return save(R.omit(emptySecretFields, it)).catch(s => {
+      setSaveError({ save: 'Failed to save changes' })
+    })
+  }
+
+  return (
+    <Formik
+      validateOnBlur={false}
+      validateOnChange={false}
+      enableReinitialize
+      initialValues={values}
+      validationSchema={validationSchema}
+      onSubmit={saveNonEmptySecret}>
+      {({ errors }) => (
+        <Form className="flex flex-col flex-1">
+          <div className="flex flex-col gap-3 mb-6 mt-3">
+            {elements.map(
+              ({ component, code, display, settings, inputProps }) => (
+                <div key={code}>
+                  <FastField
+                    component={component}
+                    {...inputProps}
+                    name={code}
+                    label={display}
+                    settings={settings}
+                    fullWidth={true}
+                  />
+                </div>
+              )
+            )}
+          </div>
+          <div className="flex flex-row mt-auto mb-8">
+            {!R.isEmpty(R.mergeRight(errors, saveError)) && (
+              <ErrorMessage>
+                {R.head(R.values(R.mergeRight(errors, saveError)))}
+              </ErrorMessage>
+            )}
+            <Button
+              className={classnames('mt-auto ml-auto', buttonClass)}
+              type="submit">
+              {buttonLabel}
+            </Button>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+
+export default FormRenderer