chore: change default table rowSize (#1721)

getlago · Sep 9, 2024 · 6d3f5c4 · 6d3f5c4
1 parent 183ab89
commit 6d3f5c4
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 4 deletions.
diff --git a/src/components/designSystem/Table/Table.tsx b/src/components/designSystem/Table/Table.tsx
@@ -57,7 +57,7 @@ export type ActionItem<T> = {
 }
 
 type ContainerSize = 0 | 4 | 16 | 48
-type RowSize = 44 | 56
+type RowSize = 48 | 72
 
 interface TableProps<T> {
   name: string
@@ -94,7 +94,7 @@ export const Table = <T extends DataItem>({
   isLoading,
   hasError,
   containerSize = 48,
-  rowSize = 56,
+  rowSize = 48,
   placeholder,
   onRowAction,
   actionColumn,

diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-alert */
-import { InputAdornment, Stack } from '@mui/material'
+import { Box, InputAdornment, Stack } from '@mui/material'
 import { useFormik } from 'formik'
 import { useRef } from 'react'
 import { generatePath, Link } from 'react-router-dom'
@@ -49,7 +49,12 @@ import { addToast } from '~/core/apolloClient'
 import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
 import { ONLY_DEV_DESIGN_SYSTEM_ROUTE, ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE } from '~/core/router'
 import { CurrencyEnum } from '~/generated/graphql'
-import { chargeTableData, POSSIBLE_TOAST, tableData } from '~/pages/__devOnly/fixtures'
+import {
+  chargeTableData,
+  currentUsageTableData,
+  POSSIBLE_TOAST,
+  tableData,
+} from '~/pages/__devOnly/fixtures'
 import Stripe from '~/public/images/stripe.svg'
 import { MenuPopper, PageHeader, theme } from '~/styles'
 
@@ -612,6 +617,51 @@ const DesignSystem = () => {
                       },
                     ]}
                   />
+
+                  <Table
+                    name="display-table"
+                    containerSize={0}
+                    rowSize={72}
+                    data={currentUsageTableData}
+                    isLoading={false}
+                    columns={[
+                      {
+                        key: 'chargeName',
+                        title: 'Customer',
+                        content: (row) => (
+                          <Box display={'grid'}>
+                            <Typography variant="body" color="grey700" noWrap>
+                              {row.chargeName}
+                            </Typography>
+                            <Typography variant="caption" color="grey600" noWrap>
+                              {row.chargeCode}
+                              {row.hasFilterBreakdown ? ' • with breakdown' : ''}
+                            </Typography>
+                          </Box>
+                        ),
+                      },
+                      {
+                        key: 'units',
+                        title: 'Units',
+                        content: (row) => (
+                          <Typography variant="body" color="grey700">
+                            {row.units}
+                          </Typography>
+                        ),
+                      },
+                      {
+                        key: 'amount',
+                        title: 'Amount',
+                        textAlign: 'right',
+                        content: (row) => (
+                          <Typography variant="body" color="grey700">
+                            {intlFormatNumber(row.amount)}
+                          </Typography>
+                        ),
+                      },
+                    ]}
+                    onRowAction={(item) => alert(`You clicked on ${item.id}`)}
+                  />
                 </Block>
               </Container>
             ),

diff --git a/src/pages/__devOnly/fixtures.ts b/src/pages/__devOnly/fixtures.ts
@@ -104,3 +104,53 @@ export const chargeTableData: Array<{
     icon: 'company',
   },
 ]
+
+export const currentUsageTableData: Array<{
+  id: string
+  amount: number
+  chargeCode: string
+  chargeName: string
+  hasFilterBreakdown: boolean
+  units: number
+}> = [
+  {
+    id: '0',
+    chargeName: 'GiB Hours',
+    chargeCode: 'memory_heartbeat',
+    hasFilterBreakdown: true,
+    amount: 1000,
+    units: 123,
+  },
+  {
+    id: '1',
+    chargeName: 'CPU Hours',
+    chargeCode: 'cpu_heartbeat',
+    hasFilterBreakdown: false,
+    amount: 1000,
+    units: 123,
+  },
+  {
+    id: '2',
+    chargeName: 'SOC2 Compliance',
+    chargeCode: 'compliance',
+    hasFilterBreakdown: false,
+    amount: 1000,
+    units: 123,
+  },
+  {
+    id: '3',
+    chargeName: 'Datastores',
+    chargeCode: 'datastores',
+    hasFilterBreakdown: false,
+    amount: 1000,
+    units: 123,
+  },
+  {
+    id: '4',
+    chargeName: 'Multi Cluster',
+    chargeCode: 'multicluster',
+    hasFilterBreakdown: false,
+    amount: 1000,
+    units: 123,
+  },
+]