refactor: 💡 hide manage custom scopes button when using keyword (#2865)

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-17195

ui/admin/app/components/form/role/manage-scopes/index.hbs

@@ -77,25 +77,27 @@
     </Hds::Alert>
   {{/if}}
 
-  <Hds::Button
-    @text={{t 'resources.role.scope.actions.manage-custom-scopes.text'}}
-    @color='secondary'
-    @icon={{if @showCheckIcon 'check-circle'}}
-    @route={{if
-      @model.scope.isGlobal
-      'scopes.scope.roles.role.manage-scopes.manage-custom-scopes'
-      'scopes.scope.roles.role.manage-scopes.manage-org-projects'
-    }}
-    @model={{if @model.scope.isOrg @model.scope.id}}
-    data-test-manage-custom-scopes-button
-  />
+  {{#if this.showManageScopesBtn}}
+    <Hds::Button
+      @text={{t 'resources.role.scope.actions.manage-custom-scopes.text'}}
+      @color='secondary'
+      @icon={{if @showCheckIcon 'check-circle'}}
+      @route={{if
+        @model.scope.isGlobal
+        'scopes.scope.roles.role.manage-scopes.manage-custom-scopes'
+        'scopes.scope.roles.role.manage-scopes.manage-org-projects'
+      }}
+      @model={{if @model.scope.isOrg @model.scope.id}}
+      data-test-manage-custom-scopes-button
+    />
 
-  <Hds::Form::HelperText
-    @controlId='for-manage-custom-scopes-button'
-    class='manage-custom-scopes-helper-text'
-  >
-    {{t 'resources.role.scope.actions.manage-custom-scopes.help'}}
-  </Hds::Form::HelperText>
+    <Hds::Form::HelperText
+      @controlId='for-manage-custom-scopes-button'
+      class='manage-custom-scopes-helper-text'
+    >
+      {{t 'resources.role.scope.actions.manage-custom-scopes.help'}}
+    </Hds::Form::HelperText>
+  {{/if}}
 
   <form.actions
     @submitText={{t 'actions.save'}}

ui/admin/app/components/form/role/manage-scopes/index.js

@@ -33,6 +33,20 @@ export default class FormRoleManageScopesIndexComponent extends Component {
     );
   }
 
+  /**
+   * Returns true if global role does not have "descendants" toggled on
+   * or if org role does not have "children" toggled on.
+   * @type {boolean}
+   */
+  get showManageScopesBtn() {
+    return (
+      (this.args.model.scope.isGlobal &&
+        !this.args.model.grant_scope_ids.includes(GRANT_SCOPE_DESCENDANTS)) ||
+      (this.args.model.scope.isOrg &&
+        !this.args.model.grant_scope_ids.includes(GRANT_SCOPE_CHILDREN))
+    );
+  }
+
   // =actions
 
   /**

ui/admin/tests/acceptance/roles/global-scope-test.js

@@ -270,6 +270,20 @@ module('Acceptance | roles | global-scope', function (hooks) {
     assert.dom(selectors.SCOPE_TOGGLE(GRANT_SCOPE_DESCENDANTS)).isVisible();
   });
 
+  test('manage custom scopes button is not visible when "descendants" is toggled on for global level role on manage scopes page', async function (assert) {
+    await visit(urls.role);
+
+    await click(selectors.MANAGE_DROPDOWN_ROLES);
+    await click(selectors.MANAGE_DROPDOWN_ROLES_SCOPES);
+
+    assert.strictEqual(currentURL(), urls.manageScopes);
+    assert.dom(selectors.MANAGE_CUSTOM_SCOPES_BUTTON).isVisible();
+
+    await click(selectors.SCOPE_TOGGLE(GRANT_SCOPE_DESCENDANTS));
+
+    assert.dom(selectors.MANAGE_CUSTOM_SCOPES_BUTTON).doesNotExist();
+  });
+
   test('user can save scope keywords to add on manage scopes page', async function (assert) {
     instances.role.update({ grant_scope_ids: [] });
     await visit(urls.role);

ui/admin/tests/acceptance/roles/org-scope-test.js

@@ -224,6 +224,20 @@ module('Acceptance | roles | org-scope', function (hooks) {
     assert.dom(selectors.SCOPE_TOGGLE(GRANT_SCOPE_DESCENDANTS)).doesNotExist();
   });
 
+  test('manage custom scopes button is not visible when "children" is toggled on for org level role on manage scopes page', async function (assert) {
+    await visit(urls.role);
+
+    await click(selectors.MANAGE_DROPDOWN_ROLES);
+    await click(selectors.MANAGE_DROPDOWN_ROLES_SCOPES);
+
+    assert.strictEqual(currentURL(), urls.manageScopes);
+    assert.dom(selectors.MANAGE_CUSTOM_SCOPES_BUTTON).isVisible();
+
+    await click(selectors.SCOPE_TOGGLE(GRANT_SCOPE_CHILDREN));
+
+    assert.dom(selectors.MANAGE_CUSTOM_SCOPES_BUTTON).doesNotExist();
+  });
+
   test('user can save scope keywords to add on manage scopes page', async function (assert) {
     instances.role.update({ grant_scope_ids: [] });
     await visit(urls.role);

ui/admin/tests/acceptance/roles/selectors.js

@@ -39,6 +39,8 @@ export const SCOPE_CHECKBOX = (type, id) =>
   `tbody [data-test-${type}-scopes-table-row="${id}"] input`;
 export const MANAGE_CUSTOM_SCOPES_BUTTON_ICON =
   '[data-test-manage-custom-scopes-button] [data-test-icon="check-circle"]';
+export const MANAGE_CUSTOM_SCOPES_BUTTON =
+  '[data-test-manage-custom-scopes-button]';
 export const REMOVE_ORG_MODAL = (name) =>
   `[data-test-manage-scopes-remove-${name}-modal]`;
 export const REMOVE_ORG_ONLY_BTN = (name) =>