@teselagen/ui 0.8.4 → 0.8.6-beta.2

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -0,0 +1,260 @@
+import { camelCase, set } from "lodash-es";
+
+export function tableQueryParamsToHasuraClauses({
+  page,
+  pageSize,
+  searchTerm,
+  filters,
+  order,
+  schema, // Add schema as a parameter
+  additionalFilter
+}) {
+  const ccFields = getFieldsMappedByCCDisplayName(schema);
+  let where = {};
+  const order_by = {};
+  const limit = pageSize || 25;
+  const offset = page && pageSize ? (page - 1) * pageSize : 0;
+
+  if (searchTerm) {
+    const searchTermFilters = [];
+    schema.fields.forEach(field => {
+      const { type, path, searchDisabled } = field;
+      if (searchDisabled || field.filterDisabled || type === "color") return;
+      const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
+
+      if (type === "string" || type === "lookup") {
+        const o = set({}, path, { _ilike: `%${filterValue}%` });
+        searchTermFilters.push(o);
+      } else if (type === "boolean") {
+        let regex;
+        try {
+          regex = new RegExp("^" + searchTerm, "ig");
+        } catch (error) {
+          //ignore
+        }
+        if (regex) {
+          if ("true".replace(regex, "") !== "true") {
+            const o = set({}, path, { _eq: true });
+            searchTermFilters.push(o);
+          } else if ("false".replace(regex, "") !== "false") {
+            const o = set({}, path, { _eq: false });
+            searchTermFilters.push(o);
+          }
+        }
+      } else if (
+        (type === "number" || type === "integer") &&
+        !isNaN(filterValue)
+      ) {
+        const o = set({}, path, { _eq: parseFloat(filterValue) });
+        searchTermFilters.push(o);
+      }
+    });
+    if (searchTermFilters.length > 0) {
+      if (Object.keys(where).length > 0) {
+        where = { _and: [where, { _or: searchTermFilters }] };
+      } else {
+        where = { _or: searchTermFilters };
+      }
+    }
+  }
+
+  if (filters && filters.length > 0) {
+    const filterClauses = filters
+      .map(filter => {
+        let { selectedFilter, filterOn, filterValue } = filter;
+        const fieldSchema = ccFields[filterOn] || {};
+
+        const { path, reference, type } = fieldSchema;
+        let stringFilterValue =
+          filterValue && filterValue.toString
+            ? filterValue.toString()
+            : filterValue;
+        if (stringFilterValue === false) {
+          // we still want to be able to search for the string "false" which will get parsed to false
+          stringFilterValue = "false";
+        } else {
+          stringFilterValue = stringFilterValue || "";
+        }
+        const arrayFilterValue = Array.isArray(filterValue)
+          ? filterValue
+          : stringFilterValue.split(";");
+
+        if (type === "number" || type === "integer") {
+          filterValue = Array.isArray(filterValue)
+            ? filterValue.map(val => Number(val))
+            : Number(filterValue);
+        }
+
+        if (fieldSchema.normalizeFilter) {
+          filterValue = fieldSchema.normalizeFilter(
+            filterValue,
+            selectedFilter,
+            filterOn
+          );
+        }
+
+        if (reference) {
+          filterOn = reference.sourceField;
+        } else {
+          filterOn = path || filterOn;
+        }
+        switch (selectedFilter) {
+          case "none":
+            return {};
+          case "startsWith":
+            return { [filterOn]: { _ilike: `${filterValue}%` } };
+          case "endsWith":
+            return { [filterOn]: { _ilike: `%${filterValue}` } };
+          case "contains":
+            return { [filterOn]: { _ilike: `%${filterValue}%` } };
+          case "notContains":
+            return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+          case "isExactly":
+            return { [filterOn]: { _eq: filterValue } };
+          case "isEmpty":
+            return {
+              _or: [
+                { [filterOn]: { _eq: "" } },
+                { [filterOn]: { _is_null: true } }
+              ]
+            };
+          case "notEmpty":
+            return {
+              _and: [
+                { [filterOn]: { _neq: "" } },
+                { [filterOn]: { _is_null: false } }
+              ]
+            };
+          case "inList":
+            return { [filterOn]: { _in: filterValue } };
+          case "notInList":
+            return { [filterOn]: { _nin: filterValue } };
+          case "true":
+            return { [filterOn]: { _eq: true } };
+          case "false":
+            return { [filterOn]: { _eq: false } };
+          case "dateIs":
+            return { [filterOn]: { _eq: filterValue } };
+          case "notBetween":
+            return {
+              _or: [
+                {
+                  [filterOn]: {
+                    _lt: new Date(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn]: {
+                    _gt: new Date(
+                      new Date(arrayFilterValue[1]).setHours(23, 59)
+                    )
+                  }
+                }
+              ]
+            };
+          case "isBetween":
+            return {
+              [filterOn]: {
+                _gte: new Date(arrayFilterValue[0]),
+                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+              }
+            };
+          case "isBefore":
+            return { [filterOn]: { _lt: new Date(filterValue) } };
+          case "isAfter":
+            return { [filterOn]: { _gt: new Date(filterValue) } };
+          case "greaterThan":
+            return { [filterOn]: { _gt: parseFloat(filterValue) } };
+          case "lessThan":
+            return { [filterOn]: { _lt: parseFloat(filterValue) } };
+          case "inRange":
+            return {
+              [filterOn]: {
+                _gte: parseFloat(arrayFilterValue[0]),
+                _lte: parseFloat(arrayFilterValue[1])
+              }
+            };
+          case "outsideRange":
+            return {
+              _or: [
+                {
+                  [filterOn]: {
+                    _lt: parseFloat(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn]: {
+                    _gt: parseFloat(arrayFilterValue[1])
+                  }
+                }
+              ]
+            };
+          case "equalTo":
+            return {
+              [filterOn]: {
+                _eq:
+                  type === "number" || type === "integer"
+                    ? parseFloat(filterValue)
+                    : filterValue
+              }
+            };
+          case "regex":
+            return { [filterOn]: { _regex: filterValue } };
+          default:
+            console.warn(`Unsupported filter type: ${selectedFilter}`);
+            return {};
+        }
+      })
+      .map(filter => {
+        const o = {};
+        set(o, Object.keys(filter)[0], filter[Object.keys(filter)[0]]);
+        return o;
+      });
+
+    if (filterClauses.length > 0) {
+      if (Object.keys(where).length > 0) {
+        where = { _and: [where, ...filterClauses] };
+      } else {
+        where = { _and: filterClauses };
+      }
+    }
+  }
+
+  if (order && order.length > 0) {
+    order.forEach(item => {
+      const field = item.startsWith("-") ? item.substring(1) : item;
+      const direction = item.startsWith("-") ? "desc" : "asc";
+      order_by[field] = direction;
+    });
+  }
+
+  if (additionalFilter) {
+    where = { _and: [where, additionalFilter] };
+  }
+  return { where, order_by, limit, offset };
+}
+
+/**
+ * Takes a schema and returns an object with the fields mapped by their camelCased display name.
+ * If the displayName is not set or is a jsx element, the path is used instead.
+ * The same conversion must be done when using the result of this method
+ */
+export function getFieldsMappedByCCDisplayName(schema) {
+  if (!schema || !schema.fields) return {};
+  return schema.fields.reduce((acc, field) => {
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
+    return acc;
+  }, {});
+}
+
+/**
+ *
+ * @param {object} field
+ * @returns the camelCase display name of the field, to be used for filters, sorting, etc
+ */
+export function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.test.js

@@ -0,0 +1,206 @@
+import { tableQueryParamsToHasuraClauses } from "./tableQueryParamsToHasuraClauses";
+
+describe("tableQueryParamsToHasuraClauses", () => {
+  const schema = {
+    fields: [
+      { path: "name", type: "string" },
+      { path: "age", type: "number" },
+      { path: "isActive", type: "boolean" },
+      { path: "email", type: "string" }
+    ]
+  };
+
+  it("should handle empty query params", () => {
+    const result = tableQueryParamsToHasuraClauses({});
+    expect(result).toEqual({
+      where: {},
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle page and pageSize", () => {
+    const result = tableQueryParamsToHasuraClauses({ page: 2, pageSize: 10 });
+    expect(result).toEqual({
+      where: {},
+      order_by: {},
+      limit: 10,
+      offset: 10
+    });
+  });
+
+  it("should handle searchTerm with string fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle searchTerm with number fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "30",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [
+          { name: { _ilike: "%30%" } },
+          { age: { _eq: 30 } },
+          { email: { _ilike: "%30%" } }
+        ]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle searchTerm with boolean fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "true",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [
+          { name: { _ilike: "%true%" } },
+          { isActive: { _eq: true } },
+          { email: { _ilike: "%true%" } }
+        ]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle searchTerm with multiple field types", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle contains filter", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      filters: [
+        {
+          selectedFilter: "contains",
+          filterOn: "name",
+          filterValue: "test"
+        }
+      ]
+    });
+    expect(result).toEqual({
+      where: { _and: [{ name: { _ilike: "%test%" } }] },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle equalTo filter for number", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      filters: [
+        { selectedFilter: "equalTo", filterOn: "age", filterValue: "30" }
+      ],
+      schema
+    });
+    expect(result).toEqual({
+      where: { _and: [{ age: { _eq: 30 } }] },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle order", () => {
+    const result = tableQueryParamsToHasuraClauses({ order: ["name", "-age"] });
+    expect(result).toEqual({
+      where: {},
+      order_by: { name: "asc", age: "desc" },
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should combine all params", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      page: 2,
+      pageSize: 10,
+      searchTerm: "test",
+      filters: [
+        {
+          selectedFilter: "greaterThan",
+          filterOn: "age",
+          filterValue: "30"
+        }
+      ],
+      order: ["name"],
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _and: [
+          {
+            _or: [
+              { name: { _ilike: "%test%" } },
+              { email: { _ilike: "%test%" } }
+            ]
+          },
+          { age: { _gt: 30 } }
+        ]
+      },
+      order_by: { name: "asc" },
+      limit: 10,
+      offset: 10
+    });
+  });
+
+  it("should combine searchTerm and filters", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      filters: [
+        {
+          selectedFilter: "greaterThan",
+          filterOn: "age",
+          filterValue: "30"
+        }
+      ],
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _and: [
+          {
+            _or: [
+              { name: { _ilike: "%test%" } },
+              { email: { _ilike: "%test%" } }
+            ]
+          },
+          { age: { _gt: 30 } }
+        ]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+});

package/src/DataTable/utils/withTableParams.js

@@ -6,13 +6,13 @@ import {
   makeDataTableHandlers,
   getQueryParams,
   setCurrentParamsOnUrl,
-  getCurrentParamsFromUrl,
-  getCCDisplayName
+  getCurrentParamsFromUrl
 } from "./queryParams";
 import { withRouter } from "react-router-dom";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
 import { useDeepEqualMemo } from "../../utils/hooks/useDeepEqualMemo";
 import { branch, compose } from "recompose";
+import { getCCDisplayName } from "./tableQueryParamsToHasuraClauses";
 
 /**
  *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())
@@ -32,7 +32,6 @@ import { branch, compose } from "recompose";
 export const useTableParams = props => {
   const {
     additionalFilter,
-    additionalOrFilter,
     controlled_pageSize,
     defaults: _defaults,
     doNotCoercePageSize,
@@ -166,16 +165,6 @@ export const useTableParams = props => {
   );
 
   const queryParams = useMemo(() => {
-    const additionalFilterToUse =
-      typeof additionalFilter === "function"
-        ? additionalFilter
-        : () => additionalFilter;
-
-    const additionalOrFilterToUse =
-      typeof additionalOrFilter === "function"
-        ? additionalOrFilter
-        : () => additionalOrFilter;
-
     return getQueryParams({
       doNotCoercePageSize,
       currentParams,
@@ -185,8 +174,7 @@ export const useTableParams = props => {
       schema: convertedSchema,
       isInfinite: isInfinite || (isSimple && !withPaging),
       isLocalCall,
-      additionalFilter: additionalFilterToUse,
-      additionalOrFilter: additionalOrFilterToUse,
+      additionalFilter,
       noOrderError,
       isCodeModel,
       ownProps: passingProps
@@ -194,7 +182,6 @@ export const useTableParams = props => {
   }, [
     additionalFilter,
     passingProps,
-    additionalOrFilter,
     doNotCoercePageSize,
     currentParams,
     entities,

package/src/FormComponents/Uploader.js

@@ -788,7 +788,11 @@ const Uploader = ({
                     .join(", ")
                 : undefined
             }
-            onDrop={async (_acceptedFiles, rejectedFiles) => {
+            onDrop={async (_acceptedFiles, rejectedFiles, e) => {
+              const parentDropzone = e.target.closest(".tg-dropzone");
+              if (parentDropzone) {
+                parentDropzone.blur();
+              }
               let acceptedFiles = [];
               for (const file of _acceptedFiles) {
                 if ((validateAgainstSchema || autoUnzip) && isZipFile(file)) {

package/src/FormComponents/index.js

@@ -114,14 +114,14 @@ function removeUnwantedProps(props) {
 
 const LabelWithTooltipInfo = ({ label, tooltipInfo, labelStyle }) =>
   tooltipInfo ? (
-    <div style={{ display: "flex", alignItems: "center", ...labelStyle }}>
+    <span style={{ display: "flex", alignItems: "center", ...labelStyle }}>
       {label}{" "}
       <InfoHelper
         style={{ marginLeft: "5px", marginTop: "-6px" }}
         size={12}
         content={tooltipInfo}
       />
-    </div>
+    </span>
   ) : (
     label || null
   );

package/src/autoTooltip.js

@@ -17,125 +17,14 @@ document.addEventListener("mouseup", () => {
   isDragging = false;
 });
 
-// Track elements that had their tooltip attributes moved to parent
-const processedDisabledElements = new WeakMap();
-
-// Move tooltip attributes from disabled elements to their parent
-function moveTooltipToParent(element) {
-  // Check if element already processed
-  if (processedDisabledElements.has(element)) {
-    return;
-  }
-  
-  // Check if the element is disabled and has tooltip attributes
-  const isDisabled = element.disabled === true || element.getAttribute("disabled") !== null;
-  const hasTipData = element.getAttribute("data-tip") || 
-                     element.getAttribute("data-title") ||
-                     (element.offsetWidth < element.scrollWidth && element.textContent?.trim().length > 0);
-  
-  if (!isDisabled || !hasTipData) {
-    return;
-  }
-  
-  const parent = element.parentElement;
-  if (!parent) {
-    return;
-  }
-  
-  // Copy tooltip-relevant attributes to the parent
-  const tooltipAttrs = ["data-tip", "data-title", "data-avoid", "data-avoid-backup"];
-  let attrsMoved = false;
-  const movedAttrs = []; // Track which attributes were moved
-  
-  tooltipAttrs.forEach(attr => {
-    const value = element.getAttribute(attr);
-    if (value) {
-      // Add a data attribute to the parent only if it doesn't already have one
-      if (!parent.hasAttribute(attr)) {
-        parent.setAttribute(attr, value);
-        movedAttrs.push(attr); // Record this attribute was moved
-        attrsMoved = true;
-      }
-    }
-  });
-  
-  // If element is ellipsized, add its text content as a data-tip to parent
-  if (element.offsetWidth < element.scrollWidth && element.textContent?.trim().length > 0) {
-    if (!parent.hasAttribute("data-tip")) {
-      parent.setAttribute("data-tip", element.textContent);
-      movedAttrs.push("data-tip"); // Record this attribute was moved
-      attrsMoved = true;
-    }
-  }
-  
-  // Store information about moved attributes
-  if (attrsMoved) {
-    processedDisabledElements.set(element, {
-      parent,
-      movedAttrs
-    });
-  }
-}
-
-// Function to clear tooltips from parent elements
-function clearParentTooltips(element) {
-  if (!processedDisabledElements.has(element)) {
-    return;
-  }
-  
-  const { parent, movedAttrs } = processedDisabledElements.get(element);
-  if (parent && movedAttrs) {
-    // Remove all attributes that were added to the parent
-    movedAttrs.forEach(attr => {
-      parent.removeAttribute(attr);
-    });
-    
-    // Remove the element from our tracking map
-    processedDisabledElements.delete(element);
-  }
-}
-
-// Function to scan for and process disabled elements
-function scanForDisabledElements() {
-  // First, check if any previously disabled elements are now enabled and clear their parent tooltips
-  processedDisabledElements.forEach((value, element) => {
-    const isStillDisabled = element.disabled === true || element.getAttribute("disabled") !== null;
-    const isConnected = element.isConnected;
-    
-    if (!isStillDisabled || !isConnected) {
-      clearParentTooltips(element);
-    }
-  });
-  
-  // Then process currently disabled elements
-  document.querySelectorAll("[disabled][data-tip], [disabled][data-title], button[disabled], input[disabled]").forEach(el => {
-    moveTooltipToParent(el);
-  });
-}
-
-// Initialize on load and periodically check for new disabled elements
-window.addEventListener('DOMContentLoaded', scanForDisabledElements);
-setInterval(scanForDisabledElements, 2000);
-
 let tippys = [];
+
 let recentlyHidden = false;
 let clearMe;
 (function () {
   let lastMouseOverElement = null;
   document.addEventListener("mouseover", function (event) {
-    let element = event.target;
-
-    // Special handling for disabled elements - we need to process their parent
-    if (element instanceof Element && 
-        (element.disabled === true || element.getAttribute("disabled") !== null)) {
-      // If this is a disabled element, we want to also process its parent
-      // since that's where we moved the tooltip attributes
-      const parent = element.parentElement;
-      if (parent && processedDisabledElements.has(element)) {
-        // Only process the parent if we've previously moved attributes to it
-        element = parent;
-      }
-    }
+    const element = event.target;
 
     if (element instanceof Element && element !== lastMouseOverElement) {
       lastMouseOverElement = element;
@@ -218,7 +107,7 @@ let clearMe;
 
                     if (!customBoundary) return;
                     const a = customBoundary.getBoundingClientRect();
-                    
+
                     if (a.top < state.rects.reference.y) {
                       const b = Math.abs(
                         Math.abs(a.top - state.rects.reference.y) - 10
@@ -312,4 +201,4 @@ function parentIncludesNoChildDataTip(el, count) {
 }
 
 // Export the function to clear parent tooltips so it can be used elsewhere
-export { clearParentTooltips };
+// export { clearParentTooltips };

package/src/index.js

@@ -85,3 +85,4 @@ const noop = () => undefined;
 export { noop };
 export { default as showDialogOnDocBody } from "./showDialogOnDocBody";
 export { default as TableFormTrackerContext } from "./DataTable/TableFormTrackerContext";
+export { initializeHasuraWhereAndFilter } from "./DataTable/utils/initializeHasuraWhereAndFilter";