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({