fix: pr comments

Signed-off-by: Jonathan Perchoc <[email protected]>

packages/manager/apps/pci-databases-analytics/src/components/data-table/DataTable.tsx → packages/manager/apps/pci-databases-analytics/src/components/data-table/DataTable.component.tsx

@@ -1,8 +1,8 @@
-import React, { ReactElement, useMemo, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { flexRender } from '@tanstack/react-table';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useDataTableContext } from './DataTableContext';
+import { useDataTableContext } from './DataTable.context';
 import {
   Table,
   TableBody,
@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/table';
 import { Button } from '../ui/button';
 
-export const MENU_COLUMN_ID = 'actions';
+export const MENU_COLUMN_ID = 'actions_menu_column';
 
 interface DatatableProps<TData> {
   renderRowExpansion?: (row: TData) => ReactElement | null;

packages/manager/apps/pci-databases-analytics/src/components/data-table/DataTableContext.tsx → packages/manager/apps/pci-databases-analytics/src/components/data-table/DataTable.context.tsx

@@ -12,9 +12,9 @@ import {
 import { ReactNode, createContext, useContext, useMemo, useState } from 'react';
 import { useColumnFilters } from './useColumnFilters.hook';
 import { applyFilters } from '@/lib/filters';
-import { ColumnFilter } from './DatatableDefaultFilterButton';
-import { DataTable } from './DataTable';
-import { DataTablePagination } from './DatatablePagination';
+import { ColumnFilter } from './DatatableDefaultFilterButton.component';
+import { DataTable } from './DataTable.component';
+import { DataTablePagination } from './DatatablePagination.component';
 
 interface DataTableProviderProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];

packages/manager/apps/pci-databases-analytics/src/components/data-table/Datatable.spec.ts

@@ -0,0 +1,7 @@
+import { describe, it } from 'vitest';
+
+describe('Datatable component', () => {
+  it('should work', async () => {
+    expect(true).toBe(true);
+  });
+});

packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableAction.component.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export function DatatableAction({ children }: { children: ReactNode }) {
+  return <>{children || <></>}</>;
+}

packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableFiltersButton.tsx → packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableFiltersButton.component.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { useDataTableContext } from './DataTableContext';
-import DataTableDefaultFilterButton from './DatatableDefaultFilterButton';
+import { useDataTableContext } from './DataTable.context';
+import DataTableDefaultFilterButton from './DatatableDefaultFilterButton.component';
 
-const DatatableFiltersButton = ({ children }: { children?: ReactNode }) => {
+export function DatatableFiltersButton({ children }: { children?: ReactNode }) {
   const { filtersDefinition, columnFilters } = useDataTableContext();
   if (!filtersDefinition?.length) return <></>;
   return (
@@ -20,6 +20,4 @@ const DatatableFiltersButton = ({ children }: { children?: ReactNode }) => {
       )}
     </>
   );
-};
-
-export default DatatableFiltersButton;
+}

packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableFiltersList.tsx → packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableFiltersList.component.tsx

@@ -5,7 +5,7 @@ import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';
 import './translations';
 import { useLocale } from '@/hooks/useLocale';
-import { useDataTableContext } from './DataTableContext';
+import { useDataTableContext } from './DataTable.context';
 
 export declare enum FilterComparator {
   Includes = 'includes',

packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatablePagination.tsx → packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatablePagination.component.tsx

@@ -13,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../ui/select';
-import { useDataTableContext } from './DataTableContext';
+import { useDataTableContext } from './DataTable.context';
 
 export function DataTablePagination() {
   const { t } = useTranslation('pci-databases-analytics/components/data-table');

packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableSearchBar.tsx → packages/manager/apps/pci-databases-analytics/src/components/data-table/DatatableSearchBar.component.tsx

@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 import { Search } from 'lucide-react';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
-import { useDataTableContext } from './DataTableContext';
+import { useDataTableContext } from './DataTable.context';
 
-const DatatableSearchBar = ({ children }: { children?: ReactNode }) => {
+export function DatatableSearchBar({ children }: { children?: ReactNode }) {
   const { table, globalFilter } = useDataTableContext();
   return (
     <>
@@ -26,6 +26,4 @@ const DatatableSearchBar = ({ children }: { children?: ReactNode }) => {
       )}
     </>
   );
-};
-
-export default DatatableSearchBar;
+}

packages/manager/apps/pci-databases-analytics/src/components/data-table/index.ts

@@ -1,13 +1,13 @@
-import { DataTable as Table } from './DataTable';
-import { DataTableProvider } from './DataTableContext';
-import DatatableAction from './DatatableAction';
-import DatatableFiltersButton from './DatatableFiltersButton';
-import { DatatableFiltersList } from './DatatableFiltersList';
-import { DatatableHeader } from './DatatableHeader';
-import { DataTablePagination } from './DatatablePagination';
-import DatatableSearchBar from './DatatableSearchBar';
-import { DatatableSkeleton } from './DatatableSkeleton';
-import { DatatableSortableHeader } from './DatatableSortableHeader';
+import { DataTable as Table } from './DataTable.component';
+import { DataTableProvider } from './DataTable.context';
+import { DatatableAction } from './DatatableAction.component';
+import { DatatableFiltersButton } from './DatatableFiltersButton.component';
+import { DatatableFiltersList } from './DatatableFiltersList.component';
+import { DatatableHeader } from './DatatableHeader.component';
+import { DataTablePagination } from './DatatablePagination.component';
+import { DatatableSearchBar } from './DatatableSearchBar.component';
+import { DatatableSkeleton } from './DatatableSkeleton.component';
+import { DatatableSortableHeader } from './DatatableSortableHeader.component';
 
 const DataTable = {
   Provider: DataTableProvider,

packages/manager/apps/pci-databases-analytics/src/components/data-table/useColumnFilters.hook.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Filter } from '@/lib/filters';
-import { FilterWithLabel } from './DatatableFiltersList';
+import { FilterWithLabel } from './DatatableFiltersList.component';
 
 const filterEquals = (a: Filter, b: Filter) =>
   a.key === b.key && a.value === b.value && a.comparator === b.comparator;

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/backups/_components/BackupsTableColumns.component.tsx

@@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button';
 import { useServiceData } from '../../Service.context';
 import * as database from '@/types/cloud/project/database';
 import DataTable from '@/components/data-table';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface BackupsTableColumnsProps {
   onForkClick: (backup: BackupWithExpiricyDate) => void;
@@ -95,7 +96,7 @@ export const getColumns = ({
     },
   };
   const actionsColumn: ColumnDef<BackupWithExpiricyDate> = {
-    id: 'actions',
+    id: MENU_COLUMN_ID,
     cell: ({ row }) => {
       return (
         <div className="flex justify-end">

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/databases/_components/DatabasesTableColumns.component.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/components/ui/tooltip';
 import * as database from '@/types/cloud/project/database';
 import { useServiceData } from '../../Service.context';
-import { MENU_COLUMN_ID } from '@/components/data-table/DataTable';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 import DataTable from '@/components/data-table';
 
 interface DatabasesTableColumnsProps {

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/integrations/_components/IntegrationListColumns.component.tsx

@@ -14,6 +14,7 @@ import UserStatusBadge from '../../users/_components/UserStatusBadge.component';
 import { IntegrationWithServices } from '../Integrations.page';
 import IntegrationServiceLink from './IntegrationServiceLink.component';
 import DataTable from '@/components/data-table';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface IntegrationsTableColumnsProps {
   onDeleteClick: (db: database.service.Integration) => void;
@@ -70,7 +71,7 @@ export const getColumns = ({
       cell: ({ row }) => <UserStatusBadge status={row.original.status} />,
     },
     {
-      id: 'actions',
+      id: MENU_COLUMN_ID,
       cell: ({ row }) => {
         return (
           <div className="flex justify-end">

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/namespaces/_components/NamespacesTableColumns.component.tsx

@@ -22,6 +22,7 @@ import * as database from '@/types/cloud/project/database';
 import { durationStringToHuman } from '@/lib/durationHelper';
 import { useServiceData } from '../../Service.context';
 import DataTable from '@/components/data-table';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface NamespacesTableColumnsProps {
   onEditClick: (namespace: database.m3db.Namespace) => void;
@@ -75,7 +76,7 @@ export const getColumns = ({
       accessorFn: (row) => durationStringToHuman(row.resolution, dateLocale),
     },
     {
-      id: 'actions',
+      id: MENU_COLUMN_ID,
       cell: ({ row }) => {
         return (
           <div className="flex justify-end">

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/pools/_components/PoolsTableColumns.component.tsx

@@ -19,6 +19,7 @@ import { Button } from '@/components/ui/button';
 import { ConnectionPoolWithData } from '../Pools.page';
 import { useServiceData } from '../../Service.context';
 import * as database from '@/types/cloud/project/database';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface ConnectionPoolsTableColumnsProps {
   onGetInformationClick: (connectionPool: ConnectionPoolWithData) => void;
@@ -81,7 +82,7 @@ export const getColumns = ({
       accessorFn: (row) => (row.user ? row.user.username : ''),
     },
     {
-      id: 'actions',
+      id: MENU_COLUMN_ID,
       cell: ({ row }) => {
         return (
           <div className="flex justify-end">

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/queries/_components/CurrentQueriesTableColumns.component.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from '@/components/ui/button';
 import * as database from '@/types/cloud/project/database';
 import { useServiceData } from '../../Service.context';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface CurrentQueriesListColumnsProps {
   onCancelQueryClicked: (query: database.service.currentqueries.Query) => void;
@@ -80,7 +81,7 @@ export const getColumns = ({
       accessorFn: (row) => row.applicationName,
     },
     {
-      id: 'actions',
+      id: MENU_COLUMN_ID,
       cell: ({ row }) => (
         <div className="w-full text-right pr-2">
           <DropdownMenu>

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/users/_components/UsersTableColumns.component.tsx

@@ -6,7 +6,7 @@ import { GenericUser } from '@/data/api/database/user.api';
 import DataTable from '@/components/data-table';
 import UserStatusBadge from './UserStatusBadge.component';
 import UserActions from './UsersTableActions.component';
-import { MENU_COLUMN_ID } from '@/components/data-table/DataTable';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface UserListColumnsProps {
   displayGroupCol: boolean;

packages/manager/apps/pci-databases-analytics/src/pages/services/_components/ServiceListColumns.component.tsx

@@ -10,7 +10,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
@@ -21,6 +20,7 @@ import Link from '@/components/links/Link.component';
 import { useTrackAction } from '@/hooks/useTracking';
 import { TRACKING } from '@/configuration/tracking.constants';
 import { formatStorage } from '@/lib/bytesHelper';
+import { MENU_COLUMN_ID } from '@/components/data-table/DataTable.component';
 
 interface ServiceListColumnsProps {
   onRenameClicked: (service: database.Service) => void;
@@ -230,7 +230,7 @@ export const getColumns = ({
       },
     },
     {
-      id: 'actions',
+      id: MENU_COLUMN_ID,
       enableGlobalFilter: false,
       cell: ({ row }) => {
         const service = row.original;
@@ -251,7 +251,6 @@ export const getColumns = ({
               data-testid="services-action-content"
               align="end"
             >
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
               <DropdownMenuItem
                 variant="primary"
                 onClick={() => navigate(`./${row.original.id}`)}

packages/manager/apps/pci-databases-analytics/src/pages/services/_components/ServiceListFilters.component.tsx

@@ -3,13 +3,19 @@ import * as database from '@/types/cloud/project/database';
 import { humanizeEngine } from '@/lib/engineNameHelper';
 import { FilterCategories } from '@/lib/filters';
 import ServiceStatusBadge from './ServiceStatusBadge.component';
+import {
+  FLAVORS_OPTIONS,
+  PLANS_OPTIONS,
+  REGIONS_OPTIONS,
+} from './ServiceListFilters.constants';
 
 export const getFilters = () => {
+  const { t } = useTranslation('pci-databases-analytics/services');
   const { t: tRegions } = useTranslation('regions');
   return [
     {
       id: 'description',
-      label: 'Nom',
+      label: t('tableHeaderName'),
       comparators: FilterCategories.String,
     },
     {
@@ -19,7 +25,7 @@ export const getFilters = () => {
     },
     {
       id: 'engine',
-      label: 'Engine',
+      label: t('tableHeaderEngine'),
       comparators: FilterCategories.Options,
       options: Object.values(database.EngineEnum).map((value) => ({
         label: humanizeEngine(value),
@@ -28,58 +34,36 @@ export const getFilters = () => {
     },
     {
       id: 'plan',
-      label: 'Plan',
+      label: t('tableHeaderPlan'),
       comparators: FilterCategories.Options,
-      options: [
-        'Discovery',
-        'Production',
-        'Advanced',
-        'Essential',
-        'Business',
-        'Enterprise',
-      ].map((plan) => ({ label: plan, value: plan })),
+      options: PLANS_OPTIONS.map((plan) => ({ label: plan, value: plan })),
     },
     {
       id: 'nodes[0].region',
-      label: 'Region',
+      label: t('tableHeaderLocation'),
       comparators: FilterCategories.Options,
-      options: ['BHS', 'DE', 'GRA', 'SBG', 'UK', 'WAW'].map((region) => ({
+      options: REGIONS_OPTIONS.map((region) => ({
         label: tRegions(`region_${region}`),
         value: region,
       })),
     },
     {
       id: 'flavor',
-      label: 'Flavor',
+      label: t('tableHeaderFlavor'),
       comparators: FilterCategories.Options,
-      options: [
-        'db2-free',
-        'db2-2',
-        'db2-4',
-        'db2-7',
-        'db2-15',
-        'db2-30',
-        'db2-60',
-        'db2-120',
-        'db1-4',
-        'db1-7',
-        'db1-15',
-        'db1-30',
-        'db1-60',
-        'db1-120',
-      ].map((flavor) => ({
+      options: FLAVORS_OPTIONS.map((flavor) => ({
         label: <span className="capitalize">{flavor}</span>,
         value: flavor,
       })),
     },
     {
       id: 'createdAt',
-      label: 'Date de création',
+      label: t('tableHeaderEngine'),
       comparators: FilterCategories.Date,
     },
     {
       id: 'status',
-      label: 'Statut',
+      label: t('tableHeaderStatus'),
       comparators: FilterCategories.Options,
       options: Object.values(database.StatusEnum).map((value) => ({
         label: <ServiceStatusBadge status={value} />,