dce-reactkit 3.2.2-beta.40 → 3.2.2-beta.42

package/dist/cjs/types/components/IntelliTable.d.ts

@@ -12,6 +12,7 @@ declare type Props = {
         [k: string]: any;
     }[];
     columns: IntelliTableColumn[];
+    csvName?: string;
 };
 declare const IntelliTable: React.FC<Props>;
 export default IntelliTable;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle, faCircle, faDotCircle, faCheckSquare, faHourglass, faClipboard, faChevronDown, faChevronRight, faCloudDownloadAlt, faCheckCircle, faXmarkCircle, faMinus, faSort, faSortDown, faSortUp, faCalendar, faTag, faHammer, faList, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle, faCircle, faDotCircle, faCheckSquare, faHourglass, faClipboard, faChevronDown, faChevronRight, faCloudDownloadAlt, faMinus, faCheckCircle, faXmarkCircle, faSort, faSortDown, faSortUp, faCalendar, faTag, faHammer, faList, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { faCircle as faCircle$1, faSquareMinus, faSquare } from '@fortawesome/free-regular-svg-icons';
 
 /******************************************************************************
@@ -2099,6 +2099,29 @@ const ItemPicker = (props) => {
             React.createElement(NestableItemList, { items: items, onChanged: onChanged }))));
 };
 
+// Import shared helpers
+/**
+ * Get a human-readable description of a date (all in ET)
+ * @author Gabe Abrams
+ * @param [dateOrTimestamp=today] the date or timestamp for the date to describe
+ * @returns human-readable description of the date
+ */
+const getHumanReadableDate = (dateOrTimestamp) => {
+    // Get the date info
+    const { month, day, year, } = getTimeInfoInET(dateOrTimestamp);
+    const currYear = getTimeInfoInET().year;
+    // Get the short month description
+    const monthName = getMonthName(month).short;
+    // Create start of description
+    let description = `${monthName} ${day}${getOrdinal(day)}`;
+    // Add on year if it's different
+    if (year !== currYear) {
+        description += ` ${year}`;
+    }
+    // Return description
+    return description;
+};
+
 /**
  * Path of the route for storing client-side logs
  * @author Gabe Abrams
@@ -2234,6 +2257,7 @@ const genCSV = (data, columns) => {
         .join(','));
     // Add each row
     data.forEach((datum) => {
+        csv += '\n';
         csv += (columns
             .map((column) => {
             let contents;
@@ -2362,6 +2386,11 @@ const IntelliTable = (props) => {
     const data = ((props.data && props.data.length > 0)
         ? props.data
         : [{ id: 'empty-row' }]);
+    if (props.csvName) {
+        (props.csvName.endsWith('.csv')
+            ? props.csvName
+            : `${props.csvName}.csv`);
+    }
     /* -------------- State ------------- */
     // Initial state
     const initColumnVisibilityMap = {};
@@ -2554,9 +2583,12 @@ const IntelliTable = (props) => {
                 const noValue = (value === undefined
                     || value === null);
                 visibleValue = (noValue
-                    ? (React.createElement(FontAwesomeIcon, { icon: faCheckCircle }))
-                    : (React.createElement(FontAwesomeIcon, { icon: faXmarkCircle })));
+                    ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
+                    : (React.createElement(FontAwesomeIcon, { icon: fullValue ? faCheckCircle : faXmarkCircle })));
                 title = (fullValue ? 'True' : 'False');
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.Int) {
                 fullValue = Number.parseInt(value, 10);
@@ -2565,6 +2597,9 @@ const IntelliTable = (props) => {
                     ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
                     : fullValue);
                 title = String(fullValue);
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.Float) {
                 fullValue = Number.parseFloat(value);
@@ -2573,6 +2608,9 @@ const IntelliTable = (props) => {
                     ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
                     : roundToNumDecimals(fullValue, 2));
                 title = String(fullValue);
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.String) {
                 fullValue = String(value).trim();
@@ -2583,6 +2621,9 @@ const IntelliTable = (props) => {
                     ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
                     : fullValue);
                 title = `"${value}"`;
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.JSON) {
                 fullValue = JSON.stringify(value);
@@ -2592,6 +2633,7 @@ const IntelliTable = (props) => {
                 visibleValue = (noValue
                     ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
                     : fullValue);
+                title = "JSON Object";
             }
             // Create UI
             return (React.createElement("td", { key: `${datum.id}-${column.param}`, title: title, style: {
@@ -3125,14 +3167,24 @@ const LogReviewer = (props) => {
                     } },
                     React.createElement(FontAwesomeIcon, { icon: faHammer, className: "me-2" }),
                     "Action"),
-                React.createElement("button", { type: "button", id: "LogReviewer-toggle-advanced-filter-drawer", className: `btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'}`, "aria-label": "toggle advanced filter drawer", onClick: () => {
+                React.createElement("button", { type: "button", id: "LogReviewer-toggle-advanced-filter-drawer", className: `btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle advanced filter drawer", onClick: () => {
                         dispatch({
                             type: ActionType.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Advanced,
                         });
                     } },
                     React.createElement(FontAwesomeIcon, { icon: faList, className: "me-2" }),
-                    "Advanced"))));
+                    "Advanced"),
+                React.createElement("button", { type: "button", id: "LogReviewer-reset-filters-button", className: "btn btn-light", "aria-label": "reset filters", onClick: () => {
+                        dispatch({
+                            type: ActionType.ResetFilters,
+                            initActionErrorFilterState,
+                            initAdvancedFilterState,
+                            initContextFilterState,
+                            initDateFilterState,
+                            initTagFilterState,
+                        });
+                    } }, "Reset All"))));
         // Filter drawer
         let filterDrawer;
         if (expandedFilterDrawer) {
@@ -3473,7 +3525,7 @@ const LogReviewer = (props) => {
         // Filters UI
         const filters = (React.createElement(React.Fragment, null,
             filterToggles,
-            filterDrawer && (React.createElement(Drawer, null, filterDrawer))));
+            filterDrawer && (React.createElement(Drawer, { customBackgroundColor: "#eee" }, filterDrawer))));
         // Actually filter the logs
         // > Perform filters
         const logs = [];
@@ -3921,7 +3973,7 @@ const LogReviewer = (props) => {
                 React.createElement("div", null, "Either your filters are too strict or no matching logs have been created yet.")))
             : undefined);
         // Create intelliTable
-        const dataTable = (React.createElement(IntelliTable, { title: "Matching Logs:", id: "logs", data: logs, columns: columns }));
+        const dataTable = (React.createElement(IntelliTable, { title: "Matching Logs:", csvName: `Logs from ${getHumanReadableDate()}`, id: "logs", data: logs, columns: columns }));
         // Main body
         body = (React.createElement(React.Fragment, null,
             filters,
@@ -5168,29 +5220,6 @@ const startMinWait = (minWaitMs) => {
     });
 };
 
-// Import shared helpers
-/**
- * Get a human-readable description of a date (all in ET)
- * @author Gabe Abrams
- * @param [dateOrTimestamp=today] the date or timestamp for the date to describe
- * @returns human-readable description of the date
- */
-const getHumanReadableDate = (dateOrTimestamp) => {
-    // Get the date info
-    const { month, day, year, } = getTimeInfoInET(dateOrTimestamp);
-    const currYear = getTimeInfoInET().year;
-    // Get the short month description
-    const monthName = getMonthName(month).short;
-    // Create start of description
-    let description = `${monthName} ${day}${getOrdinal(day)}`;
-    // Add on year if it's different
-    if (year !== currYear) {
-        description += ` ${year}`;
-    }
-    // Return description
-    return description;
-};
-
 /**
  * Get the current part of day (morning, evening, etc.)
  * @author Gabe Abrams