add raw query editor and response table

frontend/src/services/db/db.hooks.ts

@@ -1,4 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { HTTPError } from "ky";
+import { toast } from "sonner";
 import { DB_QUERY_KEYS } from "./db.query-keys";
 import { dbService } from "./db.service";
 import type {
@@ -7,6 +9,7 @@ import type {
   GetTableForeignKeysArgs,
   GetTableIndexesArgs,
   GetTablesListArgs,
+  QueryRawSqlArgs,
 } from "./db.types";
 
 export const useDatabasesListQuery = () => {
@@ -75,3 +78,19 @@ export const useTableForeignKeysQuery = (args: GetTableForeignKeysArgs) => {
     enabled: !!args.tableName && !!args.dbName,
   });
 };
+
+export const useQueryRawSqlMutation = () => {
+  return useMutation({
+    onError: async (error) => {
+      if (error instanceof HTTPError) {
+        const errorJson = await error.response.json();
+        console.log(errorJson);
+        toast.error(errorJson.message);
+        return;
+      }
+      toast.error(error.message);
+    },
+    mutationFn: ({ query }: QueryRawSqlArgs) =>
+      dbService.queryRawSql({ query }),
+  });
+};

frontend/src/services/db/db.service.ts

@@ -9,6 +9,8 @@ import type {
   GetTableIndexesArgs,
   GetTablesListArgs,
   GetTablesListResponse,
+  QueryRawSqlArgs,
+  QueryRawSqlResponse,
   TableColumns,
   TableForeignKeys,
   TableIndexes,
@@ -59,6 +61,14 @@ class DbService {
       .get(`api/databases/${dbName}/tables/${tableName}/foreign-keys`)
       .json<TableForeignKeys>();
   }
+
+  queryRawSql({ query }: QueryRawSqlArgs) {
+    return dbInstance
+      .post("api/raw", {
+        json: { query },
+      })
+      .json<QueryRawSqlResponse>();
+  }
 }
 
 export const dbService = new DbService();

frontend/src/services/db/db.types.ts

@@ -69,6 +69,13 @@ export type GetTableForeignKeysArgs = {
   tableName: string;
   dbName: string;
 };
+
+export type QueryRawSqlArgs = {
+  query: string;
+};
+
+export type QueryRawSqlResponse = Array<Record<string, any>>;
+
 export type TableForeignKey = {
   conname: string;
   deferrable: boolean;
@@ -80,4 +87,5 @@ export type TableForeignKey = {
   on_delete: string;
   on_update: string;
 };
+
 export type TableForeignKeys = TableForeignKey[];