From 874ae980e6cb6af2d1e65e74ceef8854fb660f8b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:45:32 -0500
Subject: [PATCH] SoapboxConfig: refactor Textarea

---
 .../components/ui/form-group/form-group.tsx   | 22 ++++++++++---------
 .../components/ui/textarea/textarea.tsx       |  7 ++++--
 app/soapbox/features/soapbox_config/index.tsx | 12 +++++-----
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index e70bc5836..e90448e8c 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 interface IFormGroup {
   /** Input label message. */
-  labelText: React.ReactNode,
+  labelText?: React.ReactNode,
   /** Input hint message. */
   hintText?: React.ReactNode,
   /** Input errors. */
@@ -26,13 +26,15 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
 
   return (
     <div>
-      <label
-        htmlFor={formFieldId}
-        data-testid='form-group-label'
-        className='block text-sm font-medium text-gray-700 dark:text-gray-400'
-      >
-        {labelText}
-      </label>
+      {labelText && (
+        <label
+          htmlFor={formFieldId}
+          data-testid='form-group-label'
+          className='block text-sm font-medium text-gray-700 dark:text-gray-400'
+        >
+          {labelText}
+        </label>
+      )}
 
       <div className='mt-1 dark:text-white'>
         {firstChild}
@@ -47,11 +49,11 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           </p>
         )}
 
-        {hintText ? (
+        {hintText && (
           <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
             {hintText}
           </p>
-        ) : null}
+        )}
       </div>
     </div>
   );
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index fbd8ba86f..b181fc848 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
@@ -16,11 +16,13 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
   value?: string,
   /** Whether the device should autocomplete text in this textarea. */
   autoComplete?: string,
+  /** Whether to display the textarea in red. */
+  hasError?: boolean,
 }
 
 /** Textarea with custom styles. */
 const Textarea = React.forwardRef(
-  ({ isCodeEditor = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
+  ({ isCodeEditor = false, hasError = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
     return (
       <textarea
         {...props}
@@ -29,6 +31,7 @@ const Textarea = React.forwardRef(
           'dark:bg-slate-800 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md':
               true,
           'font-mono': isCodeEditor,
+          'text-red-600 border-red-600': hasError,
         })}
       />
     );
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 2ccdf144a..f9b04f78e 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -5,12 +5,11 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
-import { Column, Form, FormActions, FormGroup, Input, Button } from 'soapbox/components/ui';
+import { Column, Form, FormActions, FormGroup, Input, Textarea, Button } from 'soapbox/components/ui';
 import HStack from 'soapbox/components/ui/hstack/hstack';
 import Stack from 'soapbox/components/ui/stack/stack';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import {
-  SimpleTextarea,
   FileChooserLogo,
   Checkbox,
 } from 'soapbox/features/forms';
@@ -320,14 +319,15 @@ const SoapboxConfig: React.FC = () => {
             expanded={jsonEditorExpanded}
             onToggle={toggleJSONEditor}
           >
-            <div className={jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
-              <SimpleTextarea
-                hint={intl.formatMessage(messages.rawJSONHint)}
+            <FormGroup hintText={intl.formatMessage(messages.rawJSONHint)}>
+              <Textarea
                 value={rawJSON}
                 onChange={handleEditJSON}
+                hasError={!jsonValid}
+                isCodeEditor
                 rows={12}
               />
-            </div>
+            </FormGroup>
           </Accordion>
         </fieldset>
         <FormActions>