rename SAVE to APPLY, show number of updates - #911

interface/src/framework/security/SecuritySettingsForm.tsx

@@ -3,12 +3,13 @@ import { ValidateFieldsError } from 'async-validator';
 
 import { Button } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Cancel';
 
 import * as SecurityApi from '../../api/security';
 import { SecuritySettings } from '../../types';
 import { ButtonRow, FormLoader, MessageBox, SectionContent, ValidatedPasswordField } from '../../components';
 import { SECURITY_SETTINGS_VALIDATOR, validate } from '../../validators';
-import { updateValue, useRest } from '../../utils';
+import { updateValueDirty, useRest } from '../../utils';
 import { AuthenticatedContext } from '../../contexts/authentication';
 
 import { useI18nContext } from '../../i18n/i18n-react';
@@ -17,13 +18,15 @@ const SecuritySettingsForm: FC = () => {
   const { LL } = useI18nContext();
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-  const { loadData, saving, data, setData, saveData, errorMessage } = useRest<SecuritySettings>({
-    read: SecurityApi.readSecuritySettings,
-    update: SecurityApi.updateSecuritySettings
-  });
+  const { loadData, saving, data, setData, origData, dirtyFlags, setDirtyFlags, saveData, errorMessage } =
+    useRest<SecuritySettings>({
+      read: SecurityApi.readSecuritySettings,
+      update: SecurityApi.updateSecuritySettings
+    });
 
   const authenticatedContext = useContext(AuthenticatedContext);
-  const updateFormValue = updateValue(setData);
+
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, setData);
 
   const content = () => {
     if (!data) {
@@ -54,18 +57,30 @@ const SecuritySettingsForm: FC = () => {
           margin="normal"
         />
         <MessageBox level="info" message={LL.SU_TEXT()} mt={1} />
-        <ButtonRow>
-          <Button
-            startIcon={<SaveIcon />}
-            disabled={saving}
-            variant="outlined"
-            color="primary"
-            type="submit"
-            onClick={validateAndSubmit}
-          >
-            {LL.SAVE()}
-          </Button>
-        </ButtonRow>
+        {dirtyFlags && dirtyFlags.length !== 0 && (
+          <ButtonRow>
+            <Button
+              startIcon={<CancelIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={() => loadData()}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<SaveIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={validateAndSubmit}
+            >
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
+            </Button>
+          </ButtonRow>
+        )}
       </>
     );
   };