Adds query params to extension requests page url (#666)

Author: Ajeyakrishna-k

__tests__/extension-requests/extension-requests.test.js

@@ -21,7 +21,7 @@ const {
 } = require('../../mock-data/users');
 const { usersStatus } = require('../../mock-data/users-status');
 const { taskDone, auditLogTasks } = require('../../mock-data/tasks/index');
-
+const baseUrl = 'http://localhost:8000/extension-requests';
 describe('Tests the Extension Requests Screen', () => {
   let browser;
   let page;
@@ -46,7 +46,9 @@ describe('Tests the Extension Requests Screen', () => {
       const url = interceptedRequest.url();
       if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING'
+          'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING' ||
+        url ===
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -109,6 +111,19 @@ describe('Tests the Extension Requests Screen', () => {
           },
           body: JSON.stringify(userSunny),
         });
+      } else if (
+        url === 'https://api.realdevsquad.com/users?search=randhir&size=1'
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+          body: JSON.stringify(userRandhir),
+        });
       } else if (
         url ===
         'https://api.realdevsquad.com/tasks/PYj79ki2agB0q5JN3kUf/details'
@@ -263,7 +278,9 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED'
+          'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED' ||
+        url ===
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc&q=status%3AAPPROVED%2BDENIED'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -327,12 +344,26 @@ describe('Tests the Extension Requests Screen', () => {
           },
           body: JSON.stringify(extensionRequestLogs['lw7dRB0I3a6ivsFR5Izs']),
         });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+          body: JSON.stringify(extensionRequestsListUserSearch),
+        });
       } else {
         interceptedRequest.continue();
       }
     });
 
-    await page.goto('http://localhost:8000/extension-requests');
+    await page.goto(baseUrl);
 
     await page.waitForNetworkIdle();
 
@@ -799,7 +830,7 @@ describe('Tests the Extension Requests Screen', () => {
     const cardNumber1Value = await extensionRequestNumberContainer[1].evaluate(
       (node) => node.textContent,
     );
-    expect(cardNumber1Value).toBe('5');
+    expect(cardNumber1Value).toBe('#5');
   });
 
   test('Default Request Number to 1 if requestNumber field is missing in API Response', async () => {
@@ -816,7 +847,7 @@ describe('Tests the Extension Requests Screen', () => {
     const cardNumber2Value = await extensionRequestNumberContainer[3].evaluate(
       (node) => node.textContent,
     );
-    expect(cardNumber2Value).toBe('1');
+    expect(cardNumber2Value).toBe('#1');
   });
 
   it('Validating if audit logs are being generated in realtime', async () => {
@@ -874,4 +905,41 @@ describe('Tests the Extension Requests Screen', () => {
     logs = await extensionLogsForFirstER.$$('.log-div');
     expect(Array.from(logs).length).toBe(9);
   });
+
+  it('Should update page url when filters and usernames are changed', async () => {
+    await page.click('#filter-button');
+    await page.click('input[value="PENDING"]');
+    await page.click('input[value="APPROVED"]');
+    await page.click('#apply-filter-button');
+    await page.type('#assignee-search', 'sunny,randhir');
+    await page.keyboard.press('Enter');
+    await page.waitForNetworkIdle();
+    const url = page.url();
+    expect(url).toBe(
+      `${baseUrl}?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
+    );
+  });
+  it('Should have UI elements in sync with url', async () => {
+    await page.goto(
+      `${baseUrl}/?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
+    );
+    const filterButton = await page.$('#filter-button');
+    await filterButton.click();
+    await page.waitForSelector('.filter-modal');
+    const approvedFilter = await page.$('input[value="APPROVED"]');
+    const currentState = await approvedFilter.getProperty('checked');
+    const isApprovedChecked = await currentState.jsonValue();
+    expect(isApprovedChecked).toBe(true);
+    const searchText = await page.$eval(
+      '#assignee-search',
+      (input) => input.value,
+    );
+    expect(searchText).toBe('sunny,randhir');
+    await page.waitForSelector('.sort-button');
+    const ascSortIconDisplayStyle = await page.$eval(
+      '#asc-sort-icon',
+      (icon) => window.getComputedStyle(icon).display,
+    );
+    expect(ascSortIconDisplayStyle).toBe('block');
+  });
 });

extension-requests/local-utils.js

@@ -47,11 +47,11 @@ const generateExtensionRequestParams = (nextPageParams) => {
     if (searchQueries.includes(key)) {
       let queryString;
       if (Array.isArray(value)) {
-        queryString = key + ':' + value.join('+');
+        if (value.length) queryString = key + ':' + value.join('+');
       } else {
         queryString = key + ':' + value;
       }
-      queryStringList.push(queryString);
+      if (queryString) queryStringList.push(queryString);
     } else {
       urlSearchParams.append(key, value);
     }
@@ -62,6 +62,47 @@ const generateExtensionRequestParams = (nextPageParams) => {
   const uri = `/extension-requests?${urlSearchParams.toString()}`;
   return uri;
 };
+
+/**
+ * Parses the query parameters from a URL and stores them in the provided object.
+ *
+ * @param {string} uri - The URI string containing the query parameters.
+ * @param {Object} nextPageParamsObject - The object in which the parsed parameters will be stored.
+ * @returns {Object} The updated `nextPageParamsObject` containing the parsed parameters.
+ *
+ * @example
+ * let params = {};
+ * parseExtensionRequestParams("/?order=asc&size=5&q=status:APPROVED,assignee:sunny+randhir", params);
+ * // params will be updated to:
+ * // {
+ * //   order: "asc",
+ * //   size: "5",
+ * //   status: "APPROVED",
+ * //   assignee: ["sunny", "randhir"]
+ * // }
+ */
+const parseExtensionRequestParams = (uri, nextPageParamsObject) => {
+  const urlSearchParams = new URLSearchParams(uri);
+
+  for (const [key, value] of urlSearchParams.entries()) {
+    if (key === 'q') {
+      const searchQueries = value.split(',');
+      searchQueries.forEach((query) => {
+        if (!query) return;
+        const [queryKey, queryValue] = query.split(':');
+        if (queryValue?.includes('+')) {
+          nextPageParamsObject[queryKey] = queryValue.split('+');
+        } else if (queryValue) {
+          nextPageParamsObject[queryKey] = queryValue;
+        }
+      });
+    } else {
+      nextPageParamsObject[key] = value;
+    }
+  }
+  return nextPageParamsObject;
+};
+
 async function updateExtensionRequest({ id, body, isDev = false }) {
   const url = `${API_BASE_URL}/extension-requests/${id}${
     isDev ? `?dev=true` : ''