ezekiel-cli 5.8.2

package/gui/v2/src/app/database/components/Filters/Filters.js

@@ -0,0 +1,72 @@
+"use client";
+import { getRecords } from "@/services/RecordService";
+import FilterForm from "./FilterForm";
+import { useFilters } from "@/hooks/filters";
+
+export default function DatabaseFilters({ id }) {
+    const { filterAttribute, setFilterName, setFilterAttribute } = useFilters();
+
+    const attributes = [
+        {
+            name: "id",
+            attributeType: "id",
+        },
+        {
+            name: "created_at",
+            attributeType: "datetime",
+        },
+        {
+            name: "updated_at",
+            attributeType: "datetime",
+        },
+        {
+            name: "deleted_at",
+            attributeType: "datetime",
+        },
+
+        {
+            name: "demo",
+            attributeType: "integer",
+        },
+    ];
+
+    const handleFiterNameChange = (e) => {
+        const filterName = e.target.value;
+        setFilterName(filterName);
+
+        const attributeType = attributes.find(
+            ({ name }) => name === filterName
+        )?.attributeType;
+
+        setFilterAttribute(attributeType);
+    };
+
+    const handleSubmit = async () => {
+        console.log("test")
+        const payload = {
+            table: id,
+            filters: {
+                page: 1,
+                attributes: [
+                    {
+                        name: filterAttribute.name,
+                        operation: filterAttribute.filterBy,
+                        value: filterAttribute.value,
+                    },
+                ],
+            },
+            value: filterAttribute.value,
+            sort: filterAttribute.sort,
+        };
+        const data = await getRecords(payload);
+        console.log(data);
+    };
+
+    return (
+        <FilterForm
+            attributes={attributes}
+            onFiterNameChange={handleFiterNameChange}
+            onSubmit={handleSubmit}
+        />
+    );
+}

package/gui/v2/src/app/database/components/Sidebar.js

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useDatabase } from '../context';
+import { useState } from 'react';
+
+export default function DatabaseSidebar() {
+  const { isLoading, tables, currentTableId } = useDatabase();
+  const [filterValue, setFilterValue] = useState('');
+  const filteredTables = tables.filter(
+    (table) =>
+      table.name.toLowerCase().includes(filterValue.toLowerCase()) ||
+      table.metadata?.label?.toLowerCase().includes(filterValue.toLowerCase())
+  );
+
+  const pathname = usePathname();
+
+  return (
+    <>
+      <div className="flex justify-center py-5 px-5">
+        <div className="relative w-full">
+          <input
+            className="w-full border rounded background-ui-4 border-color-ui-3 px-4 py-2"
+            placeholder="Search tables"
+            value={filterValue}
+            onChange={(e) => setFilterValue(e.target.value)}
+          />
+          <span className="absolute right-3 top-1/2 -translate-y-1/2 material-icons background-ui-4">search</span>
+        </div>
+      </div>
+      <div className="database-list px-5 flex-grow overflow-y-auto">
+        {!isLoading &&
+          filteredTables.map((table) => (
+            <Link
+              key={table.id}
+              href={`${pathname}?id=${table.id}`}
+              className={`inline-block w-full color-3 py-2 px-3 rounded text-ellipsis overflow-x-hidden ${
+                table.id.toString() === currentTableId && 'background-main-light color-main font-semibold'
+              }`}
+            >
+              {table.metadata?.label || table.name}
+            </Link>
+          ))}
+      </div>
+    </>
+  );
+}

package/gui/v2/src/app/database/components/Table.js

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { useDatabase } from '../context';
+
+export default function DatabaseTable() {
+  const { isLoading, data, getData, tables, currentTableId, update } = useDatabase();
+  const [tableProps, setTableProps] = useState({});
+
+  const [edittableRow, setEdittableRow] = useState({});
+
+  const initialize = async () => {
+    getData();
+    const currentTable = tables.find(({ id }) => id === currentTableId);
+    if (currentTable) setTableProps(currentTable);
+  };
+
+  useEffect(() => {
+    initialize();
+  }, [tables]);
+
+  const { results = [], current_page: page, total_pages: totalPages } = data?.records || {};
+
+  const handlePageChange = (event) => {
+    // page = event.target.value;
+    console.log(event.target.value);
+  };
+
+  function isObject (value) {
+    return value && typeof value === 'object' && value.constructor === Object;
+  }
+
+  const displayValue = (value, type, id, name) => {
+    if (isObject(value) || Array.isArray(value)) return JSON.stringify(value);
+    if (type !== 'datetime' || !value) return value;
+    if (edittableRow?.id === id && edittableRow?.name === name) return value;
+
+    return new Date(value).toLocaleString(undefined, {});
+  };
+
+  const handleOnBlur = async (event) => {
+    const value = event.target.innerText;
+
+    await update({
+      ...edittableRow,
+      value
+    })
+    initialize();
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center h-full">Loading...</div>
+      ) : (
+        <div className="flex flex-col justify-between flex-grow">
+          <div className="overflow-auto w-full">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-color-ui-2 px-3">
+                  <th className="p-3  text-right border-r border-color-ui-3 min-w-24">ID</th>
+                  {tableProps?.properties?.map(({ name, metadata }, i) => (
+                    <th className="p-3 first-letter:uppercase text-left min-w-48" key={ i}>
+                      {metadata?.label || name}
+                    </th>
+                  ))}
+                  <th className="p-3 text-left min-w-48">Created At</th>
+                  <th className="p-3 text-left min-w-48">Updated At</th>
+                </tr>
+              </thead>
+              <tbody>
+                {results.map(({ id, properties, created_at: createdAt, updated_at: updatedAt }, i) => (
+                  <tr className="border-b border-color-ui-3" key={i}>
+                    <td className="background-ui-4 text-right p-3 border-r border-color-ui-3">{id}</td>
+                    {tableProps?.properties?.map(({ name, attribute_type: type }, i) => (
+                      <td
+                        className="background-ui-5 p-3"
+                        key={i}
+                        onFocus={() => setEdittableRow({ id, name })}
+                        contentEditable
+                        suppressContentEditableWarning
+                        onBlur={handleOnBlur}
+                      >
+                        {displayValue(properties[name], type, id, name)}
+                      </td>
+                    ))}
+                    <td className="background-ui-5 p-3">{new Date(createdAt).toLocaleString(undefined, {})}</td>
+                    <td className="background-ui-5 p-3">{new Date(updatedAt).toLocaleString(undefined, {})}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex justify-between p-3 background-ui-5">
+            <div className="flex gap-2 items-center">
+              <label>Page</label>
+              <input
+                className="background-ui-5 border border-color-ui-3 p-0.5 rounded w-10 text-right"
+                type="number"
+                value={page}
+                onChange={handlePageChange}
+              />
+              <label>of {totalPages}</label>
+            </div>
+            <div className="flex gap-2 items-center">
+              <button className="rounded background-main color-button-label px-3 pt-2 pb-0.5 hover:bg-blue-500">
+                <span className="material-symbols-outlined">add</span>
+              </button>
+              <button className="rounded background-main color-button-label px-3 pt-2 pb-0.5 hover:bg-blue-500">
+                <span className="material-symbols-outlined">zoom_in</span>
+              </button>
+              <button className="rounded background-main color-button-label px-3 pt-2 pb-0.5 hover:bg-blue-500">
+                <span className="material-symbols-outlined">list</span>
+              </button>
+              <button className="rounded background-main color-button-label px-3 pt-2 pb-0.5 hover:bg-blue-500">
+                <span className="material-symbols-outlined">grid_view</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/gui/v2/src/app/database/context.js

@@ -0,0 +1,106 @@
+'use client';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useQueryParams } from '@/hooks/queryParams';
+import { useDatabases } from '@/hooks/database';
+
+export const DatabasesContext = createContext();
+
+export function DatabasesProvider({ children }) {
+  const { searchParams } = useQueryParams();
+  const currentTableId = (searchParams.get('id') || '').toLowerCase();
+  const { isLoading, fetchData, queryAttributes, updateData } = useDatabases();
+  const [tables, setTables] = useState([]);
+
+  const fetchTable = async (id = null) => {
+    const response = await fetchData(
+      {
+        ...queryAttributes,
+        func: 'admin_tables',
+        per_page: 100,
+        filter: {
+          id: { value: id },
+        },
+        response: {
+          root: ['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',
+          ],
+        },
+        sort: {
+          by: 'name',
+          order: 'ASC',
+        },
+      },
+      { isDirect: true }
+    );
+    return response?.admin_tables || {};
+  };
+  const getTables = async () => {
+    const { results = [] } = await fetchTable();
+    setTables(results);
+  };
+
+  useEffect(() => {
+    getTables();
+  }, []);
+
+  const [data, setData] = useState({});
+  const getData = async (filter = {}) => {
+    const response = await fetchData(
+      {
+        ...queryAttributes,
+        filter: {
+          table_id: { value: currentTableId },
+          ...filter,
+        },
+      },
+      { isDirect: true }
+    );
+    setData(response);
+  };
+
+  const update = async ({ id, name, value }) => {
+    if (!id || !name) return;
+
+    const attributes = {
+      func: 'record_update',
+      args: {
+        id,
+        record: {
+          properties: { name, value },
+        },
+      },
+      response: { root: ['id', 'updated_at'] },
+    };
+
+    await updateData(attributes);
+  };
+
+  return (
+    <DatabasesContext.Provider
+      value={{
+        isLoading,
+
+        tables,
+        fetchTable,
+        currentTableId,
+
+        data,
+        getData,
+
+        update,
+      }}
+    >
+      {children}
+    </DatabasesContext.Provider>
+  );
+}
+
+export function useDatabase() {
+  return useContext(DatabasesContext);
+}

package/gui/v2/src/app/database/layout.js

@@ -0,0 +1,10 @@
+'use client';
+import { DatabasesProvider } from './context';
+
+export default function LogsLayout({ children }) {
+  return (
+    <DatabasesProvider>
+      {children}
+    </DatabasesProvider>
+  );
+}

package/gui/v2/src/app/database/page.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { useTheme } from '@/hooks/theme';
+import { useDatabase } from './context';
+
+import DatabaseSidebar from './components/Sidebar';
+import DatabaseFilters from './components/Filters/Filters';
+import DatabaseTable from './components/Table';
+
+export default function Database() {
+  const { theme } = useTheme();
+  const { isLoading, currentTableId } = useDatabase();
+
+  return (
+    <div className="database-layout flex flex-col">
+      <div className="flex self-stretch flex-grow">
+        <div className="flex flex-col self-stretch border-r border-color-ui-3 w-full md:w-1/4">
+          <DatabaseSidebar theme={theme} />
+        </div>
+        <div className="w-full md:w-3/4">
+          {currentTableId && (
+            <div className="flex flex-col h-full">
+              <DatabaseFilters id={currentTableId} />
+              <DatabaseTable key={currentTableId} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/gui/v2/src/app/error.js

@@ -0,0 +1,25 @@
+'use client'; // Error components must be Client Components
+
+import { useEffect } from 'react';
+
+export default function Error({ error, reset }) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col justify-center items-center h-full min-h-[80vh] gap-4">
+      <h2>Something went wrong!</h2>
+      <button
+        className="rounded background-main px-3 color-button-label py-1.5 hover:bg-blue-500"
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/gui/v2/src/app/global-error.js

@@ -0,0 +1,20 @@
+'use client';
+
+export default function GlobalError({ error, reset }) {
+  return (
+    <html>
+      <body>
+        <div className="flex flex-col justify-center items-center h-full min-h-[80vh] gap-4">
+          <h2>Something went wrong!</h2>
+          <p style={{ display: 'none' }}>{error.message}</p>
+          <button
+            className="rounded background-main px-3 color-button-label py-1.5 hover:bg-blue-500"
+            onClick={() => reset()}
+          >
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

package/gui/v2/src/app/globals.css

@@ -0,0 +1,30 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import "@graphiql/plugin-explorer/dist/style.css";
+@import "graphiql/graphiql.min.css";
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .text-balance {
+        text-wrap: balance;
+    }
+}
+
+@import "../styles/variables.css";
+@import "../styles/utils.css";
+@import "../styles/general.css";
+@import "../styles/icons.css";
+
+/* Layout CSS */
+@import "../components/layout/Header/Header.css";
+@import "../components/CodeEditor/CodeEditor.css";
+
+/* App CSS */
+@import "../styles/app/graphql.css";
+@import "../styles/app/liquid.css";
+@import "../styles/app/database.css";
+@import "../styles/app/users.css";
+@import "./constants/components/Field/Field.css";

package/gui/v2/src/app/graphql/graphql.js

@@ -0,0 +1,71 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+
+import GraphiQL from "graphiql";
+import { buildClientSchema, getIntrospectionQuery } from "graphql";
+
+import { explorerPlugin } from "@graphiql/plugin-explorer";
+import { runGraphQL as fetcher } from "@/services/GraphiQLService";
+import { useTheme } from "@/hooks/theme";
+
+const DEFAULT_QUERY = `query GetRecords {
+    records(per_page: 10) {
+      results {
+        id
+      }
+    }
+  }`;
+
+export default function GraphQLPage() {
+    const { theme } = useTheme();
+    if (document) {
+        document.body.classList.add("graphiql-" + theme);
+    }
+
+    const explorer = explorerPlugin();
+
+    const [query, setQuery] = useState(DEFAULT_QUERY);
+    const [schema, setSchema] = useState(null);
+
+    const [isConnected, setIsConnected] = useState(false);
+    const createConnection = useCallback(async () => {
+        const data = await fetcher(
+            { query: getIntrospectionQuery() },
+            (error) => {
+                console.error({
+                    message: "Failed to connect to the server ",
+                    severity: "error",
+                });
+                console.error(error);
+                alert("Error");
+            }
+        );
+        setSchema(buildClientSchema(data));
+    }, []);
+
+    useEffect(() => {
+        createConnection();
+    }, [createConnection]);
+
+    useEffect(() => {
+        if (schema) setIsConnected(true);
+    }, [schema, setIsConnected]);
+
+    return (
+        <main className="insites-graphql-container">
+            {isConnected ? (
+                <GraphiQL
+                    fetcher={fetcher}
+                    schema={schema}
+                    query={query}
+                    onEditQuery={setQuery}
+                    plugins={[explorer]}
+                >
+                    <GraphiQL.Logo>INSITES</GraphiQL.Logo>
+                </GraphiQL>
+            ) : (
+                <p>Loading . . .</p>
+            )}
+        </main>
+    );
+}

package/gui/v2/src/app/graphql/page.js

@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+const DynamicComponentWithNoSSR = dynamic(
+    () => import("./graphql"),
+    { ssr: false }
+);
+
+export default function Page() {
+    return <DynamicComponentWithNoSSR />;
+}

package/gui/v2/src/app/layout.js

@@ -0,0 +1,27 @@
+import './globals.css';
+import Header from '@/components/layout/Header/Header';
+import { Providers } from './providers';
+
+export const metadata = {
+  title: 'Insites CLI',
+  description: 'Insites Command Line Interface Graphical User Interface',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+      </head>
+      <body>
+        <Providers>
+          <Header />
+          <div className="mt-[80px]">{children}</div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/gui/v2/src/app/liquid/page.js

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState } from 'react';
+import { parseLiquid } from '@/services/LiquidService';
+import CodeEditor from '@/components/CodeEditor/CodeEditor';
+
+export default function LiquidPage() {
+  const [content, setContent] = useState("<h1>Insites</h1>\n<p>{{ 'hello world' | upcase }}</p>");
+  const [output, setOutput] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async () => {
+    try {
+      const { result, error } = await parseLiquid({ content });
+      setOutput(result);
+      setError(error);
+    } catch (e) {
+      setError(e);
+    }
+  };
+
+  return (
+    <div className="liquid-page-container my-5 px-8 pt-6">
+      <div className="flex flex-col items-start gap-14 mx-auto">
+        <div className="callout p-6 border-[1px] rounded-md w-full">
+          <h4 className="font-bold mb-4">Warning</h4>
+          <p className="leading-6">
+            Use with caution! Code executed in here executes on connected instance. This means you operate on live data
+            from that instance.
+          </p>
+        </div>
+
+        <div className="flex flex-col items-start gap-6 self-stretch">
+          <div className="self-stretch">
+            <label className="color-1 text-xs font-semibold">Input</label>
+            <CodeEditor data={content} onChange={setContent} showLineNumberDefaultState={true} />
+          </div>
+          <button
+            className="rounded background-main text-white px-6 py-2 uppercase font-semibold text-xs"
+            onClick={handleSubmit}
+          >
+            Execute
+          </button>
+        </div>
+
+        {output && <hr className="w-full border-[1px]" />}
+
+        {output && <div className="flex flex-col items-start gap-6 self-stretch">
+          <div className="self-stretch">
+            <label className="color-1 text-xs font-semibold">Output</label>
+            <CodeEditor data={output} readOnly showLineNumberDefaultState={true} />
+          </div>
+        </div>}
+
+        {error && (
+          <div className="flex flex-col items-start gap-6 self-stretch">
+            <div className="flex flex-col items-start gap-2 self-stretch">
+              <div className="w-full rounded-md bg-transparent px-3 py-2.5 text-sm background-alert-negative-light ">
+                <label className="color-1 text-xs font-semibold color-alert-negative">Error</label>
+                <CodeEditor data={error} readOnly={true} showLineNumberDefaultState={false} defaultProgrammingLanguage="json" />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/gui/v2/src/app/loading.js

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex flex-col justify-center items-center h-full min-h-[80vh]">
+      <p>Loading...</p>
+    </div>
+  );
+}