enhancement: Tables improvements (#1595)

pluralsh · Nov 20, 2024 · 61ec9dc · 61ec9dc
1 parent 876af4b
commit 61ec9dc
Show file tree

Hide file tree

Showing 9 changed files with 1,787 additions and 1,737 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -48,7 +48,7 @@
     "@nivo/pie": "0.87.0",
     "@nivo/radial-bar": "0.87.0",
     "@nivo/tooltip": "0.87.0",
-    "@pluralsh/design-system": "3.78.0",
+    "@pluralsh/design-system": "3.79.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-table": "8.20.5",
@@ -192,12 +192,12 @@
     "typescript": "5.6.2",
     "typescript-eslint": "8.8.0",
     "usehooks-ts": "2.9.1",
-    "vite": "5.4.8",
+    "vite": "5.4.11",
     "vite-bundle-visualizer": "1.2.1",
     "vite-plugin-pwa": "0.20.5",
     "vite-plugin-rewrite-all": "1.0.2",
     "vite-tsconfig-paths": "5.0.1",
-    "vitest": "2.1.1",
+    "vitest": "2.1.5",
     "wait-on": "7.0.1"
   },
   "lint-staged": {

diff --git a/assets/src/components/ai/AITable.tsx b/assets/src/components/ai/AITable.tsx
@@ -16,7 +16,7 @@ import {
 } from 'generated/graphql'
 import { useTheme } from 'styled-components'
 import { AITableEntry } from './AITableEntry.tsx'
-import { TableProps } from '@pluralsh/design-system/dist/components/Table'
+import { TableProps } from '@pluralsh/design-system/dist/components/table/Table'
 
 export function AITable({
   modal = false,

diff --git a/assets/src/components/home/clusteroverview/ClusterOverviewTable.tsx b/assets/src/components/home/clusteroverview/ClusterOverviewTable.tsx
@@ -34,6 +34,7 @@ export function ClusterOverViewTable({
   return (
     <Table
       loose
+      fillLevel={1}
       data={data}
       columns={clusterOverviewColumns}
       reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}

diff --git a/assets/src/components/home/deployments/DeploymentsTable.tsx b/assets/src/components/home/deployments/DeploymentsTable.tsx
@@ -36,6 +36,7 @@ export function DeploymentsTable({
   return (
     <Table
       loose
+      fillLevel={1}
       data={data}
       columns={deploymentsColumns}
       reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}

diff --git a/assets/src/components/home/pullrequests/PrTable.tsx b/assets/src/components/home/pullrequests/PrTable.tsx
@@ -38,6 +38,7 @@ export function PrTable({
   return (
     <Table
       loose
+      fillLevel={1}
       data={data}
       columns={columns}
       reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}

diff --git a/assets/src/components/home/violations/ConstraintViolationsCard.tsx b/assets/src/components/home/violations/ConstraintViolationsCard.tsx
@@ -63,6 +63,7 @@ export function ConstraintViolationsCard() {
         ) : (
           <PoliciesTable
             caret
+            fillLevel={1}
             data={tableData}
             refetch={refetch}
             fetchNextPage={fetchNextPage}

diff --git a/assets/src/components/kubernetes/common/ResourceList.tsx b/assets/src/components/kubernetes/common/ResourceList.tsx
@@ -4,7 +4,6 @@ import type {
   QueryResult,
 } from '@apollo/client/react/types/types'
 import { Table } from '@pluralsh/design-system'
-import styled from 'styled-components'
 import { useNavigate } from 'react-router-dom'
 import { Row, SortingState, TableOptions } from '@tanstack/react-table'
 
@@ -33,38 +32,7 @@ import {
   usePageInfo,
   useSortedTableOptions,
 } from './utils'
-
-const SKELETON_ITEMS = 10
-
-const Skeleton = styled(SkeletonUnstyled)(({ theme }) => ({
-  '@keyframes moving-gradient': {
-    '0%': { backgroundPosition: '-250px 0' },
-    '100%': { backgroundPosition: '250px 0' },
-  },
-
-  maxWidth: '400px',
-  width: '100%',
-
-  span: {
-    borderRadius: theme.borderRadiuses.medium,
-    maxWidth: '400px',
-    width: 'unset',
-    minWidth: '150px',
-    display: 'block',
-    height: '12px',
-    background: `linear-gradient(to right, ${theme.colors.border} 20%, ${theme.colors['border-fill-two']} 50%, ${theme.colors.border} 80%)`,
-    backgroundSize: '500px 100px',
-    animation: 'moving-gradient 2s infinite linear forwards',
-  },
-}))
-
-function SkeletonUnstyled({ ...props }): ReactElement {
-  return (
-    <div {...props}>
-      <span />
-    </div>
-  )
-}
+import { TableSkeleton } from '../../utils/SkeletonLoaders.tsx'
 
 interface ResourceListProps<
   TResourceList,
@@ -126,30 +94,13 @@ export function ResourceList<
   })
 
   const resourceList = data?.[queryName] as TResourceList
-  const isLoading = useMemo(
-    () => loading && !resourceList,
-    [loading, resourceList]
-  )
+  const isLoading = loading && !resourceList
   const items = useMemo(
-    () =>
-      isLoading
-        ? Array(SKELETON_ITEMS).fill({})
-        : ((resourceList?.[itemsKey] as Array<TResource>) ?? []),
-    [isLoading, itemsKey, resourceList]
+    () => (resourceList?.[itemsKey] as Array<TResource>) ?? [],
+    [itemsKey, resourceList]
   )
   const { page, hasNextPage } = usePageInfo(items, resourceList?.listMeta)
 
-  const columnsData = useMemo(
-    () =>
-      isLoading
-        ? columns.map((col) => ({
-            ...col,
-            cell: <Skeleton />,
-          }))
-        : columns,
-    [isLoading, columns]
-  )
-
   const fetchNextPage = useCallback(() => {
     if (!hasNextPage) return
     fetchMore({
@@ -163,13 +114,22 @@ export function ResourceList<
     setNamespaced(namespaced)
   }, [setNamespaced, namespaced])
 
+  if (isLoading) {
+    return (
+      <TableSkeleton
+        numColumns={6}
+        centered
+      />
+    )
+  }
+
   return (
     <>
       <ErrorToast errors={resourceList?.errors} />
       <FullHeightTableWrap>
         <Table
           data={items}
-          columns={columnsData}
+          columns={columns}
           hasNextPage={hasNextPage}
           fetchNextPage={fetchNextPage}
           isFetchingNextPage={loading}

diff --git a/assets/src/components/policies/PoliciesTable.tsx b/assets/src/components/policies/PoliciesTable.tsx
@@ -21,6 +21,7 @@ import {
   ColPolicyName,
   ColViolations,
 } from './PoliciesColumns'
+import { TableFillLevel } from '@pluralsh/design-system/dist/components/table/Table'
 
 const columns = [ColPolicyName, ColCluster, ColViolations, ColDescription]
 const columnsWithActions = [
@@ -40,6 +41,7 @@ export function PoliciesTable({
   loading,
   setVirtualSlice,
   resetFilters,
+  fillLevel,
 }: {
   caret?: boolean
   setRefetch?: (refetch: () => () => void) => void
@@ -49,6 +51,7 @@ export function PoliciesTable({
   loading: boolean
   setVirtualSlice: any
   resetFilters?: () => void
+  fillLevel?: TableFillLevel
 }) {
   const theme = useTheme()
   const navigate = useNavigate()
@@ -83,6 +86,7 @@ export function PoliciesTable({
         <FullHeightTableWrap>
           <Table
             virtualizeRows
+            fillLevel={fillLevel}
             data={data?.policyConstraints?.edges || []}
             columns={caret ? columnsWithActions : columns}
             css={{