rename status file for clarity; temp style fix for streamkey actions

web/pages/components/config/edit-server-details.tsx

@@ -64,23 +64,27 @@ export default function EditInstanceDetails() {
 
   return (
     <div className="edit-public-details-container">
-      <TextFieldWithSubmit
-        fieldName="streamKey"
-        {...TEXTFIELD_PROPS_STREAM_KEY}
-        value={formDataValues.streamKey}
-        initialValue={streamKey}
-        type={TEXTFIELD_TYPE_PASSWORD}
-        onChange={handleFieldChange}
-      />
-      <div>
-        <span style={{ fontSize: '0.75em', color: '#ff7777', marginRight: '0.5em' }}>
+      <div className="field-container field-streamkey-container">
+        <div className="left-side">
+          <TextFieldWithSubmit
+            fieldName="streamKey"
+            {...TEXTFIELD_PROPS_STREAM_KEY}
+            value={formDataValues.streamKey}
+            initialValue={streamKey}
+            type={TEXTFIELD_TYPE_PASSWORD}
+            onChange={handleFieldChange}
+          />
+          <div className="streamkey-actions">
+            <Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
+              <Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
+            </Tooltip>
+            <Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
+          </div>
+        </div>
+        <div className="streamkey-notice">
           Save this key somewhere safe, you will need it to stream or login to the admin
           dashboard!
-        </span>
-        <Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
-          <Button type="primary" icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
-        </Tooltip>
-        <Button type="primary" icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
+        </div>
       </div>
       <TextFieldWithSubmit
         fieldName="ffmpegPath"

web/pages/components/config/edit-social-links.tsx

@@ -16,7 +16,7 @@ import { SocialHandle, UpdateArgs } from '../../../types/config-section';
 import { isValidUrl } from '../../../utils/urls';
 import TextField from './form-textfield';
 import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../utils/input-statuses';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 const { Title } = Typography;
 
@@ -229,7 +229,7 @@ export default function EditSocialLinks() {
       <Title level={2}>Social Links</Title>
       <p>Add all your social media handles and links to your other profiles here.</p>
 
-      <InputStatusInfo status={submitStatus} />
+      <FormStatusIndicator status={submitStatus} />
 
       <Table
         className="dataTable"
@@ -271,7 +271,7 @@ export default function EditSocialLinks() {
           value={modalDataState.url}
           onChange={handleUrlChange}
         />
-        <InputStatusInfo status={submitStatus} />
+        <FormStatusIndicator status={submitStatus} />
       </Modal>
       <br />
       <Button

web/pages/components/config/edit-storage.tsx

@@ -17,7 +17,7 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import TextField from './form-textfield';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 const { Panel } = Collapse;
 
@@ -211,7 +211,7 @@ export default function EditStorage() {
         <Button type="primary" onClick={handleSave} disabled={!isSaveable}>
           Save
         </Button>
-        <InputStatusInfo status={submitStatus} />
+        <FormStatusIndicator status={submitStatus} />
       </div>
     </div>
   );

web/pages/components/config/form-status-indicator.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 
 import { StatusState } from '../../../utils/input-statuses';
 
-interface InputStatusInfoProps {
+interface FormStatusIndicatorProps {
   status: StatusState;
 }
-export default function InputStatusInfo({ status }: InputStatusInfoProps) {
+export default function FormStatusIndicator({ status }: FormStatusIndicatorProps) {
   const { type, icon, message } = status || {};
   const classes = classNames({
     'status-container': true,

web/pages/components/config/form-textfield-with-submit.tsx

@@ -13,7 +13,7 @@ import {
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
 import { UpdateArgs } from '../../../types/config-section';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -124,7 +124,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
         <p className="label-spacer" />
         <div className="lower-content">
           <div className="field-tip">{tip}</div>
-          <InputStatusInfo status={status || submitStatus} />
+          <FormStatusIndicator status={status || submitStatus} />
           <div className="update-button-container">
             <Button
               type="primary"

web/pages/components/config/form-textfield.tsx

@@ -4,7 +4,7 @@ import { Input, InputNumber } from 'antd';
 import { FieldUpdaterFunc } from '../../../types/config-section';
 // import InfoTip from '../info-tip';
 import { StatusState } from '../../../utils/input-statuses';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 export const TEXTFIELD_TYPE_TEXT = 'default';
 export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -143,7 +143,7 @@ export default function TextField(props: TextFieldProps) {
             value={value}
           />
         </div>
-        <InputStatusInfo status={status} />
+        <FormStatusIndicator status={status} />
         <p className="field-tip">
           {tip}
           {/* <InfoTip tip={tip} /> */}

web/pages/components/config/form-toggleswitch-with-submit.tsx

@@ -7,7 +7,7 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../../utils/input-statuses';
-import InputStatusInfo from './input-status-info';
+import FormStatusIndicator from './form-status-indicator';
 
 import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 
@@ -76,7 +76,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
           {label} <InfoTip tip={tip} />
         </span>
       </div>
-      <InputStatusInfo status={submitStatus} />
+      <FormStatusIndicator status={submitStatus} />
     </div>
   );
 }

web/pages/config-page-content.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Typography, Button } from 'antd';
-import { FormItemProps } from 'antd/lib/form';
 import dynamic from 'next/dynamic';
 import MarkdownIt from 'markdown-it';
 
@@ -8,11 +7,17 @@ import { ServerStatusContext } from '../utils/server-status-context';
 import {
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
-  SUCCESS_STATES,
   API_CUSTOM_CONTENT,
 } from './components/config/constants';
-
+import {
+  createInputStatus,
+  StatusState,
+  STATUS_ERROR,
+  STATUS_PROCESSING,
+  STATUS_SUCCESS,
+} from '../utils/input-statuses';
 import 'react-markdown-editor-lite/lib/index.css';
+import FormStatusIndicator from './components/config/form-status-indicator';
 
 const { Title } = Typography;
 
@@ -24,8 +29,7 @@ const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
 
 export default function PageContentEditor() {
   const [content, setContent] = useState('');
-  const [submitStatus, setSubmitStatus] = useState<FormItemProps['validateStatus']>('');
-  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
+  const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [hasChanged, setHasChanged] = useState(false);
 
   const serverStatusData = useContext(ServerStatusContext);
@@ -47,7 +51,7 @@ export default function PageContentEditor() {
 
   // Clear out any validation states and messaging
   const resetStates = () => {
-    setSubmitStatus('');
+    setSubmitStatus(null);
     setHasChanged(false);
     clearTimeout(resetTimer);
     resetTimer = null;
@@ -55,21 +59,20 @@ export default function PageContentEditor() {
 
   // posts all the tags at once as an array obj
   async function handleSave() {
-    setSubmitStatus('validating');
+    setSubmitStatus(createInputStatus(STATUS_PROCESSING));
     await postConfigUpdateToAPI({
       apiPath: API_CUSTOM_CONTENT,
       data: { value: content },
-      onSuccess: () => {
+      onSuccess: (message: string) => {
         setFieldInConfigState({
           fieldName: 'extraPageContent',
           value: content,
           path: 'instanceDetails',
         });
-        setSubmitStatus('success');
+        setSubmitStatus(createInputStatus(STATUS_SUCCESS, message));
       },
       onError: (message: string) => {
-        setSubmitStatus('error');
-        setSubmitStatusMessage(`There was an error: ${message}`);
+        setSubmitStatus(createInputStatus(STATUS_ERROR, message));
       },
     });
     resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@@ -79,9 +82,6 @@ export default function PageContentEditor() {
     setContent(initialContent);
   }, [instanceDetails]);
 
-  const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
-    SUCCESS_STATES[submitStatus] || {};
-
   return (
     <div className="config-page-content-form">
       <Title level={2}>Edit custom content</Title>
@@ -107,9 +107,8 @@ export default function PageContentEditor() {
             Save
           </Button>
         ) : null}
-        <div className={`status-message ${submitStatus || ''}`}>
-          {newStatusIcon} {newStatusMessage} {submitStatusMessage}
-        </div>
+        <FormStatusIndicator status={submitStatus} />
+
       </div>
     </div>
   );

web/styles/config.scss

@@ -350,4 +350,33 @@
   &:nth-child(even) {
     background-color: rgba(0,0,0,.25);
   }
+}
+
+
+
+.field-streamkey-container {
+  .left-side {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;  
+  }
+  .textfield-with-submit-container {
+    margin-bottom: 0;
+    .textfield-container {
+     max-width: 400px;
+    }
+  }
+
+  .streamkey-actions {
+    max-width: 90px;
+    button {
+      margin: .25em;
+    }
+  }
+  .streamkey-notice {
+    font-size: 0.75em;
+    color: var(--ant-error);
+    margin-left: 12em;
+    margin-bottom: 1em;
+  }
 }