Reorganize admin components to help bundling

web/components/admin/EditValueArray.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable react/no-array-index-key */
+import React, { FC, useState } from 'react';
+import { Typography, Tag } from 'antd';
+
+import { TextField } from './TextField';
+import { UpdateArgs } from '../../types/config-section';
+import { StatusState } from '../../utils/input-statuses';
+import { FormStatusIndicator } from './FormStatusIndicator';
+
+const { Title } = Typography;
+
+export const TAG_COLOR = '#5a67d8';
+
+export type EditStringArrayProps = {
+  title: string;
+  description?: string;
+  placeholder: string;
+  maxLength?: number;
+  values: string[];
+  submitStatus?: StatusState;
+  continuousStatusMessage?: StatusState;
+  handleDeleteIndex: (index: number) => void;
+  handleCreateString: (arg: string) => void;
+};
+
+export const EditValueArray: FC<EditStringArrayProps> = ({
+  title,
+  description,
+  placeholder,
+  maxLength,
+  values,
+  handleDeleteIndex,
+  handleCreateString,
+  submitStatus,
+  continuousStatusMessage,
+}) => {
+  const [newStringInput, setNewStringInput] = useState<string>('');
+
+  const handleInputChange = ({ value }: UpdateArgs) => {
+    setNewStringInput(value);
+  };
+
+  const handleSubmitNewString = () => {
+    const newString = newStringInput.trim();
+    handleCreateString(newString);
+    setNewStringInput('');
+  };
+
+  return (
+    <div className="edit-string-array-container">
+      <Title level={3} className="section-title">
+        {title}
+      </Title>
+      <p className="description">{description}</p>
+
+      <div className="edit-current-strings">
+        {values?.map((tag, index) => {
+          const handleClose = () => {
+            handleDeleteIndex(index);
+          };
+          return (
+            <Tag closable onClose={handleClose} color={TAG_COLOR} key={`tag-${tag}-${index}`}>
+              {tag}
+            </Tag>
+          );
+        })}
+      </div>
+      {continuousStatusMessage && (
+        <div className="continuous-status-section">
+          <FormStatusIndicator status={continuousStatusMessage} />
+        </div>
+      )}
+      <div className="add-new-string-section">
+        <TextField
+          fieldName="string-input"
+          value={newStringInput}
+          onChange={handleInputChange}
+          onPressEnter={handleSubmitNewString}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          status={submitStatus}
+        />
+      </div>
+    </div>
+  );
+};
+
+EditValueArray.defaultProps = {
+  maxLength: 50,
+  description: null,
+  submitStatus: null,
+  continuousStatusMessage: null,
+};