Converted Tabs to Dropdown on Discord Users Page (#873)

* added dropdown

* draft: add dropdown on discord user page to combine 'linked account' and 'n discord' buttons

* added dropdown in the discord users page

* Added dropdown option in the Discord Users page

* used data test id for the tests and variable for css

* added a comment on react.js for future convenience

---------

Co-authored-by: Depayan Mondal <[email protected]>
Co-authored-by: Achintya Chatterjee <[email protected]>
Co-authored-by: Satyam Bajpai <[email protected]>

Author: 4 people

__tests__/users/App.test.js

@@ -93,10 +93,8 @@ describe('App Component', () => {
   });
 
   it('should update the URL query string and re-render the app', async () => {
-    await page.waitForSelector('[data_key="verified"]');
-
-    // Click on the "Linked Accounts" tab
-    await page.click('[data_key="verified"]');
+    await page.waitForSelector('[data-testid="tabs-section-select"]');
+    await page.select('[data-testid="tabs-section-select"]', 'verified');
 
     // Get the current URL and make sure the query string has been updated
     const url = await page.url();

__tests__/users/applyFilterPagination.test.js

@@ -78,8 +78,8 @@ describe('Apply Filter and Pagination Functionality', () => {
   });
 
   it('should update the URL query string when applying filters', async () => {
-    // click on the "Verified" tab
-    await page.click('[data_key="verified"]');
+    await page.waitForSelector('[data-testid="tabs-section-select"]');
+    await page.select('[data-testid="tabs-section-select"]', 'verified');
 
     // get the current URL
     const url = await page.url();

users/discord/App.js

@@ -7,8 +7,8 @@ import { NoUserFound } from './components/NoUserFound.js';
 const { createElement, rerender } = react;
 
 const tabs = [
-  { display_name: 'In Discord', id: 'in_discord' },
-  { display_name: 'Linked Accounts', id: 'verified' },
+  { display_name: 'In Discord', id: 'in_discord', value: 'in_discord' },
+  { display_name: 'Linked Accounts', id: 'verified', value: 'verified' },
 ];
 export const usersData = {
   in_discord: null,
@@ -22,7 +22,7 @@ let showUser = 0;
 usersData[activeTab] = await getUsers(activeTab);
 
 const handleTabNavigation = async (e) => {
-  const selectedTabId = e.target.getAttribute('data_key');
+  const selectedTabId = e.target.value;
   if (selectedTabId) {
     document.location.search = `tab=${selectedTabId}`;
 

users/discord/components/TabsSection.js

@@ -2,18 +2,20 @@ const { createElement } = react;
 
 export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
   return createElement(
-    'div',
+    'select',
     {
       class: 'tabs_section',
-      onclick: handleTabNavigation,
-      'data-testid': 'tabs-section',
+      onchange: handleTabNavigation,
+      'data-testid': 'tabs-section-select',
     },
     tabs.map((tabItem) => {
       return createElement(
-        'span',
+        'option',
         {
           data_key: `${tabItem.id}`,
           class: `tab ${activeTab === tabItem.id ? 'active_tab' : ''}`,
+          value: `${tabItem.value}`,
+          ...(activeTab === tabItem.id && { selected: 'true' }),
         },
         [tabItem.display_name],
       );

users/discord/style.css

@@ -1,5 +1,6 @@
 :root {
   --light-gray: #d4d4d478;
+  --border-color-gray: #808080;
 }
 
 .header {
@@ -24,13 +25,16 @@ main {
 }
 
 .tabs_section {
-  padding: 1rem 0;
+  padding: 1rem;
   margin: 1rem;
   grid-area: tab;
+  width: 18rem;
+  border: 2px solid var(--border-color-gray);
+  font-size: unset;
 }
 
 .tab {
-  padding: 0.5rem;
+  padding: 1rem;
   margin-inline-end: 0.5rem;
   cursor: pointer;
 }

users/discord/utils/react.js

@@ -8,7 +8,8 @@ const render = function (element, container) {
   const component = document.createElement(element.tag);
   element.props &&
     Object.keys(element.props).forEach((prop) =>
-      prop == 'onclick' || prop == 'onsubmit'
+      // based on requirements, any other type of event listner can be added here as 'prop'
+      prop == 'onclick' || prop == 'onsubmit' || prop == 'onchange'
         ? (component[prop] = element.props[prop])
         : component.setAttribute(prop, element.props[prop]),
     );