From 945d456e71a85f5b55b2445f471260f8fbc07793 Mon Sep 17 00:00:00 2001
From: Mark Hopkin <mark.hopkin@elastic.co>
Date: Fri, 12 Aug 2022 10:19:04 +0100
Subject: [PATCH] Disable edit tag "save changes" button if no changes have
 been made (#138500)

---
 .../edition_modal/create_or_edit_modal.tsx    | 16 ++++++---
 .../functional/tests/edit.ts                  | 35 +++++++++++++++++++
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/create_or_edit_modal.tsx b/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/create_or_edit_modal.tsx
index da0338da3dca1..ac4a2ac490b4d 100644
--- a/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/create_or_edit_modal.tsx
+++ b/x-pack/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
index 0ba39bc3a8743..96a91c72c3f3e 100644
--- 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);
+      });
+    });
   });
 }