[front] - fix: ensure type safety and null checks in data sources tables

- Introduced a new TypeScript interface to improve type checking for the cell rendering functions in data source tables - Added null checks for the `editedByUser` field and fallbacks for missing `imageUrl` and `editedAt` properties to prevent runtime errors - Ensured the display of formatted dates accounts for possible null values in `editedAt` field
dust-tt · Jul 31, 2024 · d7b1fd2 · d7b1fd2
1 parent 8d0c97d
commit d7b1fd2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/front/pages/w/[wId]/builder/data-sources/public-urls.tsx b/front/pages/w/[wId]/builder/data-sources/public-urls.tsx
@@ -19,6 +19,7 @@ import type {
 import { ConnectorsAPI } from "@dust-tt/types";
 import type { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
+import type { ComponentType } from "react";
 import { useMemo, useRef, useState } from "react";
 import * as React from "react";
 
@@ -233,11 +234,19 @@ export default function DataSourcesView({
 }
 
 function getTableColumns() {
+  // to please typescript
+  type OriginalType = DataSourceType & {
+    icon: ComponentType;
+    usage: number;
+  };
+  interface Info {
+    row: { original: OriginalType };
+  }
   return [
     {
       header: "Name",
       accessorKey: "name",
-      cell: (info) => (
+      cell: (info: Info) => (
         <TableData.Cell icon={info.row.original.icon}>
           {info.row.original.name}
         </TableData.Cell>
@@ -246,26 +255,30 @@ function getTableColumns() {
     {
       header: "Used by",
       accessorKey: "usage",
-      cell: (info) => (
+      cell: (info: Info) => (
         <TableData.Cell icon={RobotIcon}>
           {info.row.original.usage}
         </TableData.Cell>
       ),
     },
     {
       header: "Added by",
-      cell: (info) => (
-        <TableData.Cell avatarUrl={info.row.original.editedByUser.imageUrl} />
+      cell: (info: Info) => (
+        <TableData.Cell
+          avatarUrl={info.row.original.editedByUser?.imageUrl ?? ""}
+        />
       ),
     },
     {
       header: "Last updated",
       accessorKey: "editedByUser.editedAt",
-      cell: (info) => (
+      cell: (info: Info) => (
         <TableData.Cell>
-          {new Date(
-            info.row.original.editedByUser.editedAt
-          ).toLocaleDateString()}
+          {info.row.original.editedByUser?.editedAt
+            ? new Date(
+                info.row.original.editedByUser.editedAt
+              ).toLocaleDateString()
+            : null}
         </TableData.Cell>
       ),
     },

diff --git a/front/pages/w/[wId]/builder/data-sources/static.tsx b/front/pages/w/[wId]/builder/data-sources/static.tsx
@@ -14,6 +14,7 @@ import type { DataSourceType, WorkspaceType } from "@dust-tt/types";
 import type { PlanType, SubscriptionType } from "@dust-tt/types";
 import type { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
+import type { ComponentType } from "react";
 import { useMemo, useRef, useState } from "react";
 import * as React from "react";
 
@@ -189,11 +190,19 @@ export default function DataSourcesView({
 }
 
 function getTableColumns() {
+  // to please typescript
+  type OriginalType = DataSourceType & {
+    icon: ComponentType;
+    usage: number;
+  };
+  interface Info {
+    row: { original: OriginalType };
+  }
   return [
     {
       header: "Name",
       accessorKey: "name",
-      cell: (info) => (
+      cell: (info: Info) => (
         <TableData.Cell icon={info.row.original.icon}>
           {info.row.original.name}
         </TableData.Cell>
@@ -202,26 +211,30 @@ function getTableColumns() {
     {
       header: "Used by",
       accessorKey: "usage",
-      cell: (info) => (
+      cell: (info: Info) => (
         <TableData.Cell icon={RobotIcon}>
           {info.row.original.usage}
         </TableData.Cell>
       ),
     },
     {
       header: "Added by",
-      cell: (info) => (
-        <TableData.Cell avatarUrl={info.row.original.editedByUser.imageUrl} />
+      cell: (info: Info) => (
+        <TableData.Cell
+          avatarUrl={info.row.original.editedByUser?.imageUrl ?? ""}
+        />
       ),
     },
     {
       header: "Last updated",
       accessorKey: "editedByUser.editedAt",
-      cell: (info) => (
+      cell: (info: Info) => (
         <TableData.Cell>
-          {new Date(
-            info.row.original.editedByUser.editedAt
-          ).toLocaleDateString()}
+          {info.row.original.editedByUser?.editedAt
+            ? new Date(
+                info.row.original.editedByUser.editedAt
+              ).toLocaleDateString()
+            : null}
         </TableData.Cell>
       ),
     },