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

package/dist/esm/types/types/LogMetadataContextMap.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Type of the context map in a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataContextMap = {
+    [k: string]: (string | {
+        _: string;
+        [k: string]: string;
+    });
+};
+export default LogMetadataContextMap;

package/dist/esm/types/types/LogMetadataTagMap.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Type of the tag map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTagMap = {
+    [k: string]: string;
+};
+export default LogMetadataTagMap;

package/dist/esm/types/types/LogMetadataTargetMap.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Type of the target map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTargetMap = {
+    [k: string]: string;
+};
+export default LogMetadataTargetMap;

package/dist/esm/types/types/LogMetadataType.d.ts

@@ -1,19 +1,13 @@
+import LogMetadataContextMap from './LogMetadataContextMap';
+import LogMetadataTagMap from './LogMetadataTagMap';
+import LogMetadataTargetMap from './LogMetadataTargetMap';
 /**
  * Type of a LogMetadata file
  * @author Gabe Abrams
  */
 declare type LogMetadataType = {
-    Context?: {
-        [k: string]: (string | {
-            _: string;
-            [k: string]: string;
-        });
-    };
-    Tag?: {
-        [k: string]: string;
-    };
-    Target?: {
-        [k: string]: string;
-    };
+    Context?: LogMetadataContextMap;
+    Tag?: LogMetadataTagMap;
+    Target?: LogMetadataTargetMap;
 };
 export default LogMetadataType;

package/dist/index.d.ts

@@ -369,23 +369,41 @@ declare type Props$3 = {
 };
 declare const ItemPicker: React.FC<Props$3>;
 
+/**
+ * Type of the context map in a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataContextMap = {
+    [k: string]: (string | {
+        _: string;
+        [k: string]: string;
+    });
+};
+
+/**
+ * Type of the tag map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTagMap = {
+    [k: string]: string;
+};
+
+/**
+ * Type of the target map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTargetMap = {
+    [k: string]: string;
+};
+
 /**
  * Type of a LogMetadata file
  * @author Gabe Abrams
  */
 declare type LogMetadataType = {
-    Context?: {
-        [k: string]: (string | {
-            _: string;
-            [k: string]: string;
-        });
-    };
-    Tag?: {
-        [k: string]: string;
-    };
-    Target?: {
-        [k: string]: string;
-    };
+    Context?: LogMetadataContextMap;
+    Tag?: LogMetadataTagMap;
+    Target?: LogMetadataTargetMap;
 };
 
 /**

package/package.json

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

package/src/components/LogReviewer.tsx

@@ -36,6 +36,8 @@ import LogAction from '../types/LogAction';
 import ParamType from '../types/ParamType';
 import IntelliTableColumn from '../types/IntelliTableColumn';
 import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
+import LogMetadataContextMap from '../types/LogMetadataContextMap';
+import LogMetadataTargetMap from '../types/LogMetadataTargetMap';
 
 // Import shared components
 import SimpleDateChooser from './SimpleDateChooser';
@@ -712,33 +714,34 @@ const LogReviewer: React.FC<Props> = (props) => {
     onClose,
   } = props;
 
-  // Add built-in LogMetadata
-  // > Add "uncategorized" subcontext to each context
-  Object.keys(LogMetadata.Context ?? {}).forEach((context) => {
-    if (
-      // Context exists
-      LogMetadata.Context
-      // Context has children already
-      && typeof LogMetadata.Context[context] !== 'string'
-    ) {
-      (LogMetadata.Context as any)[context][LogBuiltInMetadata.Context.Uncategorized] = (
-        LogBuiltInMetadata.Context.Uncategorized
-      );
-    }
-  })
-  // > Add built-in contexts
-  LogMetadata.Context = (LogMetadata.Context ?? {});
-  Object.keys(LogBuiltInMetadata.Context).forEach((context) => {
-    if (LogMetadata.Context) {
-      LogMetadata.Context[context] = context;
-    }
+  // Create complete map of contexts
+  const contextMap: LogMetadataContextMap = {};
+  [
+    (LogMetadata.Context ?? {}),
+    LogBuiltInMetadata.Context,
+  ].forEach((partialContextMap) => {
+    Object.keys(partialContextMap).forEach((context) => {
+      // Add context
+      contextMap[context] = context;
+
+      // If context has children, add an "uncategorized" subcontext
+      if (typeof contextMap[context] !== 'string') {
+        (contextMap[context] as any)[LogBuiltInMetadata.Context.Uncategorized] = (
+          LogBuiltInMetadata.Context.Uncategorized
+        );
+      }
+    });
   });
-  // > Add built-in targets
-  LogMetadata.Target = (LogMetadata.Target ?? {});
-  Object.keys(LogBuiltInMetadata.Target).forEach((target) => {
-    if (LogMetadata.Target) {
-      LogMetadata.Target[target] = target;
-    }
+
+  // Create complete map of targets
+  const targetMap: LogMetadataTargetMap = {};
+  [
+    (LogMetadata.Target ?? {}),
+    LogBuiltInMetadata.Target,
+  ].forEach((partialTargetMap) => {
+    Object.keys(partialTargetMap).forEach((target) => {
+      targetMap[target] = target;
+    });
   });
 
   /* -------------- State ------------- */
@@ -1125,7 +1128,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               });
             }}
           >
-            Reset All
+            Reset
           </button>
         </div>
       </div>
@@ -1187,45 +1190,63 @@ const LogReviewer: React.FC<Props> = (props) => {
         );
       } else if (expandedFilterDrawer === FilterDrawer.Context) {
         // Create item picker items
-        const pickableItems: PickableItem[] = (
-          Object.keys(LogMetadata.Context ?? {})
-            .map((context) => {
-              const value = (LogMetadata.Context ?? {})[context];
-              if (typeof value === 'string') {
-                // No subcategories
-                const item: PickableItem = {
-                  id: context,
-                  name: genHumanReadableName(context),
-                  isGroup: false,
-                  checked: !!contextFilterState[context],
-                };
-                return item;
-              }
-
-              // Has subcategories
-              const children: PickableItem[] = (
-                Object.keys(value)
-                  .filter((subcontext) => {
-                    return subcontext !== '_';
-                  })
-                  .map((subcontext) => {
-                    return {
-                      id: subcontext,
-                      name: genHumanReadableName(subcontext),
-                      isGroup: false,
-                      checked: (contextFilterState[context] as any)[subcontext],
-                    };
-                  })
-              );
+        const builtInPickableItem: PickableItem = {
+          id: '_',
+          name: 'Auto-logged',
+          isGroup: true,
+          children: [],
+        };
+        const pickableItems: PickableItem[] = [];
+        Object.keys(contextMap)
+          .forEach((context) => {
+            const value = (contextMap)[context];
+            if (typeof value === 'string') {
+              // No subcategories
               const item: PickableItem = {
                 id: context,
                 name: genHumanReadableName(context),
-                isGroup: true,
-                children,
+                isGroup: false,
+                checked: !!contextFilterState[context],
               };
-              return item;
-            })
-        );
+
+              // Add built-in items to its own folder
+              const isBuiltIn = context in LogBuiltInMetadata.Context;
+              if (isBuiltIn) {
+                // Add to built-in pickable item
+                builtInPickableItem.children.push(item);
+              } else {
+                // Add to pickable items list
+                pickableItems.push(item);
+              }
+            }
+
+            // Has subcategories
+            const children: PickableItem[] = (
+              Object.keys(value)
+                // Remove parent name
+                .filter((subcontext) => {
+                  return subcontext !== '_';
+                })
+                // Create child pickable items
+                .map((subcontext) => {
+                  return {
+                    id: subcontext,
+                    name: genHumanReadableName(subcontext),
+                    isGroup: false,
+                    checked: (contextFilterState[context] as any)[subcontext],
+                  };
+                })
+            );
+            const item: PickableItem = {
+              id: context,
+              name: genHumanReadableName(context),
+              isGroup: true,
+              children,
+            };
+            pickableItems.push(item);
+          });
+        // Add built-in contexts to end ofl ist
+        pickableItems.push(builtInPickableItem);
 
         // Create filter UI
         filterDrawer = (
@@ -1237,15 +1258,30 @@ const LogReviewer: React.FC<Props> = (props) => {
               updatedItems.forEach((pickableItem) => {
                 if (pickableItem.isGroup) {
                   // Has subcontexts
-                  pickableItem.children.forEach((subcontextItem) => {
-                    if (!subcontextItem.isGroup) {
-                      (
-                        contextFilterState[pickableItem.id] as { [k: string]: boolean }
-                      )[subcontextItem.id] = (
-                        subcontextItem.checked
+
+                  
+                  if (pickableItem.id === '_') {
+                    // Built-in
+
+                    // Treat as if these were top-level contexts
+                    pickableItem.children.forEach((subcontextItem) => {
+                      contextFilterState[subcontextItem.id] = (
+                        'checked' in subcontextItem
+                        && subcontextItem.checked
                       );
-                    }
-                  });
+                    });
+                  } else {
+                    // Not built-in
+                    pickableItem.children.forEach((subcontextItem) => {
+                      if (!subcontextItem.isGroup) {
+                        (
+                          contextFilterState[pickableItem.id] as { [k: string]: boolean }
+                        )[subcontextItem.id] = (
+                          subcontextItem.checked
+                        );
+                      }
+                    });
+                  }
                 } else {
                   // No subcontexts
                   (contextFilterState as any)[pickableItem.id] = (
@@ -1264,6 +1300,11 @@ const LogReviewer: React.FC<Props> = (props) => {
         // Create filter UI
         filterDrawer = (
           <TabBox title="Tags">
+            <div>
+              If any are selected, logs must contain at least one
+              but not necessarily all of the
+              selected tags.
+            </div>
             {
               Object.keys(LogMetadata.Tag ?? {})
                 .map((tag, i) => {
@@ -1347,64 +1388,61 @@ const LogReviewer: React.FC<Props> = (props) => {
                     label="Action"
                     className="mb-2"
                   >
-                    {
-                      Object.keys(LogAction)
-                        .map((action, i) => {
-                          const description = genHumanReadableName(action);
-                          return (
-                            <CheckboxButton
-                              key={action}
-                              id={`LogReviewer-action-${action}-checkbox`}
-                              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;
-                                console.log(actionErrorFilterState, action, checked);
-                                dispatch({
-                                  type: ActionType.UpdateActionErrorFilterState,
-                                  actionErrorFilterState,
-                                });
-                              }}
-                            />
-                          );
-                        })
-                    }
+                    <div className="grid gap-1">
+                      {
+                        Object.keys(LogAction)
+                          .map((action) => {
+                            const description = genHumanReadableName(action);
+                            return (
+                              <CheckboxButton
+                                key={action}
+                                id={`LogReviewer-action-${action}-checkbox`}
+                                text={description}
+                                ariaLabel={`include logs with action type "${description}" in results`}
+                                noMarginOnRight
+                                checked={actionErrorFilterState.action[action]}
+                                onChanged={(checked) => {
+                                  actionErrorFilterState.action[action] = checked;
+                                  console.log(actionErrorFilterState, action, checked);
+                                  dispatch({
+                                    type: ActionType.UpdateActionErrorFilterState,
+                                    actionErrorFilterState,
+                                  });
+                                }}
+                              />
+                            );
+                          })
+                      }
+                    </div>
                   </ButtonInputGroup>
                   {/* Target */}
                   <ButtonInputGroup label="Target">
-                    {/* Nothing here */}
-                    {(Object.keys(LogMetadata.Target ?? {}).length === 0) && (
-                      <div>
-                        This app does not have any targets yet.
-                      </div>
-                    )}
                     {/* List of targets */}
-                    {
-                      Object.keys(LogMetadata.Target ?? {})
-                        .map((target, i) => {
-                          const description = genHumanReadableName(target);
-                          return (
-                            <CheckboxButton
-                              key={target}
-                              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;
-                                console.log(actionErrorFilterState, target, checked);
-                                dispatch({
-                                  type: ActionType.UpdateActionErrorFilterState,
-                                  actionErrorFilterState,
-                                });
-                              }}
-                              noMarginOnRight={i === Object.keys(LogMetadata.Target ?? {}).length - 1}
-                            />
-                          );
-                        })
-                    }
+                    <div className="grid gap-1">
+                      {
+                        Object.keys(targetMap)
+                          .map((target) => {
+                            const description = genHumanReadableName(target);
+                            return (
+                              <CheckboxButton
+                                key={target}
+                                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;
+                                  console.log(actionErrorFilterState, target, checked);
+                                  dispatch({
+                                    type: ActionType.UpdateActionErrorFilterState,
+                                    actionErrorFilterState,
+                                  });
+                                }}
+                              />
+                            );
+                          })
+                      }
+                    </div>
                   </ButtonInputGroup>
                 </TabBox>
               )
@@ -1426,6 +1464,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                       className="form-control"
                       aria-label="query for error message"
                       value={actionErrorFilterState.errorMessage}
+                      placeholder="e.g. undefined is not a function"
                       onChange={(e) => {
                         actionErrorFilterState.errorMessage = e.target.value;
                         dispatch({
@@ -1445,6 +1484,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                       className="form-control"
                       aria-label="query for error code"
                       value={actionErrorFilterState.errorCode}
+                      placeholder="e.g. GC22"
                       onChange={(e) => {
                         actionErrorFilterState.errorCode = (
                           (e.target.value)
@@ -1479,6 +1519,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user first name"
                   value={advancedFilterState.userFirstName}
+                  placeholder="e.g. Divardo"
                   onChange={(e) => {
                     advancedFilterState.userFirstName = e.target.value;
                     dispatch({
@@ -1498,6 +1539,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user last name"
                   value={advancedFilterState.userLastName}
+                  placeholder="e.g. Calicci"
                   onChange={(e) => {
                     advancedFilterState.userLastName = e.target.value;
                     dispatch({
@@ -1517,6 +1559,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user email"
                   value={advancedFilterState.userEmail}
+                  placeholder="e.g. calicci@fas.harvard.edu"
                   onChange={(e) => {
                     advancedFilterState.userEmail = (
                       (e.target.value)
@@ -1539,6 +1582,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user canvas id"
                   value={advancedFilterState.userId}
+                  placeholder="e.g. 104985"
                   onChange={(e) => {
                     const { value } = e.target;
                     // Only update if value contains only numbers  
@@ -1608,6 +1652,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for course name"
                   value={advancedFilterState.courseName}
+                  placeholder="e.g. GLC 200"
                   onChange={(e) => {
                     advancedFilterState.courseName = e.target.value;
                     dispatch({
@@ -1627,6 +1672,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for course canvas id"
                   value={advancedFilterState.courseId}
+                  placeholder="e.g. 15948"
                   onChange={(e) => {
                     const { value } = e.target;
                     // Only update if value contains only numbers  
@@ -1742,8 +1788,8 @@ const LogReviewer: React.FC<Props> = (props) => {
                       type="text"
                       className="form-control"
                       aria-label="query for server route path"
-                      placeholder="e.g. /api/ttm/courses/12345"
                       value={advancedFilterState.routePath}
+                      placeholder="e.g. /api/ttm/courses/12345"
                       onChange={(e) => {
                         advancedFilterState.courseName = (
                           (e.target.value)

package/src/types/LogMetadataContextMap.ts

@@ -0,0 +1,15 @@
+/**
+ * Type of the context map in a LogMetadata file
+ * @author Gabe Abrams
+ */
+type LogMetadataContextMap = {
+  [k: string]: (
+    | string
+    | {
+      _: string,
+      [k: string]: string
+    }
+  )
+};
+
+export default LogMetadataContextMap;

package/src/types/LogMetadataTagMap.ts

@@ -0,0 +1,9 @@
+/**
+ * Type of the tag map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+type LogMetadataTagMap = {
+  [k: string]: string
+};
+
+export default LogMetadataTagMap;

package/src/types/LogMetadataTargetMap.ts

@@ -0,0 +1,9 @@
+/**
+ * Type of the target map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+type LogMetadataTargetMap = {
+  [k: string]: string
+};
+
+export default LogMetadataTargetMap;

package/src/types/LogMetadataType.ts

@@ -1,23 +1,16 @@
+// Import shared types
+import LogMetadataContextMap from './LogMetadataContextMap';
+import LogMetadataTagMap from './LogMetadataTagMap';
+import LogMetadataTargetMap from './LogMetadataTargetMap';
+
 /**
  * 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
-  },
+  Context?: LogMetadataContextMap,
+  Tag?: LogMetadataTagMap,
+  Target?: LogMetadataTargetMap,
 };
 
 export default LogMetadataType;