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

@@ -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">

task-requests/details/script.js

@@ -4,6 +4,7 @@ const API_BASE_URL =
     : window.API_BASE_URL;
 
 let taskRequest;
+let isSuperUser;
 
 const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');
 const container = document.querySelector('.container');
@@ -13,15 +14,34 @@ const requestorSkeleton = document.querySelector(
 );
 
 const taskRequestContainer = document.getElementById('task-request-details');
+const requestDetailContainer =
+  document.getElementsByClassName('request-details');
 const taskContainer = document.getElementById('task-details');
 const toast = document.getElementById('toast_task_details');
-const rejectButton = document.getElementById('reject-button');
+// const rejectButton = document.getElementById('reject-button');
 const requestorsContainer = document.getElementById('requestors-details');
 const taskRequestId = new URLSearchParams(window.location.search).get('id');
 history.pushState({}, '', window.location.href);
 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;
+}
+
+async function checkUserIsSuperUser() {
+  const self_user = await getSelfUser();
+  return self_user?.roles['super_user'];
+}
 
 function renderTaskRequestDetails(taskRequest) {
   taskRequestContainer.append(
@@ -200,29 +220,36 @@ async function updateTaskRequest(action, userId) {
   }
 }
 
-function getActionButton(requestor) {
-  if (taskRequest?.status === taskRequestStatus.APPROVED) {
-    if (taskRequest.approvedTo === requestor?.user?.id) {
-      return createCustomElement({
-        tagName: 'p',
-        textContent: 'Approved',
-        class: ['requestors__container__list__approved'],
-      });
-    } else {
-      return '';
+function renderActionButton(requestor, taskRequest) {
+  if (isSuperUser) {
+    if (taskRequest?.status === taskRequestStatus.APPROVED) {
+      return taskRequest.approvedTo === requestor?.user?.id
+        ? createCustomElement({
+            tagName: 'p',
+            textContent: 'Approved',
+            class: ['requestors__container__list__status'],
+          })
+        : '';
     }
+    return createCustomElement({
+      tagName: 'button',
+      textContent: 'Approve',
+      class: 'requestors__conatainer__list__button',
+      eventListeners: [
+        {
+          event: 'click',
+          func: () =>
+            updateTaskRequest(TaskRequestAction.APPROVE, requestor.user?.id),
+        },
+      ],
+    });
   }
   return createCustomElement({
-    tagName: 'button',
-    textContent: 'Approve',
-    class: 'requestors__conatainer__list__button',
-    eventListeners: [
-      {
-        event: 'click',
-        func: () =>
-          updateTaskRequest(TaskRequestAction.APPROVE, requestor.user?.id),
-      },
-    ],
+    tagName: 'p',
+    textContent:
+      taskRequest.status[0].toUpperCase() +
+      taskRequest.status.slice(1).toLowerCase(),
+    class: ['requestors__container__list__status'],
   });
 }
 
@@ -279,14 +306,17 @@ async function renderRequestors(taskRequest) {
         createCustomElement({
           tagName: 'div',
           child: [
-            taskRequest.status !== 'DENIED' ? getActionButton(requestor) : '',
+            taskRequest.status !== 'DENIED'
+              ? renderActionButton(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,22 +440,39 @@ const renderGithubIssue = async () => {
   );
 };
 const renderRejectButton = (taskRequest) => {
-  if (taskRequest?.status !== 'PENDING') {
-    rejectButton.disabled = true;
-  }
+  if (!isSuperUser) return;
+  if (taskRequest?.status === 'PENDING') {
+    const rejectContainer = createCustomElement({
+      tagName: 'div',
+      class: 'reject__container',
+      child: [
+        createCustomElement({
+          tagName: 'button',
+          textContent: 'Reject',
+          id: 'reject-button',
+          class: 'request-details__reject__button',
+        }),
+      ],
+    });
 
-  rejectButton.addEventListener('click', async () => {
-    const res = await updateTaskRequest(TaskRequestAction.REJECT);
-    if (res?.ok) {
-      rejectButton.disabled = true;
-    }
-  });
+    requestDetailContainer[0].appendChild(rejectContainer);
+    const rejectButton = rejectContainer.querySelector('#reject-button');
+
+    rejectButton.addEventListener('click', async () => {
+      const res = await updateTaskRequest(TaskRequestAction.REJECT);
+      if (res?.ok) {
+        rejectButton.remove();
+      }
+    });
+  }
 };
+
 const renderTaskRequest = async () => {
   taskRequestSkeleton.classList.remove('hidden');
   taskContainer.classList.remove('hidden');
   try {
     taskRequest = await fetchTaskRequest();
+    isSuperUser = await checkUserIsSuperUser();
     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;