✨(app-desk) add sorting to mail domains panel

Adds a button to sort items in the mail domains panel
by creation date. Also adds an e2e test.

src/frontend/apps/desk/src/features/mail-domains/assets/icon-sort.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_178_17837)">
+    <path
+      d="M11.25 3.75L6.25 8.7375H10V17.5H12.5V8.7375H16.25L11.25 3.75ZM20 21.2625V12.5H17.5V21.2625H13.75L18.75 26.25L23.75 21.2625H20Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_178_17837">
+      <rect width="30" height="30" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

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 = () => {
           <Text $weight="bold" $size="1.25rem">
             {t('Mail Domains')}
           </Text>
+          <PanelActions />
         </Box>
+
         <ItemList />
       </Box>
     </Box>

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 (
+    <Box
+      $direction="row"
+      $gap="1rem"
+      $css={`
+        & button {
+          padding: 0;
+
+          svg {
+            padding: 0.1rem;
+          }
+        }
+      `}
+    >
+      <BoxButton
+        aria-label={
+          isSortAsc
+            ? t('Sort the domain names by creation date descendent')
+            : t('Sort the domain names by creation date ascendent')
+        }
+        onClick={changeOrdering}
+        $radius="100%"
+        $background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
+        $color={colorsTokens()['primary-600']}
+      >
+        <IconSort
+          width={30}
+          height={30}
+          aria-label={t('Sort domain names icon')}
+        />
+      </BoxButton>
+    </Box>
+  );
+};

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<MailDomainsStore>(() => ({
+export const useMailDomainsStore = create<MailDomainsStore>((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,
+    })),
 }));

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