Merge pull request #96 from ahmed-deriv/ahmed/DAPI-683/feat--filter-d…

…ropdown-app-manager-desktop ahmed/DAPI-683/feat--filter-dropdown-app-manager-desktop
deriv-com · Sep 5, 2024 · ed3c5d9 · ed3c5d9
2 parents 69b47a3 + 307d220
commit ed3c5d9
Show file tree

Hide file tree

Showing 8 changed files with 5,202 additions and 2,484 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
-    "@deriv-com/quill-ui": "^1.13.22",
+    "@deriv-com/quill-ui": "^1.13.46",
     "@deriv/deriv-api": "^1.0.11",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/web": "^9.7.3",
@@ -41,10 +41,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-tabs": "^1.0.2",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@react-spring/web": "^9.7.3",
     "@textea/json-viewer": "^3.4.1",
-    "@use-gesture/react": "^10.3.0",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.2",

diff --git a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx
@@ -23,7 +23,7 @@ describe('User Navbar Desktop Item', () => {
     });
 
     it('Should render login link navbar item', async () => {
-      const login_nav_button = screen.getByRole('button', { name: /login/i });
+      const login_nav_button = screen.getByRole('button', { name: /log in/i });
       expect(login_nav_button).toBeVisible();
 
       await act(async () => {

diff --git a/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss b/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss
@@ -21,4 +21,10 @@
   &_main {
     width: 100%;
   }
+
+  @media screen and (min-width: 1024px) {
+    .tabs_content {
+      min-height: 500px;
+    }
+  }
 }
diff --git a/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx b/src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx
@@ -341,4 +341,68 @@ describe('Apps Table', () => {
     });
     expect(screen.getByText('first app')).toBeInTheDocument();
   });
+
+  it('Should filter the table', async () => {
+    mockDeviceType.mockImplementation(() => ({
+      deviceType: 'desktop',
+    }));
+    renderAppTable();
+    const filterDropdown = screen.getByTestId(`filter-dropdown`);
+    await act(async () => {
+      await userEvent.click(filterDropdown);
+    });
+    expect(screen.getByText('Filter by OAuth scopes')).toBeInTheDocument();
+    const checkbox = screen.getByTestId('filter-no_scope');
+    await act(async () => {
+      await userEvent.click(checkbox);
+    });
+    let rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(4);
+
+    const checkbox2 = screen.getByTestId('filter-payments');
+    await act(async () => {
+      await userEvent.click(checkbox2);
+    });
+    rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(3);
+
+    const checkbox3 = screen.getByTestId('filter-no_scope');
+    await act(async () => {
+      await userEvent.click(checkbox3);
+    });
+    rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(4);
+
+    const checkbox4 = screen.getByTestId('filter-payments');
+    await act(async () => {
+      await userEvent.click(checkbox4);
+    });
+    rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(5);
+  });
+
+  it('Should reset filter to all when clicked', async () => {
+    mockDeviceType.mockImplementation(() => ({
+      deviceType: 'desktop',
+    }));
+    renderAppTable();
+    const filterDropdown = screen.getByTestId(`filter-dropdown`);
+    await act(async () => {
+      await userEvent.click(filterDropdown);
+    });
+
+    const checkbox1 = screen.getByTestId('filter-no_scope');
+    await act(async () => {
+      await userEvent.click(checkbox1);
+    });
+    let rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(4);
+
+    const checkbox2 = screen.getByTestId('filter-all');
+    await act(async () => {
+      await userEvent.click(checkbox2);
+    });
+    rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(5);
+  });
 });
diff --git a/src/features/dashboard/components/AppsTable/apps-table.scss b/src/features/dashboard/components/AppsTable/apps-table.scss
@@ -72,7 +72,7 @@
   &__header {
     display: flex;
     justify-content: space-between;
-    padding: 48px;
+    padding: 48px 48px 25px;
 
     &.mobile {
       flex-direction: column;
@@ -120,10 +120,13 @@
 
   &__options {
     display: flex;
-    justify-content: center;
-    margin-top: 1rem;
+    justify-content: flex-end;
+    margin-right: 3rem;
+    margin-bottom: 1rem;
 
     @media screen and (max-width: 1023px) {
+      margin: 1rem 0;
+      justify-content: center;
       gap: 10px;
     }
 
@@ -137,6 +140,17 @@
         padding: 0 1rem;
       }
     }
+
+    .quill {
+      &__dropdown-button {
+        &__content {
+          min-width: 200px;
+        }
+      }
+      &__item-container {
+        overflow-x: hidden;
+      }
+    }
   }
 
   &__options_dialog {

diff --git a/src/features/dashboard/components/AppsTable/index.tsx b/src/features/dashboard/components/AppsTable/index.tsx
@@ -1,8 +1,8 @@
-import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
+import React, { HTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
 import { Cell, Column } from 'react-table';
 import clsx from 'clsx';
 import { ApplicationObject } from '@deriv/api-types';
-import { Button, Heading, Text } from '@deriv-com/quill-ui';
+import { Button, DropdownButton, Heading, Text, TSingleSelectItem } from '@deriv-com/quill-ui';
 import {
   LabelPairedCirclePlusMdRegularIcon,
   LabelPairedSortLgRegularIcon,
@@ -37,11 +37,48 @@ interface AppsTableProps extends HTMLAttributes<HTMLTableElement> {
 interface IAppsTableOptions {
   is_desktop: boolean;
   onSelectOption: (type: 'sort' | 'filter') => void;
+  selectedFilters: string[];
+  onFilterChange: (filters: string) => void;
 }
 
-const AppsTableOptions: React.FC<IAppsTableOptions> = ({ onSelectOption, is_desktop }) => {
-  if (is_desktop) return;
+const AppsTableOptions: React.FC<IAppsTableOptions> = ({
+  onSelectOption,
+  is_desktop,
+  onFilterChange,
+  selectedFilters,
+}) => {
+  if (is_desktop) {
+    const renderFilterOptions = () => {
+      const options: TSingleSelectItem[] = Object.keys(tableFilterOptions).map((key) => {
+        return {
+          id: key,
+          label: tableFilterOptions[key],
+          selected: selectedFilters.includes(key),
+          'data-testid': `filter-${key}`,
+          onClick: () => onFilterChange(key),
+        };
+      });
+      return options;
+    };
 
+    return (
+      <div className='apps_table__options'>
+        <DropdownButton
+          className='apps_table__options__filter_dropdown'
+          contentTitle='Filter by OAuth scopes'
+          contentHeight='md'
+          options={renderFilterOptions()}
+          icon={<LabelPairedBarsFilterLgRegularIcon />}
+          iconPosition='start'
+          color='black'
+          variant='secondary'
+          contentAlign='right'
+          data-testid='filter-dropdown'
+          checkbox
+        />
+      </div>
+    );
+  }
   return (
     <div className='apps_table__options'>
       <Button
@@ -277,15 +314,49 @@ const AppsTable = ({ apps }: AppsTableProps) => {
     setSelectedOptions({ ...selectedOptions, sortBy: `${columnId}${sortType}` });
   };
 
-  const getAppsTableOptionDialogProps = () => {
+  const onFilterChange = (name: string) => {
+    const { filterBy } = selectedOptions;
+    const isAllSelected = filterBy.includes('all');
+
+    if (!isAllSelected && name === 'all') {
+      setSelectedOptions((prev) => ({ ...prev, filterBy: Object.keys(tableFilterOptions) }));
+      return;
+    }
+
+    let filters = [...filterBy];
+
+    if (filters.includes(name)) {
+      filters = filters.filter((option) => option !== name && option !== 'all');
+    } else {
+      filters = [...filters, name];
+    }
+
+    const allOptionSelected = filters.length === Object.keys(tableFilterOptions).length - 1;
+    if (allOptionSelected && !filterBy.includes('all')) {
+      filters = [...filters, 'all'];
+    }
+
+    setSelectedOptions((prev) => ({ ...prev, filterBy: filters }));
+  };
+
+  const apps_table_option_dialog_props = useMemo(() => {
     return {
       optionType,
       isDialogOpen: isOptionDialogOpen,
       selectedOptions,
       updateSelectedOptions: setSelectedOptions,
       toggleAppTableDialog: setIsOptionDialogOpen,
     };
-  };
+  }, [isOptionDialogOpen, optionType, selectedOptions]);
+
+  const apps_table_option_props = useMemo(() => {
+    return {
+      is_desktop,
+      onSelectOption,
+      selectedFilters: selectedOptions.filterBy,
+      onFilterChange,
+    };
+  }, [selectedOptions, is_desktop]);
 
   const applyOptionCriteria = useCallback(() => {
     const { sortBy, filterBy } = selectedOptions;
@@ -341,11 +412,11 @@ const AppsTable = ({ apps }: AppsTableProps) => {
       {isDeleteOpen && <DeleteAppDialog appId={actionRow.app_id} onClose={onCloseDelete} />}
       <AppsTableHeader is_desktop={is_desktop} updateCurrentTab={updateCurrentTab} />
 
-      <AppsTableOptions onSelectOption={onSelectOption} is_desktop={is_desktop} />
+      <AppsTableOptions {...apps_table_option_props} />
 
       {applications?.length ? renderTable() : null}
 
-      {!is_desktop && <AppsTableOptionDialog {...getAppsTableOptionDialogProps()} />}
+      {!is_desktop && <AppsTableOptionDialog {...apps_table_option_dialog_props} />}
     </div>
   );
 };

diff --git a/src/features/dashboard/components/StepperTextField/index.tsx b/src/features/dashboard/components/StepperTextField/index.tsx
@@ -39,7 +39,7 @@ const StepperTextField: React.FC<StepperTextFieldProps> = ({
           size='md'
           type='button'
           variant='tertiary'
-          disabled={value <= min || error.type === 'min'}
+          disabled={value <= min || error?.type === 'min'}
         />
         <input
           data-testid='stepper-text-field'
@@ -58,7 +58,7 @@ const StepperTextField: React.FC<StepperTextFieldProps> = ({
           size='md'
           type='button'
           variant='tertiary'
-          disabled={value >= max || error.type === 'max'}
+          disabled={value >= max || error?.type === 'max'}
         />
       </div>
     </div>