dce-reactkit 3.12.1-beta-cross-server.2 → 3.12.3

package/src/components/Modal/index.tsx

@@ -14,6 +14,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 // Import other components
+import LoadingSpinner from '../LoadingSpinner';
+
+// Import helpers
 import waitMs from '../../helpers/waitMs';
 
 // Import types
@@ -41,6 +44,7 @@ const BASE_Z_INDEX_ON_TOP = 2000000000;
 
 // Constants
 const MS_TO_ANIMATE = 200; // Animation duration
+const MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR = 1000;
 
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes: {
@@ -256,6 +260,8 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
+    isLoading,
+    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -266,6 +272,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   /* -------------- Refs -------------- */
 
@@ -298,6 +305,15 @@ const Modal: React.FC<ModalProps> = (props) => {
         if (mounted.current) {
           setAnimatingIn(false);
         }
+        if (isLoading) {
+          // wait before showing modal
+          await waitMs(MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR);
+          if (mounted.current) {
+            setShowModal(true);
+          }
+        } else {
+          setShowModal(true);
+        }
       })();
 
       return () => {
@@ -400,6 +416,17 @@ const Modal: React.FC<ModalProps> = (props) => {
     animationClass = 'Modal-animating-pop';
   }
 
+  // default to show close button when not loading and not show close button when loading
+  // unless downShowXButton or isLoadingCancelable
+  const showCloseButton = (
+    // The modal must have an onClose function
+    onClose
+    // ...and the close button is allowed to be visible
+    && !dontShowXButton
+    // ...and should not be shown if the modal is loading and not cancelable
+    && !(isLoading && !isLoadingCancelable)
+  );
+
   // Render the modal
   const contentToRender = (
     <div
@@ -436,6 +463,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           handleClose(ModalButtonType.Cancel);
         }}
       />
+
+      {showModal && (
       <div
         className={`modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`}
         style={{
@@ -498,7 +527,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {(onClose && !dontShowXButton) && (
+              {showCloseButton && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -518,25 +547,34 @@ const Modal: React.FC<ModalProps> = (props) => {
               )}
             </div>
           )}
-          {children && (
-            <div
-              className="modal-body"
-              style={{
-                color: (
-                  isDarkModeOn()
-                    ? 'white'
-                    : undefined
-                ),
-                backgroundColor: (
-                  isDarkModeOn()
-                    ? '#444'
-                    : undefined
-                ),
-              }}
-            >
-              {children}
-            </div>
-          )}
+
+          <div
+            className="modal-body"
+            style={{
+              color: (
+                isDarkModeOn()
+                  ? 'white'
+                  : undefined
+              ),
+              backgroundColor: (
+                isDarkModeOn()
+                  ? '#444'
+                  : undefined
+              ),
+            }}
+          >
+            {
+              isLoading
+                ? (
+                  <>
+                    <LoadingSpinner />
+                    <span className="sr-only">Content loading</span>
+                  </>
+                )
+                : children
+            }
+          </div>
+
           {footer && (
             <div
               className="modal-footer pt-1 pb-1"
@@ -563,6 +601,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
+      )}
     </div>
   );
 

package/src/components/TabBox.tsx

@@ -15,6 +15,8 @@ type Props = {
   title: React.ReactNode,
   // Children/contents inside the box
   children: React.ReactNode,
+  // Children to display on the top right of the tab box
+  topRightChildren?: React.ReactNode,
   // If true, don't add margin below the tab box
   noBottomMargin?: boolean,
   // If true, don't add padding to bottom of tab box
@@ -49,7 +51,9 @@ const style = `
 
   /* Container for Title */
   .TabBox-title-container {
-    /* Place on Left */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     position: relative;
     left: 0;
     text-align: left;
@@ -82,6 +86,19 @@ const style = `
     background: #fdfdfd;
   }
 
+  .TabBox-title-right-container {
+    display: flex;
+    flex-direction: row;
+    align-items: bottom;
+    height: 2.4rem;
+    overflow: visible;
+  }
+
+  .TabBox-title-right-contents {
+    margin-right: 0.5rem;
+    margin-bottom: 0.2rem;
+  }
+
   /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
   .TabBox-children {
     position: relative;
@@ -98,11 +115,10 @@ const TabBox: React.FC<Props> = (props) => {
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /* -------------- Props ------------- */
-
   const {
     title,
     children,
+    topRightChildren,
     noBottomPadding,
     noBottomMargin,
   } = props;
@@ -111,21 +127,23 @@ const TabBox: React.FC<Props> = (props) => {
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /*----------------------------------------*/
-  /* --------------- Main UI -------------- */
-  /*----------------------------------------*/
-
-  // Full UI
   return (
     <div className={`TabBox-container ${noBottomMargin ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>
 
-      {/* Title */}
+      {/* Title Row with Left and Right sections */}
       <div className="TabBox-title-container">
         <div className="TabBox-title">
           {title}
         </div>
+        {topRightChildren && (
+          <div className="TabBox-title-right-container">
+            <div className="TabBox-title-right-contents">
+              {topRightChildren}
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Contents */}

package/src/helpers/genRouteHandler.ts

@@ -17,7 +17,6 @@ import genErrorPage from '../html/genErrorPage';
 import genInfoPage from '../html/genInfoPage';
 import parseUserAgent from './parseUserAgent';
 import getTimeInfoInET from './getTimeInfoInET';
-import { parseSignedPack } from './dataSigner';
 
 // Import shared types
 import LogFunction from '../types/LogFunction';
@@ -30,7 +29,6 @@ import LogSourceSpecificInfo from '../types/Log/LogSourceSpecificInfo';
 import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
 import LogAction from '../types/LogAction';
 import LogLevel from '../types/LogLevel';
-import ErrorWithCode from '../errors/ErrorWithCode';
 
 /**
  * Generate an express API route handler
@@ -39,15 +37,14 @@ import ErrorWithCode from '../errors/ErrorWithCode';
  * @param opts.paramTypes map containing the types for each parameter that is
  *   included in the request (map: param name => type)
  * @param opts.handler function that processes the request
- * @param [opts.crossServerScope] the scope associated with this endpoint.
- *   If defined, this is a cross-server endpoint, which will never
- *   have any launch data, will never check Canvas roles or launch status, and will
- *   instead use scopes and reactkit credentials to sign and validate requests.
- *   Never start the path with /api/ttm or /api/admin if the endpoint is a cross-server
- *   endpoint because those roles will not be validated
- * @param [opts.skipSessionCheck=true if crossServerScope defined] if true, skip
- *   the session check (allow users to not be logged in and launched via LTI).
- *   If crossServerScope is defined, this is always true
+ * @param [opts.skipSessionCheck] if true, skip the session check (allow users
+ *   to not be logged in and launched via LTI)
+ * @param [opts.allowedHosts] if included, only allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
+ * @param [opts.bannedHosts] if included, do not allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
  * @param [opts.unhandledErrorMessagePrefix] if included, when an error that
  *   is not of type ErrorWithCode is thrown, the client will receive an error
  *   where the error message is prefixed with this string. For example,
@@ -110,67 +107,106 @@ const genRouteHandler = (
         logServerEvent: LogFunction,
       },
     ) => any,
-    crossServerScope?: string,
     skipSessionCheck?: boolean,
+    allowedHosts?: string[] | string,
+    bannedHosts?: string[] | string,
     unhandledErrorMessagePrefix?: string,
   },
 ) => {
   // Return a route handler
   return async (req: any, res: any, next: () => void) => {
-    /*----------------------------------------*/
-    /* ------------- Preparation ------------ */
-    /*----------------------------------------*/
-
     // Output params
     const output: { [k in string]: any } = {};
 
-    // Determine cross server scopes
-    let crossServerScope: string | null = null;
-    if (opts.crossServerScope) {
-      crossServerScope = opts.crossServerScope ?? null;
-    }
+    /*----------------------------------------*/
+    /* ----------- Hostname Check ----------- */
+    /*----------------------------------------*/
 
-    // Determine whether we're skipping the session check
-    const skipSessionCheck = !!(
-      opts.skipSessionCheck
-      || crossServerScope
+    // Get hostnames
+    const originURL = String(
+      req.get('origin')
+      || req.headers.origin
+      || req.headers.referer,
     );
+    const originHostname = (
+      originURL
+        // Remove protocol
+        .replace(/(^\w+:|^)\/\//, '')
+        // Remove port
+        .replace(/:\d+$/, '')
+    );
+    const serverHostname = String(req.hostname);
+
+    // Check allowed
+    if (opts.allowedHosts) {
+      // Only accept requests from allowed hosts
+      const allowedArray = (
+        Array.isArray(opts.allowedHosts)
+          ? opts.allowedHosts
+          : [opts.allowedHosts]
+      );
 
-    // Get body from everywhere it can come from
-    let requestBody: {
-      [k: string]: any,
-    } = {
-      ...req.body,
-      ...req.query,
-      ...req.params,
-    };
+      // Check if server is localhost
+      if (serverHostname === 'localhost') {
+        // Allow localhost
+        allowedArray.push('localhost');
+      }
 
-    /*----------------------------------------*/
-    /* ------- Cross-Server Validation ------ */
-    /*----------------------------------------*/
+      // Check if current host is allowed
+      const allowed = allowedArray.some((allowedHost) => {
+        if (allowedHost.startsWith('*')) {
+          // Check end of hostname
+          return originHostname.endsWith(allowedHost.substring(1));
+        }
 
-    if (crossServerScope) {
-      // Get the signed pack
-      const { signedPack } = requestBody;
+        // Check full hostname
+        return originHostname.toLowerCase() === allowedHost.toLowerCase();
+      });
 
-      // If no pack, throw error
-      if (!signedPack || typeof signedPack !== 'string') {
-        throw new ErrorWithCode(
-          'Could not process a cross server request because there was no valid signed pack.',
-          ReactKitErrorCode.CrossServerNoPack,
+      // If not allowed, return error
+      if (!allowed) {
+        return handleError(
+          res,
+          {
+            message: 'You are not allowed to access this endpoint.',
+            code: ReactKitErrorCode.HostNotAllowed,
+            status: 403,
+          },
         );
       }
+    }
+
+    // Check banned
+    if (opts.bannedHosts) {
+      // Do not allow requests from banned hosts
+      const bannedArray = (
+        Array.isArray(opts.bannedHosts)
+          ? opts.bannedHosts
+          : [opts.bannedHosts]
+      );
+
+      // Check if current host is banned
+      const banned = bannedArray.some((bannedHost) => {
+        if (bannedHost.startsWith('*')) {
+          // Check end of hostname
+          return originHostname.endsWith(bannedHost.substring(1));
+        }
 
-      // Validate the request
-      const crossServerParams = await parseSignedPack({
-        method: req.method ?? 'GET',
-        path: req.path,
-        scope: crossServerScope,
-        signedPack,
+        // Check full hostname
+        return originHostname.toLowerCase() === bannedHost.toLowerCase();
       });
 
-      // Replace body with params from the pack
-      requestBody = crossServerParams ?? {};
+      // If banned, return error
+      if (banned) {
+        return handleError(
+          res,
+          {
+            message: 'You are not allowed to access this endpoint.',
+            code: ReactKitErrorCode.HostBanned,
+            status: 403,
+          },
+        );
+      }
     }
 
     /*----------------------------------------*/
@@ -183,7 +219,11 @@ const genRouteHandler = (
       const [name, type] = paramList[i];
 
       // Find the value as a string
-      const value = requestBody[name];
+      const value = (
+        req.params[name]
+        || req.query[name]
+        || req.body[name]
+      );
 
       // Parse
       if (type === ParamType.Boolean || type === ParamType.BooleanOptional) {
@@ -366,7 +406,7 @@ const genRouteHandler = (
       // Not launched
       (!launched || !launchInfo)
       // Not skipping the session check
-      && !skipSessionCheck
+      && !opts.skipSessionCheck
     ) {
       return handleError(
         res,
@@ -397,7 +437,7 @@ const genRouteHandler = (
         )
       )
       // Not skipping the session check
-      && !skipSessionCheck
+      && !opts.skipSessionCheck
     ) {
       return handleError(
         res,

package/src/helpers/getWordCount.ts

@@ -0,0 +1,26 @@
+const punctuationRegex = /[!@#$%^&*(),.?\/;:'"\-\[\]]/g;
+
+/**
+ * Get number of words in string 
+ * @author Gardenia Liu
+ * @author Allison Zhang
+ * @author Gabe Abrams
+ * @param text the string to check
+ * @returns number of words in the string
+ */
+const getWordCount = (text: string): number => {
+  const trimmedTextWithoutPunctuation = (
+    text
+      // Remove leading and trailing whitespace
+      .trim()
+      // Remove punctuation
+      .replace(punctuationRegex, '')
+  );
+  if (trimmedTextWithoutPunctuation.length === 0) {
+    return 0;
+  }
+
+  return trimmedTextWithoutPunctuation.split(/\s+/g).length;
+};
+
+export default getWordCount;

package/src/helpers/visitEndpointOnAnotherServer/index.ts

@@ -1,72 +1,71 @@
-// Import data signer
-import { createSignedPack } from '../dataSigner';
+// Import custom error
+import ErrorWithCode from '../../errors/ErrorWithCode';
 
 // Import shared types
-import ErrorWithCode from '../../errors/ErrorWithCode';
 import ReactKitErrorCode from '../../types/ReactKitErrorCode';
+
+// Import other helpers
 import sendServerToServerRequest from './sendServerToServerRequest';
 
 /**
- * Visit an endpoint on another server
+ * Send a server-to-server request from this sever to another server that uses
+ *   dce-reactkit [for server only]
  * @author Gabe Abrams
  * @param opts object containing all arguments
- * @param opts.method the method of the endpoint
- * @param opts.path the path of the other server's endpoint
- * @param opts.host the host of the other server
- * @param [opts.key=process.env.REACTKIT_CROSS_SERVER_CREDENTIAL_KEY] reactkit cross-server
- *   credential key
- * @param [opts.secret=process.env.REACTKIT_CROSS_SERVER_CREDENTIAL_SECRET reactkit cross-server
- *   credential secret
- * @param [opts.params={}] query/body parameters to include
- * @param [opts.responseType=JSON] the response type from the other server
+ * @param opts.host - the host of the other server
+ * @param opts.path - the path of the other server's endpoint
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @param [opts.headers] - headers to include
+ * @returns response from server
  */
 const visitEndpointOnAnotherServer = async (
   opts: {
-    method: 'GET' | 'POST' | 'DELETE' | 'PUT',
-    path: string,
     host: string,
-    key?: string,
-    secret?: string,
+    path: string,
+    method?: ('GET' | 'POST' | 'DELETE' | 'PUT'),
     params?: { [key in string]: any },
-    responseType?: 'JSON' | 'Text',
+    headers?: { [k in string]: any },
   },
 ): Promise<any> => {
-  // Get cross-server credentials
-  const key = opts.key ?? process.env.REACTKIT_CROSS_SERVER_KEY;
-  const secret = opts.secret ?? process.env.REACTKIT_CROSS_SERVER_SECRET;
-
-  // Throw error if no credentials
-  if (!key || !secret) {
-    throw new ErrorWithCode(
-      'Cannot send cross-server signed request because either or both the key and secret were not included or found in env.',
-      ReactKitErrorCode.CrossServerNoCredentialsToSignWith,
+  // Remove properties with undefined values
+  let params: { [key in string]: any } | undefined;
+  if (opts.params) {
+    params = Object.fromEntries(
+      Object
+        .entries(opts.params)
+        .filter(([, value]) => {
+          return value !== undefined;
+        }),
     );
   }
 
-  // Create signed pack
-  const signedPack = createSignedPack({
-    method: opts.method,
-    path: opts.path,
-    params: opts.params ?? {},
-    key,
-    secret,
-  });
+  // Automatically JSONify arrays and objects
+  if (params) {
+    params = Object.fromEntries(
+      Object
+        .entries(params)
+        .map(([key, value]) => {
+          if (Array.isArray(value) || typeof value === 'object') {
+            return [key, JSON.stringify(value)];
+          }
+          return [key, value];
+        }),
+    );
+  }
 
   // Send the request
   const response = await sendServerToServerRequest({
-    path: opts.path,
     host: opts.host,
-    method: opts.method,
-    params: {
-      signedPack,
-    },
-    responseType: opts.responseType,
+    path: opts.path,
+    method: opts.method ?? 'GET',
+    params,
   });
 
   // Check for failure
   if (!response || !response.body) {
     throw new ErrorWithCode(
-      'We didn\'t get a response from the other server. Please check your internet connection.',
+      'We didn\'t get a response from the server. Please check your internet connection.',
       ReactKitErrorCode.NoResponse,
     );
   }

package/src/helpers/visitEndpointOnAnotherServer/sendServerToServerRequest.ts

@@ -15,6 +15,9 @@ import ErrorWithCode from '../../errors/ErrorWithCode';
  * @param [opts.host] host to send request to
  * @param [opts.method=GET] http method to use
  * @param [opts.params] body/data to include in the request
+ * @param [opts.headers] headers to include in the request
+ * @param [opts.sendCrossDomainCredentials=true if in development mode] if true,
+ *   send cross-domain credentials even if not in dev mode
  * @param [opts.responseType=JSON] expected response type
  * @returns { body, status, headers } on success
  */
@@ -24,6 +27,7 @@ const sendServerToServerRequest = async (
     host?: string,
     method?: ('GET' | 'POST' | 'PUT' | 'DELETE'),
     params?: { [k in string]: any },
+    headers?: { [k in string]: any },
     responseType?: 'Text' | 'JSON',
   },
 ): Promise<{
@@ -66,9 +70,7 @@ const sendServerToServerRequest = async (
   }
 
   // Update headers
-  const headers: {
-    [k: string]: any,
-  } = {};
+  const headers = opts.headers || {};
   let data: string | null | { [k: string]: any } | undefined = null;
   if (!headers['Content-Type']) {
     // Form encoded

package/src/index.ts

@@ -70,7 +70,6 @@ import onlyKeepLetters from './helpers/onlyKeepLetters';
 import parallelLimit from './helpers/parallelLimit';
 import logClientEvent, { setClientEventMetadataPopulator } from './helpers/logClientEvent';
 import initLogCollection from './server/initLogCollection';
-import initCrossServerCredentialCollection from './server/initCrossServerCredentialCollection';
 import getMonthName from './helpers/getMonthName';
 import genCSV from './helpers/genCSV';
 import canReviewLogs from './helpers/canReviewLogs';
@@ -96,6 +95,7 @@ import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
 import visitEndpointOnAnotherServer from './helpers/visitEndpointOnAnotherServer';
+import getWordCount from './helpers/getWordCount';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -114,7 +114,6 @@ import LogMetadataType from './types/LogMetadataType';
 import LogFunction from './types/LogFunction';
 import IntelliTableColumn from './types/IntelliTableColumn';
 import DropdownItemType from './types/DropdownItemType';
-import CrossServerCredential from './types/CrossServerCredential';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -203,6 +202,7 @@ export {
   someAsync,
   capitalize,
   shuffleArray,
+  getWordCount,
   // Client helpers
   initClient,
   visitServerEndpoint,
@@ -218,7 +218,6 @@ export {
   handleError,
   handleSuccess,
   initLogCollection,
-  initCrossServerCredentialCollection,
   addDBEditorEndpoints,
   visitEndpointOnAnotherServer,
   // Types
@@ -237,7 +236,6 @@ export {
   LogFunction,
   IntelliTableColumn,
   DropdownItemType,
-  CrossServerCredential,
   // Component-specific-types
   PickableItem,
   DBEntry,