dce-reactkit 3.2.2-beta.41 → 3.2.2-beta.44

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

@@ -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;
@@ -2281,7 +2305,7 @@ const CSVDownloadButton = (props) => {
     /*                 Main UI                */
     /*----------------------------------------*/
     // Render the button
-    return (React.createElement("a", { id: id, download: filename, href: `data:application/octet-stream,${csv}`, className: `CSVDownloadButton-button ${className !== null && className !== void 0 ? className : 'btn btn-secondary'}`, "aria-label": (ariaLabel
+    return (React.createElement("a", { id: id, download: filename, href: `data:application/octet-stream,${encodeURIComponent(csv)}`, className: `CSVDownloadButton-button ${className !== null && className !== void 0 ? className : 'btn btn-secondary'}`, "aria-label": (ariaLabel
             ? `Click to download ${filename}`
             : ariaLabel), style: style, onClick: onClick },
         !children && (React.createElement(React.Fragment, null,
@@ -2362,6 +2386,13 @@ const IntelliTable = (props) => {
     const data = ((props.data && props.data.length > 0)
         ? props.data
         : [{ id: 'empty-row' }]);
+    // Get CSV filename
+    let filename = `${title}.csv`;
+    if (props.csvName) {
+        filename = (props.csvName.endsWith('.csv')
+            ? props.csvName
+            : `${props.csvName}.csv`);
+    }
     /* -------------- State ------------- */
     // Initial state
     const initColumnVisibilityMap = {};
@@ -2634,7 +2665,7 @@ const IntelliTable = (props) => {
         React.createElement("div", { className: "d-flex align-items-center justify-content-start" },
             React.createElement("h3", { className: "m-0" }, title),
             React.createElement("div", { className: "flex-grow-1 text-end" },
-                React.createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: `${title}.csv`, csv: csv }),
+                React.createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: filename, csv: csv }),
                 React.createElement("button", { type: "button", className: "btn btn-secondary ms-2", "aria-label": `show panel for customizing which columns show in table ${title}`, id: `IntelliTable-${id}-show-column-customization-modal`, onClick: () => {
                         dispatch({
                             type: ActionType$1.ToggleColVisCusModalVisibility,
@@ -3138,14 +3169,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) {
@@ -3934,7 +3975,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,
@@ -5181,29 +5222,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