fix(pci-worklow): fix workflow region sorting

ref: #TAPC-5397

Signed-off-by: Adrien Turmo <[email protected]>

Author: aTurmo

packages/manager/apps/pci-workflow/src/api/hooks/workflows.spec.ts

@@ -1,10 +1,12 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
+import { ColumnSort } from '@ovh-ux/manager-react-components';
+
 import { deleteWorkflow } from '@/api/data/workflow';
 import { wrapper } from '@/wrapperRenders';
 
-import { useDeleteWorkflow } from './workflows';
+import { TWorkflow, sortWorkflows, useDeleteWorkflow } from './workflows';
 
 vi.mock('@/api/data/workflow');
 
@@ -57,3 +59,77 @@ describe('useDeleteWorkflow', () => {
     expect(onSuccessMock).not.toHaveBeenCalled();
   });
 });
+
+describe('sortWorkflows', () => {
+  it.each([
+    {
+      workflows: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+      ] as TWorkflow[],
+      sorting: undefined,
+      expectedResults: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+      ] as TWorkflow[],
+    },
+    {
+      workflows: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+      ] as TWorkflow[],
+      sorting: { id: 'regions', desc: false } as ColumnSort,
+      expectedResults: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+      ] as TWorkflow[],
+    },
+    {
+      workflows: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+      ] as TWorkflow[],
+      sorting: { id: 'regions', desc: true } as ColumnSort,
+      expectedResults: [
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+      ] as TWorkflow[],
+    },
+    {
+      workflows: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+      ] as TWorkflow[],
+      sorting: { id: 'name', desc: false } as ColumnSort,
+      expectedResults: [
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+      ] as TWorkflow[],
+    },
+    {
+      workflows: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+      ] as TWorkflow[],
+      sorting: { id: 'name', desc: true } as ColumnSort,
+      expectedResults: [
+        { id: '1', name: 'zz', region: 'EU-WEST' },
+        { id: '3', name: 'bb', region: 'GRA9' },
+        { id: '2', name: 'aa', region: 'SBG5' },
+      ] as TWorkflow[],
+    },
+  ])('should sort workflows with $sorting', ({ workflows, sorting, expectedResults }) => {
+    const result = sortWorkflows(workflows, sorting, []);
+
+    expect(result).toEqual(expectedResults);
+  });
+});

packages/manager/apps/pci-workflow/src/api/hooks/workflows.tsx

@@ -139,7 +139,15 @@ export const sortWorkflows = (
   if (sorting) {
     const { id: sortKey, desc } = sorting;
 
-    data.sort(defaultCompareFunction(sortKey as keyof Omit<TWorkflow, 'executions'>));
+    const comparisonFunction = (() => {
+      if (sortKey === 'regions') {
+        return (a: TWorkflow, b: TWorkflow) => a.region.localeCompare(b.region);
+      } else {
+        return defaultCompareFunction(sortKey as keyof Omit<TWorkflow, 'executions'>);
+      }
+    })();
+
+    data.sort(comparisonFunction);
     if (desc) {
       data.reverse();
     }

packages/manager/apps/pci-workflow/src/pages/list/List.page.tsx

@@ -101,8 +101,8 @@ export default function ListingPage() {
         id: 'regions',
         label: t('pci_workflow_localisation'),
         cell: (workflow) => (
-          <DataGridTextCell>
-            {workflow.regions.map(translateMicroRegion).join(', ')}
+          <DataGridTextCell className="whitespace-pre-line">
+            {workflow.regions.filter(Boolean).map(translateMicroRegion).join(',\n')}
           </DataGridTextCell>
         ),
       },