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

package/package.json

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

package/src/components/CSVDownloadButton.tsx

@@ -84,8 +84,8 @@ const CSVDownloadButton: React.FC<Props> = (props) => {
         <>
           <FontAwesomeIcon
             icon={faCloudDownloadAlt}
-            className="mr-2"
           />
+          {' '}
           Download CSV
         </>
       )}

package/src/components/IntelliTable.tsx

@@ -272,12 +272,14 @@ const IntelliTable: React.FC<Props> = (props) => {
         // Custom info based on current sort type
         let sortButtonAriaLabel;
         let sortIcon = faSort;
+        let sortingByThisColumn = false;
         if (!sortColumnParam) {
           // Not being sorted yet
           sortButtonAriaLabel = `sort ascending by ${column.title}`;
           sortIcon = faSort;
         } else if (column.param === sortColumnParam) {
           // Already sorted by this column
+          sortingByThisColumn = true;
           if (sortType === SortType.Ascending) {
             // Sorted ascending
             sortButtonAriaLabel = `sort descending by ${column.title}`;
@@ -299,6 +301,11 @@ const IntelliTable: React.FC<Props> = (props) => {
             key={column.param}
             scope="col"
             id={`IntelliTable-${id}-header-${column.param}`}
+            className="text-start"
+            style={{
+              borderRight: '0.05rem solid #555',
+              borderLeft: '0.05rem solid #555',
+            }}
           >
             <div className="d-flex align-items-center justify-content-center flex-row h-100">
               {/* Title */}
@@ -309,7 +316,8 @@ const IntelliTable: React.FC<Props> = (props) => {
               <div>
                 <button
                   type="button"
-                  className="btn btn-light btn-sm ms-1"
+                  id={`IntelliTable-${id}-sort-by-${column.param}-button`}
+                  className={`btn btn-${sortingByThisColumn ? 'light' : 'secondary'} btn-sm ms-1 ps-1 pe-1 pt-0 pb-0`}
                   aria-label={sortButtonAriaLabel}
                   onClick={() => {
                     dispatch({
@@ -372,10 +380,10 @@ const IntelliTable: React.FC<Props> = (props) => {
       // > String
       if (paramType === ParamType.String) {
         if (aVal < bVal) {
-          return (descending ? -1 : 1);
+          return (descending ? 1 : -1);
         }
         if (aVal > bVal) {
-          return (descending ? 1 : -1);
+          return (descending ? -1 : 1);
         }
         return 0;
       }
@@ -469,7 +477,11 @@ const IntelliTable: React.FC<Props> = (props) => {
           title = String(fullValue);
         } else if (column.type === ParamType.String) {
           fullValue = String(value).trim();
-          const noValue = (String(fullValue).trim().length === 0);
+          const noValue = (
+            value === undefined
+            || value === null
+            || String(fullValue).trim().length === 0
+          );
           visibleValue = (
             noValue
               ? (
@@ -503,6 +515,10 @@ const IntelliTable: React.FC<Props> = (props) => {
           <td
             key={`${datum.id}-${column.param}`}
             title={title}
+            style={{
+              borderRight: '0.05rem solid #555',
+              borderLeft: '0.05rem solid #555',
+            }}
           >
             {visibleValue}
           </td>
@@ -549,8 +565,10 @@ const IntelliTable: React.FC<Props> = (props) => {
   // Build main UI
   return (
     <div className={`IntelliTable-container-${id}`}>
+      {/* Modal */}
+      {modal}
       {/* Header */}
-      <div className="d-flex align-items-center justify-content-center">
+      <div className="d-flex align-items-center justify-content-start">
         {/* Title */}
         <h3 className="m-0">
           {title}
@@ -591,7 +609,7 @@ const IntelliTable: React.FC<Props> = (props) => {
       </div>
       {/* Table */}
       <div
-        className={`IntelliTable-table-${id}`}
+        className={`IntelliTable-table-${id} mt-2`}
         style={{
           overflowX: 'auto',
         }}

package/src/components/LogReviewer.tsx

@@ -592,8 +592,8 @@ const LogReviewer: React.FC<Props> = (props) => {
 
   // Create initial tag filter state
   const initTagFilterState: TagFilterState = {};
-  Object.values(LogMetadata.Tag ?? {}).forEach((tagValue) => {
-    initTagFilterState[tagValue] = false;
+  Object.keys(LogMetadata.Tag ?? {}).forEach((tag) => {
+    initTagFilterState[tag] = false;
   });
 
   // Create advanced filter state
@@ -1055,7 +1055,7 @@ const LogReviewer: React.FC<Props> = (props) => {
         filterDrawer = (
           <TabBox title="Tags">
             {
-              Object.keys(tagFilterState)
+              Object.keys(LogMetadata.Tag ?? {})
                 .map((tag, i) => {
                   const description = genHumanReadableName(tag);
                   return (
@@ -1961,18 +1961,18 @@ const LogReviewer: React.FC<Props> = (props) => {
         type: ParamType.Int,
       },
       {
-        title: 'Student',
+        title: 'Student?',
         param: 'isLearner',
         type: ParamType.Boolean,
       },
       {
-        title: 'Teaching Staff',
+        title: 'Teaching Staff?',
         param: 'isTTM',
         type: ParamType.Boolean,
         startsHidden: true,
       },
       {
-        title: 'Admin',
+        title: 'Admin?',
         param: 'isAdmin',
         type: ParamType.Boolean,
         startsHidden: true,
@@ -2007,7 +2007,7 @@ const LogReviewer: React.FC<Props> = (props) => {
         startsHidden: true,
       },
       {
-        title: 'Mobile',
+        title: 'Mobile?',
         param: 'device.isMobile',
         type: ParamType.Boolean,
         startsHidden: true,

package/src/helpers/genCSV.ts

@@ -46,7 +46,24 @@ const genCSV = (
     csv += (
       columns
         .map((column) => {
-          return escapeCellText(datum[column.param]);
+          let contents: string;
+          const cell = datum[column.param];
+          if (
+            typeof cell === 'string'
+            || typeof cell === 'number'
+          ) {
+            contents = String(cell);
+          } else if (
+            typeof cell === 'undefined'
+            || cell === null
+          ) {
+            contents = '';
+          } else if (typeof cell === 'object') {
+            contents = JSON.stringify(cell);
+          } else {
+            contents = '';
+          }
+          return escapeCellText(contents);
         })
         .join(',')
     );

package/src/helpers/genRouteHandler.ts

@@ -500,7 +500,7 @@ const genRouteHandler = (
           isAdmin: !!launchInfo.isAdmin,
           isTTM: !!launchInfo.isTTM,
           courseId: launchInfo.courseId,
-          courseName: launchInfo.courseName,
+          courseName: launchInfo.contextLabel,
           browser,
           device,
           year,