dce-reactkit 3.2.2-beta.6 → 3.2.2-beta.8

package/dist/esm/types/components/ButtonInputGroup.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
+    className?: string;
 };
 declare const ButtonInputGroup: React.FC<Props>;
 export default ButtonInputGroup;

package/dist/index.d.ts

@@ -242,6 +242,7 @@ declare type Props$a = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
+    className?: string;
 };
 declare const ButtonInputGroup: React.FC<Props$a>;
 

package/package.json

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

package/src/components/ButtonInputGroup.tsx

@@ -18,6 +18,8 @@ type Props = {
   minLabelWidth?: string,
   // Buttons
   children: React.ReactNode,
+  // Additional class names to add to the outer container
+  className?: string,
 };
 
 /*------------------------------------------------------------------------*/
@@ -36,6 +38,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
     label,
     minLabelWidth,
     children,
+    className,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -47,7 +50,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
   /*----------------------------------------*/
 
   return (
-    <div className="input-group">
+    <div className={`input-group ${className ?? ''}`}>
       <div className="input-group-prepend d-flex w-100">
         {/* Label */}
         <span

package/src/components/IntelliTable.tsx

@@ -302,14 +302,14 @@ const IntelliTable: React.FC<Props> = (props) => {
           >
             <div className="d-flex align-items-center justify-content-center flex-row h-100">
               {/* Title */}
-              <h4 className="m-0">
+              <span className="text-nowrap">
                 {column.title}
-              </h4>
+              </span>
               {/* Buttons */}
               <div>
                 <button
                   type="button"
-                  className="btn btn-light"
+                  className="btn btn-light btn-sm ms-1"
                   aria-label={sortButtonAriaLabel}
                   onClick={() => {
                     dispatch({
@@ -567,7 +567,7 @@ const IntelliTable: React.FC<Props> = (props) => {
           {/* Show/Hide Columns */}
           <button
             type="button"
-            className="btn btn-secondary"
+            className="btn btn-secondary ms-2"
             aria-label={`show panel for customizing which columns show in table ${title}`}
             id={`IntelliTable-${id}-show-column-customization-modal`}
             onClick={() => {

package/src/components/LogReviewer.tsx

@@ -206,6 +206,11 @@ const style = `
     border: 0.05rem solid black;
     border-radius: 0.5rem;
     overflow: hidden;
+    padding: 0.7rem;
+
+    /* Solid background */
+    background-color: white;
+    color: black;
 
     /* Place contents in flex column */
     flex-direction: column;
@@ -232,6 +237,18 @@ const style = `
     /* Vertical scroll */
     overflow-y: auto;
   }
+
+  .LogReviewer-header-close-button {
+    border: 0 !important;
+    background-color: transparent !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin: 0 !important;
+    color: #333 !important;
+  }
+  .LogReviewer-header-close-button:hover {
+    color: #000 !important;
+  }
 `;
 
 /*------------------------------------------------------------------------*/
@@ -254,7 +271,7 @@ const genHumanReadableName = (machineReadableName: string) => {
       // Uppercase! Add a space before
       humanReadableName += ' ';
     }
-    humanReadableName += chars;
+    humanReadableName += char;
   });
 
   // Trim and return
@@ -727,7 +744,7 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Filter toggle
     const filterToggles = (
-      <div className="LogReviewer-filter-toggles d-flex align-items-center justify-content-center">
+      <div className="LogReviewer-filter-toggles mb-2">
         <h3 className="m-0">
           Filters:
         </h3>
@@ -736,7 +753,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-date-filter-drawer"
-            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
             aria-label="toggle date filter drawer"
             onClick={() => {
               dispatch({
@@ -755,7 +772,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-context-filter-drawer"
-            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
             aria-label="toggle context filter drawer"
             onClick={() => {
               dispatch({
@@ -771,29 +788,32 @@ const LogReviewer: React.FC<Props> = (props) => {
             Context
           </button>
           {/* Tag */}
-          <button
-            type="button"
-            id="LogReviewer-toggle-tag-filter-drawer"
-            className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer} me-2`}
-            aria-label="toggle tag filter drawer"
-            onClick={() => {
-              dispatch({
-                type: ActionType.ToggleFilterDrawer,
-                filterDrawer: FilterDrawer.Tag,
-              });
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faTag}
-              className="me-2"
-            />
-            Tag
-          </button>
+          {/* Skip if no tags are used */}
+          {(LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (
+            <button
+              type="button"
+              id="LogReviewer-toggle-tag-filter-drawer"
+              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
+              aria-label="toggle tag filter drawer"
+              onClick={() => {
+                dispatch({
+                  type: ActionType.ToggleFilterDrawer,
+                  filterDrawer: FilterDrawer.Tag,
+                });
+              }}
+            >
+              <FontAwesomeIcon
+                icon={faTag}
+                className="me-2"
+              />
+              Tag
+            </button>
+          )}
           {/* Action */}
           <button
             type="button"
             id="LogReviewer-toggle-action-filter-drawer"
-            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
             aria-label="toggle action and error filter drawer"
             onClick={() => {
               dispatch({
@@ -812,7 +832,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-advanced-filter-drawer"
-            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer}`}
+            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'secondary'}`}
             aria-label="toggle advanced filter drawer"
             onClick={() => {
               dispatch({
@@ -1023,7 +1043,10 @@ const LogReviewer: React.FC<Props> = (props) => {
               ) && (
                 <TabBox title="Action Log Details">
                   {/* Action */}
-                  <ButtonInputGroup label="Action">
+                  <ButtonInputGroup
+                    label="Action"
+                    className="mb-2"
+                  >
                     {
                       Object.keys(LogAction)
                         .map((action, i) => {
@@ -1048,6 +1071,13 @@ const LogReviewer: React.FC<Props> = (props) => {
                   </ButtonInputGroup>
                   {/* Target */}
                   <ButtonInputGroup label="Target">
+                    {/* Nothing here */}
+                    {(Object.keys(LogMetadata.Target ?? {})) && (
+                      <div>
+                        This app does not have any targets yet.
+                      </div>
+                    )}
+                    {/* List of targets */}
                     {
                       Object.keys(LogMetadata.Target ?? {})
                         .map((target, i) => {
@@ -1974,12 +2004,26 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Create intelliTable
     const dataTable = (
-      <IntelliTable
-        title="Matching Logs"
-        id="logs"
-        data={logs}
-        columns={columns}
-      />
+      logs.length === 0
+        ? (
+          <div className="alert alert-warning">
+            <h4 className="m-1">
+              No Logs to Show
+            </h4>
+            <div>
+              Either your filters are too strict or no matching logs have been
+              created yet.
+            </div>
+          </div>
+        )
+        : (
+          <IntelliTable
+            title="Matching Logs"
+            id="logs"
+            data={logs}
+            columns={columns}
+          />
+        )
     );
 
     // Main body
@@ -2001,21 +2045,15 @@ const LogReviewer: React.FC<Props> = (props) => {
       <div className="LogReviewer-inner-container">
         <div className="LogReviewer-header">
           <div className="LogReviewer-header-title">
-            <h1 className="m-0">
+            <h3 className="m-0">
               Log Review Dashboard
-            </h1>
+            </h3>
           </div>
           <button
             type="button"
-            className="LogReviewer-header-close-button btn btn-lg"
+            className="LogReviewer-header-close-button btn btn-dark btn-lg"
             aria-label="close log reviewer panel"
             onClick={onClose}
-            style={{
-              border: 0,
-              backgroundColor: 'transparent',
-              padding: 0,
-              margin: 0,
-            }}
           >
             <FontAwesomeIcon
               icon={faTimes}