Restrict approve and reject buttons on the Task Request detail page to super_user only (#896)

* Restrict approve and reject buttons on the Task Request detail page to super users only

* fixes naming convention, button render logic

* fix: reject button should not be part of the dom if condition not met

* changed the superUser data, make the task-request/script.js type module

* added tests how buttons should render for non-super user

* Update task-requestDetails.test.js

removed unused variable

* using data-testid for the tests

* importing the superuser data

* removing reject button from dom after successful task update

* put the changes behind the feature flag

---------

Co-authored-by: Achintya Chatterjee <[email protected]>

Author: AnujChhikara

__tests__/task-requests/task-requestDetails.test.js

@@ -3,6 +3,67 @@ const {
   urlMappings,
   defaultMockResponseHeaders,
 } = require('../../mock-data/taskRequests');
+const { user } = require('../../mock-data/users/index.js');
+
+describe('Request container for non-super users', () => {
+  let browser;
+  let page;
+  jest.setTimeout(60000);
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      ignoreHTTPSErrors: true,
+      args: ['--incognito', '--disable-web-security'],
+      devtools: false,
+    });
+    page = await browser.newPage();
+    await page.setRequestInterception(true);
+    page.on('request', (interceptedRequest) => {
+      const url = interceptedRequest.url();
+      if (url == 'https://staging-api.realdevsquad.com/users/self') {
+        interceptedRequest.respond({
+          ...defaultMockResponseHeaders,
+          body: JSON.stringify(user),
+        });
+      } else if (urlMappings.hasOwnProperty(url)) {
+        interceptedRequest.respond({
+          ...defaultMockResponseHeaders,
+          body: JSON.stringify(urlMappings[url]),
+        });
+      } else {
+        interceptedRequest.continue();
+      }
+    });
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5',
+    );
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('Approve and Reject buttons should not render for non-super users', async function () {
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&&dev=true',
+    );
+    const approveButton = await page.$('[data-testid="task-approve-button"]');
+    const rejectButton = await page.$('[data-testid="task-reject-button"]');
+    expect(approveButton).toBeNull();
+    expect(rejectButton).toBeNull();
+  });
+
+  it('Should render task status for non-super users', async function () {
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&&dev=true',
+    );
+    const taskRequestStatus = await page.$(
+      '[data-testid="requestors-task-status"]',
+    );
+    expect(taskRequestStatus).toBeTruthy();
+  });
+});
 
 describe('Task request details page', () => {
   let browser;
@@ -89,9 +150,12 @@ describe('Task request details page', () => {
     );
   });
 
-  it('Should contain Approve and Reject buttons', async function () {
-    const approveButton = await page.$('.requestors__conatainer__list__button');
-    const rejectButton = await page.$('.request-details__reject__button');
+  it('Should render Approve and Reject buttons for super users', async function () {
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&&dev=true',
+    );
+    const approveButton = await page.$('[data-testid="task-approve-button"]');
+    const rejectButton = await page.$('[data-testid="task-reject-button"]');
     expect(approveButton).toBeTruthy();
     expect(rejectButton).toBeTruthy();
   });
@@ -180,9 +244,12 @@ describe('Task request details page with markdown support in description', () =>
     expect(descriptionHtmlValue).toContain('<h3 id="heading">Heading</h3>');
   });
 
-  it('Should contain Approve and Reject buttons', async function () {
-    const approveButton = await page.$('.requestors__conatainer__list__button');
-    const rejectButton = await page.$('.request-details__reject__button');
+  it('Should render Approve and Reject buttons for super users', async function () {
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&&dev=true',
+    );
+    const approveButton = await page.$('[data-testid="task-approve-button"]');
+    const rejectButton = await page.$('[data-testid="task-reject-button"]');
     expect(approveButton).toBeTruthy();
     expect(rejectButton).toBeTruthy();
   });

mock-data/taskRequests/index.js

@@ -1,3 +1,5 @@
+const { superUserDetails } = require('../users/mockdata.js');
+
 const fetchedTaskRequests = [
   {
     id: '123CCXSDF123',
@@ -260,7 +262,6 @@ const githubIssue = {
   performed_via_github_app: null,
   state_reason: 'completed',
 };
-
 const individualTaskDetail = {
   message: 'task returned successfully',
   taskData: {
@@ -306,7 +307,6 @@ const userInformationTaskCreation = {
     },
   },
 };
-
 const userInformation = {
   message: 'User returned successfully!',
   user: {
@@ -351,6 +351,7 @@ const defaultMockResponseHeaders = {
 };
 
 const urlMappings = {
+  'https://staging-api.realdevsquad.com/users/self': superUserDetails.user,
   'https://api.realdevsquad.com/taskRequests/dM5wwD9QsiTzi7eG7Oq5':
     individualTaskReqDetail,
   'https://api.realdevsquad.com/taskRequests/dM5wwD9QsiTzi7eG7Oq6':

task-requests/details/index.html

@@ -24,13 +24,13 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script src="/task-requests/details/script.js" defer></script>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"
       integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
+    <script type="module" src="/task-requests/details/script.js" defer></script>
   </head>
   <body>
     <div class="header">
@@ -85,11 +85,6 @@ <h4 class="requestors__container__title">Requestors</h4>
             </ul>
           </div>
         </div>
-        <div class="reject__container">
-          <button id="reject-button" class="request-details__reject__button">
-            Reject
-          </button>
-        </div>
       </div>
     </div>
     <div id="toast_task_details" class="hidden">