misc: use Table component for plan list (#1958)

getlago · Jan 2, 2025 · 858049f · 858049f
1 parent 6fac670
commit 858049f
Show file tree

Hide file tree

Showing 8 changed files with 204 additions and 385 deletions.
diff --git a/cypress/e2e/10-resources/t40-create-plan.cy.ts b/cypress/e2e/10-resources/t40-create-plan.cy.ts
@@ -7,7 +7,7 @@ describe('Create plan', () => {
 
   it('should be able to access plans', () => {
     cy.get('[data-test="create-plan"]').should('exist')
-    cy.get('[data-test="empty"]').should('exist')
+    cy.get('[data-test="empty-state"]').should('exist')
   })
 
   it('should be able to create a simple plan', () => {

diff --git a/cypress/e2e/10-resources/t50-edit-plan.cy.ts b/cypress/e2e/10-resources/t50-edit-plan.cy.ts
@@ -11,8 +11,8 @@ describe('Edit plan', () => {
 
   it('should be able to close the form without warning dialog when no data has changed', () => {
     cy.visit('/plans')
-    cy.get(`[data-test="${planWithChargesName}-wrapper"]`).within(() => {
-      cy.get('[data-test="plan-item-options"]').click({ force: true })
+    cy.get(`[data-test="${planWithChargesName}"] [data-test="open-action-button"]`).click({
+      force: true,
     })
     cy.get('[data-test="tab-internal-button-link-update-plan"]').click({ force: true })
     cy.get('input[name="name"]').should('exist')
@@ -23,8 +23,8 @@ describe('Edit plan', () => {
 
   it('should be able to update all information of unused plan', () => {
     cy.visit('/plans')
-    cy.get(`[data-test="${planWithChargesName}-wrapper"]`).within(() => {
-      cy.get('[data-test="plan-item-options"]').click({ force: true })
+    cy.get(`[data-test="${planWithChargesName}"] [data-test="open-action-button"]`).click({
+      force: true,
     })
     cy.get('[data-test="tab-internal-button-link-update-plan"]').click({ force: true })
     cy.get('input[name="name"]').should('not.be.disabled')
@@ -64,8 +64,8 @@ describe('Edit plan', () => {
 
   it('should not be able to update all information of an used plan', () => {
     cy.visit('/plans')
-    cy.get(`[data-test="${planWithChargesName}-wrapper"]`).within(() => {
-      cy.get('[data-test="plan-item-options"]').click({ force: true })
+    cy.get(`[data-test="${planWithChargesName}"] [data-test="open-action-button"]`).click({
+      force: true,
     })
     cy.get('[data-test="tab-internal-button-link-update-plan"]').click({ force: true })
     cy.get('input[name="name"]').should('not.be.disabled')

diff --git a/src/components/GenericPlaceholder.tsx b/src/components/GenericPlaceholder.tsx
@@ -39,6 +39,7 @@ export const GenericPlaceholder = ({
         },
         className,
       )}
+      data-test="empty-state"
       {...props}
     >
       {image}

diff --git a/src/components/designSystem/Table/Table.tsx b/src/components/designSystem/Table/Table.tsx
@@ -78,6 +78,7 @@ interface TableProps<T> {
   onRowAction?: (item: T) => void
   actionColumn?: (item: T) => Array<ActionItem<T> | null> | ReactNode
   actionColumnTooltip?: (item: T) => string
+  rowDataTestId?: (item: T) => string
   containerSize?: ResponsiveStyleValue<TableContainerSize>
   rowSize?: RowSize
 }
@@ -333,6 +334,7 @@ export const Table = <T extends DataItem>({
   onRowAction,
   actionColumn,
   actionColumnTooltip,
+  rowDataTestId,
 }: TableProps<T>) => {
   const TABLE_ID = `table-${name}`
   const filteredColumns = columns.filter((column) => !!column)
@@ -519,6 +521,7 @@ export const Table = <T extends DataItem>({
                   tabIndex={isClickable ? 0 : undefined}
                   onKeyDown={isClickable ? onKeyDown : undefined}
                   onClick={isClickable ? (e) => handleRowClick(e, item) : undefined}
+                  data-test={rowDataTestId?.(item)}
                 >
                   {filteredColumns.map((column, j) => (
                     <TableCell
@@ -551,7 +554,11 @@ export const Table = <T extends DataItem>({
                                   disableHoverListener={isOpen}
                                   title={actionColumnTooltip?.(item) || null}
                                 >
-                                  <Button icon="dots-horizontal" variant="quaternary" />
+                                  <Button
+                                    icon="dots-horizontal"
+                                    variant="quaternary"
+                                    data-test="open-action-button"
+                                  />
                                 </Tooltip>
                               </PopperOpener>
                             )}

diff --git a/src/components/designSystem/__tests__/Table.test.tsx b/src/components/designSystem/__tests__/Table.test.tsx
@@ -106,11 +106,11 @@ describe('Table', () => {
 
     expect(bodyRows).toHaveLength(4)
     expect(within(bodyRows[0]).queryAllByRole('cell')).toHaveLength(3)
-    expect(within(bodyRows[0]).queryByTestId('button')).toBeInTheDocument()
+    expect(within(bodyRows[0]).queryByTestId('open-action-button')).toBeInTheDocument()
 
     // Click on action menu
     await waitFor(() =>
-      userEvent.click(within(bodyRows[0]).queryByTestId('button') as HTMLButtonElement),
+      userEvent.click(within(bodyRows[0]).queryByTestId('open-action-button') as HTMLButtonElement),
     )
 
     // Check if action menu is visible

diff --git a/src/components/plans/PlanItem.tsx b/src/components/plans/PlanItem.tsx
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -7163,8 +7163,6 @@ export type GraduatedPercentageChargeFragment = { __typename?: 'Properties', gra
 
 export type PackageChargeFragment = { __typename?: 'Properties', amount?: string | null, packageSize?: any | null, freeUnits?: any | null };
 
-export type PlanItemFragment = { __typename?: 'Plan', id: string, name: string, code: string, chargesCount: number, activeSubscriptionsCount: number, createdAt: any, draftInvoicesCount: number };
-
 export type TaxForPlanSettingsSectionFragment = { __typename?: 'Tax', id: string, code: string, name: string, rate: number };
 
 export type PlanForSettingsSectionFragment = { __typename?: 'Plan', id: string, amountCurrency: CurrencyEnum, code: string, description?: string | null, interval: PlanInterval, name: string, taxes?: Array<{ __typename?: 'Tax', id: string, code: string, name: string, rate: number }> | null };
@@ -8692,6 +8690,8 @@ export type GetPlanForDetailsQueryVariables = Exact<{
 
 export type GetPlanForDetailsQuery = { __typename?: 'Query', plan?: { __typename?: 'Plan', id: string, name: string, code: string, draftInvoicesCount: number, activeSubscriptionsCount: number, parent?: { __typename?: 'Plan', id: string } | null } | null };
 
+export type PlanItemFragment = { __typename?: 'Plan', id: string, name: string, code: string, chargesCount: number, activeSubscriptionsCount: number, createdAt: any, draftInvoicesCount: number };
+
 export type PlansQueryVariables = Exact<{
   page?: InputMaybe<Scalars['Int']['input']>;
   limit?: InputMaybe<Scalars['Int']['input']>;
@@ -9712,25 +9712,6 @@ export const BillableMetricForChargeSectionFragmentDoc = gql`
   }
 }
     `;
-export const DeletePlanDialogFragmentDoc = gql`
-    fragment DeletePlanDialog on Plan {
-  id
-  name
-  draftInvoicesCount
-  activeSubscriptionsCount
-}
-    `;
-export const PlanItemFragmentDoc = gql`
-    fragment PlanItem on Plan {
-  id
-  name
-  code
-  chargesCount
-  activeSubscriptionsCount
-  createdAt
-  ...DeletePlanDialog
-}
-    ${DeletePlanDialogFragmentDoc}`;
 export const PlanSubscriptionListItemForSubscriptionListFragmentDoc = gql`
     fragment PlanSubscriptionListItemForSubscriptionList on Subscription {
   id
@@ -11781,6 +11762,25 @@ export const SalesforceIntegrationInfosForInvoiceOverviewFragmentDoc = gql`
   instanceId
 }
     `;
+export const DeletePlanDialogFragmentDoc = gql`
+    fragment DeletePlanDialog on Plan {
+  id
+  name
+  draftInvoicesCount
+  activeSubscriptionsCount
+}
+    `;
+export const PlanItemFragmentDoc = gql`
+    fragment PlanItem on Plan {
+  id
+  name
+  code
+  chargesCount
+  activeSubscriptionsCount
+  createdAt
+  ...DeletePlanDialog
+}
+    ${DeletePlanDialogFragmentDoc}`;
 export const ApiKeyRevealedForApiKeysListFragmentDoc = gql`
     fragment ApiKeyRevealedForApiKeysList on ApiKey {
   id
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,7 @@ export const GenericPlaceholder = ({ @@
             },
             className,
           )}
+          data-test="empty-state"
           {...props}
         >
           {image}
@@ Expand Down @@