diff --git a/src/frontend/apps/desk/src/features/mail-domains/assets/icon-sort.svg b/src/frontend/apps/desk/src/features/mail-domains/assets/icon-sort.svg new file mode 100644 index 0000000..ac4565d --- /dev/null +++ b/src/frontend/apps/desk/src/features/mail-domains/assets/icon-sort.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx index a2c85f4..4e9ffc0 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx @@ -7,6 +7,7 @@ import { useCunninghamTheme } from '@/cunningham'; import IconOpenClose from '../../assets/icon-open-close.svg'; import { ItemList } from './ItemList'; +import { PanelActions } from './PanelActions'; export const Panel = () => { const { t } = useTranslation(); @@ -73,7 +74,9 @@ export const Panel = () => { {t('Mail Domains')} + + diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx new file mode 100644 index 0000000..bc768bd --- /dev/null +++ b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Box, BoxButton } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; +import { EnumMailDomainsOrdering } from '@/features/mail-domains'; +import { useMailDomainsStore } from '@/features/mail-domains/store/useMailDomainsStore'; + +import IconSort from '../../assets/icon-sort.svg'; + +export const PanelActions = () => { + const { t } = useTranslation(); + const { changeOrdering, ordering } = useMailDomainsStore(); + const { colorsTokens } = useCunninghamTheme(); + + const isSortAsc = ordering === EnumMailDomainsOrdering.BY_CREATED_AT; + + return ( + + + + + + ); +}; diff --git a/src/frontend/apps/desk/src/features/mail-domains/store/useMailDomainsStore.tsx b/src/frontend/apps/desk/src/features/mail-domains/store/useMailDomainsStore.tsx index fd18c0e..dc6e195 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/store/useMailDomainsStore.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/store/useMailDomainsStore.tsx @@ -4,8 +4,16 @@ import { EnumMailDomainsOrdering } from '../api/useMailDomains'; interface MailDomainsStore { ordering: EnumMailDomainsOrdering; + changeOrdering: () => void; } -export const useMailDomainsStore = create(() => ({ +export const useMailDomainsStore = create((set) => ({ ordering: EnumMailDomainsOrdering.BY_CREATED_AT_DESC, + changeOrdering: () => + set(({ ordering }) => ({ + ordering: + ordering === EnumMailDomainsOrdering.BY_CREATED_AT + ? EnumMailDomainsOrdering.BY_CREATED_AT_DESC + : EnumMailDomainsOrdering.BY_CREATED_AT, + })), })); diff --git a/src/frontend/apps/e2e/__tests__/app-desk/mail-domains.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/mail-domains.spec.ts index 47ae596..de62c36 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/mail-domains.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-desk/mail-domains.spec.ts @@ -31,13 +31,59 @@ const mailDomainsFixtures: MailDomain[] = [ }, ]; -test.describe('Mail domain', () => { +test.describe('Mail domains', () => { test.describe('checks all the elements are visible', () => { test.beforeEach(async ({ page, browserName }) => { await page.goto('/'); await keyCloakSignIn(page, browserName); }); + test('checks the sort button', async ({ page }) => { + await page + .locator('menu') + .first() + .getByLabel(`Mail Domains button`) + .click(); + + await expect(page).toHaveURL(/mail-domains/); + + const responsePromiseSortDesc = page.waitForResponse( + (response) => + response + .url() + .includes('/mail-domains/?page=1&ordering=-created_at') && + response.status() === 200, + ); + + const responsePromiseSortAsc = page.waitForResponse( + (response) => + response + .url() + .includes('/mail-domains/?page=1&ordering=created_at') && + response.status() === 200, + ); + + const panel = page.getByLabel('mail domains panel').first(); + + await panel + .getByRole('button', { + name: 'Sort the domain names by creation date ascendent', + }) + .click(); + + const responseSortAsc = await responsePromiseSortAsc; + expect(responseSortAsc.ok()).toBeTruthy(); + + await panel + .getByRole('button', { + name: 'Sort the domain names by creation date descendent', + }) + .click(); + + const responseSortDesc = await responsePromiseSortDesc; + expect(responseSortDesc.ok()).toBeTruthy(); + }); + test('when no mail domain exists', async ({ page }) => { await page.route('**/api/v1.0/mail-domains/?page=*', async (route) => { await route.fulfill({