Merge pull request #116 from deriv-com/revert-96-ahmed/DAPI-683/feat-…

…-filter-dropdown-app-manager-desktop Revert "ahmed/DAPI-683/feat--filter-dropdown-app-manager-desktop"
deriv-com · Sep 5, 2024 · dd5335e · dd5335e
2 parents ed3c5d9 + 5fbc005
commit dd5335e
Show file tree

Hide file tree

Showing 8 changed files with 2,485 additions and 5,203 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.46",
+    "@deriv-com/quill-ui": "^1.13.22",
     "@deriv/deriv-api": "^1.0.11",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/web": "^9.7.3",
@@ -41,7 +41,10 @@
     "@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: /log in/i });
+      const login_nav_button = screen.getByRole('button', { name: /login/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,10 +21,4 @@
   &_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,68 +341,4 @@ 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 48px 25px;
+    padding: 48px;
 
     &.mobile {
       flex-direction: column;
@@ -120,13 +120,10 @@
 
   &__options {
     display: flex;
-    justify-content: flex-end;
-    margin-right: 3rem;
-    margin-bottom: 1rem;
+    justify-content: center;
+    margin-top: 1rem;
 
     @media screen and (max-width: 1023px) {
-      margin: 1rem 0;
-      justify-content: center;
       gap: 10px;
     }
 
@@ -140,17 +137,6 @@
         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, useMemo, useState } from 'react';
+import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import { Cell, Column } from 'react-table';
 import clsx from 'clsx';
 import { ApplicationObject } from '@deriv/api-types';
-import { Button, DropdownButton, Heading, Text, TSingleSelectItem } from '@deriv-com/quill-ui';
+import { Button, Heading, Text } from '@deriv-com/quill-ui';
 import {
   LabelPairedCirclePlusMdRegularIcon,
   LabelPairedSortLgRegularIcon,
@@ -37,48 +37,11 @@ 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,
-  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;
-    };
+const AppsTableOptions: React.FC<IAppsTableOptions> = ({ onSelectOption, is_desktop }) => {
+  if (is_desktop) return;
 
-    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
@@ -314,49 +277,15 @@ const AppsTable = ({ apps }: AppsTableProps) => {
     setSelectedOptions({ ...selectedOptions, sortBy: `${columnId}${sortType}` });
   };
 
-  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(() => {
+  const getAppsTableOptionDialogProps = () => {
     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;
@@ -412,11 +341,11 @@ const AppsTable = ({ apps }: AppsTableProps) => {
       {isDeleteOpen && <DeleteAppDialog appId={actionRow.app_id} onClose={onCloseDelete} />}
       <AppsTableHeader is_desktop={is_desktop} updateCurrentTab={updateCurrentTab} />
 
-      <AppsTableOptions {...apps_table_option_props} />
+      <AppsTableOptions onSelectOption={onSelectOption} is_desktop={is_desktop} />
 
       {applications?.length ? renderTable() : null}
 
-      {!is_desktop && <AppsTableOptionDialog {...apps_table_option_dialog_props} />}
+      {!is_desktop && <AppsTableOptionDialog {...getAppsTableOptionDialogProps()} />}
     </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>