fix: Use parsed display name for queries

TeselaGen · Jul 18, 2024 · 35618fb · 35618fb
1 parent 8c58f66
commit 35618fb
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 39 deletions.
diff --git a/packages/ui/src/DataTable/Columns.js b/packages/ui/src/DataTable/Columns.js
@@ -38,6 +38,7 @@ import { EditableCell } from "./EditabelCell";
 import { getVals } from "./getVals";
 import { CellDragHandle } from "./CellDragHandle";
 import { getCellVal } from "./getCellVal";
+import { getCCDisplayName } from "./utils/queryParams";
 
 dayjs.extend(localizedFormat);
 
@@ -85,7 +86,7 @@ const renderColumnHeader = ({
     columnDataType === "color" ||
     isActionColumn ||
     columnFilterDisabled;
-  const ccDisplayName = camelCase(displayName || path);
+  const ccDisplayName = getCCDisplayName(column);
   let columnTitle = displayName || startCase(camelCase(path));
   if (isActionColumn) columnTitle = "";
 

diff --git a/packages/ui/src/DataTable/DisplayOptions.js b/packages/ui/src/DataTable/DisplayOptions.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { map, isEmpty, noop } from "lodash-es";
+import { map, isEmpty, noop, startCase } from "lodash-es";
 import {
   Button,
   Checkbox,
@@ -10,6 +10,7 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
+import { getCCDisplayName } from "./utils/queryParams";
 
 const DisplayOptions = ({
   compact,
@@ -109,7 +110,7 @@ const DisplayOptions = ({
           {groupFields
             .filter(
               field =>
-                field.displayName
+                startCase(getCCDisplayName(field)) // We have to use startCase with the camelCase here because the displayName is not always a string
                   .toLowerCase()
                   .indexOf(searchTerm.toLowerCase()) > -1
             )

diff --git a/packages/ui/src/DataTable/index.js b/packages/ui/src/DataTable/index.js
@@ -86,6 +86,7 @@ import { viewColumn, openColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
+  getCCDisplayName,
   getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
@@ -207,12 +208,7 @@ const DataTable = ({
       );
     }
     if (orderByFirstColumn && !props.defaults?.order?.length) {
-      const r = [
-        camelCase(
-          convertedSchema.fields[0].displayName ||
-            convertedSchema.fields[0].path
-        )
-      ];
+      const r = [getCCDisplayName(convertedSchema.fields[0])];
       props.defaults.order = r;
     }
   } else {
@@ -2215,14 +2211,14 @@ const DataTable = ({
 
   const filtersOnNonDisplayedFields = [];
   if (filters && filters.length) {
-    schema.fields.forEach(({ isHidden, displayName, path }) => {
-      const ccDisplayName = camelCase(displayName || path);
-      if (isHidden) {
+    schema.fields.forEach(field => {
+      const ccDisplayName = getCCDisplayName(field);
+      if (field.isHidden) {
         filters.forEach(filter => {
           if (filter.filterOn === ccDisplayName) {
             filtersOnNonDisplayedFields.push({
               ...filter,
-              displayName
+              displayName: field.displayName
             });
           }
         });

diff --git a/packages/ui/src/DataTable/utils/queryParams.js b/packages/ui/src/DataTable/utils/queryParams.js
@@ -39,7 +39,7 @@ export function getMergedOpts(topLevel = {}, instanceLevel = {}) {
         //filters look like this:
         // {
         //   selectedFilter: 'textContains', //camel case
-        //   filterOn: ccDisplayName, //camel case display name
+        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
         //   filterValue: 'thomas',
         // }
       ],
@@ -63,9 +63,27 @@ function safeParse(val) {
     return val;
   }
 }
+
+/**
+ *
+ * @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
+  );
+}
+
+/**
+ * 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
+ */
 function getFieldsMappedByCCDisplayName(schema) {
   return schema.fields.reduce((acc, field) => {
-    acc[camelCase(field.path || field.displayName)] = field;
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
     return acc;
   }, {});
 }
@@ -75,7 +93,7 @@ function orderEntitiesLocal(orderArray, entities, schema, ownProps) {
     const orderFuncs = [];
     const ascOrDescArray = [];
     orderArray.forEach(order => {
-      const ccDisplayName = order.replace(/^-/gi, "");
+      const ccDisplayName = order.replace(/^-/gi, ""); // "-updatedAt" => "updatedAt"
       const ccFields = getFieldsMappedByCCDisplayName(schema);
       const field = ccFields[ccDisplayName];
       if (!field) {
@@ -234,14 +252,14 @@ function getFiltersFromSearchTerm(searchTerm, schema) {
       isSearchTermFilter: true
     };
     schema.fields.forEach(field => {
-      const { type, displayName, path, searchDisabled } = field;
+      const { type, searchDisabled } = field;
       if (searchDisabled || field.filterDisabled || type === "color") return;
-      const nameToUse = camelCase(displayName || path);
+      const ccDisplayName = getCCDisplayName(field);
       const filterValue = cleanFilterValue(searchTerm, type);
       if (type === "string" || type === "lookup") {
         searchTermFilters.push({
           ...sharedFields,
-          filterOn: nameToUse,
+          filterOn: ccDisplayName,
           filterValue: searchTerm,
           selectedFilter: "contains"
         });
@@ -256,14 +274,14 @@ function getFiltersFromSearchTerm(searchTerm, schema) {
           if ("true".replace(regex, "") !== "true") {
             searchTermFilters.push({
               ...sharedFields,
-              filterOn: nameToUse,
+              filterOn: ccDisplayName,
               filterValue: true,
               selectedFilter: "true"
             });
           } else if ("false".replace(regex, "") !== "false") {
             searchTermFilters.push({
               ...sharedFields,
-              filterOn: nameToUse,
+              filterOn: ccDisplayName,
               filterValue: false,
               selectedFilter: "false"
             });
@@ -278,7 +296,7 @@ function getFiltersFromSearchTerm(searchTerm, schema) {
         }
         searchTermFilters.push({
           ...sharedFields,
-          filterOn: nameToUse,
+          filterOn: ccDisplayName,
           filterValue: filterValue,
           selectedFilter: "equalTo"
         });
@@ -859,7 +877,6 @@ export function getQueryParams({
           }));
         });
       };
-
       const orFiltersObject = getQueries(orFilters, qb, ccFields);
       let allOrFilters = flattenFilters(orFiltersObject);
 

diff --git a/packages/ui/src/DataTable/utils/useTableParams.js b/packages/ui/src/DataTable/utils/useTableParams.js
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { change } from "redux-form";
 import { useDispatch, useSelector } from "react-redux";
-import { camelCase, isFunction, keyBy, get } from "lodash-es";
+import { isFunction, keyBy, get } from "lodash-es";
 import TableFormTrackerContext from "../TableFormTrackerContext";
 import { viewColumn, openColumn } from "./viewColumn";
 import convertSchema from "./convertSchema";
@@ -10,7 +10,8 @@ import {
   makeDataTableHandlers,
   getQueryParams,
   setCurrentParamsOnUrl,
-  getCurrentParamsFromUrl
+  getCurrentParamsFromUrl,
+  getCCDisplayName
 } from "./queryParams";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
 
@@ -90,12 +91,7 @@ export default function useTableParams(
       );
     }
     if (orderByFirstColumn && !defaults?.order?.length) {
-      const r = [
-        camelCase(
-          convertedSchema.fields[0].displayName ||
-            convertedSchema.fields[0].path
-        )
-      ];
+      const r = [getCCDisplayName(convertedSchema.fields[0])];
       defaults.order = r;
     }
   } else {

diff --git a/packages/ui/src/DataTable/utils/withTableParams.js b/packages/ui/src/DataTable/utils/withTableParams.js
@@ -1,6 +1,6 @@
 import { change, formValueSelector } from "redux-form";
 import { connect } from "react-redux";
-import { camelCase, isFunction, set } from "lodash-es";
+import { isFunction, set } from "lodash-es";
 import { withRouter } from "react-router-dom";
 import { branch, compose } from "recompose";
 
@@ -12,7 +12,8 @@ import {
   getQueryParams,
   setCurrentParamsOnUrl,
   getMergedOpts,
-  getCurrentParamsFromUrl
+  getCurrentParamsFromUrl,
+  getCCDisplayName
 } from "./queryParams";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
 
@@ -99,12 +100,7 @@ export default function withTableParams(compOrOpts, pTopLevelOpts) {
         mergedOpts.orderByFirstColumn &&
         !mergedOpts.defaults?.order?.length
       ) {
-        const r = [
-          camelCase(
-            convertedSchema.fields[0].displayName ||
-              convertedSchema.fields[0].path
-          )
-        ];
+        const r = [getCCDisplayName(convertedSchema.fields[0])];
         set(mergedOpts, "defaults.order", r);
       }
     } else {