Dev to Main Sync

__tests__/navbar/navbar.test.js

@@ -15,6 +15,17 @@ describe('Tests the navbar and its components on various pages', () => {
 
     const navLinks = await navbarPage.$('.nav-links');
     expect(navLinks).toBeTruthy();
+
+    const devFlag = await navbarPage.evaluate(() => {
+      return new URLSearchParams(window.location.search).get('dev') === 'true';
+    });
+
+    const chevronIcon = await navbarPage.$('#chevron-down');
+    if (devFlag) {
+      expect(chevronIcon).toBeTruthy();
+    } else {
+      expect(chevronIcon).toBeFalsy();
+    }
   };
 
   beforeAll(async () => {
@@ -99,4 +110,49 @@ describe('Tests the navbar and its components on various pages', () => {
     await page.goto(`${LOCAL_TEST_PAGE_URL}/feed/index.html`);
     await testNavbar(page);
   });
+  it('should close the dropdown by clicking outside the dropdown under dev feature flag', async () => {
+    await page.goto(`${LOCAL_TEST_PAGE_URL}?dev=true`);
+
+    const userInfoHandle = await page.$('.user-info');
+    const dropdownHandle = await page.$('#dropdown');
+
+    expect(userInfoHandle).toBeTruthy();
+    expect(dropdownHandle).toBeTruthy();
+
+    await page.evaluate(() => {
+      const userInfo = document.querySelector('.user-info');
+      if (userInfo) {
+        userInfo.click();
+      }
+    });
+    await page.mouse.click(100, 100);
+    const dropdownIsActive = await dropdownHandle.evaluate((el) =>
+      el.classList.contains('active'),
+    );
+    expect(dropdownIsActive).toBe(false);
+  });
+  it('should keep the dropdown open when clicking outside when feature flag is off', async () => {
+    await page.goto(`${LOCAL_TEST_PAGE_URL}?dev=false`);
+    await page.waitForSelector('#dropdown');
+    await page.evaluate(() => {
+      const dropdown = document.getElementById('dropdown');
+      if (dropdown && !dropdown.classList.contains('active')) {
+        dropdown.classList.add('active');
+      }
+    });
+    let dropdownIsActive = await page.evaluate(() => {
+      const dropdown = document.getElementById('dropdown');
+      return dropdown?.classList.contains('active') ?? false;
+    });
+    expect(dropdownIsActive).toBe(true);
+    await page.evaluate(() => {
+      document.body.click();
+    });
+    await page.waitForTimeout(200);
+    const newDropdownHandle = await page.$('#dropdown');
+    const newDropdownIsActive = await newDropdownHandle.evaluate((el) =>
+      el.classList.contains('active'),
+    );
+    expect(newDropdownIsActive).toBe(true);
+  });
 });

__tests__/requests/requests.test.js

@@ -129,7 +129,34 @@ describe('Tests the request cards', () => {
     await browser.close();
   });
 
+  it('should match the request page url with correct request tab link after reloading the page', async () => {
+    await page.click('#extension_tab_link');
+    expect(page.url()).toContain('type=extension');
+
+    await page.reload();
+    expect(page.url()).toContain('type=extension');
+
+    const isExtensionTabLinkSelected = await page.$eval(
+      '[data-testid="extension-tab"]',
+      (e) => e.classList.contains('selected__tab'),
+    );
+    const isOnboardingTabLinkSelected = await page.$eval(
+      '[data-testid="onboarding-tab"]',
+      (e) => e.classList.contains('selected__tab'),
+    );
+    const isOOOTabLinkSelected = await page.$eval(
+      '[data-testid="ooo-tab"]',
+      (e) => e.classList.contains('selected__tab'),
+    );
+
+    expect(isExtensionTabLinkSelected).toBe(true);
+    expect(isOnboardingTabLinkSelected).toBe(false);
+    expect(isOOOTabLinkSelected).toBe(false);
+  });
+
   it('should update the card when the accept or reject button is clicked for OOO requests', async () => {
+    await page.click('#ooo_tab_link');
+
     await page.waitForSelector('.request__status');
     const statusButtonText = await page.$eval(
       '.request__status',

navbar.global.js

@@ -1,10 +1,15 @@
+const urlParams = new URLSearchParams(window.location.search);
+const devFlag = urlParams.get('dev') === 'true';
+const chevronIcon = devFlag
+  ? `<span><img id="chevron-down" src="images/chevron-down.svg" alt="chevron-down icon" /></span>`
+  : '';
 const addNavbartoPage = async () => {
   const navbar = document?.getElementById('tasksNav');
   const navbarParams = new URLSearchParams(window?.location?.search);
   navbar.innerHTML = `
         <div class="logo">
             <a href="/index.html">
-                <img src="/images/Real-Dev-Squad@1x.png" alt="logo" />
+                <img src="/images/Real-Dev-Squad@1x.png" alt="logo"  />
             </a>
         </div>
         <div class="nav-links">
@@ -31,6 +36,7 @@ const addNavbartoPage = async () => {
             <span>
             <img id="user-img" src="" alt="" />
             </span>
+              ${chevronIcon}
         </div>
         <div id="dropdown"></div>
     `;

requests/constants.js

@@ -27,6 +27,7 @@ const ErrorMessages = {
   OOO_NOT_FOUND: 'OOO Requests not found',
   EXTENSION_NOT_FOUND: 'Extension Requests not found',
   ONBOARDING_EXTENSION_NOT_FOUND: 'Onboarding extension Requests not found',
+  UNAUTHORIZED_ACTION: 'You are unauthorized to perform this action',
   SERVER_ERROR: 'Unexpected error occurred',
 };
 

requests/index.html

@@ -34,13 +34,7 @@
     <div class="container" id="request-page-container">
       <div class="container__header">
         <nav>
-          <a
-            href="#"
-            class="selected__tab"
-            id="ooo_tab_link"
-            data-testid="ooo-tab"
-            >OOO</a
-          >
+          <a href="#" id="ooo_tab_link" data-testid="ooo-tab">OOO</a>
           <a
             href="#"
             class="disabled__tab hidden"

requests/script.js

@@ -19,14 +19,30 @@ const filterOptionsContainer = document.getElementById(
 );
 const applyFilterButton = document.getElementById('applyFilterButton');
 const userNameFilterInput = document.getElementById('assignee-search-input');
-let currentReqType = OOO_REQUEST_TYPE;
+let currentReqType = params.get('type') ?? OOO_REQUEST_TYPE;
 let selected__tab__class = 'selected__tab';
 let statusValue = null;
 let sortByValue = null;
 let userDetails = [];
 let nextLink = '';
 let isDataLoading = false;
 
+function updateTabLink(requestType) {
+  if (requestType === OOO_REQUEST_TYPE) {
+    oooTabLink.classList.add(selected__tab__class);
+    onboardingExtensionTabLink.classList.remove(selected__tab__class);
+    extensionTabLink.classList.remove(selected__tab__class);
+  } else if (requestType === ONBOARDING_EXTENSION_REQUEST_TYPE) {
+    onboardingExtensionTabLink.classList.add(selected__tab__class);
+    oooTabLink.classList.remove(selected__tab__class);
+    extensionTabLink.classList.remove(selected__tab__class);
+  } else if (requestType === EXTENSION_REQUEST_TYPE) {
+    extensionTabLink.classList.add(selected__tab__class);
+    oooTabLink.classList.remove(selected__tab__class);
+    onboardingExtensionTabLink.classList.remove(selected__tab__class);
+  }
+}
+
 function getUserDetails(id) {
   return userDetails.find((user) => user.id === id);
 }
@@ -65,9 +81,7 @@ oooTabLink.addEventListener('click', async function (event) {
   nextLink = '';
   deselectRadioButtons();
   userNameFilterInput.value = '';
-  oooTabLink.classList.add(selected__tab__class);
-  extensionTabLink.classList.remove(selected__tab__class);
-  onboardingExtensionTabLink.classList.remove(selected__tab__class);
+  updateTabLink(currentReqType.toUpperCase());
   changeFilter();
   updateUrlWithQuery(currentReqType);
   await renderRequestCards({ state: statusValue, sort: sortByValue });
@@ -80,9 +94,7 @@ extensionTabLink.addEventListener('click', async function (event) {
   nextLink = '';
   deselectRadioButtons();
   userNameFilterInput.value = '';
-  extensionTabLink.classList.add(selected__tab__class);
-  oooTabLink.classList.remove(selected__tab__class);
-  onboardingExtensionTabLink.classList.remove(selected__tab__class);
+  updateTabLink(currentReqType.toUpperCase());
   changeFilter();
   updateUrlWithQuery(currentReqType);
   await renderRequestCards({ state: statusValue, sort: sortByValue });
@@ -95,9 +107,7 @@ onboardingExtensionTabLink.addEventListener('click', async function (event) {
   nextLink = '';
   deselectRadioButtons();
   userNameFilterInput.value = '';
-  onboardingExtensionTabLink.classList.add(selected__tab__class);
-  extensionTabLink.classList.remove(selected__tab__class);
-  oooTabLink.classList.remove(selected__tab__class);
+  updateTabLink(currentReqType.toUpperCase());
   changeFilter();
   updateUrlWithQuery(currentReqType);
   await renderRequestCards({ state: statusValue, sort: sortByValue });
@@ -511,8 +521,8 @@ async function acceptRejectRequest(id, reqBody) {
     } else {
       switch (res.status) {
         case 401:
-          showToast(ErrorMessages.UNAUTHENTICATED, 'failure');
-          showMessage('ERROR', ErrorMessages.UNAUTHENTICATED);
+          showToast(ErrorMessages.UNAUTHORIZED_ACTION, 'failure');
+          showMessage('ERROR', ErrorMessages.UNAUTHORIZED_ACTION);
           break;
         case 403:
           showToast(ErrorMessages.UNAUTHENTICATED, 'failure');
@@ -585,6 +595,9 @@ async function performAcceptRejectAction(isAccepted, e) {
       showMessage('ERROR', ErrorMessages.SERVER_ERROR);
     }
   }
+
+  nextLink = '';
+  await renderRequestCards({ state: statusValue, sort: sortByValue });
 }
 
 function showToast(message, type) {
@@ -765,7 +778,6 @@ function populateStatus() {
     addRadioButton(name, id, 'status-filter');
   }
 }
-
+updateTabLink(currentReqType.toUpperCase());
 populateStatus();
-
 renderRequestCards({ state: statusValue, sort: sortByValue });

userLogin.js

@@ -1,3 +1,5 @@
+const urlParam = new URLSearchParams(window.location.search);
+const isDevFlag = urlParam.get('dev') === 'true';
 const DROPDOWN_OPTIONS = [
   {
     name: 'Home',
@@ -89,7 +91,16 @@ async function handleUserSignin() {
           dropdown.classList.add('active');
         }
       });
-
+      document.addEventListener('click', (event) => {
+        if (
+          isDevFlag &&
+          dropdown.classList.contains('active') &&
+          !dropdown.contains(event.target) &&
+          !userInfo.contains(event.target)
+        ) {
+          dropdown.classList.remove('active');
+        }
+      });
       signOutElement.addEventListener('click', () => {
         getSelfUser('/auth/signout');
       });