Loosen criteria for disabling save button for configured addons (Cent…

…erForOpenScience#2330)

-   Ticket: []
-   Feature flag: n/a

## Purpose
- Loosen criteria for save button being disabled when creating and configuring a configured addon

## Summary of Changes
- Allow any non-empty name for display name
  - Previous logic included a condition that the save button would be disabled if the display name had not been changed
- Allow rootFolder to be empty

lib/osf-components/addon/components/addons-service/configured-addon-edit/component.ts

@@ -22,17 +22,11 @@ export default class ConfiguredAddonEdit extends Component<Args> {
     };
 
     get invalidDisplayName() {
-        return this.displayName?.trim().length === 0;
-    }
-
-    get folderChanged() {
-        return this.selectedFolder !== this.args.configuredStorageAddon.rootFolder;
+        return !this.displayName || this.displayName?.trim().length === 0;
     }
 
     get disableSave() {
-        const folderValid = this.folderChanged;
-        const nameValid = this.displayName !== this.args.configuredStorageAddon.displayName && !this.invalidDisplayName;
-        return !(folderValid || nameValid) || this.args.onSave.isRunning;
+        return this.invalidDisplayName || this.args.onSave.isRunning;
     }
 
     get onSaveArgs() {

tests/acceptance/guid-node/addons-test.ts

@@ -193,13 +193,15 @@ module('Acceptance | guid-node/addons', hooks => {
         assert.dom('[data-test-display-name-input]')
             .hasValue(s3AccountsDisplayNamesAndRootFolders[0].displayName, 'Name input has correct value');
         assert.dom('[data-test-folder-path-option]').exists({ count: 1 }, 'Folder path shown');
-        assert.dom('[data-test-root-folder-save]').isDisabled('Save button is disabled');
+        assert.dom('[data-test-root-folder-save]').isEnabled('Save button is enabled when name is present');
         assert.dom('[data-test-root-folder-cancel]').exists('Cancel button is present');
         // Edit first account display name
+        await fillIn('[data-test-display-name-input]', '');
+        assert.dom('[data-test-root-folder-save]').isDisabled('Save button is disabled when name is empty');
         await fillIn('[data-test-display-name-input]', 'New S3 Account Display Name');
-        assert.dom('[data-test-root-folder-save]').isNotDisabled('Save button is enabled after displayName change');
+        assert.dom('[data-test-root-folder-save]').isEnabled('Save button is enabled with displayName present');
         await fillIn('[data-test-display-name-input]', s3AccountsDisplayNamesAndRootFolders[0].displayName);
-        assert.dom('[data-test-root-folder-save]').isDisabled('Save button is disabled after displayName reset');
+        assert.dom('[data-test-root-folder-save]').isEnabled('Save button is enabled with original displayName');
         // Edit first account root folder
         await click('[data-test-folder-link]:first-child');
         assert.dom('[data-test-folder-path-option]').exists({ count: 2 }, '2 folders in path');
@@ -291,7 +293,8 @@ module('Acceptance | guid-node/addons', hooks => {
         await click('[data-test-addon-connect-account-button]');
         // Configure page
         assert.dom('[data-test-display-name-input]').exists('Name input is present');
-        assert.dom('[data-test-root-folder-save]').isDisabled('Save button is disabled');
+        assert.dom('[data-test-display-name-input]').hasNoText('Name input is empty');
+        assert.dom('[data-test-root-folder-save]').isDisabled('Save button disabled when no display name is present');
         await percySnapshot('Acceptance | guid-node/addons | Adding new configured addons | configure page');
         await fillIn('[data-test-display-name-input]', 'New S3 Account Display Name');
         await click('[data-test-root-folder-option]:first-child');

tests/integration/components/addons-service/configured-addon-edit/component-test.ts

@@ -60,18 +60,16 @@ module('Integration | Component | addons-service | configured-addon-edit', funct
         assert.dom('[data-test-folder-path-option]').exists({ count: 1 }, 'Has root folder path option');
         assert.dom('[data-test-folder-link]').exists({ count: 5 }, 'Root folder has 5 folders');
         assert.dom('[data-test-root-folder-option]').exists({ count: 5 }, 'Checkbox available for each folder option');
-        assert.dom('[data-test-root-folder-save]').isDisabled('Save button is disabled');
+        assert.dom('[data-test-root-folder-save]').isEnabled('Save button is enabled');
 
         // updating and reseting the display name
         assert.dom('[data-test-display-name-error]').doesNotExist('No error message initially');
         await fillIn('[data-test-display-name-input]', '');
         assert.dom('[data-test-root-folder-save]').isDisabled('Save button is disabled');
         assert.dom('[data-test-display-name-error]').exists('Error message is shown when display name is empty');
-        await fillIn('[data-test-display-name-input]', 'My configured addon 2');
-        assert.dom('[data-test-root-folder-save]').isEnabled('Save button is enabled');
-        assert.dom('[data-test-display-name-error]').doesNotExist('No error message after display name is set');
         await fillIn('[data-test-display-name-input]', 'My configured addon');
-        assert.dom('[data-test-root-folder-save]').isDisabled('Save is disabled if display name is same as before');
+        assert.dom('[data-test-root-folder-save]').isEnabled('Save button is enabled after display name is set');
+        assert.dom('[data-test-display-name-error]').doesNotExist('No error message after display name is set');
 
         // Navigate into a folder
         const folderLinks = this.element.querySelectorAll('[data-test-folder-link]');