From 4c959ab2972b1d2b90da1bd189aac21aa082c600 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Wed, 4 Jun 2025 09:41:02 -0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20hide=20manage=20cust?=
 =?UTF-8?q?om=20scopes=20button=20when=20using=20keyword=20(#2865)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-17195
---
 .../form/role/manage-scopes/index.hbs         | 38 ++++++++++---------
 .../form/role/manage-scopes/index.js          | 14 +++++++
 .../acceptance/roles/global-scope-test.js     | 14 +++++++
 .../tests/acceptance/roles/org-scope-test.js  | 14 +++++++
 ui/admin/tests/acceptance/roles/selectors.js  |  2 +
 5 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/ui/admin/app/components/form/role/manage-scopes/index.hbs b/ui/admin/app/components/form/role/manage-scopes/index.hbs
index 2afa33638..09e666d87 100644
--- a/ui/admin/app/components/form/role/manage-scopes/index.hbs
+++ b/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'}}
diff --git a/ui/admin/app/components/form/role/manage-scopes/index.js b/ui/admin/app/components/form/role/manage-scopes/index.js
index 7b9024953..a9dd3c8f4 100644
--- a/ui/admin/app/components/form/role/manage-scopes/index.js
+++ b/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
 
   /**
diff --git a/ui/admin/tests/acceptance/roles/global-scope-test.js b/ui/admin/tests/acceptance/roles/global-scope-test.js
index 827fa779f..0eb4b2dfb 100644
--- a/ui/admin/tests/acceptance/roles/global-scope-test.js
+++ b/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);
diff --git a/ui/admin/tests/acceptance/roles/org-scope-test.js b/ui/admin/tests/acceptance/roles/org-scope-test.js
index 5684bc375..99710f1eb 100644
--- a/ui/admin/tests/acceptance/roles/org-scope-test.js
+++ b/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);
diff --git a/ui/admin/tests/acceptance/roles/selectors.js b/ui/admin/tests/acceptance/roles/selectors.js
index 4f568adec..bec751a74 100644
--- a/ui/admin/tests/acceptance/roles/selectors.js
+++ b/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) =>