Show warning after changing storage

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

@@ -1,4 +1,4 @@
-import { Switch, Button, Collapse } from 'antd';
+import { Switch, Button, Collapse, Alert } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useState, useEffect } from 'react';
 import { UpdateArgs } from '../../../types/config-section';
@@ -52,6 +52,7 @@ function checkSaveable(formValues: any, currentValues: any) {
 export default function EditStorage() {
   const [formDataValues, setFormDataValues] = useState(null);
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
+  const [saved, setSaved] = useState<Boolean>(false);
 
   const [shouldDisplayForm, setShouldDisplayForm] = useState(false);
   const serverStatusData = useContext(ServerStatusContext);
@@ -114,6 +115,7 @@ export default function EditStorage() {
         setFieldInConfigState({ fieldName: 's3', value: postValue, path: '' });
         setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+        setSaved(true);
       },
       onError: (message: string) => {
         setSubmitStatus(createInputStatus(STATUS_ERROR, message));
@@ -139,6 +141,14 @@ export default function EditStorage() {
     enabled: shouldDisplayForm,
   });
 
+  const saveWarning = saved ? (<Alert
+    showIcon
+    message="Storage changes"
+    description="Your storage settings will take effect on your next stream.  If you're currently streaming you'll continue to use the storage configuration previously set."
+    type="warning"
+  />
+  ) : null;
+
   const isSaveable = checkSaveable(formDataValues, s3);
 
   return (
@@ -211,6 +221,8 @@ export default function EditStorage() {
         </Collapse>
       </div>
 
+      {saveWarning}
+
       <div className="button-container">
         <Button type="primary" onClick={handleSave} disabled={!isSaveable}>
           Save