dce-reactkit 3.2.1 → 3.2.2-beta.10

package/src/components/SimpleDateChooser.tsx

@@ -5,10 +5,12 @@
 
 // Import React
 import React from 'react';
+import getMonthName from '../helpers/getMonthName';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
+import forceNumIntoBounds from '../helpers/forceNumIntoBounds';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -32,31 +34,14 @@ type Props = {
    * @param year new full year number
    */
   onChange: (month: number, day: number, year: number) => void,
-  // Number of months in the future to allow the user to schedule into
-  // (max is 12)
+  // Number of months to allow the user to choose from
+  // (max is 12, default is 6)
   numMonthsToShow?: number,
+  // If true, instead of showing numMonthsToShow months into the future,
+  // show numMonthsToShow months into the past
+  chooseFromPast?: boolean,
 };
 
-/*------------------------------------------------------------------------*/
-/*                                Constants                               */
-/*------------------------------------------------------------------------*/
-
-// Constants
-const MONTH_NAMES = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
 /*------------------------------------------------------------------------*/
 /*                                Component                               */
 /*------------------------------------------------------------------------*/
@@ -75,8 +60,13 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     day,
     year,
     onChange,
+    chooseFromPast,
   } = props;
-  const numMonthsToShow = Math.min(props.numMonthsToShow ?? 6, 12);
+  let numMonthsToShow = forceNumIntoBounds(
+    (props.numMonthsToShow ?? 6),
+    1,
+    12,
+  );
 
   /*------------------------------------------------------------------------*/
   /*                                 Render                                 */
@@ -94,19 +84,28 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     days: number[],
     year: number,
   }[] = [];
+  let startYear = today.year;
+  let startMonth = today.month;
+  if (chooseFromPast) {
+    startMonth -= Math.max(0, numMonthsToShow - 1);
+    if (startMonth <= 0) {
+      startMonth += 12;
+      startYear -= 1;
+    }
+  }
   for (let i = 0; i < numMonthsToShow; i++) {
     // Get month and year info
-    const unmoddedMonth = (today.month + i);
+    const unmoddedMonth = (startMonth + i);
     const month = (
       unmoddedMonth > 12
         ? unmoddedMonth - 12
         : unmoddedMonth
     );
-    const monthName = MONTH_NAMES[month - 1];
+    const monthName = getMonthName(month).full;
     const year = (
       unmoddedMonth > 12
-        ? today.year + 1
-        : today.year
+        ? startYear + 1
+        : startYear
     );
 
     // Figure out which days are allowed

package/src/constants/LOG_REVIEW_ROUTE_PATH_PREFIX.ts

@@ -0,0 +1,9 @@
+import ROUTE_PATH_PREFIX from './ROUTE_PATH_PREFIX';
+
+/**
+ * Path of the route for storing client-side logs
+ * @author Gabe Abrams
+ */
+const LOG_REVIEW_ROUTE_PATH_PREFIX = `/admin${ROUTE_PATH_PREFIX}/logs`;
+
+export default LOG_REVIEW_ROUTE_PATH_PREFIX;

package/src/constants/LOG_REVIEW_STATUS_ROUTE.ts

@@ -0,0 +1,10 @@
+import ROUTE_PATH_PREFIX from './ROUTE_PATH_PREFIX';
+
+/**
+ * Route for checking the status of the current user's
+ *   access to log review
+ * @author Gabe Abrams
+ */
+const LOG_REVIEW_STATUS_ROUTE = `${ROUTE_PATH_PREFIX}/logs/access_allowed`;
+
+export default LOG_REVIEW_STATUS_ROUTE;

package/src/helpers/canReviewLogs.ts

@@ -0,0 +1,33 @@
+// Import shared helpers
+import visitServerEndpoint from './visitServerEndpoint';
+
+// Import shared constants
+import LOG_REVIEW_STATUS_ROUTE from '../constants/LOG_REVIEW_STATUS_ROUTE';
+
+// Cache user's ability
+let canReview: boolean | undefined = undefined;
+
+/**
+ * Check if the current user can review logs
+ * @author Gabe Abrams
+ * @returns true if current user can review logs
+ */
+const canReviewLogs = async (): Promise<boolean> => {
+  // If cached, use that value
+  if (canReview !== undefined) {
+    return canReview;
+  }
+
+  // Ask on server
+  try {
+    canReview = !!(await visitServerEndpoint({
+      path: LOG_REVIEW_STATUS_ROUTE,
+      method: 'GET',
+    }));
+  } catch (err) {
+    canReview = false;
+  }
+  return canReview;
+};
+
+export default canReviewLogs;

package/src/helpers/genCSV.ts

@@ -0,0 +1,59 @@
+/**
+ * Escape a CSV cell if needed
+ * @author Gabe Abrams
+ * @param text the cell contents
+ * @returns escaped cell text
+ */
+const escapeCellText = (text: string): string => {
+  if (!text.includes(',')) {
+    // No need to escape
+    return text;
+  }
+
+  // Perform escape
+  return `"${text.replace(/"/g, '""')}`;
+};
+
+/**
+ * Generate a CSV file
+ * @author Gabe Abrams
+ * @param data list of row data in the form of json objects
+ * @param columns list of columns to include in the csv
+ * @returns multiline csv string
+ */
+const genCSV = (
+  data: {
+    [k: string]: any
+  }[],
+  columns: {
+    title: string,
+    param: string,
+  }[],
+): string => {
+  let csv = '';
+
+  // Add header
+  csv += (
+    columns
+      .map((column) => {
+        return escapeCellText(column.title);
+      })
+      .join(',')
+  );
+
+  // Add each row
+  data.forEach((datum) => {
+    csv += (
+      columns
+        .map((column) => {
+          return escapeCellText(datum[column.param]);
+        })
+        .join(',')
+    );
+  });
+
+  // Return
+  return csv;
+};
+
+export default genCSV;

package/src/helpers/getHumanReadableDate.ts

@@ -1,21 +1,7 @@
+// Import shared helpers
 import getTimeInfoInET from './getTimeInfoInET';
 import getOrdinal from './getOrdinal';
-
-// Map of month to three letter description
-const monthMap = {
-  1: 'Jan',
-  2: 'Feb',
-  3: 'Mar',
-  4: 'Apr',
-  5: 'May',
-  6: 'Jun',
-  7: 'Jul',
-  8: 'Aug',
-  9: 'Sep',
-  10: 'Oct',
-  11: 'Nov',
-  12: 'Dec',
-};
+import getMonthName from './getMonthName';
 
 /**
  * Get a human-readable description of a date (all in ET)
@@ -32,8 +18,11 @@ const getHumanReadableDate = (dateOrTimestamp?: Date | number) => {
   } = getTimeInfoInET(dateOrTimestamp);
   const currYear = getTimeInfoInET().year;
 
+  // Get the short month description
+  const monthName = getMonthName(month).short;
+
   // Create start of description
-  let description = `${monthMap[month as keyof typeof monthMap]} ${day}${getOrdinal(day)}`;
+  let description = `${monthName} ${day}${getOrdinal(day)}`;
 
   // Add on year if it's different
   if (year !== currYear) {

package/src/helpers/getMonthName.ts

@@ -0,0 +1,29 @@
+const monthNames = [
+  { short: 'Jan', full: 'January' },
+  { short: 'Feb', full: 'February' },
+  { short: 'Mar', full: 'March' },
+  { short: 'Apr', full: 'April' },
+  { short: 'May', full: 'May' },
+  { short: 'Jun', full: 'June' },
+  { short: 'Jul', full: 'July' },
+  { short: 'Aug', full: 'August' },
+  { short: 'Sep', full: 'September' },
+  { short: 'Oct', full: 'October' },
+  { short: 'Nov', full: 'November' },
+  { short: 'Dec', full: 'December' },
+];
+
+/**
+ * Get the name of a month given the month number (1 = January, etc.)
+ *   If an invalid number is provided, we will treat it like January
+ * @author Gabe Abrams
+ * @param month the number of the month
+ * @returns object containing multiple month name formats:
+ *   { short, full } where short will look like "Jan" and full will look like
+ *   "January"
+ */
+const getMonthName = (month: number) => {
+  return (monthNames[month - 1] ?? monthNames[0]);
+};
+
+export default getMonthName;

package/src/helpers/logClientEvent.tsx

@@ -2,6 +2,7 @@
 import LOG_ROUTE_PATH from '../constants/LOG_ROUTE_PATH';
 import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
 import LogFunction from '../types/LogFunction';
+import LogLevel from '../types/LogLevel';
 
 // Import shared functions
 import visitServerEndpoint from './visitServerEndpoint';
@@ -27,6 +28,10 @@ const logClientEvent: LogFunction = async (opts) => {
         opts.subcontext
         ?? LogBuiltInMetadata.Context.Uncategorized
       ),
+      level: (
+        opts.level
+        ?? LogLevel.Info
+      ),
       tags: JSON.stringify(opts.tags ?? []),
       metadata: JSON.stringify(opts.metadata ?? {}),
       errorMessage: (

package/src/index.ts

@@ -14,6 +14,9 @@ import PopFailureMark from './components/PopFailureMark';
 import PopPendingMark from './components/PopPendingMark';
 import CopiableBox from './components/CopiableBox';
 import ItemPicker from './components/ItemPicker';
+import LogReviewer from './components/LogReviewer';
+import IntelliTable from './components/IntelliTable';
+import CSVDownloadButton from './components/CSVDownloadButton';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -50,6 +53,9 @@ import onlyKeepLetters from './helpers/onlyKeepLetters';
 import parallelLimit from './helpers/parallelLimit';
 import logClientEvent from './helpers/logClientEvent';
 import initLogCollection from './server/initLogCollection';
+import getMonthName from './helpers/getMonthName';
+import genCSV from './helpers/genCSV';
+import canReviewLogs from './helpers/canReviewLogs';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -64,6 +70,8 @@ import LogType from './types/LogType';
 import LogSource from './types/LogSource';
 import LogAction from './types/LogAction';
 import LogBuiltInMetadata from './types/LogBuiltInMetadata';
+import LogMetadataType from './types/LogMetadataType';
+import IntelliTableColumn from './types/IntelliTableColumn';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -86,6 +94,9 @@ export {
   PopPendingMark,
   CopiableBox,
   ItemPicker,
+  LogReviewer,
+  IntelliTable,
+  CSVDownloadButton,
   // Global functions
   alert,
   confirm,
@@ -116,6 +127,9 @@ export {
   stringsToHumanReadableList,
   onlyKeepLetters,
   parallelLimit,
+  getMonthName,
+  genCSV,
+  canReviewLogs,
   // Client helpers
   visitServerEndpoint,
   logClientEvent,
@@ -137,6 +151,8 @@ export {
   LogSource,
   LogAction,
   LogBuiltInMetadata,
+  LogMetadataType,
+  IntelliTableColumn,
   // Component-specific-types
   PickableItem,
   // Server types

package/src/server/initServer.ts

@@ -1,13 +1,18 @@
 // Import custom error
-import LOG_ROUTE_PATH from '../constants/LOG_ROUTE_PATH';
 import ErrorWithCode from '../errors/ErrorWithCode';
 
+// Import shared constants
+import LOG_REVIEW_ROUTE_PATH_PREFIX from '../constants/LOG_REVIEW_ROUTE_PATH_PREFIX';
+import LOG_ROUTE_PATH from '../constants/LOG_ROUTE_PATH';
+import LOG_REVIEW_STATUS_ROUTE from '../constants/LOG_REVIEW_STATUS_ROUTE';
+
 // Import shared helpers
 import genRouteHandler from '../helpers/genRouteHandler';
-import LogFunction from '../types/LogFunction';
-import ParamType from '../types/ParamType';
 
 // Import shared types
+import Log from '../types/Log';
+import LogFunction from '../types/LogFunction';
+import ParamType from '../types/ParamType';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
 // Types
@@ -66,17 +71,29 @@ export const internalGetLogCollection = () => {
  * @param opts.getLaunchInfo CACCL LTI's get launch info function
  * @param [opts.logCollection] mongo collection from dce-mango to use for
  *   storing logs. If none is included, logs are written to the console
+ * @param [opts.logReviewAdmins=all] info on which admins can review
+ *   logs from the client. If not included, all Canvas admins are allowed to
+ *   review logs. If null, no Canvas admins are allowed to review logs.
+ *   If an array of Canvas userIds (numbers), only Canvas admins with those
+ *   userIds are allowed to review logs. If a dce-mango collection, only
+ *   Canvas admins with entries in that collection ({ userId, ...}) are allowed
+ *   to review logs
  */
 const initServer = (
   opts: {
     app: any,
     getLaunchInfo: GetLaunchInfoFunction,
     logCollection?: any,
+    logReviewAdmins?: (number[] | any),
   },
 ) => {
   _cacclGetLaunchInfo = opts.getLaunchInfo;
   _logCollection = opts.logCollection;
 
+  /*----------------------------------------*/
+  /*                Logging                 */
+  /*----------------------------------------*/
+
   /**
    * Log an event
    * @author Gabe Abrams
@@ -154,6 +171,111 @@ const initServer = (
       },
     }),
   );
+
+  /*----------------------------------------*/
+  /*              Log Reviewer              */
+  /*----------------------------------------*/
+
+  /**
+   * Check if a given user is allowed to review logs
+   * @author Gabe Abrams
+   * @param userId the id of the user
+   * @param isAdmin if true, the user is an admin
+   * @returns true if the user can review logs
+   */
+  const canReviewLogs = async (
+    userId: number,
+    isAdmin: boolean,
+  ): Promise<boolean> => {
+    // Immediately deny access if user is not an admin
+    if (!isAdmin) {
+      return false;
+    }
+
+    // If all admins are allowed, we're done
+    if (!opts.logReviewAdmins) {
+      return true;
+    }
+
+    // Do a dynamic check
+    try {
+      // Array of userIds
+      if (Array.isArray(opts.logReviewAdmins)) {
+        return opts.logReviewAdmins.some((allowedId) => {
+          return (userId === allowedId);
+        });
+      }
+
+      // Must be a collection
+      const matches = await opts.logReviewAdmins.find({ userId });
+
+      // Make sure at least one entry matches
+      return matches.length > 0;
+    } catch (err) {
+      // If an error occurred, simply return false
+      return false;
+    }
+  };
+
+  /**
+   * Check if the current user has access to logs
+   * @author Gabe Abrams
+   * @returns {boolean} true if user has access
+   */
+  opts.app.get(
+    LOG_REVIEW_STATUS_ROUTE,
+    genRouteHandler({
+      handler: async ({ params }) => {
+        const { userId, isAdmin } = params;
+        const canReview = await canReviewLogs(userId, isAdmin);
+        return canReview;
+      },
+    }),
+  );
+
+  /**
+   * Get all logs for a certain month
+   * @author Gabe Abrams
+   * @param {number} year the year to query (e.g. 2022)
+   * @param {number} month the month to query (e.g. 1 = January)
+   * @returns {Log[]} list of logs from the given month
+   */
+  opts.app.get(
+    `${LOG_REVIEW_ROUTE_PATH_PREFIX}/years/:year/months/:month`,
+    genRouteHandler({
+      paramTypes: {
+        year: ParamType.Int,
+        month: ParamType.Int,
+      },
+      handler: async ({ params }) => {
+        // Get user info
+        const {
+          year,
+          month,
+          userId,
+          isAdmin,
+        } = params;
+
+        // Validate user
+        const canReview = await canReviewLogs(userId, isAdmin);
+        if (!canReview) {
+          throw new ErrorWithCode(
+            'You cannot access this resource because you do not have the appropriate permissions.',
+            ReactKitErrorCode.NotAllowedToReviewLogs,
+          );
+        }
+
+        // Query for logs
+        const logs: Log[] = await _logCollection.find({
+          year,
+          month,
+        });
+
+        // Return logs
+        return logs;
+      },
+    }),
+  );
 };
 
 export default initServer;

package/src/types/IntelliTableColumn.ts

@@ -0,0 +1,24 @@
+import ParamType from './ParamType';
+
+/**
+ * Column description for a column in the IntelliTable
+ * @author Gabe Abrams
+ */
+type IntelliTableColumn = {
+  // Human-readable name of the column
+  title: string,
+  // Parameter name (property inside the data object)
+  param: string,
+  // Type of value
+  type: (
+    | ParamType.Boolean
+    | ParamType.Float
+    | ParamType.Int
+    | ParamType.String
+    | ParamType.JSON
+  ),
+  // If true, column starts hidden
+  startsHidden?: boolean,
+};
+
+export default IntelliTableColumn;

package/src/types/LogBuiltInMetadata.ts

@@ -8,6 +8,7 @@ const LogBuiltInMetadata = {
     Uncategorized: 'n/a',
     ServerRenderedErrorPage: '_server-rendered-error-page',
     ServerEndpointError: '_server-endpoint-error',
+    ClientFatalError: '_client-fatal-error',
   },
   // Targets
   Target: {

package/src/types/LogMetadataType.ts

@@ -0,0 +1,23 @@
+/**
+ * Type of a LogMetadata file
+ * @author Gabe Abrams
+ */
+type LogMetadataType = {
+  Context?: {
+    [k: string]: (
+      | string
+      | {
+        _: string,
+        [k: string]: string
+      }
+    )
+  },
+  Tag?: {
+    [k: string]: string
+  },
+  Target?: {
+    [k: string]: string
+  },
+};
+
+export default LogMetadataType;

package/src/types/ReactKitErrorCode.tsx

@@ -1,4 +1,4 @@
-// Highest error code = DRK10
+// Highest error code = DRK11
 
 /**
  * List of error codes built into the react kit
@@ -15,6 +15,7 @@ enum ReactKitErrorCode {
   NoCACCLGetLaunchInfoFunction = 'DRK8',
   NotTTM = 'DRK9',
   NotAdmin = 'DRK10',
+  NotAllowedToReviewLogs = 'DRK11',
 }
 
 export default ReactKitErrorCode;