Disable edit tag "save changes" button if no changes have been made (e…

…lastic#138500)
Mpdreamz · Sep 6, 2022 · dc19874 · dc19874
1 parent 062624b
commit dc19874
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/...ck/plugins/saved_objects_tagging/public/components/edition_modal/create_or_edit_modal.tsx b/...ck/plugins/saved_objects_tagging/public/components/edition_modal/create_or_edit_modal.tsx
@@ -58,10 +58,16 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
   const ifMounted = useIfMounted();
   const [submitting, setSubmitting] = useState<boolean>(false);
 
-  // we don't want this value to change when the user edit the name.
+  // we don't want this value to change when the user edits the tag
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const initialName = useMemo(() => tag.name, []);
-
+  const initialTag = useMemo(() => tag, []);
+  const tagHasBeenModified = useMemo(
+    () =>
+      tag.name !== initialTag.name ||
+      tag.color !== initialTag.color ||
+      tag.description !== initialTag.description,
+    [initialTag, tag]
+  );
   const setName = useMemo(() => setField('name'), [setField]);
   const setColor = useMemo(() => setField('color'), [setField]);
   const setDescription = useMemo(() => setField('description'), [setField]);
@@ -94,7 +100,7 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
               id="xpack.savedObjectsTagging.management.editModal.title"
               defaultMessage="Edit '{name}' tag"
               values={{
-                name: initialName,
+                name: initialTag.name,
               }}
             />
           ) : (
@@ -232,7 +238,7 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
                   fill
                   data-test-subj="createModalConfirmButton"
                   onClick={onFormSubmit}
-                  isDisabled={submitting}
+                  isDisabled={submitting || (isEdit && !tagHasBeenModified)}
                 >
                   {isEdit ? (
                     <FormattedMessage

diff --git a/x-pack/test/saved_object_tagging/functional/tests/edit.ts b/x-pack/test/saved_object_tagging/functional/tests/edit.ts
@@ -142,5 +142,40 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       expect(uneditedTag).not.to.be(undefined);
       expect(newTag).to.be(undefined);
     });
+
+    describe('Disabling save button', () => {
+      const tag3Unmodified = {
+        name: 'tag-3',
+        description: 'Last but not least',
+        color: '#000000',
+      };
+      it('should disable save button if no property is changed', async () => {
+        await tagModal.openEdit('tag-3');
+
+        await tagModal.fillForm(tag3Unmodified, { submit: false });
+        expect(await tagModal.isConfirmDisabled()).to.be(true);
+      });
+      it('should enable save button if name is changed', async () => {
+        await tagModal.openEdit('tag-3');
+
+        await tagModal.fillForm({ ...tag3Unmodified, name: 'changed name' }, { submit: false });
+        expect(await tagModal.isConfirmDisabled()).to.be(false);
+      });
+      it('should enable save button if description is changed', async () => {
+        await tagModal.openEdit('tag-3');
+
+        await tagModal.fillForm(
+          { ...tag3Unmodified, description: 'changed description' },
+          { submit: false }
+        );
+        expect(await tagModal.isConfirmDisabled()).to.be(false);
+      });
+      it('should enable save button if color is changed', async () => {
+        await tagModal.openEdit('tag-3');
+
+        await tagModal.fillForm({ ...tag3Unmodified, color: '#FF0000' }, { submit: false });
+        expect(await tagModal.isConfirmDisabled()).to.be(false);
+      });
+    });
   });
 }