[feat] Toggle Super_user privileges

app/components/debug-grids.hbs

@@ -85,7 +85,9 @@
               data-test-debug-apply-privileges-button
               class="privileges-toggle"
             >
-              <input type="checkbox" class="privileges-toggle__checkbox" />
+          <input type="checkbox" class="privileges-toggle__checkbox" data-test-toggle-checkbox checked={{this.debugUserRolesData.super_user}}
+          {{on "change" this.toggleSuperUser}}
+          />
               <span class="privileges-toggle__slider"></span>
             </label>
           </div>

app/components/debug-grids.js

@@ -2,11 +2,15 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { isoToLocalDate } from '../utils/common-utils';
+import { action } from '@ember/object';
+import { APPS } from '../constants/urls';
+import { TOAST_OPTIONS } from '../constants/toast-options';
 
 export default class DebugGridsComponent extends Component {
   @service store;
   @service fastboot;
   @service login;
+  @service toast;
 
   DEFAULT_IMAGE = 'assets/images/profile.png';
 
@@ -44,6 +48,53 @@ export default class DebugGridsComponent extends Component {
 
   @tracked debugFeaturesData = {
     featureFlags: ['dev'],
-    isSuperUser: this.login.userData.roles?.super_user ?? false,
+    isSuperUser:
+      this.login.userData?.roles?.super_user ||
+      this.login.userData?.disabled_roles?.includes('super_user'),
   };
+
+  @action
+  async toggleSuperUser({ target }) {
+    // Save the current state of the toggle button
+    const previousState = target.checked;
+
+    try {
+      const response = await fetch(`${APPS.API_BACKEND}/users/self?dev=true`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ disabledRoles: ['super_user'] }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to toggle privilege');
+      }
+
+      // On success
+      this.debugUserRolesData = {
+        ...this.debugUserRolesData,
+        super_user: target.checked,
+      };
+      this.toast.success(
+        'Successfully toggled Super User privilege',
+        'Success!',
+        TOAST_OPTIONS,
+      );
+    } catch (error) {
+      // On failure, revert the toggle button state
+      this.debugUserRolesData = {
+        ...this.debugUserRolesData,
+        super_user: !previousState,
+      };
+      target.checked = this.debugUserRolesData.super_user;
+
+      this.toast.error(
+        "Sorry! couldn't toggle privilege",
+        'Error!',
+        TOAST_OPTIONS,
+      );
+    }
+  }
 }

app/routes/debug.js

@@ -3,10 +3,4 @@ import { inject as service } from '@ember/service';
 
 export default class DebugRoute extends Route {
   @service router;
-
-  beforeModel(transition) {
-    if (transition?.to?.queryParams?.dev !== 'true') {
-      this.router.transitionTo('/page-not-found');
-    }
-  }
 }

tests/integration/components/debug-grids-test.js

@@ -1,9 +1,10 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'website-www/tests/helpers';
-import { render } from '@ember/test-helpers';
+import { render, click, find } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import EmberObject from '@ember/object';
 import { nonSuperUserData, superUserData } from '../../constants/users-data';
+import sinon from 'sinon';
 
 module('Integration | Component | debug-grids', function (hooks) {
   setupRenderingTest(hooks);
@@ -109,4 +110,58 @@ module('Integration | Component | debug-grids', function (hooks) {
     assert.dom('[data-test-debug-grids]').doesNotExist();
     assert.dom('[data-test-unauthenticated]').exists();
   });
+
+  test('it changes the super_role from true to false', async function (assert) {
+    let fetchStub = sinon
+      .stub(window, 'fetch')
+      .resolves(
+        new Response(JSON.stringify({ message: 'done' }), { status: 200 }),
+      );
+    await render(hbs`<DebugGrids />`);
+
+    let checkbox = find('[data-test-toggle-checkbox]');
+    assert.dom('[data-test-debug-role=super_user]').exists();
+    assert.dom('[data-test-debug-role=super_user]').hasText('super_user: true');
+    assert.dom('[data-test-toggle-checkbox]').exists();
+    assert.ok(
+      checkbox.checked,
+      "Initially, the toggle is on as the user object doesn't have anything in disabled_roles",
+    );
+    await click('[data-test-toggle-checkbox]');
+    assert.notOk(
+      checkbox.checked,
+      'After clicking the toggle, the value should change to false',
+    );
+    assert
+      .dom('[data-test-debug-role=super_user]')
+      .hasText('super_user: false');
+
+    fetchStub.restore();
+  });
+
+  test("it doesn't change the super_role from true to false if request fails", async function (assert) {
+    let fetchStub = sinon
+      .stub(window, 'fetch')
+      .resolves(
+        new Response(JSON.stringify({ message: 'error' }), { status: 400 }),
+      );
+    await render(hbs`<DebugGrids />`);
+
+    let checkbox = find('[data-test-toggle-checkbox]');
+    assert.dom('[data-test-debug-role=super_user]').exists();
+    assert.dom('[data-test-debug-role=super_user]').hasText('super_user: true');
+    assert.dom('[data-test-toggle-checkbox]').exists();
+    assert.ok(
+      checkbox.checked,
+      "Initially, the toggle is on as the user object doesn't have anything in disabled_roles",
+    );
+    await click('[data-test-toggle-checkbox]');
+    assert.ok(
+      checkbox.checked,
+      "After clicking the toggle, the value shouldn't change to false",
+    );
+    assert.dom('[data-test-debug-role=super_user]').hasText('super_user: true');
+
+    fetchStub.restore();
+  });
 });

tests/unit/routes/debug-test.js

@@ -14,7 +14,7 @@ module('Unit | Route | debug', function (hooks) {
     await visit('/debug');
     assert.expect(1);
 
-    assert.dom('[data-test-debug]').doesNotExist();
+    assert.dom('[data-test-debug]').exists();
   });
 
   test('visiting /debug under feature flag', async function (assert) {