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

package/package.json

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

package/src/components/CSVDownloadButton.tsx

@@ -70,7 +70,7 @@ const CSVDownloadButton: React.FC<Props> = (props) => {
     <a
       id={id}
       download={filename}
-      href={`data:application/octet-stream,${csv}`}
+      href={`data:application/octet-stream,${encodeURIComponent(csv)}`}
       className={`CSVDownloadButton-button ${className ?? 'btn btn-secondary'}`}
       aria-label={(
         ariaLabel

package/src/components/IntelliTable.tsx

@@ -31,6 +31,7 @@ import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';
 import Variant from '../types/Variant';
+import { alert } from './AppWrapper';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -92,6 +93,10 @@ enum ActionType {
   UpdateColumnVisibility = 'update-column-visibility',
   // Toggle the column visibility customization modal
   ToggleColVisCusModalVisibility = 'toggle-col-vis-cus-modal-visibility',
+  // Show all columns
+  ShowAllColumns = 'show-all-columns',
+  // Hide all columns
+  HideAllColumns = 'hide-all-columns',
 }
 
 // Action definitions
@@ -114,6 +119,8 @@ type Action = (
     // Action type
     type: (
       | ActionType.ToggleColVisCusModalVisibility
+      | ActionType.ShowAllColumns
+      | ActionType.HideAllColumns
     ),
   }
 );
@@ -163,6 +170,26 @@ const reducer = (state: State, action: Action): State => {
         columnVisibilityCustomizationModalVisible: !state.columnVisibilityCustomizationModalVisible,
       };
     }
+    case ActionType.ShowAllColumns: {
+      const { columnVisibilityMap } = state;
+      Object.keys(columnVisibilityMap).forEach((param) => {
+        columnVisibilityMap[param] = true;
+      });
+      return {
+        ...state,
+        columnVisibilityMap,
+      };
+    }
+    case ActionType.HideAllColumns: {
+      const { columnVisibilityMap } = state;
+      Object.keys(columnVisibilityMap).forEach((param) => {
+        columnVisibilityMap[param] = false;
+      });
+      return {
+        ...state,
+        columnVisibilityMap,
+      };
+    }
     default: {
       return state;
     }
@@ -251,12 +278,25 @@ const IntelliTable: React.FC<Props> = (props) => {
         type={ModalType.Okay}
         title="Choose columns to show:"
         onClose={() => {
+          const noColumnsSelected = (
+            Object.values(columnVisibilityMap)
+              .every((isSelected) => {
+                return !isSelected;
+              })
+          );
+          if (noColumnsSelected) {
+            return alert(
+              'Choose at least one column',
+              'To continue, you have to choose at least one column to show'
+            );
+          }
           dispatch({
             type: ActionType.ToggleColVisCusModalVisibility,
           });
         }}
         okayVariant={Variant.Light}
       >
+        {/* Columns */}
         {
           columns.map((column) => {
             return (
@@ -273,13 +313,42 @@ const IntelliTable: React.FC<Props> = (props) => {
                   });
                 }}
                 checked={columnVisibilityMap[column.param]}
-                ariaLabel={`show "${column.title}" column`}
+                ariaLabel={`show "${column.title}" column in the ${title} table`}
                 checkedVariant={Variant.Light}
                 uncheckedVariant={Variant.Secondary}
               />
             );
           })
         }
+        <div className="mt-3">
+          Or you can:
+        </div>
+        <button
+          type="button"
+          id={`IntelliTable-${id}-select-all-columns`}
+          className="btn btn-secondary me-2"
+          aria-label={`show all columns in the ${title} table`}
+          onClick={() => {
+            dispatch({
+              type: ActionType.ShowAllColumns,
+            });
+          }}
+        >
+          Select All
+        </button>
+        <button
+          type="button"
+          id={`IntelliTable-${id}-select-none-columns`}
+          className="btn btn-secondary"
+          aria-label={`hide all columns in the ${title} table`}
+          onClick={() => {
+            dispatch({
+              type: ActionType.HideAllColumns,
+            });
+          }}
+        >
+          Deselect All
+        </button >
       </Modal>
     );
   }
@@ -625,7 +694,9 @@ const IntelliTable: React.FC<Props> = (props) => {
   // Build CSV
   const csv = genCSV(
     data,
-    columns,
+    columns.filter((column) => {
+      return columnVisibilityMap[column.param];
+    }),
   );
 
   // Build main UI
@@ -645,7 +716,7 @@ const IntelliTable: React.FC<Props> = (props) => {
           <CSVDownloadButton
             aria-label={`download data as csv for ${title}`}
             id={`IntelliTable-${id}-download-as-csv`}
-            filename={`${title}.csv`}
+            filename={filename}
             csv={csv}
           />
           {/* Show/Hide Columns */}

package/src/components/LogReviewer.tsx

@@ -262,6 +262,197 @@ const style = `
   }
 `;
 
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+
+const columns: IntelliTableColumn[] = [
+  {
+    title: 'First Name',
+    param: 'userFirstName',
+    type: ParamType.String,
+  },
+  {
+    title: 'Last Name',
+    param: 'userLastName',
+    type: ParamType.String,
+  },
+  {
+    title: 'Email',
+    param: 'userEmail',
+    type: ParamType.String,
+  },
+  {
+    title: 'Canvas Id',
+    param: 'userId',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Student?',
+    param: 'isLearner',
+    type: ParamType.Boolean,
+  },
+  {
+    title: 'Teaching Staff?',
+    param: 'isTTM',
+    type: ParamType.Boolean,
+    startsHidden: true,
+  },
+  {
+    title: 'Admin?',
+    param: 'isAdmin',
+    type: ParamType.Boolean,
+    startsHidden: true,
+  },
+  {
+    title: 'Course Canvas Id',
+    param: 'courseId',
+    type: ParamType.Int,
+    startsHidden: true,
+  },
+  {
+    title: 'Course Name',
+    param: 'courseName',
+    type: ParamType.String,
+  },
+  {
+    title: 'Browser Name',
+    param: 'browser.name',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Browser Version',
+    param: 'browser.version',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'OS',
+    param: 'device.os',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Mobile?',
+    param: 'device.isMobile',
+    type: ParamType.Boolean,
+    startsHidden: true,
+  },
+  {
+    title: 'Year',
+    param: 'year',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Month',
+    param: 'month',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Day',
+    param: 'day',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Hour',
+    param: 'hour',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Minute',
+    param: 'minute',
+    type: ParamType.Int,
+    startsHidden: true,
+  },
+  {
+    title: 'Timestamp',
+    param: 'timestamp',
+    type: ParamType.Int,
+    startsHidden: true,
+  },
+  {
+    title: 'Context',
+    param: 'context',
+    type: ParamType.String,
+  },
+  {
+    title: 'Subcontext',
+    param: 'subcontext',
+    type: ParamType.String,
+  },
+  {
+    title: 'Tags',
+    param: 'tags',
+    type: ParamType.JSON,
+    startsHidden: true,
+  },
+  {
+    title: 'Log Level',
+    param: 'level',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Metadata',
+    param: 'metadata',
+    type: ParamType.JSON,
+    startsHidden: true,
+  },
+  {
+    title: 'Source',
+    param: 'source',
+    type: ParamType.String,
+  },
+  {
+    title: 'Server Route Path',
+    param: 'routePath',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Server Route Template',
+    param: 'routeTemplate',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Type',
+    param: 'type',
+    type: ParamType.String,
+  },
+  {
+    title: 'Error Message',
+    param: 'errorMessage',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Error Code',
+    param: 'errorCode',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Error Stack',
+    param: 'errorStack',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Action Target',
+    param: 'target',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Action Type',
+    param: 'action',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+];
+
 /*------------------------------------------------------------------------*/
 /*                            Static Functions                            */
 /*------------------------------------------------------------------------*/
@@ -1942,194 +2133,6 @@ const LogReviewer: React.FC<Props> = (props) => {
     /*                  Data                  */
     /*----------------------------------------*/
 
-    // Create data table
-    const columns: IntelliTableColumn[] = [
-      {
-        title: 'First Name',
-        param: 'userFirstName',
-        type: ParamType.String,
-      },
-      {
-        title: 'Last Name',
-        param: 'userLastName',
-        type: ParamType.String,
-      },
-      {
-        title: 'Email',
-        param: 'userEmail',
-        type: ParamType.String,
-      },
-      {
-        title: 'Canvas Id',
-        param: 'userId',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Student?',
-        param: 'isLearner',
-        type: ParamType.Boolean,
-      },
-      {
-        title: 'Teaching Staff?',
-        param: 'isTTM',
-        type: ParamType.Boolean,
-        startsHidden: true,
-      },
-      {
-        title: 'Admin?',
-        param: 'isAdmin',
-        type: ParamType.Boolean,
-        startsHidden: true,
-      },
-      {
-        title: 'Course Canvas Id',
-        param: 'courseId',
-        type: ParamType.Int,
-        startsHidden: true,
-      },
-      {
-        title: 'Course Name',
-        param: 'courseName',
-        type: ParamType.String,
-      },
-      {
-        title: 'Browser Name',
-        param: 'browser.name',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Browser Version',
-        param: 'browser.version',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'OS',
-        param: 'device.os',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Mobile?',
-        param: 'device.isMobile',
-        type: ParamType.Boolean,
-        startsHidden: true,
-      },
-      {
-        title: 'Year',
-        param: 'year',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Month',
-        param: 'month',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Day',
-        param: 'day',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Hour',
-        param: 'hour',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Minute',
-        param: 'minute',
-        type: ParamType.Int,
-        startsHidden: true,
-      },
-      {
-        title: 'Timestamp',
-        param: 'timestamp',
-        type: ParamType.Int,
-        startsHidden: true,
-      },
-      {
-        title: 'Context',
-        param: 'context',
-        type: ParamType.String,
-      },
-      {
-        title: 'Subcontext',
-        param: 'subcontext',
-        type: ParamType.String,
-      },
-      {
-        title: 'Tags',
-        param: 'tags',
-        type: ParamType.JSON,
-        startsHidden: true,
-      },
-      {
-        title: 'Log Level',
-        param: 'level',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Metadata',
-        param: 'metadata',
-        type: ParamType.JSON,
-        startsHidden: true,
-      },
-      {
-        title: 'Source',
-        param: 'source',
-        type: ParamType.String,
-      },
-      {
-        title: 'Server Route Path',
-        param: 'routePath',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Server Route Template',
-        param: 'routeTemplate',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Type',
-        param: 'type',
-        type: ParamType.String,
-      },
-      {
-        title: 'Error Message',
-        param: 'errorMessage',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Error Code',
-        param: 'errorCode',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Error Stack',
-        param: 'errorStack',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Action Target',
-        param: 'target',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Action Type',
-        param: 'action',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-    ];
-
     // Nothing to show notice
     const noLogsNotice = (
       logs.length === 0