From aab23e8b629141a4d7954581b49092f8b17f4d49 Mon Sep 17 00:00:00 2001
From: Jules <jules@MacBook-Pro.local>
Date: Thu, 1 Aug 2024 10:43:07 +0200
Subject: [PATCH] [front] - feature: update @dust-tt/sparkle to version 0.2.197

 - Upgraded @dust-tt/sparkle from a release candidate to a stable version, ensuring the use of the latest features and fixes
 - Included new dependency @tanstack/react-table to enhance table components within the platform

[front] - refactor: migrate Table to DataTable component

 - Replaced the Table component with the new DataTable component from @dust-tt/sparkle to leverage the latest library updates
 - Adjusted table cell components to align with the DataTable API changes for consistency and improved maintainability
---
 front/package-lock.json                       |  9 +++++----
 front/package.json                            |  2 +-
 .../w/[wId]/builder/data-sources/static.tsx   | 20 +++++++++----------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/front/package-lock.json b/front/package-lock.json
index 7446142e3abba..067374a7cf628 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -9,7 +9,7 @@
         "@amplitude/analytics-browser": "^2.5.2",
         "@amplitude/analytics-node": "^1.3.5",
         "@auth0/nextjs-auth0": "^3.5.0",
-        "@dust-tt/sparkle": "0.2.194-rc3",
+        "@dust-tt/sparkle": "^0.2.197",
         "@dust-tt/types": "file:../types",
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
@@ -10735,13 +10735,14 @@
       "license": "Apache-2.0"
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.194-rc3",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.194-rc3.tgz",
-      "integrity": "sha512-GZBzCNNVDlBf5UKkMgWE0yIwnWL4eRAvf8CRdwlHVcxg1rvWyvH3Q6DzU87iIAxM84h3+90IN1Xs03r6rozg1A==",
+      "version": "0.2.197",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.197.tgz",
+      "integrity": "sha512-H1lmZ+CrjIsABO5vsMFZZrBTcUNpc4OtJuVsWQCJSm7Z4TnpeSNrg/u6TY2049lj8AIxtMQH4mNtLHpYXhqT2A==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
         "@headlessui/react": "^1.7.19",
+        "@tanstack/react-table": "^8.13.0",
         "emoji-mart": "^5.5.2",
         "esbuild": "^0.20.0",
         "eslint-plugin-import": "^2.29.1",
diff --git a/front/package.json b/front/package.json
index 0922e9856dfa3..b41729b5725e1 100644
--- a/front/package.json
+++ b/front/package.json
@@ -21,7 +21,7 @@
     "@amplitude/analytics-browser": "^2.5.2",
     "@amplitude/analytics-node": "^1.3.5",
     "@auth0/nextjs-auth0": "^3.5.0",
-    "@dust-tt/sparkle": "0.2.194-rc3",
+    "@dust-tt/sparkle": "^0.2.197",
     "@dust-tt/types": "file:../types",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
diff --git a/front/pages/w/[wId]/builder/data-sources/static.tsx b/front/pages/w/[wId]/builder/data-sources/static.tsx
index 4c4f5b71ae9cf..5446a141f40b9 100644
--- a/front/pages/w/[wId]/builder/data-sources/static.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/static.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  DataTable,
   FolderIcon,
   FolderOpenIcon,
   Page,
@@ -7,8 +8,6 @@ import {
   Popup,
   RobotIcon,
   Searchbar,
-  Table,
-  TableData,
 } from "@dust-tt/sparkle";
 import type { DataSourceType, WorkspaceType } from "@dust-tt/types";
 import type { PlanType, SubscriptionType } from "@dust-tt/types";
@@ -176,10 +175,9 @@ export default function DataSourcesView({
           />
         )}
         {clickableDataSources.length > 0 && (
-          <Table
+          <DataTable
             data={clickableDataSources}
             columns={columns}
-            width="expanded"
             filter={dataSourceSearch}
             filterColumn={"name"}
           />
@@ -203,24 +201,24 @@ function getTableColumns() {
       header: "Name",
       accessorKey: "name",
       cell: (info: Info) => (
-        <TableData.Cell icon={info.row.original.icon}>
+        <DataTable.Cell icon={info.row.original.icon}>
           {info.row.original.name}
-        </TableData.Cell>
+        </DataTable.Cell>
       ),
     },
     {
       header: "Used by",
       accessorKey: "usage",
       cell: (info: Info) => (
-        <TableData.Cell icon={RobotIcon}>
+        <DataTable.Cell icon={RobotIcon}>
           {info.row.original.usage}
-        </TableData.Cell>
+        </DataTable.Cell>
       ),
     },
     {
       header: "Added by",
       cell: (info: Info) => (
-        <TableData.Cell
+        <DataTable.Cell
           avatarUrl={info.row.original.editedByUser?.imageUrl ?? ""}
         />
       ),
@@ -229,13 +227,13 @@ function getTableColumns() {
       header: "Last updated",
       accessorKey: "editedByUser.editedAt",
       cell: (info: Info) => (
-        <TableData.Cell>
+        <DataTable.Cell>
           {info.row.original.editedByUser?.editedAt
             ? new Date(
                 info.row.original.editedByUser.editedAt
               ).toLocaleDateString()
             : null}
-        </TableData.Cell>
+        </DataTable.Cell>
       ),
     },
   ];