Restrict approve and reject buttons on the Task Request detail page to super_user only

mock-data/taskRequests/index.js

@@ -260,7 +260,6 @@ const githubIssue = {
   performed_via_github_app: null,
   state_reason: 'completed',
 };
-
 const individualTaskDetail = {
   message: 'task returned successfully',
   taskData: {
@@ -306,7 +305,6 @@ const userInformationTaskCreation = {
     },
   },
 };
-
 const userInformation = {
   message: 'User returned successfully!',
   user: {
@@ -339,7 +337,29 @@ const userInformation = {
     created_at: 1698684157040,
   },
 };
-
+const superUserData = {
+  id: 'V4rqL1aDecNGoa1IxiCu',
+  incompleteUserDetails: false,
+  discordId: '12345',
+  roles: {
+    archived: false,
+    super_user: true,
+  },
+  linkedin_id: 'kotesh',
+  last_name: 'Mudila',
+  yoe: '5',
+  github_display_name: 'kotesh Mudila',
+  company_name: 'Juniper networks ',
+  github_id: 'kotesh-arya',
+  designation: 'Front end engineer',
+  twitter_id: 'Codesh_',
+  first_name: 'Kotesh',
+  username: 'kotesh',
+  picture: {
+    publicId: 'profile/w2XR9Gkid6Kg5xCJ5Elm/rzh3cwff7hh7srvg63mb',
+    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692990078/profile/w2XR9Gkid6Kg5xCJ5Elm/rzh3cwff7hh7srvg63mb.png',
+  },
+};
 const defaultMockResponseHeaders = {
   status: 200,
   contentType: 'application/json',
@@ -351,6 +371,7 @@ const defaultMockResponseHeaders = {
 };
 
 const urlMappings = {
+  'https://staging-api.realdevsquad.com/users/self': superUserData,
   'https://api.realdevsquad.com/taskRequests/dM5wwD9QsiTzi7eG7Oq5':
     individualTaskReqDetail,
   'https://api.realdevsquad.com/taskRequests/dM5wwD9QsiTzi7eG7Oq6':

task-requests/details/index.html

@@ -86,7 +86,10 @@ <h4 class="requestors__container__title">Requestors</h4>
           </div>
         </div>
         <div class="reject__container">
-          <button id="reject-button" class="request-details__reject__button">
+          <button
+            id="reject-button"
+            class="request-details__reject__button hidden"
+          >
             Reject
           </button>
         </div>

task-requests/details/script.js

@@ -4,6 +4,7 @@ const API_BASE_URL =
     : window.API_BASE_URL;
 
 let taskRequest;
+let self_user;
 
 const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');
 const container = document.querySelector('.container');
@@ -23,6 +24,19 @@ const errorMessage =
   'The requested operation could not be completed. Please try again later.';
 let taskId;
 
+async function getSelfUser() {
+  const res = await fetch(`${API_BASE_URL}/users/self`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+
+  const self_user = await res.json();
+  return self_user;
+}
+
 function renderTaskRequestDetails(taskRequest) {
   taskRequestContainer.append(
     createCustomElement({
@@ -200,17 +214,26 @@ async function updateTaskRequest(action, userId) {
   }
 }
 
-function getActionButton(requestor) {
+function getActionButton(requestor, taskRequest) {
+  const isSuperUser = self_user.roles['super_user'];
+  if (!isSuperUser) {
+    return createCustomElement({
+      tagName: 'p',
+      textContent:
+        taskRequest.status[0].toUpperCase() +
+        taskRequest.status.slice(1).toLowerCase(),
+      class: ['requestors__container__list__status'],
+    });
+  }
+
   if (taskRequest?.status === taskRequestStatus.APPROVED) {
-    if (taskRequest.approvedTo === requestor?.user?.id) {
-      return createCustomElement({
-        tagName: 'p',
-        textContent: 'Approved',
-        class: ['requestors__container__list__approved'],
-      });
-    } else {
-      return '';
-    }
+    return taskRequest.approvedTo === requestor?.user?.id
+      ? createCustomElement({
+          tagName: 'p',
+          textContent: 'Approved',
+          class: ['requestors__container__list__status'],
+        })
+      : '';
   }
   return createCustomElement({
     tagName: 'button',
@@ -279,14 +302,17 @@ async function renderRequestors(taskRequest) {
         createCustomElement({
           tagName: 'div',
           child: [
-            taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
+            taskRequest.status !== 'DENIED'
+              ? getActionButton(requestor, taskRequest)
+              : createCustomElement({
+                  tagName: 'p',
+                  textContent: 'Denied',
+                  class: ['requestors__container__list__status'],
+                }),
           ],
         }),
       ],
     });
-    const avatarDiv = userDetailsDiv.querySelector(
-      '.requestors__container__list__userDetails__avatar',
-    );
     requestorsContainer.append(userDetailsDiv);
   });
 }
@@ -410,14 +436,17 @@ const renderGithubIssue = async () => {
   );
 };
 const renderRejectButton = (taskRequest) => {
+  if (self_user.roles['super_user']) {
+    rejectButton.classList.remove('hidden');
+  }
   if (taskRequest?.status !== 'PENDING') {
-    rejectButton.disabled = true;
+    rejectButton.classList.add('hidden');
   }
 
   rejectButton.addEventListener('click', async () => {
     const res = await updateTaskRequest(TaskRequestAction.REJECT);
     if (res?.ok) {
-      rejectButton.disabled = true;
+      rejectButton.classList.add('hidden');
     }
   });
 };
@@ -426,6 +455,7 @@ const renderTaskRequest = async () => {
   taskContainer.classList.remove('hidden');
   try {
     taskRequest = await fetchTaskRequest();
+    self_user = await getSelfUser();
     taskRequestSkeleton.classList.add('hidden');
     renderRejectButton(taskRequest);
     renderTaskRequestDetails(taskRequest);

task-requests/details/style.css

@@ -248,7 +248,7 @@ body {
   background: #19805e;
   transition: 0.3s ease-in-out;
 }
-.requestors__container__list__approved {
+.requestors__container__list__status {
   background: transparent;
   border: none;
   color: #c3c3c3;