Merge pull request #59 from kareemmahlees/feat/fk-relations

Foreign key relations

.changeset/config.json

@@ -6,7 +6,7 @@
   ],
   "commit": false,
   "fixed": [],
-  "linked": [],
+  "linked": [["@tablex/core", "@tablex/lib", "@tablex/tailwind"]],
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",

.changeset/cool-terms-deny.md

@@ -0,0 +1,24 @@
+---
+"@tablex/core": patch
+---
+
+## Backend Changes
+
+### New
+
+- `ColumnProps` returns a new prop `has_fk_relations`.
+- A new Tauri command `fk_relations`.
+
+### Refactor
+
+- gather all enums and structs into `types.rs`.
+
+## Frontend Changes
+
+### New
+
+- Dropdown menu with tabs for table names and a Table for related rows.
+
+### Refactor
+
+- Split `useQuery` hooks into custom hooks.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,8 +3,7 @@ name: Bug report
 about: Create a report to help us improve
 title: "[BUG]"
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
@@ -20,8 +19,9 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **System Info (please complete the following information):**
- - TableX Release: [e.g. Latest]
- - Output of `pnpm tauri:info` [e.g. 22]
+
+- TableX Release: [e.g. Latest]
+- Output of `pnpm tauri:info` [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -3,8 +3,7 @@ name: Feature request
 about: Suggest an idea for this project
 title: "[FEAT]"
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
@@ -13,6 +12,5 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 
-
 **Additional context**
 Add any other context or screenshots about the feature request here.

Cargo.toml

@@ -22,6 +22,7 @@ strip = true
 [workspace.dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
+tokio = { version = "1", features = ["full"] }
 # sqlx = { version = "0.6.3", features = ["runtime-tokio-rustls", "any", "time"] }
 sqlx = { version = "0.6.3", features = [
     "runtime-tokio-native-tls",

README.md

@@ -43,6 +43,12 @@ While not claiming that it is a replacement of any other tool, yet, it strives t
 
 ## Announcements 🎉
 
+### v0.3.6
+
+- TableX now supports Foreign key relations 🔗.
+
+### v0.3.5
+
 - TableX now ships with a little CLI tool that helps you to create & save `on the fly` connections with ease from your terminal ⭐, checkout the [CLI](./docs/CLI.md) documentation.
 - TableX bundle size is now roughly 30% smaller 🚀
 

apps/core/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.8.4",
     "@tanstack/react-router": "^1.19.2",

apps/core/src-tauri/Cargo.toml

@@ -27,8 +27,8 @@ tauri = { version = "1.6.1", features = [
     "process-command-api",
 ] }
 sqlx = { workspace = true }
-tokio = { version = "1", features = ["full"] }
 clap = { version = "4.5.1", features = ["derive"] }
+tokio = { workspace = true }
 regex = "1.10.3"
 
 [features]

apps/core/src-tauri/src/cli.rs

@@ -4,7 +4,7 @@ use clap::Command;
 use clap::{error::ErrorKind, CommandFactory, Parser};
 use tauri::{async_runtime::Mutex, Manager};
 use tauri::{AppHandle, Window};
-use tx_lib::Drivers;
+use tx_lib::types::Drivers;
 
 #[derive(Parser, Debug)]
 #[command(version, about)]

apps/core/src-tauri/src/connection.rs

@@ -8,7 +8,7 @@ use tx_handlers::{mysql::MySQLHandler, postgres::PostgresHandler, sqlite::SQLite
 use tx_lib::{
     fs::{delete_from_connections_file, read_from_connections_file, write_into_connections_file},
     handler::Handler,
-    Drivers,
+    types::Drivers,
 };
 
 #[tauri::command]

apps/core/src-tauri/src/main.rs

@@ -12,8 +12,8 @@ use connection::{
     connections_exist, create_connection_record, delete_connection_record, establish_connection,
     get_connection_details, get_connections, test_connection,
 };
-use row::{create_row, delete_rows, get_paginated_rows, update_row};
-use table::{get_columns_definition, get_tables};
+use row::{create_row, delete_rows, get_fk_relations, get_paginated_rows, update_row};
+use table::{get_columns_props, get_tables};
 use tauri::async_runtime::Mutex;
 use tauri::{Manager, Window, WindowEvent};
 
@@ -60,9 +60,10 @@ fn main() {
             get_tables,
             get_paginated_rows,
             delete_rows,
-            get_columns_definition,
+            get_columns_props,
             create_row,
             update_row,
+            get_fk_relations
         ])
         .on_window_event(move |event| {
             if let WindowEvent::Destroyed = event.event() {

apps/core/src-tauri/src/row.rs

@@ -4,14 +4,15 @@ use serde_json::Value as JsonValue;
 use std::collections::HashMap;
 use tauri::async_runtime::Mutex;
 use tauri::State;
+use tx_lib::types::{FKRows, PaginatedRows};
 
 #[tauri::command]
 pub async fn get_paginated_rows(
     state: State<'_, Mutex<SharedState>>,
     table_name: String,
     page_index: u16,
     page_size: i32,
-) -> Result<Map<String, JsonValue>, String> {
+) -> Result<PaginatedRows, String> {
     let state = state.lock().await;
     let pool = state.pool.as_ref().unwrap();
     let handler = state.handler.as_deref().unwrap();
@@ -101,3 +102,19 @@ pub async fn update_row(
         .update_row(pool, table_name, set_condition, pk_col_name, pk_col_value)
         .await
 }
+
+#[tauri::command]
+pub async fn get_fk_relations(
+    state: tauri::State<'_, Mutex<SharedState>>,
+    table_name: String,
+    column_name: String,
+    cell_value: JsonValue,
+) -> Result<Vec<FKRows>, String> {
+    let state = state.lock().await;
+    let pool = state.pool.as_ref().unwrap();
+    let handler = state.handler.as_deref().unwrap();
+
+    handler
+        .fk_relations(pool, table_name, column_name, cell_value)
+        .await
+}

apps/core/src-tauri/src/table.rs

@@ -1,8 +1,7 @@
 use crate::state::SharedState;
-use serde_json::Value as JsonValue;
 use sqlx::Row;
-use std::collections::HashMap;
 use tauri::{async_runtime::Mutex, State};
+use tx_lib::types::ColumnProps;
 
 #[tauri::command]
 pub async fn get_tables(state: State<'_, Mutex<SharedState>>) -> Result<Vec<String>, String> {
@@ -23,14 +22,14 @@ pub async fn get_tables(state: State<'_, Mutex<SharedState>>) -> Result<Vec<Stri
 }
 
 #[tauri::command]
-pub async fn get_columns_definition(
+pub async fn get_columns_props(
     state: State<'_, Mutex<SharedState>>,
     table_name: String,
-) -> Result<HashMap<String, HashMap<String, JsonValue>>, String> {
+) -> Result<Vec<ColumnProps>, String> {
     let state = state.lock().await;
     let pool = state.pool.as_ref().unwrap();
     let handler = state.handler.as_ref().unwrap();
-    let cols_defs = handler.get_columns_definition(pool, table_name).await?;
+    let cols_defs = handler.get_columns_props(pool, table_name).await?;
 
     Ok(cols_defs)
 }

apps/core/src/commands/columns.ts

@@ -3,24 +3,21 @@ import {
   NUMERIC_DATA_TYPE,
   STRING_DATA_TYPES
 } from "@tablex/lib/constants"
-import { ColumnProps } from "@tablex/lib/types"
+import type { ColumnProps } from "@tablex/lib/types"
 import { invoke } from "@tauri-apps/api/tauri"
 import { z } from "zod"
 
-export const getColsDefinitions = async (tableName: string) => {
-  const result = await invoke<Record<string, ColumnProps>>(
-    "get_columns_definition",
-    {
-      tableName
-    }
-  )
+export const getColsProps = async (tableName: string) => {
+  const result = await invoke<ColumnProps[]>("get_columns_props", {
+    tableName
+  })
   return result
 }
 
 export const getZodSchemaFromCols = async (tableName: string) => {
-  const cols = await getColsDefinitions(tableName)
+  const cols = await getColsProps(tableName)
   const schemaObject: z.ZodRawShape = {}
-  Object.entries(cols).forEach(([colName, colProps]) => {
+  cols.forEach((colProps) => {
     let validationRule: z.ZodTypeAny
 
     switch (true) {
@@ -64,7 +61,7 @@ export const getZodSchemaFromCols = async (tableName: string) => {
       validationRule = validationRule.optional()
     }
 
-    schemaObject[colName] = validationRule
+    schemaObject[colProps.columnName] = validationRule
   })
 
   return z.object(schemaObject)

apps/core/src/commands/row.ts

@@ -1,4 +1,4 @@
-import type { PaginatedRows } from "@tablex/lib/types"
+import type { FkRows, PaginatedRows } from "@tablex/lib/types"
 import { customToast } from "@tablex/lib/utils"
 import type { QueryClient } from "@tanstack/react-query"
 import type { Router } from "@tanstack/react-router"
@@ -140,3 +140,15 @@ export const copyRowIntoClipboard = async (
     )
   }
 }
+
+export const getFkRelations = async (
+  tableName: string,
+  columnName: string,
+  cellValue: any
+) => {
+  return await invoke<FkRows[]>("get_fk_relations", {
+    tableName,
+    columnName,
+    cellValue
+  })
+}

apps/core/src/components/ui/table.tsx

@@ -7,8 +7,21 @@ interface TableProps extends   React.HTMLAttributes<HTMLTableElement>   {
   virtualizerRef:React.RefObject<HTMLDivElement>
   virtualizer:Virtualizer<any,any>
 }
-
 const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const VirtualTable = React.forwardRef<
   HTMLTableElement,
   TableProps
 >(({ className,virtualizerRef,virtualizer, ...props }, ref) => (
@@ -22,7 +35,7 @@ const Table = React.forwardRef<
     </div>
   </div>
 ))
-Table.displayName = "Table"
+VirtualTable.displayName = "VirtualTable"
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
@@ -118,6 +131,6 @@ export {
   TableFooter,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow, VirtualTable
 }
 

apps/core/src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@tablex/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

apps/core/src/env.d.ts

@@ -3,5 +3,6 @@ import "@tanstack/react-table"
 declare module "@tanstack/react-table" {
   interface ColumnMeta {
     name: string
+    hasFkRelations: boolean
   }
 }