Disable Gitconfig Save button if config has not changed (#1426)

Add a check that compared stored and new gitconfig data on input. If the entered gitconfig data matches with stored data, disable the Save button.

Author: vinokurig

packages/dashboard-frontend/src/pages/UserPreferences/GitConfig/Form/__tests__/index.spec.tsx

@@ -96,6 +96,33 @@ describe('GitConfigForm', () => {
       expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled();
       expect(screen.getByRole('button', { name: 'Reload' })).toBeEnabled();
     });
+
+    test('with gitconfig not changed', () => {
+      renderComponent(
+        { gitConfig: { user: { name: 'name', email: 'test@che' } } },
+        { isValid: true, nextGitConfig: { user: { name: 'name', email: 'test@che' } } },
+      );
+
+      expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+    });
+
+    test('with gitconfig name changed', () => {
+      renderComponent(
+        { gitConfig: { user: { name: 'name', email: 'test@che' } } },
+        { isValid: true, nextGitConfig: { user: { name: 'new name', email: 'test@che' } } },
+      );
+
+      expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled();
+    });
+
+    test('with gitconfig email changed', () => {
+      renderComponent(
+        { gitConfig: { user: { name: 'name', email: 'test@che' } } },
+        { isValid: true, nextGitConfig: { user: { name: 'name', email: 'new-test@che' } } },
+      );
+
+      expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled();
+    });
   });
 
   test('handle the Reload button click', async () => {

packages/dashboard-frontend/src/pages/UserPreferences/GitConfig/Form/index.tsx

@@ -69,12 +69,23 @@ export class GitConfigForm extends React.PureComponent<Props, State> {
     });
   }
 
+  private isGitConfigEqual(config1: GitConfig, config2: GitConfig): boolean {
+    if (!config1 || !config2 || !config1.user || !config2.user) {
+      return false;
+    }
+    return config1.user.email === config2.user.email && config1.user.name === config2.user.name;
+  }
+
   public render(): React.ReactElement {
     const { gitConfig, isLoading } = this.props;
     const { isValid, nextGitConfig } = this.state;
 
     const config = { ...gitConfig, ...(nextGitConfig || {}) };
-    const isSaveDisabled = isLoading || isValid === false || nextGitConfig === undefined;
+    const isSaveDisabled =
+      isLoading ||
+      !isValid ||
+      nextGitConfig === undefined ||
+      this.isGitConfigEqual(gitConfig, nextGitConfig);
 
     return (
       <PageSection variant={PageSectionVariants.light}>