UI/UX Improvements for the Extension Request Feature (#595)

* Feat : Added real time logs feature

* Styles : Updated styles

* Style : Fixed styling

Desc : Fixed scrollbar issue for mac, font family & widdth now persists in edit mode

* Feat : Resetting input fields upon cancel

* Bug : Fixed newETA being always changed issue

* Feat : Made audit logs render in real time

* Refactor : Improved remaining UX issues

Desc : Auto closing calendar upon date selection, showin NA instead of NaN in commited hours & wrapped changes under dev flag for logs

* Test : Added test case to verify real time audit logs

* Refactor : Showing NA inplace of NAN for commited hours

* Feat : Handled all the edge cases for real time rendering of logs

Author: joyguptaa

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

@@ -300,6 +300,19 @@ describe('Tests the Extension Requests Screen', () => {
           },
           body: JSON.stringify(extensionRequestLogs['fuQs71a0Y7BX3n4rc5Ii']),
         });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/extension-requests/fuQs71a0Y7BX3n4rc5Ii?dev=true'
+      ) {
+        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',
+          },
+        });
       } else if (
         url ===
         'https://api.realdevsquad.com/logs/extensionRequests/?meta.extensionRequestId=lw7dRB0I3a6ivsFR5Izs&dev=true'
@@ -779,4 +792,60 @@ describe('Tests the Extension Requests Screen', () => {
     );
     expect(cardNumber2Value).toBe('1');
   });
+
+  it('Validating if audit logs are being generated in realtime', async () => {
+    // Visit extension request under dev flag
+    await page.goto('http://localhost:8000/extension-requests/?dev=true');
+    const extensionRequestIds = [
+      'log-container-fuQs71a0Y7BX3n4rc5Ii',
+      'log-container-lw7dRB0I3a6ivsFR5Izs',
+    ];
+
+    // Select all types of status of extension requests
+    await page.click('#filter-button');
+    await page.click('input[value="APPROVED"]');
+    await page.click('input[value="DENIED"]');
+    await page.click('#apply-filter-button');
+    await page.waitForNetworkIdle();
+
+    // Checking if both the extension request cards are renedered or not
+    const cardsList = await page.$$('.extension-card');
+    expect(cardsList.length).toBe(2);
+
+    const accordionButton = await page.$$('.accordion');
+    // Validate first extension card which is based on updated logs
+    accordionButton[0].click();
+    await page.waitForNetworkIdle();
+    let extensionLogsForFirstER = await page.$(`#${extensionRequestIds[0]}`);
+    let logs = await extensionLogsForFirstER.$$('.log-div');
+
+    // Click the first element with class '.edit-button'
+    await page.$$eval('.edit-button', (buttons) => buttons[0].click());
+    const newTitle = 'This is a new title test case';
+    const newDate = '2024-09-19T22:20';
+    const newReason = 'This is the new reason';
+
+    // Updating all the input fields
+    await page.$$eval(
+      '.title-text-input',
+      (inputFields, newTitle) => (inputFields[0].value = newTitle),
+      newTitle,
+    );
+    await page.$$eval(
+      '.date-input',
+      (inputFields, newDate) => (inputFields[0].value = newDate),
+      newDate,
+    );
+    await page.$$eval(
+      '.input-text-area',
+      (inputFields, newReason) => (inputFields[0].value = newReason),
+      newReason,
+    );
+
+    await page.$$eval('.update-button', (buttons) => buttons[0].click());
+    await page.waitForTimeout(1100);
+    await page.waitForNetworkIdle();
+    logs = await extensionLogsForFirstER.$$('.log-div');
+    expect(Array.from(logs).length).toBe(9);
+  });
 });

extension-requests/local-utils.js

@@ -252,9 +252,15 @@ const addSpinner = (container) => {
   return removeSpinner;
 };
 
-const dateTimeString = (timestamp) => {
-  return new Date(timestamp).toISOString().substring(0, 16);
-};
+function dateTimeString(milliseconds) {
+  const date = new Date(milliseconds);
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+    2,
+    '0',
+  )}-${String(date.getDate()).padStart(2, '0')}T${String(
+    date.getHours(),
+  ).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+}
 
 const fullDateString = (timestamp) => {
   const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];