Skip to content

Commit

Permalink
Merge pull request #116 from deriv-com/revert-96-ahmed/DAPI-683/feat-…
Browse files Browse the repository at this point in the history
…-filter-dropdown-app-manager-desktop

Revert "ahmed/DAPI-683/feat--filter-dropdown-app-manager-desktop"
  • Loading branch information
sandeep-deriv authored Sep 5, 2024
2 parents ed3c5d9 + 5fbc005 commit dd5335e
Show file tree
Hide file tree
Showing 8 changed files with 2,485 additions and 5,203 deletions.
7,500 changes: 2,467 additions & 5,033 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,4 @@
&_main {
width: 100%;
}

@media screen and (min-width: 1024px) {
.tabs_content {
min-height: 500px;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
20 changes: 3 additions & 17 deletions src/features/dashboard/components/AppsTable/apps-table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
&__header {
display: flex;
justify-content: space-between;
padding: 48px 48px 25px;
padding: 48px;

&.mobile {
flex-direction: column;
Expand Down Expand Up @@ -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;
}

Expand All @@ -140,17 +137,6 @@
padding: 0 1rem;
}
}

.quill {
&__dropdown-button {
&__content {
min-width: 200px;
}
}
&__item-container {
overflow-x: hidden;
}
}
}

&__options_dialog {
Expand Down
87 changes: 8 additions & 79 deletions src/features/dashboard/components/AppsTable/index.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/features/dashboard/components/StepperTextField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
Expand Down

0 comments on commit dd5335e

Please sign in to comment.