search tables & columns

outerbase · Jan 30, 2025 · 43b465c · 43b465c
1 parent 34c1f37
commit 43b465c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 35 deletions.
diff --git a/src/components/listview/index.tsx b/src/components/listview/index.tsx
@@ -19,6 +19,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import HighlightText from "../ui/highlight-text";
 
 export interface ListViewItem<T = unknown> {
   key: string;
@@ -57,31 +58,6 @@ interface ListViewRendererProps<T> extends ListViewProps<T> {
   contextOpen: boolean;
 }
 
-function Highlight({ text, highlight }: { text: string; highlight?: string }) {
-  if (!highlight) return <span>{text}</span>;
-
-  const regex = new RegExp(
-    "(" + (highlight ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
-    "i"
-  );
-
-  const splitedText = text.split(regex);
-
-  return (
-    <span>
-      {splitedText.map((text, idx) => {
-        return text.toLowerCase() === (highlight ?? "").toLowerCase() ? (
-          <span key={idx} className="bg-yellow-300 text-black">
-            {text}
-          </span>
-        ) : (
-          <span key={idx}>{text}</span>
-        );
-      })}
-    </span>
-  );
-}
-
 function Indentation({ depth }: { depth: number }) {
   if (depth <= 0) return null;
 
@@ -219,7 +195,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                       {item.iconBadgeColor && (
                         <div
                           className={cn(
-                            "absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full",
+                            "absolute -right-0.5 -bottom-0.5 h-2 w-2 rounded-full",
                             item.iconBadgeColor
                           )}
                         ></div>
@@ -228,7 +204,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                   )}
 
                   <div className="line-clamp-1 flex-1 text-xs">
-                    <Highlight text={item.name} highlight={highlight} />
+                    <HighlightText text={item.name} highlight={highlight} />
                     {item.badgeContent && (
                       <span
                         className={cn(
@@ -242,7 +218,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                   </div>
 
                   {item.progressBarValue && item.progressBarMax && (
-                    <div className="relative flex h-full w-[50px] items-center text-muted-foreground">
+                    <div className="text-muted-foreground relative flex h-full w-[50px] items-center">
                       <div
                         className="h-[20px] rounded-sm border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-800"
                         style={{

diff --git a/src/components/ui/highlight-text.tsx b/src/components/ui/highlight-text.tsx
@@ -0,0 +1,29 @@
+"use client";
+interface Props {
+  text: string;
+  highlight?: string;
+}
+export default function HighlightText({ text, highlight }: Props) {
+  if (!highlight) return <span>{text}</span>;
+
+  const regex = new RegExp(
+    "(" + (highlight ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
+    "i"
+  );
+
+  const splitedText = text.split(regex);
+
+  return (
+    <span>
+      {splitedText.map((text, idx) => {
+        return text.toLowerCase() === (highlight ?? "").toLowerCase() ? (
+          <span key={idx} className="bg-yellow-300 text-black">
+            {text}
+          </span>
+        ) : (
+          <span key={idx}>{text}</span>
+        );
+      })}
+    </span>
+  );
+}
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import HighlightText from "@/components/ui/highlight-text";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -155,12 +156,14 @@ interface DataCatalogTableColumnProps {
   table: DatabaseTableSchema;
   column: DatabaseTableColumn;
   driver: DataCatalogDriver;
+  search?: string;
 }
 
 function DataCatalogTableColumn({
   column,
   table,
   driver,
+  search,
 }: DataCatalogTableColumnProps) {
   const modelColumn = driver.getColumn(
     table.schemaName,
@@ -175,7 +178,9 @@ function DataCatalogTableColumn({
 
   return (
     <div key={column.name} className="flex border-t">
-      <div className="w-[175px] p-2">{column.name}</div>
+      <div className="flex w-[150px] items-center p-2">
+        <HighlightText text={column.name} highlight={search} />
+      </div>
       <div className="text-muted-foreground flex-1 p-2">
         {definition || "No description"}
       </div>
@@ -211,25 +216,47 @@ function DataCatalogTableColumn({
 interface DataCatalogTableAccordionProps {
   table: DatabaseTableSchema;
   driver: DataCatalogDriver;
+  search?: string;
 }
 
 function DataCatalogTableAccordion({
   table,
   driver,
+  search,
 }: DataCatalogTableAccordionProps) {
+  // Check if any of the column match?
+  const matchColumns = useMemo(() => {
+    return !search || search.toLowerCase() === table.tableName!.toLowerCase()
+      ? table.columns
+      : table.columns.filter((column) =>
+          column.name.toLowerCase().includes(search.toLowerCase())
+        );
+  }, [search, table]);
+
+  const matchedTableName = useMemo(() => {
+    return search
+      ? table.tableName!.toLowerCase().includes(search?.toLowerCase())
+      : true;
+  }, [search, table]);
+
+  if (!matchedTableName && matchColumns.length === 0 && search) {
+    return null;
+  }
+
   return (
     <div className="rounded-lg border text-sm">
       <div className="p-2">
         <div className="font-bold">{table.tableName}</div>
         <div>No description</div>
       </div>
-      {table.columns.map((column) => {
+      {matchColumns.map((column) => {
         return (
           <DataCatalogTableColumn
             key={column.name}
             table={table}
             column={column}
             driver={driver}
+            search={search}
           />
         );
       })}
@@ -249,10 +276,6 @@ export default function DataCatalogModelTab() {
 
   const driver = dataCatalogExtension?.driver;
 
-  const onChangeText = useCallback((value: string) => {
-    setSearch(value);
-  }, []);
-
   const currentSchema = useMemo(() => {
     if (!selectedSchema) return [];
     const result = (schema[selectedSchema] || [])
@@ -281,7 +304,7 @@ export default function DataCatalogModelTab() {
             <Input
               value={search}
               onChange={(e) => {
-                onChangeText(e.currentTarget.value);
+                setSearch(e.currentTarget.value);
               }}
               placeholder="Search tables, columns"
             />
@@ -292,6 +315,7 @@ export default function DataCatalogModelTab() {
       <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
         {currentSchema.map((table) => (
           <DataCatalogTableAccordion
+            search={search}
             key={table.tableName}
             table={table}
             driver={driver}