ezekiel-cli 5.8.2

package/gui/v3/src/features/database/graphql/queries.ts

@@ -0,0 +1,64 @@
+export const GET_TABLES = /* GraphQL */ `
+  query getTables(
+    $page: Int = 1
+    $per_page: Int = 20
+    $filter: TablesFilterInput
+    $sort: [TablesSortInput!] = { name: { order: ASC } }
+  ) {
+    data: admin_tables(
+      page: $page
+      per_page: $per_page
+      filter: $filter
+      sort: $sort
+    ) {
+      current_page
+      has_next_page
+      has_previous_page
+      per_page
+      total_entries
+      total_pages
+      results {
+        id
+        name
+        metadata
+        properties {
+          name
+          attribute_type
+          metadata
+        }
+        created_at
+        updated_at
+      }
+    }
+  }
+`;
+
+export const GET_RECORDS = /* GraphQL */ `
+  query getRecords(
+    $page: Int = 1
+    $per_page: Int = 20
+    $filter: RecordsFilterInput
+    $sort: [RecordsSortInput!] = { created_at: { order: DESC } }
+  ) {
+    data: records(
+      page: $page
+      per_page: $per_page
+      filter: $filter
+      sort: $sort
+    ) {
+      current_page
+      has_next_page
+      has_previous_page
+      per_page
+      total_entries
+      total_pages
+      results {
+        id
+        created_at
+        updated_at
+        deleted_at
+        properties
+      }
+    }
+  }
+`;

package/gui/v3/src/features/database/hooks/useDatabaseColumns.ts

@@ -0,0 +1,34 @@
+import type { ITable } from "../schema/tables";
+
+export interface IColumnDef {
+  header: string;
+  accessorKey: string;
+}
+
+export interface IRecordsColumn {
+  id: IColumnDef;
+  properties: IColumnDef[];
+  created_at: IColumnDef;
+  updated_at: IColumnDef;
+}
+
+export function createColumns(source: ITable): IRecordsColumn {
+  return {
+    id: {
+      header: "ID",
+      accessorKey: "id",
+    },
+    properties: source.properties.map((property) => ({
+      header: property.metadata?.label ?? property.name,
+      accessorKey: property.name,
+    })),
+    created_at: {
+      header: "Created At",
+      accessorKey: "created_at",
+    },
+    updated_at: {
+      header: "Updated At",
+      accessorKey: "updated_at",
+    },
+  };
+}

package/gui/v3/src/features/database/hooks/useRecords.ts

@@ -0,0 +1,21 @@
+import { useGraphQLQuery } from "@/lib/graphql/hooks";
+import { GET_RECORDS } from "../graphql/queries";
+import type {
+  IRecordsResponse,
+  IRecordsQueryVariables,
+} from "../schema/records";
+
+export const useRecordsQuery = (variables: IRecordsQueryVariables) => {
+  const { data: response, ...rest } = useGraphQLQuery<
+    { data: IRecordsResponse },
+    IRecordsQueryVariables
+  >({
+    query: GET_RECORDS,
+    key: ["records", variables],
+    options: { variables },
+  });
+
+  const data = response?.data || null;
+
+  return { data, ...rest };
+};

package/gui/v3/src/features/database/hooks/useSelectedTable.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+import type { ITable, ITablesResponse } from "../schema/tables";
+
+export function useSelectedTable(tables?: ITablesResponse | null) {
+  const [selectedTable, setSelectedTable] = useState<ITable | null>(null);
+
+  useEffect(() => {
+    if (tables?.results.length) {
+      setSelectedTable(tables.results[0]);
+    }
+  }, [tables]);
+
+  return { selectedTable, setSelectedTable };
+}

package/gui/v3/src/features/database/hooks/useTables.ts

@@ -0,0 +1,18 @@
+import { useGraphQLQuery } from "@/lib/graphql/hooks";
+import { GET_TABLES } from "../graphql/queries";
+import type { ITableQueryVariables, ITablesResponse } from "../schema/tables";
+
+export const useTableQuery = (variables: ITableQueryVariables) => {
+  const { data: response, ...rest } = useGraphQLQuery<
+    { data: ITablesResponse },
+    ITableQueryVariables
+  >({
+    query: GET_TABLES,
+    key: ["tables"],
+    options: { variables },
+  });
+
+  const data = response?.data || null;
+
+  return { data, ...rest };
+};

package/gui/v3/src/features/database/reducers/useRecordsVariable.ts

@@ -0,0 +1,66 @@
+import { useReducer } from "react";
+
+import type { IRecordsQueryVariables } from "../schema/records";
+import type { ITable } from "../schema/tables";
+
+type IRecordsVariableActionType =
+  | "SET_FILTER"
+  | "SET_SORT"
+  | "SET_PAGE"
+  | "SET_PER_PAGE";
+
+interface IRecordsVariableAction {
+  type: IRecordsVariableActionType;
+  payload: any;
+}
+
+export function useRecordsVariable(
+  source: ITable,
+): [IRecordsQueryVariables, React.Dispatch<IRecordsVariableAction>] {
+  const initialState: IRecordsQueryVariables = {
+    page: 1,
+    per_page: 100,
+    sort: {
+      created_at: { order: "DESC" },
+    },
+    filter: {
+      table_id: { value: source.id },
+    },
+  };
+
+  const [state, dispatch] = useReducer(
+    (state: typeof initialState, action: IRecordsVariableAction) => {
+      switch (action.type) {
+        case "SET_FILTER":
+          return {
+            ...state,
+            filter: {
+              table_id: { value: source.id },
+              ...action.payload,
+            },
+          };
+        case "SET_SORT":
+          return {
+            ...state,
+            sort: action.payload,
+          };
+        case "SET_PAGE":
+          return {
+            ...state,
+            page: action.payload as number,
+          };
+        case "SET_PER_PAGE": {
+          return {
+            ...state,
+            per_page: action.payload as number,
+          };
+        }
+        default:
+          return state;
+      }
+    },
+    initialState,
+  );
+
+  return [state, dispatch];
+}

package/gui/v3/src/features/database/schema/records.ts

@@ -0,0 +1,82 @@
+import type {
+  DateFilter,
+  FullTextQueryField,
+  JoinRecordCollection,
+  PropertyFilterInput,
+  StringFilter,
+  UniqIdFilter,
+} from "@/lib/graphql/schema/filters";
+import type { PropertySort, StandardSort } from "@/lib/graphql/schema/sorts";
+
+interface IRelatedRecordsFilterInput {
+  filter: IRecordsFilterInput;
+  join: JoinRecordCollection;
+}
+
+interface IRelatedUsersFilterInput {
+  filter: IRecordsFilterInput;
+  join: JoinRecordCollection;
+}
+
+export interface IRecordsFilterInput {
+  created_at?: DateFilter;
+  deleted_at?: DateFilter;
+  external_id?: StringFilter;
+  id?: UniqIdFilter;
+  table_id?: UniqIdFilter;
+  table?: StringFilter;
+  related_records?: IRelatedRecordsFilterInput[];
+  related_users?: IRelatedUsersFilterInput[];
+  or?: IRecordsFilterInput[];
+  properties?: PropertyFilterInput[];
+  updated_at?: DateFilter;
+  user_id?: UniqIdFilter;
+  fulltext?: {
+    keyword?: string;
+    operator?: "AND" | "OR";
+    fields?: FullTextQueryField[];
+    properties?: FullTextQueryField[];
+    match_type?: "EXACT" | "ENDS_WITH" | "STARTS_WITH" | "CONTAINS" | "FUZZY";
+    raw?: boolean;
+  };
+}
+
+export interface IRecordsSortInput {
+  id?: StandardSort;
+  external_id?: StandardSort;
+  table_id?: StandardSort;
+  created_at?: StandardSort;
+  updated_at?: StandardSort;
+  deleted_at?: StandardSort;
+  random_sort?: boolean;
+  properties?: PropertySort[];
+}
+
+export interface IRecordsQueryVariables {
+  page: number;
+  per_page: number;
+  filter: IRecordsFilterInput;
+  sort: IRecordsSortInput;
+}
+
+export interface IRecord {
+  created_at: string;
+  deleted_at: string;
+  external_id: string;
+  id: string;
+  properties: Record<string, any>;
+  table: String;
+  table_id: string;
+  updated_at: string;
+  user_id: string;
+}
+
+export interface IRecordsResponse {
+  current_page: number;
+  has_next_page: boolean;
+  has_previous_page: boolean;
+  per_page: number;
+  results: IRecord[];
+  total_entries: number;
+  total_pages: number;
+}

package/gui/v3/src/features/database/schema/tables.ts

@@ -0,0 +1,51 @@
+import type {
+  DateFilter,
+  JsonbFilter,
+  StringFilter,
+  UniqIdFilter,
+} from "@/lib/graphql/schema/filters";
+
+export interface ITable {
+  id: string;
+  name: string;
+  metadata: Record<string, any>;
+  properties: {
+    name: string;
+    attribute_type: string;
+    metadata: Record<string, any>;
+  }[];
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ITablesResponse {
+  current_page: number;
+  has_next_page: boolean;
+  has_previous_page: boolean;
+  per_page: number;
+  total_entries: number;
+  total_pages: number;
+  results: ITable[];
+}
+
+export interface ITablesFilterInput {
+  id?: UniqIdFilter;
+  created_at?: DateFilter;
+  updated_at?: DateFilter;
+  name?: StringFilter;
+  parameterized_name?: StringFilter;
+  metadata?: JsonbFilter[];
+  physical_file_path?: StringFilter;
+  or?: ITablesFilterInput[];
+}
+
+export interface ITableQueryVariables {
+  page: number;
+  per_page: number;
+  filter: ITablesFilterInput;
+  sort: {
+    name: {
+      order: string;
+    };
+  };
+}

package/gui/v3/src/features/graphiql/components/GraphiQL.tsx

@@ -0,0 +1,21 @@
+import { GraphiQL as _GraphiQL, HISTORY_PLUGIN } from "graphiql";
+import { explorerPlugin } from "@graphiql/plugin-explorer";
+import { createGraphiQLFetcher } from "@graphiql/toolkit";
+import { API_URL } from "@/lib/api/constants";
+import "../style.css";
+
+export default function Graphiql() {
+  const fetcher = createGraphiQLFetcher({ url: `${API_URL}/graphql` });
+  const plugins = [HISTORY_PLUGIN, explorerPlugin()];
+
+  return (
+    <div className="insites-graphql-container">
+      <_GraphiQL fetcher={fetcher} plugins={plugins}>
+        <_GraphiQL.Logo>
+          <span className="font-bold">Insites</span> GraphQL
+        </_GraphiQL.Logo>
+      </_GraphiQL>
+      ;
+    </div>
+  );
+}

package/gui/v3/src/features/graphiql/style.css

@@ -0,0 +1,120 @@
+@import "graphiql/style.css";
+@import "@graphiql/plugin-explorer/style.css";
+
+.graphiql-light {
+  --ins-text-1: #000000;
+  --ins-text-3: #545454;
+
+  --ins-sidebar: #fdfdfd;
+  --ins-logo: #181818;
+
+  --ins-ui-1: #f8f8f8;
+  --ins-ui-2: #84848f;
+  --ins-ui-3: #dfdfdf;
+  --ins-ui-4: #f7f7f7;
+  --ins-ui-5: #fdfdfd;
+
+  --ins-header-bg: #fdfdfd;
+  --card-bg: #ffffff;
+
+  --ins-alert-warning: #ec9c00;
+  --ins-alert-warning-light: rgba(251, 172, 19, 0.08);
+  --ins-alert-negative: #df1f1f;
+  --ins-alert-negative-light: #df1f1f14;
+}
+
+.graphiql-dark {
+  --ins-text-1: #ffffff;
+  --ins-text-3: #e0e0e0;
+
+  --ins-sidebar: #141414;
+  --ins-logo: #ffffff;
+
+  --ins-ui-1: #2e2e2e;
+  --ins-ui-2: #cccccc;
+  --ins-ui-3: #3d3d3d;
+  --ins-ui-4: #0f0f0f;
+  --ins-ui-5: #1f1f1f;
+
+  --ins-header-bg: #141414;
+  --card-bg: #2e2e2e;
+  --ins-alert-warning: #d9991d;
+  --ins-alert-warning-light: rgba(251, 172, 19, 0.08);
+  --ins-alert-negative: #e74e3b;
+  --ins-alert-negative-light: #fb30240a;
+}
+
+.insites-graphql-container {
+  height: calc(100dvh - 80px);
+}
+
+.insites-graphql-container button.graphiql-execute-button {
+  background-color: rgb(114, 59, 216);
+}
+
+.insites-graphql-container button.graphiql-execute-button:hover {
+  background-color: rgba(114, 59, 216, 0.9);
+}
+
+.insites-graphql-container .graphiql-container {
+  background: var(--ins-ui-4, #f7f7f7);
+}
+
+.insites-graphql-container .graphiql-sidebar {
+  background-color: var(--ins-sidebar, #fdfdfd);
+}
+
+.insites-graphql-container .graphiql-sessions {
+  background: var(--ins-ui-4, #f7f7f7);
+}
+
+.insites-graphql-container .graphiql-container .graphiql-query-editor {
+  background-color: var(--ins-ui-4, #f7f7f7);
+}
+
+.insites-graphql-container .graphiql-editor-tools {
+  background-color: var(--ins-ui-5, #fdfdfd);
+}
+
+.insites-graphql-container .graphiql-editor,
+.insites-graphql-container .graphiql-query-editor .graphiql-editor,
+.insites-graphql-container .graphiql-query-editor .CodeMirror {
+  background-color: var(--ins-ui-5, #fdfdfd);
+}
+
+.insites-graphql-container .graphiql-query-editor .CodeMirror-gutters {
+  border-right: 1px solid var(--ins-ui-3, #dfdfdf);
+  background: var(--ins-ui-1, #f8f8f8);
+}
+
+.insites-graphql-container .graphiql-editor-tool,
+.insites-graphql-container .graphiql-editor-tool .CodeMirror,
+.insites-graphql-container .graphiql-editor-tool .CodeMirror-gutters {
+  background-color: var(--ins-ui-1, #dfdfdf);
+}
+
+.insites-graphql-container .graphiql-editor .CodeMirror-hints,
+.insites-graphql-container .graphiql-editor .CodeMirror-hint {
+  background: var(--ins-ui-1, #f8f8f8);
+}
+
+.insites-graphql-container
+  .graphiql-editor
+  .CodeMirror-hint.CodeMirror-hint-active {
+  background-color: var(--iia-main, #436cf2);
+  color: var(--ins-text-buttonlabel, #ffffff);
+}
+
+.insites-graphql-container .graphiql-dialog,
+.insites-graphql-container .graphiql-dialog-header,
+.insites-graphql-container .graphiql-dialog-section {
+  background-color: var(--ins-ui-4, #f7f7f7);
+}
+
+.insites-graphql-container .graphiql-tab.graphiql-tab-active {
+  background-color: var(--ins-ui-1, #f8f8f8);
+}
+
+.insites-graphql-container .graphiql-tab:hover {
+  background-color: var(--ins-ui-4, #f7f7f7);
+}

package/gui/v3/src/features/liquid/components/LiquidEditor.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+
+import { Play, Copy, Eraser, TriangleAlert } from "lucide-react";
+
+import CodeEditor from "@/components/CodeEditor";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+import { parseLiquid } from "../service";
+
+export default function LiquidEditor() {
+  const [content, setContent] = useState(
+    "<h1>Insites</h1>\n<p>{{ 'hello world' | upcase }}</p>",
+  );
+  const [output, setOutput] = useState("");
+
+  const handleSubmit = async () => {
+    try {
+      const { result, error } = await parseLiquid({ content });
+      setOutput(result);
+
+      if (error) {
+        setOutput(error);
+      }
+    } catch (e) {
+      setOutput(e as string);
+    }
+  };
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+    } catch (error) {
+      console.error("Failed to copy", error);
+    }
+  };
+
+  const clear = () => {
+    setContent("");
+    setOutput("");
+  };
+
+  return (
+    <div className="flex flex-col items-start gap-10 mx-auto px-8 pb-3 h-full">
+      <Alert className="bg-yellow-500 text-foreground dark:bg-yellow-600">
+        <TriangleAlert />
+        <AlertTitle className="font-bold">Warning!</AlertTitle>
+        <AlertDescription>
+          <p className="text-foreground">
+            Use with caution! Code executed in here executes on connected
+            instance. This means you operate on live data from that instance.
+          </p>
+        </AlertDescription>
+      </Alert>
+
+      <div className="flex flex-row gap-3 flex-1 w-full">
+        <div className="flex-1 flex flex-col gap-2">
+          <CodeEditor
+            data={content}
+            onChange={setContent}
+            showLineNumberDefaultState={true}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 pt-3">
+          <Button
+            onClick={handleSubmit}
+            className="bg-purple-600 hover:bg-purple-500"
+          >
+            <Play size={32} className="fill-white stroke-white" />
+          </Button>
+
+          <Button onClick={copy} variant="ghost">
+            <Copy size={32} strokeWidth={2} absoluteStrokeWidth />
+          </Button>
+
+          <Button onClick={clear} variant="ghost">
+            <Eraser size={32} strokeWidth={2} absoluteStrokeWidth />
+          </Button>
+        </div>
+
+        <div className="flex flex-row gap-6 flex-1 w-full">
+          <div className="flex-1 flex flex-col gap-2">
+            <CodeEditor
+              data={output}
+              readOnly={true}
+              showLineNumberDefaultState={true}
+              defaultProgrammingLanguage="html"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/gui/v3/src/features/liquid/service.ts

@@ -0,0 +1,13 @@
+import { sendRequest } from "@/lib/api/request";
+
+export const parseLiquid = async (args: { content: string }) => {
+  const { body: response } = await sendRequest<{
+    result: string;
+    error: string;
+  }>("/api/liquid", {
+    method: "POST",
+    body: JSON.stringify(args),
+  });
+
+  return response;
+};

package/gui/v3/src/features/logs/components/LogMessage.tsx

@@ -0,0 +1,83 @@
+import { useTheme } from "@/features/theme/hook";
+import JsonView from "@uiw/react-json-view";
+
+import { lightTheme } from "@uiw/react-json-view/light";
+import type { CSSProperties } from "react";
+
+const darkTheme: CSSProperties & Record<string, string> = {
+  "--w-rjv-font-family": "monospace",
+  "--w-rjv-color": "#79c0ff",
+  "--w-rjv-key-string": "#79c0ff",
+  "--w-rjv-background-color": "var(--background, oklch(0.141 0.005 285.823))",
+  "--w-rjv-line-color": "#94949480",
+  "--w-rjv-arrow-color": "#ccc",
+  "--w-rjv-edit-color": "var(--w-rjv-color)",
+  "--w-rjv-info-color": "#7b7b7b",
+  "--w-rjv-update-color": "#ebcb8b",
+  "--w-rjv-copied-color": "#79c0ff",
+  "--w-rjv-copied-success-color": "#28a745",
+  "--w-rjv-curlybraces-color": "#8b949e",
+  "--w-rjv-colon-color": "#c9d1d9",
+  "--w-rjv-brackets-color": "#8b949e",
+  "--w-rjv-quotes-color": "var(--w-rjv-key-string)",
+  "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
+  "--w-rjv-type-string-color": "#a5d6ff",
+  "--w-rjv-type-int-color": "#79c0ff",
+  "--w-rjv-type-float-color": "#79c0ff",
+  "--w-rjv-type-bigint-color": "#79c0ff",
+  "--w-rjv-type-boolean-color": "#ffab70",
+  "--w-rjv-type-date-color": "#79c0ff",
+  "--w-rjv-type-url-color": "#4facff",
+  "--w-rjv-type-null-color": "#ff7b72",
+  "--w-rjv-type-nan-color": "#859900",
+  "--w-rjv-type-undefined-color": "#79c0ff",
+};
+
+interface LogMessageProps {
+  message: string;
+  metadata: any;
+}
+
+export default function LogMessage({ message, metadata }: LogMessageProps) {
+  const { theme } = useTheme();
+  const parse = (message: string) => {
+    try {
+      if (!message) return [false, message];
+      if (message.trim().startsWith("[")) return [true, JSON.parse(message)];
+      if (message.trim().startsWith("{")) return [true, JSON.parse(message)];
+      return [false, message];
+    } catch (error) {
+      return [false, message];
+    }
+  };
+
+  const styles = {
+    light: lightTheme,
+    dark: darkTheme,
+  };
+  const [isJson, parsedMessage] = parse(message);
+  return (
+    <div className="flex flex-col gap-2">
+      {isJson ? (
+        <div className="border border-color-ui-1 rounded my-2 p-3 bg-background">
+          <JsonView value={parsedMessage} style={styles[theme]} />
+        </div>
+      ) : (
+        <pre className="border border-color-ui-1 rounded my-2 p-3 bg-background w-full whitespace-normal text-sm">
+          {parsedMessage}
+        </pre>
+      )}
+      {metadata && (
+        <div className="py-1 rounded mt-2 mx-0">
+          <JsonView
+            value={metadata}
+            displayObjectSize={false}
+            displayDataTypes={false}
+            shortenTextAfterLength={100}
+            collapsed={true}
+          />
+        </div>
+      )}
+    </div>
+  );
+}