@teselagen/ui 0.10.2 → 0.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/CollapsibleCard/index.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Button, Classes, Icon } from "@blueprintjs/core";
 import classNames from "classnames";
 import "./style.css";
+import InfoHelper from "../InfoHelper";
 
 export default function CollapsibleCard({
   title,
@@ -11,6 +12,7 @@ export default function CollapsibleCard({
   className,
   style,
   children,
+  helperText,
   initialClosed = false,
   toggle,
   isOpen
@@ -48,7 +50,12 @@ export default function CollapsibleCard({
           >
             {title}
           </h6>
-          <div>{open && openTitleElements}</div>
+          {helperText && (
+            <>
+              <InfoHelper children={helperText}></InfoHelper> &nbsp;
+            </>
+          )}
+          {open && <div> {openTitleElements}</div>}
         </div>
         <div>
           <Button

package/src/DataTable/Columns.js

@@ -37,6 +37,7 @@ import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
 import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
+import { showContextMenu } from "../utils/menuUtils";
 
 dayjs.extend(localizedFormat);
 
@@ -50,8 +51,13 @@ const RenderColumnHeader = ({
   entities,
   extraCompact,
   filters,
+  resetDefaultVisibility,
+  onlyOneVisibleColumn,
   formName,
   isCellEditable,
+  updateColumnVisibility,
+  schema,
+  withDisplayOptions,
   isLocalCall,
   order,
   removeSingleFilter,
@@ -163,6 +169,60 @@ const RenderColumnHeader = ({
           <strong>${columnTitle}:</strong> <br>
           ${description} ${isUnique ? "<br>Must be unique" : ""}</div>`
       })}
+      onContextMenu={e => {
+        if (!withDisplayOptions) {
+          return
+        }
+        e.preventDefault();
+        e.persist();
+        showContextMenu(
+          [
+            {
+              text: "Hide Column",
+              disabled: onlyOneVisibleColumn,
+              icon: "eye-off",
+              onClick: () => {
+                updateColumnVisibility({
+                  shouldShow: false,
+                  path
+                });
+              }
+            },
+            {
+              text: "Hide Other Columns",
+              icon: "eye-off",
+              onClick: () => {
+                updateColumnVisibility({
+                  shouldShow: false,
+                  paths: schema.fields
+                    .map(c => c.path)
+                    .filter(Boolean)
+                    .filter(p => p !== path)
+                });
+              }
+            },
+            {
+              text: "Reset Column Visibilities",
+              icon: "reset",
+              onClick: () => {
+                resetDefaultVisibility();
+              }
+            },
+            {
+              text: "Table Display Options",
+              icon: "cog",
+              onClick: () => {
+                e.target
+                  .closest(".data-table-container")
+                  ?.querySelector(".tg-table-display-options")
+                  ?.click();
+              }
+            }
+          ],
+          undefined,
+          e
+        );
+      }}
       data-test={columnTitleTextified}
       data-path={path}
       data-copy-text={columnTitleTextified}
@@ -340,6 +400,7 @@ export const useColumns = ({
   addFilters,
   cellRenderer,
   columns,
+  resetDefaultVisibility,
   currentParams,
   compact,
   editingCell,
@@ -374,6 +435,7 @@ export const useColumns = ({
   selectedCells,
   setExpandedEntityIdMap,
   setNewParams,
+  updateColumnVisibility,
   setOrder = noop,
   setSelectedCells,
   shouldShowSubComponent,
@@ -387,7 +449,8 @@ export const useColumns = ({
   withFilter: _withFilter,
   withSort = true,
   recordIdToIsVisibleMap,
-  setRecordIdToIsVisibleMap
+  setRecordIdToIsVisibleMap,
+  withDisplayOptions
 }) => {
   const dispatch = useDispatch();
   const change = useCallback(
@@ -858,15 +921,20 @@ export const useColumns = ({
     const tableColumn = {
       ...column,
       Header: RenderColumnHeader({
+        onlyOneVisibleColumn: columns.length === 1,
         recordIdToIsVisibleMap,
         setRecordIdToIsVisibleMap,
         column,
+        withDisplayOptions,
         isLocalCall,
         filters,
         currentParams,
         order,
+        resetDefaultVisibility,
         setOrder,
         withSort,
+        schema,
+        updateColumnVisibility,
         formName,
         extraCompact,
         withFilter,

package/src/DataTable/DisplayOptions.js

@@ -11,11 +11,13 @@ import {
   Switch
 } from "@blueprintjs/core";
 import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
+import InfoHelper from "../InfoHelper";
 
 const DisplayOptions = ({
   compact,
   extraCompact,
   disabled,
+  doNotSearchHiddenColumns,
   hideDisplayOptionsIcon,
   resetDefaultVisibility = noop,
   updateColumnVisibility = noop,
@@ -52,7 +54,7 @@ const DisplayOptions = ({
   let numVisible = 0;
 
   const getFieldCheckbox = (field, i) => {
-    const { displayName, isHidden, isForcedHidden, path } = field;
+    const { displayName, isHidden, isForcedHidden, path, subFrag } = field;
     if (isForcedHidden) return;
     if (!isHidden) numVisible++;
     return (
@@ -68,7 +70,20 @@ const DisplayOptions = ({
           updateColumnVisibility({ shouldShow: isHidden, path });
         }}
         checked={!isHidden}
-        label={displayName}
+        label={
+          <span style={{ display: "flex", marginTop: -17 }}>
+            {displayName}
+            {subFrag && (
+              <InfoHelper
+                icon="warning-sign"
+                intent="warning"
+                style={{ marginLeft: 5 }}
+              >
+                Viewing this column may cause the table to load slower
+              </InfoHelper>
+            )}
+          </span>
+        }
       />
     );
   };
@@ -127,7 +142,9 @@ const DisplayOptions = ({
       content={
         <Menu>
           <div style={{ padding: 10, paddingLeft: 20, paddingRight: 20 }}>
-            <h5 style={{ marginBottom: 10 }}>Display Density:</h5>
+            <h5 style={{ marginBottom: 10, fontWeight: "bold" }}>
+              Display Density:
+            </h5>
             <div className={Classes.SELECT + " tg-table-display-density"}>
               <select
                 onChange={changeTableDensity}
@@ -150,8 +167,19 @@ const DisplayOptions = ({
                 </option>
               </select>
             </div>
-            <h5 style={{ marginBottom: 10, marginTop: 10 }}>
-              Displayed Columns:
+            <h5
+              style={{
+                fontWeight: "bold",
+                marginBottom: 10,
+                marginTop: 10,
+                display: "flex"
+              }}
+            >
+              Displayed Columns: &nbsp;
+              {doNotSearchHiddenColumns && <InfoHelper>
+                Note: Hidden columns will NOT be used when searching the
+                datatable
+              </InfoHelper>}
             </h5>
             <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
               {mainFields.map(getFieldCheckbox)}
@@ -176,9 +204,10 @@ const DisplayOptions = ({
               <Button
                 onClick={resetDefaultVisibility}
                 title="Display Options"
+                icon="reset"
                 minimal
               >
-                Reset
+                Reset Column Visibilites
               </Button>
             </div>
           </div>

package/src/DataTable/index.js

@@ -118,6 +118,7 @@ const DataTable = ({
   controlled_pageSize,
   formName = "tgDataTable",
   history,
+  doNotSearchHiddenColumns,
   isSimple,
   isLocalCall = true,
   isTableParamsConnected,
@@ -481,7 +482,8 @@ const DataTable = ({
     withSelectAll,
     withSort,
     withTitle = !isSimple,
-    noExcessiveCheck
+    noExcessiveCheck,
+    isEntityCountLoading
   } = props;
 
   const _entities = useMemo(
@@ -513,8 +515,25 @@ const DataTable = ({
     formName
   ]);
 
-  const [tableConfig, setTableConfig] = useState({ fieldOptions: [] });
-
+  const [tableConfig, _setTableConfig] = useState({ fieldOptions: [] });
+  const setTableConfig = useCallback(
+    newConfig => {
+      _setTableConfig(prev => {
+        let newConfigVal = newConfig;
+        if (typeof newConfig === "function") {
+          newConfigVal = newConfig(prev);
+        }
+        if (!isEqual(prev.fieldOptions, newConfigVal.fieldOptions)) {
+          change(
+            "reduxFormReadOnlyFieldOptions",
+            newConfigVal.fieldOptions || []
+          );
+        }
+        return newConfigVal;
+      });
+    },
+    [change]
+  );
   useEffect(() => {
     if (withDisplayOptions) {
       let newTableConfig = {};
@@ -544,6 +563,7 @@ const DataTable = ({
   }, [
     convertedSchema, // If the schema changes we want to take into account the synced tableConfig again
     formName,
+    setTableConfig,
     syncDisplayOptionsToDb,
     tableConfigurations,
     withDisplayOptions,
@@ -663,6 +683,7 @@ const DataTable = ({
     convertedSchema,
     currentParams,
     entities,
+    setTableConfig,
     history,
     isInfinite,
     isOpenable,
@@ -780,6 +801,7 @@ const DataTable = ({
     currentUser?.user?.id,
     deleteTableConfiguration,
     formName,
+    setTableConfig,
     schema.fields,
     syncDisplayOptionsToDb,
     tableConfig,
@@ -2635,13 +2657,23 @@ const DataTable = ({
       _selectedAndTotalMessage += `/ `;
     }
     if (showCount) {
-      _selectedAndTotalMessage += `${entityCount || 0} Total`;
+      if (isEntityCountLoading && entityCount < 1) {
+        _selectedAndTotalMessage += `Loading...`;
+      } else {
+        _selectedAndTotalMessage += `${entityCount || 0} Total`;
+      }
     }
     if (_selectedAndTotalMessage) {
       _selectedAndTotalMessage = <div>{_selectedAndTotalMessage}</div>;
     }
     return _selectedAndTotalMessage;
-  }, [entityCount, selectedRowCount, showCount, showNumSelected]);
+  }, [
+    entityCount,
+    selectedRowCount,
+    showCount,
+    showNumSelected,
+    isEntityCountLoading
+  ]);
 
   const shouldShowPaging =
     !isInfinite &&
@@ -2729,6 +2761,8 @@ const DataTable = ({
     columns,
     currentParams,
     compact,
+    // withDisplayOptions,
+    resetDefaultVisibility,
     editingCellSelectAll,
     entities,
     expandedEntityIdMap,
@@ -2766,6 +2800,7 @@ const DataTable = ({
     startCellEdit,
     SubComponent,
     tableRef,
+    updateColumnVisibility,
     updateEntitiesHelper,
     updateValidation,
     withCheckboxes,
@@ -2809,7 +2844,8 @@ const DataTable = ({
         expanded={expandedRows}
         showPagination={false}
         sortable={false}
-        loading={isLoading || disabled}
+        // loading={isLoading || disabled}
+        loading={disabled}
         defaultResized={resized}
         onResizedChange={(newResized = []) => {
           const resizedToUse = newResized.map(column => {
@@ -2830,7 +2866,9 @@ const DataTable = ({
         getTrGroupProps={getTableRowProps}
         getTdProps={getTableCellProps}
         NoDataComponent={({ children }) =>
-          isLoading ? null : (
+          isLoading ? (
+            <div className="rt-noData">Loading...</div>
+          ) : (
             <div className="rt-noData">{noRowsFoundMessage || children}</div>
           )
         }
@@ -3215,6 +3253,7 @@ const DataTable = ({
                 {!noFullscreenButton && toggleFullscreenButton}
                 {withDisplayOptions && (
                   <DisplayOptions
+                    doNotSearchHiddenColumns={doNotSearchHiddenColumns}
                     compact={compact}
                     extraCompact={extraCompact}
                     disabled={disabled}

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -24,10 +24,10 @@ export function tableQueryParamsToHasuraClauses({
     const searchTerms = searchTerm.split(",");
 
     schema.fields.forEach(field => {
-      const { type, path, searchDisabled } = field;
+      const { type, path, searchDisabled, isHidden } = field;
       if (uniqueFieldsByPath[path]) return; // Skip if already added
       uniqueFieldsByPath[path] = true;
-      if (searchDisabled || field.filterDisabled || type === "color") return;
+      if (searchDisabled || field.filterDisabled || type === "color" || isHidden) return;
 
       // Process each search term
       searchTerms.forEach(term => {

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

@@ -63,6 +63,27 @@ describe("tableQueryParamsToHasuraClauses", () => {
       offset: 0
     });
   });
+  it("shouldn't search on hidden fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema: {
+        fields: [
+          { path: "name", type: "string", isHidden: true },
+          { path: "age", type: "number" },
+          { path: "isActive", type: "boolean" },
+          { path: "email", type: "string" }
+        ]
+      }
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ email: { _ilike: "%test%" } }]
+      },
+      order_by: [],
+      limit: 25,
+      offset: 0
+    });
+  });
   it("should flatten queries with dup paths", () => {
     const result = tableQueryParamsToHasuraClauses({
       searchTerm: "test",

package/src/DataTable/utils/withTableParams.js

@@ -76,7 +76,39 @@ export const useTableParams = props => {
     [_defaults, controlled_pageSize]
   );
 
-  const convertedSchema = useMemo(() => convertSchema(schema), [schema]);
+  const formValueStateSelector = state =>
+    formValueSelector(formName)(
+      state,
+      "reduxFormQueryParams",
+      "reduxFormSelectedEntityIdMap",
+      "reduxFormReadOnlyFieldOptions"
+    );
+
+  const {
+    reduxFormQueryParams: _reduxFormQueryParams = {},
+    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {},
+    reduxFormReadOnlyFieldOptions
+  } = useSelector(formValueStateSelector);
+
+  const convertedSchema = useMemo(() => {
+    const pathToHiddenMap = {};
+    reduxFormReadOnlyFieldOptions?.forEach(({ path, isHidden }) => {
+      if (path) pathToHiddenMap[path] = isHidden;
+    });
+    const s = convertSchema(schema);
+
+    s.fields = s.fields.map(f => {
+      const isHidden = pathToHiddenMap[f.path];
+      if (pathToHiddenMap[f.path] !== undefined) {
+        return {
+          ...f,
+          isHidden
+        };
+      }
+      return f;
+    });
+    return s;
+  }, [schema, reduxFormReadOnlyFieldOptions]);
 
   if (isLocalCall) {
     if (!noForm && (!formName || formName === "tgDataTable")) {
@@ -98,18 +130,6 @@ export const useTableParams = props => {
     }
   }
 
-  const formValueStateSelector = state =>
-    formValueSelector(formName)(
-      state,
-      "reduxFormQueryParams",
-      "reduxFormSelectedEntityIdMap"
-    );
-
-  const {
-    reduxFormQueryParams: _reduxFormQueryParams = {},
-    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
-  } = useSelector(formValueStateSelector);
-
   // We want to make sure we don't rerender everything unnecessary
   // with redux-forms we tend to do unnecessary renders
   const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);

package/src/DividerWithText/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./style.css";
+
+/**
+ * A divider component with optional text in the middle.
+ * Compatible with BlueprintJS styling.
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.text] - Optional text to display in the middle of the divider
+ * @param {string} [props.className] - Additional CSS class name
+ * @param {React.CSSProperties} [props.style] - Additional inline styles
+ * @returns {JSX.Element} The divider component
+ */
+export default function DividerWithText({ text, className, style }) {
+  return (
+    <div
+      className={classNames(
+        Classes.DIVIDER,
+        "tg-blueprint-divider",
+        { "tg-blueprint-divider-with-text": !!text },
+        className
+      )}
+      style={style}
+    >
+      {text && <span className="tg-blueprint-divider-text">{text}</span>}
+    </div>
+  );
+}

package/src/DividerWithText/style.css

@@ -0,0 +1,37 @@
+.tg-blueprint-divider {
+  position: relative;
+}
+
+/* Override Blueprint's default divider when we use text */
+.tg-blueprint-divider-with-text.bp3-divider {
+  /* Remove Blueprint's default border styling to avoid duplication */
+  border: none;
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  height: auto;
+}
+
+.tg-blueprint-divider-with-text::before,
+.tg-blueprint-divider-with-text::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid rgba(16, 22, 26, 0.15);
+}
+
+.tg-blueprint-divider-text {
+  padding: 0 10px;
+  font-size: 14px;
+  color: rgba(92, 112, 128, 0.6);
+  white-space: nowrap;
+}
+
+/* Dark theme support */
+.bp3-dark .tg-blueprint-divider-with-text::before,
+.bp3-dark .tg-blueprint-divider-with-text::after {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+.bp3-dark .tg-blueprint-divider-text {
+  color: rgba(167, 182, 194, 0.6);
+}

package/src/InfoHelper/style.css

@@ -1,5 +1,6 @@
 .bp3-popover.tg-info-helper-popover .bp3-popover-content {
   max-width: 340px;
+  white-space: pre-line;
 }
 
 .info-helper-clickable .bp3-popover-target {

package/src/index.js

@@ -5,6 +5,7 @@ import "./style.css";
 import "./autoTooltip";
 export { LoadingDots } from "./FormComponents/LoadingDots";
 export { FormSeparator } from "./FormComponents/FormSeparator";
+export { default as DividerWithText } from "./DividerWithText";
 export * from "./AssignDefaultsModeContext";
 export { default as Uploader } from "./FormComponents/Uploader";
 export { mergeSchemas } from "./DataTable/utils/convertSchema";

package/ui.css

@@ -9356,6 +9356,43 @@ button:not(:disabled):active {
     margin-left: 16px;
   }
 }
+.tg-blueprint-divider {
+  position: relative;
+}
+
+/* Override Blueprint's default divider when we use text */
+.tg-blueprint-divider-with-text.bp3-divider {
+  /* Remove Blueprint's default border styling to avoid duplication */
+  border: none;
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  height: auto;
+}
+
+.tg-blueprint-divider-with-text::before,
+.tg-blueprint-divider-with-text::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid rgba(16, 22, 26, 0.15);
+}
+
+.tg-blueprint-divider-text {
+  padding: 0 10px;
+  font-size: 14px;
+  color: rgba(92, 112, 128, 0.6);
+  white-space: nowrap;
+}
+
+/* Dark theme support */
+.bp3-dark .tg-blueprint-divider-with-text::before,
+.bp3-dark .tg-blueprint-divider-with-text::after {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+.bp3-dark .tg-blueprint-divider-text {
+  color: rgba(167, 182, 194, 0.6);
+}
 .rg-celleditor-input,
 .rg-celleditor input {
   border: none;
@@ -9423,6 +9460,7 @@ button:not(:disabled):active {
 }
 .bp3-popover.tg-info-helper-popover .bp3-popover-content {
   max-width: 340px;
+  white-space: pre-line;
 }
 
 .info-helper-clickable .bp3-popover-target {