dce-reactkit 3.2.2-beta.34 → 3.2.2-beta.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.2.2-beta.34",
+  "version": "3.2.2-beta.36",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ButtonInputGroup.tsx

@@ -69,7 +69,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
 
         {/* Contents */}
         <span
-          className="input-group-text flex-grow-1 rounded-right"
+          className="input-group-text flex-grow-1 rounded-right d-flex flex-wrap"
           style={{
             backgroundColor: 'white',
             borderTopLeftRadius: 0,

package/src/components/IntelliTable.tsx

@@ -30,6 +30,7 @@ import Modal from './Modal';
 import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';
+import Variant from '../types/Variant';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -86,7 +87,7 @@ enum ActionType {
   // Toggle sort column param
   ToggleSortColumn = 'toggle-sort-column',
   // Toggle the visibility of a column
-  ToggleColumnVisibility = 'toggle-column-visibility',
+  UpdateColumnVisibility = 'update-column-visibility',
   // Toggle the column visibility customization modal
   ToggleColVisCusModalVisibility = 'toggle-col-vis-cus-modal-visibility',
 }
@@ -101,9 +102,11 @@ type Action = (
   }
   | {
     // Action type
-    type: ActionType.ToggleColumnVisibility,
-    // Param for the column to toggle
+    type: ActionType.UpdateColumnVisibility,
+    // Param for the column to update
     param: string,
+    // If true, make the column visible
+    visible: boolean,
   }
   | {
     // Action type
@@ -144,9 +147,9 @@ const reducer = (state: State, action: Action): State => {
         sortType: SortType.Ascending,
       };
     }
-    case ActionType.ToggleColumnVisibility: {
+    case ActionType.UpdateColumnVisibility: {
       const { columnVisibilityMap } = state;
-      columnVisibilityMap[action.param] = !columnVisibilityMap[action.param];
+      columnVisibilityMap[action.param] = action.visible;
       return {
         ...state,
         columnVisibilityMap,
@@ -234,6 +237,7 @@ const IntelliTable: React.FC<Props> = (props) => {
             type: ActionType.ToggleColVisCusModalVisibility,
           });
         }}
+        okayVariant={Variant.Light}
       >
         {
           columns.map((column) => {
@@ -241,15 +245,19 @@ const IntelliTable: React.FC<Props> = (props) => {
               <CheckboxButton
                 key={column.param}
                 id={`IntelliTable-${id}-toggle-visibility-${column.param}`}
+                className="mb-2"
                 text={column.title}
-                onChanged={() => {
+                onChanged={(checked) => {
                   dispatch({
-                    type: ActionType.ToggleColumnVisibility,
+                    type: ActionType.UpdateColumnVisibility,
                     param: column.param,
+                    visible: checked,
                   });
                 }}
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column`}
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Secondary}
               />
             );
           })
@@ -307,7 +315,7 @@ const IntelliTable: React.FC<Props> = (props) => {
               borderLeft: '0.05rem solid #555',
             }}
           >
-            <div className="d-flex align-items-center justify-content-center flex-row h-100">
+            <div className="d-flex align-items-center justify-content-start flex-row h-100">
               {/* Title */}
               <span className="text-nowrap">
                 {column.title}
@@ -355,6 +363,33 @@ const IntelliTable: React.FC<Props> = (props) => {
       const aVal = a[sortColumnParam];
       const bVal = b[sortColumnParam];
 
+      // Tiebreaker sort by timestamp, most recent first (used if tied)
+      const tiebreaker = (
+        (b.timestamp ?? 0)
+        - (a.timestamp ?? 0)
+      );
+
+      // Auto-sort undefined and null to end of list
+      if (
+        (aVal === undefined || aVal === null)
+        || (bVal === undefined || bVal === null)
+      ) {
+        // At least one was undefined
+        if (
+          (aVal === undefined || aVal === null)
+          && (bVal === undefined || bVal === null)
+        ) {
+          // Both undefined
+          return tiebreaker;
+        }
+        if (aVal === undefined || aVal === null) {
+          // First was undefined
+          return 1;
+        }
+        // Second was undefined
+        return -1;
+      }
+
       // Sort differently based on the data type
       // > Boolean
       if (paramType === ParamType.Boolean) {
@@ -364,7 +399,7 @@ const IntelliTable: React.FC<Props> = (props) => {
         if (!aVal && bVal) {
           return (descending ? 1 : -1);
         }
-        return 0;
+        return tiebreaker;
       }
       // > Number
       if (
@@ -385,7 +420,7 @@ const IntelliTable: React.FC<Props> = (props) => {
         if (aVal > bVal) {
           return (descending ? -1 : 1);
         }
-        return 0;
+        return tiebreaker;
       }
       // > JSON
       if (paramType === ParamType.JSON) {
@@ -407,7 +442,7 @@ const IntelliTable: React.FC<Props> = (props) => {
       }
 
       // No sort
-      return 0;
+      return tiebreaker;
     });
   }
 

package/src/components/LogReviewer.tsx

@@ -727,7 +727,6 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Check which year/month combos we need to load
     const toLoad = listMonthsToLoad(newDateFilterState);
-    console.log('Filter update:', newDateFilterState, toLoad, logMap);
 
     // If nothing to load, finished
     if (toLoad.length === 0) {
@@ -1067,6 +1066,10 @@ const LogReviewer: React.FC<Props> = (props) => {
                       checked={tagFilterState[tag]}
                       onChanged={(checked) => {
                         tagFilterState[tag] = checked;
+                        dispatch({
+                          type: ActionType.UpdateTagFilterState,
+                          tagFilterState,
+                        });
                       }}
                     />
                   );
@@ -1143,6 +1146,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                               text={description}
                               ariaLabel={`include logs with action type "${description}" in results`}
                               noMarginOnRight={i === Object.keys(LogAction).length - 1}
+                              checked={actionErrorFilterState.action[action]}
                               onChanged={(checked) => {
                                 actionErrorFilterState.action[action] = checked;
                                 dispatch({
@@ -1173,6 +1177,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                               id={`LogReviewer-target-${target}-checkbox`}
                               text={description}
                               ariaLabel={`include logs with target "${description}" in results`}
+                              checked={actionErrorFilterState.target[target]}
                               onChanged={(checked) => {
                                 actionErrorFilterState.target[target] = checked;
                                 dispatch({