ezekiel-cli 5.8.2

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

@@ -0,0 +1,121 @@
+'use client';
+import { UserDetails } from './components/UserDetails';
+import { useUsers } from '@/hooks/users';
+import { useEffect, useState } from 'react';
+
+const Users = () => {
+  const { data, filterBy, paginate } = useUsers();
+
+  const [filterAttribute, setFilterAttribute] = useState('email');
+  const [filterValue, setFilterValue] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(15);
+  const [hasPreviousPage, setHasPreviousPage] = useState(false);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [totalPages, setTotalPages] = useState(0);
+  const [users, setUsers] = useState([]);
+  const [userDetailState, setUserDetailState] = useState(false);
+  const [selectedUser, setSelectedUser] = useState({});
+
+  useEffect(() => {
+    if (data && data.users) {
+      const { results, per_page, current_page, has_previous_page, has_next_page, total_pages } = data.users;
+      setUsers(results || []);
+      setPageSize(per_page || 15);
+      setPage(current_page || 1);
+      setHasPreviousPage(has_previous_page || false);
+      setHasNextPage(has_next_page || false);
+      setTotalPages(total_pages || 0);
+    }
+  }, [data]);
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleFilterSubmit();
+    }
+  };
+
+  const handleFilterSubmit = () => filterBy(filterAttribute, filterValue);
+
+  const handleSelectUser = (user) => {
+    setSelectedUser(user);
+    setUserDetailState(true);
+  };
+
+  const handleTableClick = (event) => {
+    const row = event.target.closest('tr');
+    const rowUser = users.find((user) => user.id === row.id.slice(8));
+    if (rowUser) handleSelectUser(rowUser);
+  };
+
+  return (
+    <div className="users-layout background-ui-4 flex flex-col justify-between relative overflow-x-hidden">
+      {selectedUser?.id && <UserDetails user={selectedUser} state={userDetailState} setState={setUserDetailState} />}
+      <div>
+        <div className="flex px-6 py-4 gap-2 items-center">
+          <label className="color-1 font-semibold text-sm">Filter by</label>
+          <select
+            className="background-ui-3 color-3 pl-3 pr-4 py-3 text-xs block rounded"
+            value={filterAttribute}
+            onChange={(event) => setFilterAttribute(event.target.value)}
+          >
+            <option value="email">Email</option>
+            <option value="id">ID</option>
+          </select>
+          <input
+            className="background-ui-5 px-2.5 py-[9px] rounded"
+            value={filterValue}
+            onKeyDown={handleKeyDown}
+            onChange={(event) => setFilterValue(event.target.value)}
+          />
+          <button
+            className="rounded background-main px-3 color-button-label pt-2 pb-0.5 hover:bg-blue-500"
+            onClick={handleFilterSubmit}
+          >
+            <span className="material-symbols-outlined">search</span>
+          </button>
+        </div>
+        <div className="flex flex-col justify-between flex-grow">
+          <div className="overflow-auto w-full">
+            <table className="w-full text-sm" onClick={handleTableClick}>
+              <thead>
+                <tr className="border-b border-color-ui-2 px-3">
+                  <th className="p-3 first-letter:uppercase text-right">ID</th>
+                  <th className="p-3 first-letter:uppercase text-left">Email</th>
+                </tr>
+              </thead>
+              <tbody>
+                {users.map((user, index) => (
+                  <tr
+                    key={index}
+                    id={`user-id-${user.id}`}
+                    className="border-b border-color-ui-3"
+                    onClick={() => handleSelectUser(user)}
+                  >
+                    <td className="background-ui-5 text-right p-3 w-36">{user.id}</td>
+                    <td className="background-ui-5 p-3">{user.email}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-between px-6 py-4 background-ui-5">
+        <div className="flex gap-2 items-center">
+          {hasPreviousPage && <button onClick={() => paginate(page - 1, pageSize)}>&lt;</button>}
+          <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={(event) => paginate(event.target.value, pageSize)}
+          />
+          <label>of {totalPages}</label>
+          {hasNextPage && <button onClick={() => paginate(page + 1, pageSize)}>&gt;</button>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Users;

package/gui/v2/src/components/CodeEditor/CodeEditor.css

@@ -0,0 +1,12 @@
+.markdown-component > .cm-editor {
+    background: transparent !important;
+    color: inherit;
+}
+
+.markdown-component > .cm-editor .cm-scroller {
+    font-family: "Poppins";
+}
+
+.markdown-component > .cm-editor .cm-content {
+    white-space: normal;
+}

package/gui/v2/src/components/CodeEditor/CodeEditor.js

@@ -0,0 +1,76 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useTheme } from '@/hooks/theme';
+
+import CodeMirror from '@uiw/react-codemirror';
+import { graphql } from 'cm6-graphql';
+import { loadLanguage, langNames } from '@uiw/codemirror-extensions-langs';
+
+export default function CodeEditor({
+  data,
+  onChange = () => {},
+  readOnly = false,
+  width = 'auto',
+  defaultProgrammingLanguage = 'liquid',
+  showLineNumberDefaultState = false,
+}) {
+  const { theme } = useTheme();
+
+  const [lang, setLang] = useState(defaultProgrammingLanguage);
+  const [extensions, setExtensions] = useState([]);
+  const [showLineNumber, setShowLineNumber] = useState(showLineNumberDefaultState);
+
+  useEffect(() => {
+    if (lang === 'graphql') {
+      setExtensions([graphql()]);
+    } else {
+      setExtensions([loadLanguage(lang)]);
+    }
+  }, [lang, setExtensions]);
+
+  const handleOnChange = useCallback((val) => {
+    onChange(val);
+  }, []);
+
+  return (
+    <>
+      <div className="flex text-xs items-center justify-end">
+        <div className="background-ui-4 flex gap-5 justify-between py-1 px-2">
+          <div className="flex gap-2 text-xs items-center">
+            <label>Language</label>
+            <select className="background-ui-3" value={lang} onChange={(e) => setLang(e.target.value)}>
+              <option value="graphql">graphql</option>
+              {langNames.map((lang) => (
+                <option key={lang} value={lang}>
+                  {lang}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex gap-2 text-xs items-center">
+            <label>Show Line Number</label>
+            <input type="checkbox" checked={showLineNumber} onChange={(e) => setShowLineNumber(e.target.checked)} />
+          </div>
+        </div>
+      </div>
+
+      <CodeMirror
+        className="markdown-component border border-color-ui-1 rounded my-2"
+        readOnly={readOnly}
+        theme={theme}
+        basicSetup={{
+          lineNumbers: showLineNumber,
+          syntaxHighlighting: true,
+          foldGutter: showLineNumber,
+          highlightActiveLine: showLineNumber,
+          allowMultipleSelections: true,
+        }}
+        value={data}
+        width={width}
+        extensions={extensions}
+        onChange={handleOnChange}
+      />
+    </>
+  );
+}

package/gui/v2/src/components/layout/Header/Header.css

@@ -0,0 +1,6 @@
+.main-menu {
+    border-bottom: 1px solid var(--ins-ui-3, #dfdfdf);
+    background: var(--ins-header-bg, #fdfdfd);
+    color: var(--ins-text-3, #545454);
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+}

package/gui/v2/src/components/layout/Header/Header.js

@@ -0,0 +1,139 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+
+import { useTheme } from "@/hooks/theme";
+import { useMenu } from "@/hooks/menu";
+import { useConfig } from "@/hooks/config";
+
+export default function Header() {
+    const { theme, setTheme } = useTheme();
+    const { menus } = useMenu();
+    const { config, isLoading: configIsLoading } = useConfig();
+    const [instanceURL, setInstanceURL] = useState("");
+
+    useEffect(() => {
+        if (config) setInstanceURL(config.INSTANCE_URL);
+    }, [config, configIsLoading]);
+
+    const setThemePreference = (selectedTheme) => {
+        document.body.classList.remove("graphiql-light", "graphiql-dark");
+
+        if (selectedTheme === "light") {
+            document.body.classList.add("graphiql-light");
+        } else {
+            document.body.classList.add("graphiql-dark");
+        }
+
+        setTheme(selectedTheme);
+    };
+
+    return (
+        <nav className="main-menu flex flex-wrap justify-between items-center h-80px py-4 px-6 fixed top-0 left-0 right-0 z-50">
+            <Link href="/" title="Insites">
+                <Image
+                    src={`/assets/ins-logo-${theme}.svg`}
+                    width={103}
+                    height={48}
+                    alt="Insites"
+                    priority
+                />
+            </Link>
+
+            <div className="flex justify-end items-center gap-3 flex-wrap">
+                <div className="flex justify-end items-center">
+                    {menus.map((menu, key) => {
+                        return (
+                            menu.pin &&
+                            menu.section === 1 && (
+                                <Link
+                                    className="flex flex-col items-start"
+                                    href={menu.path}
+                                    title={menu.title}
+                                    key={key}
+                                >
+                                    <Image
+                                        src={`/assets/icons/menu-${menu.icon}-${theme}.png`}
+                                        width={48}
+                                        height={48}
+                                        alt={menu.title}
+                                        priority
+                                    />
+                                </Link>
+                            )
+                        );
+                    })}
+                </div>
+                <div className="self-stretch border-r border-color-ui-3 w-[1px] my-2.5"></div>
+                <div className="flex justify-end items-center">
+                    <Link
+                        className="flex flex-col items-start"
+                        href="https://docs.insites.io"
+                        target="_blank"
+                        title="Docs"
+                    >
+                        <Image
+                            src={`/assets/icons/menu-docs-${theme}.png`}
+                            width={48}
+                            height={48}
+                            alt="Docs"
+                            priority
+                        />
+                    </Link>
+                    <Link
+                        className="flex flex-col items-start"
+                        href="https://console.insites.io/console#/instances"
+                        title="Insites Console"
+                        target="_blank"
+                    >
+                        <Image
+                            src={`/assets/icons/menu-console-${theme}.png`}
+                            width={48}
+                            height={48}
+                            alt="Insites Console"
+                            priority
+                        />
+                    </Link>
+                    <Link
+                        className={`${
+                            configIsLoading ? "pointer-events-none" : ""
+                        } flex flex-col items-start`}
+                        href={`${instanceURL}/admin/insites`}
+                        title="Insites Instance Admin"
+                        aria-disabled={configIsLoading}
+                        tabIndex={configIsLoading ? -1 : undefined}
+                    >
+                        <Image
+                            src={`/assets/icons/menu-iia-${theme}.png`}
+                            width={48}
+                            height={48}
+                            alt="IIA"
+                            priority
+                        />
+                    </Link>
+                </div>
+                <div className="self-stretch border-r border-color-ui-3 w-[1px] my-2.5"></div>
+                <div className="flex justify-end items-center">
+                    <button
+                        className="flex flex-col items-start"
+                        onClick={() =>
+                            setThemePreference(
+                                theme === "light" ? "dark" : "light"
+                            )
+                        }
+                    >
+                        <Image
+                            src={`/assets/icons/menu-theme-${theme}.png`}
+                            width={48}
+                            height={48}
+                            alt="Theme"
+                            priority
+                        />
+                    </button>
+                </div>
+            </div>
+        </nav>
+    );
+}

package/gui/v2/src/constants/filters.js

@@ -0,0 +1,32 @@
+export const FILTER_OPERATIONS = {
+    id: ["value"],
+    string: [
+        "value",
+        "exists",
+        "contains",
+        "ends_with",
+        "not_contains",
+        "not_ends_with",
+        "not_starts_with",
+        "not_value",
+        "starts_with",
+    ],
+    text: ["value", "exists", "not_value"],
+    array: [
+        "array_contains",
+        "value_in",
+        "exists",
+        "array_overlaps",
+        "not_array_contains",
+        "not_array_overlaps",
+        "not_value_array",
+        "not_value_in",
+        "value_array",
+    ],
+    boolean: ["value_boolean", "exists", "not_value_boolean"],
+    integer: ["value_int", "exists", "not_value_int", "range"],
+    float: ["value_float", "exists", "not_value_float", "range"],
+    upload: ["value", "exists", "not_value"],
+    datetime: ["value", "exists", "not_value"],
+    date: ["value", "exists", "not_value"],
+};

package/gui/v2/src/constants/records.js

@@ -0,0 +1,17 @@
+export const OPERATION_TYPES = {
+    string: ["array_contains", "contains", "ends_with", "not_contains", "not_ends_with", "not_starts_with", "not_value", "not_value_array", "starts_with", "value"],
+    range: ["range"],
+};
+
+export const TYPE_MAP = {
+    array: "value_array",
+    boolean: "value_boolean",
+    date: "value",
+    datetime: "value",
+    float: "value_float",
+    integer: "value_int",
+    string: "value",
+    text: "value",
+    upload: "value",
+    json: "value_json",
+};

package/gui/v2/src/context/config.js

@@ -0,0 +1,27 @@
+import { getConfigs } from "@/services/ConfigService";
+import { createContext, useState, useEffect } from "react";
+
+export const ConfigContext = createContext();
+
+export function ConfigProvider({ children }) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [config, setConfig] = useState(null);
+
+    useEffect(() => {
+        getConfigs().then((data) => {
+            setConfig(data);
+            setIsLoading(false);
+        });
+    }, []);
+
+    return (
+        <ConfigContext.Provider
+            value={{
+                config,
+                isLoading,
+            }}
+        >
+            {children}
+        </ConfigContext.Provider>
+    );
+}

package/gui/v2/src/context/filters.js

@@ -0,0 +1,22 @@
+import { createContext, useReducer } from "react";
+import { defaultFilterAttribute, filterReducer } from "@/reducers/filter";
+
+export const FiltersContext = createContext();
+
+export function FiltersProvider({ children }) {
+    const [filterAttribute, dispatch] = useReducer(
+        filterReducer,
+        defaultFilterAttribute
+    );
+
+    return (
+        <FiltersContext.Provider
+            value={{
+                filterAttribute,
+                dispatch,
+            }}
+        >
+            {children}
+        </FiltersContext.Provider>
+    );
+}

package/gui/v2/src/context/menu.js

@@ -0,0 +1,14 @@
+import { createContext, useReducer } from "react";
+import { initialMenu, menuReducer } from "@/reducers/menu";
+
+export const MenuContext = createContext();
+
+export function MenuProvider({ children }) {
+    const [menus, dispatch] = useReducer(menuReducer, initialMenu);
+
+    return (
+        <MenuContext.Provider value={{ menus, menuDispatch: dispatch }}>
+            {children}
+        </MenuContext.Provider>
+    );
+}

package/gui/v2/src/context/theme.js

@@ -0,0 +1,29 @@
+import { createContext, useState, useEffect } from "react";
+
+export const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+    const [theme, setTheme] = useState("light"); // Possible values: 'light', 'dark', ''
+
+    useEffect(() => {
+        const bodyClasses = document.body.classList;
+        if (bodyClasses.contains("graphiql-light")) {
+            setTheme("light");
+        } else if (bodyClasses.contains("graphiql-dark")) {
+            setTheme("dark");
+        } else {
+            // If no theme class is found, use the system preference
+            setTheme(
+                window.matchMedia("(prefers-color-scheme: dark)").matches
+                    ? "dark"
+                    : "light"
+            );
+        }
+    }, []);
+
+    return (
+        <ThemeContext.Provider value={{ theme, setTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}

package/gui/v2/src/hooks/config.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ConfigContext } from "@/context/config";
+
+export const useConfig = () => {
+    return useContext(ConfigContext);
+};

package/gui/v2/src/hooks/constants.js

@@ -0,0 +1,99 @@
+import { useReducer, useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+import { buildMutationQuery, buildQuery, defaultQueryAttributes, queryReducer } from '@/reducers/query';
+import { runGraphQL } from '@/services/GraphiQLService';
+
+export const useConstants = () => {
+  const searchParams = useSearchParams();
+
+  const defaultConstantsQueryAttributes = {
+    ...defaultQueryAttributes,
+    func: 'constants',
+    per_page: 100,
+    filter: {},
+    response: {
+      root: ['current_page', 'has_next_page', 'has_previous_page', 'per_page', 'total_entries', 'total_pages'],
+      results: ['name', 'value', 'updated_at'],
+    },
+  };
+
+  const [state, dispatch] = useReducer(queryReducer, defaultConstantsQueryAttributes);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState({});
+
+  const fetchData = async (args) => {
+    try {
+      setIsLoading(true);
+
+      const payload = buildQuery(args);
+      const data = await runGraphQL(payload);
+      setData(data);
+
+      setIsLoading(false);
+    } catch (error) {
+      // Handle error
+    }
+  };
+
+  const filterByName = (value) => {
+    const filter = { name: { contains: value } };
+    dispatch({ type: 'SET_FILTER', filter });
+    console.debug({ ...state, filter });
+    fetchData({ ...state, filter });
+  };
+
+  useEffect(() => {
+    const name = searchParams.get('name', '');
+    filterByName(name);
+  }, []);
+
+  const paginate = (page, pageSize) => {
+    dispatch({ type: 'SET_PAGE', page });
+    dispatch({ type: 'SET_PER_PAGE', per_page: pageSize });
+  };
+
+  const transact = async (name, value) => {
+    const attributes = {
+      func: 'constant_set',
+      args: {
+        name,
+        value,
+      },
+      response: { root: ['name', 'value', 'updated_at'] },
+    };
+
+    setIsLoading(true);
+    const payload = buildMutationQuery(attributes);
+    await runGraphQL(payload);
+
+    await fetchData(state);
+  };
+
+  const remove = async (name) => {
+    const attributes = {
+      func: 'constant_unset',
+      args: {
+        name,
+      },
+      response: { root: ['name'] },
+    };
+
+    setIsLoading(true);
+    const payload = buildMutationQuery(attributes);
+    await runGraphQL(payload);
+
+    await fetchData(state);
+  };
+
+  return {
+    queryAttributes: state,
+    data,
+    isLoading,
+    paginate,
+    filterByName,
+    transact,
+    remove
+  };
+};

package/gui/v2/src/hooks/database.js

@@ -0,0 +1,44 @@
+import { useReducer, useState } from 'react';
+
+import { buildMutationQuery, buildQuery, defaultQueryAttributes, queryReducer } from '@/reducers/query';
+import { runGraphQL } from '@/services/GraphiQLService';
+
+export const useDatabases = () => {
+  const defaultConstantsQueryAttributes = {
+    ...defaultQueryAttributes,
+    response: {
+      root: ['current_page', 'has_next_page', 'has_previous_page', 'per_page', 'total_entries', 'total_pages'],
+      results: ['id', 'created_at', 'updated_at', 'deleted_at', 'properties'],
+    },
+  };
+
+  const [state, dispatch] = useReducer(queryReducer, defaultConstantsQueryAttributes);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState({});
+
+  const fetchData = async (args, { isDirect = false } = {}) => {
+    setIsLoading(true);
+
+    const payload = buildQuery(args);
+    const data = await runGraphQL(payload);
+    if (!isDirect) setData(data);
+    setIsLoading(false);
+
+    return data;
+  };
+
+  const updateData = async (args) => {
+    const payload = buildMutationQuery(args);
+    await runGraphQL(payload);
+  };
+
+  return {
+    queryAttributes: state,
+    dispatch,
+    data,
+    isLoading,
+    fetchData,
+    updateData,
+  };
+};