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

package/dist/cjs/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/esm/index.js

@@ -1180,14 +1180,14 @@ const ButtonInputGroup = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { label, minLabelWidth, children, } = props;
+    const { label, minLabelWidth, children, className, } = props;
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
     /*----------------------------------------*/
     /*                 Main UI                */
     /*----------------------------------------*/
-    return (React.createElement("div", { className: "input-group" },
+    return (React.createElement("div", { className: `input-group ${className !== null && className !== void 0 ? className : ''}` },
         React.createElement("div", { className: "input-group-prepend d-flex w-100" },
             React.createElement("span", { className: "input-group-text", style: {
                     minWidth: (minLabelWidth !== null && minLabelWidth !== void 0 ? minLabelWidth : undefined),
@@ -2389,9 +2389,9 @@ const IntelliTable = (props) => {
         // Create the cell UI
         return (React.createElement("th", { key: column.param, scope: "col", id: `IntelliTable-${id}-header-${column.param}` },
             React.createElement("div", { className: "d-flex align-items-center justify-content-center flex-row h-100" },
-                React.createElement("h4", { className: "m-0" }, column.title),
+                React.createElement("span", { className: "text-nowrap" }, column.title),
                 React.createElement("div", null,
-                    React.createElement("button", { type: "button", className: "btn btn-light", "aria-label": sortButtonAriaLabel, onClick: () => {
+                    React.createElement("button", { type: "button", className: "btn btn-light btn-sm ms-1", "aria-label": sortButtonAriaLabel, onClick: () => {
                             dispatch({
                                 type: ActionType$1.ToggleSortColumn,
                                 param: column.param,
@@ -2539,7 +2539,7 @@ const IntelliTable = (props) => {
             React.createElement("h3", { className: "m-0" }, title),
             React.createElement("div", { className: "flex-grow-1 text-end" },
                 React.createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: `${title}.csv`, csv: csv }),
-                React.createElement("button", { type: "button", className: "btn btn-secondary", "aria-label": `show panel for customizing which columns show in table ${title}`, id: `IntelliTable-${id}-show-column-customization-modal`, onClick: () => {
+                React.createElement("button", { type: "button", 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: () => {
                         dispatch({
                             type: ActionType$1.ToggleColVisCusModalVisibility,
                         });
@@ -2603,6 +2603,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;
@@ -2629,6 +2634,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;
+  }
 `;
 /*------------------------------------------------------------------------*/
 /*                            Static Functions                            */
@@ -2648,7 +2665,7 @@ const genHumanReadableName = (machineReadableName) => {
             // Uppercase! Add a space before
             humanReadableName += ' ';
         }
-        humanReadableName += chars;
+        humanReadableName += char;
     });
     // Trim and return
     return humanReadableName.trim();
@@ -2730,7 +2747,7 @@ const LogReviewer = (props) => {
     /*------------------------------------------------------------------------*/
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     /* -------------- Props ------------- */
     // Destructure props
     const { LogMetadata, onClose, } = props;
@@ -2933,10 +2950,10 @@ const LogReviewer = (props) => {
         /*                 Filters                */
         /*----------------------------------------*/
         // Filter toggle
-        const filterToggles = (React.createElement("div", { className: "LogReviewer-filter-toggles d-flex align-items-center justify-content-center" },
+        const filterToggles = (React.createElement("div", { className: "LogReviewer-filter-toggles mb-2" },
             React.createElement("h3", { className: "m-0" }, "Filters:"),
             React.createElement("div", { className: "LogReviewer-filter-toggle-buttons" },
-                React.createElement("button", { type: "button", id: "LogReviewer-toggle-date-filter-drawer", className: `btn btn-${FilterDrawer.Date === expandedFilterDrawer} me-2`, "aria-label": "toggle date filter drawer", onClick: () => {
+                React.createElement("button", { type: "button", id: "LogReviewer-toggle-date-filter-drawer", className: `btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`, "aria-label": "toggle date filter drawer", onClick: () => {
                         dispatch({
                             type: ActionType.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Date,
@@ -2944,7 +2961,7 @@ const LogReviewer = (props) => {
                     } },
                     React.createElement(FontAwesomeIcon, { icon: faCalendar, className: "me-2" }),
                     "Date"),
-                React.createElement("button", { type: "button", id: "LogReviewer-toggle-context-filter-drawer", className: `btn btn-${FilterDrawer.Context === expandedFilterDrawer} me-2`, "aria-label": "toggle context filter drawer", onClick: () => {
+                React.createElement("button", { type: "button", id: "LogReviewer-toggle-context-filter-drawer", className: `btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`, "aria-label": "toggle context filter drawer", onClick: () => {
                         dispatch({
                             type: ActionType.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Context,
@@ -2952,15 +2969,15 @@ const LogReviewer = (props) => {
                     } },
                     React.createElement(FontAwesomeIcon, { icon: faCircle, className: "me-2" }),
                     "Context"),
-                React.createElement("button", { type: "button", id: "LogReviewer-toggle-tag-filter-drawer", className: `btn btn-${FilterDrawer.Tag === expandedFilterDrawer} me-2`, "aria-label": "toggle tag filter drawer", onClick: () => {
+                (LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (React.createElement("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,
                         });
                     } },
                     React.createElement(FontAwesomeIcon, { icon: faTag, className: "me-2" }),
-                    "Tag"),
-                React.createElement("button", { type: "button", id: "LogReviewer-toggle-action-filter-drawer", className: `btn btn-${FilterDrawer.Action === expandedFilterDrawer} me-2`, "aria-label": "toggle action and error filter drawer", onClick: () => {
+                    "Tag")),
+                React.createElement("button", { type: "button", id: "LogReviewer-toggle-action-filter-drawer", className: `btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`, "aria-label": "toggle action and error filter drawer", onClick: () => {
                         dispatch({
                             type: ActionType.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Action,
@@ -2968,7 +2985,7 @@ const LogReviewer = (props) => {
                     } },
                     React.createElement(FontAwesomeIcon, { icon: faHammer, className: "me-2" }),
                     "Action"),
-                React.createElement("button", { type: "button", id: "LogReviewer-toggle-advanced-filter-drawer", className: `btn btn-${FilterDrawer.Advanced === expandedFilterDrawer}`, "aria-label": "toggle advanced filter drawer", onClick: () => {
+                React.createElement("button", { type: "button", id: "LogReviewer-toggle-advanced-filter-drawer", className: `btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'secondary'}`, "aria-label": "toggle advanced filter drawer", onClick: () => {
                         dispatch({
                             type: ActionType.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Advanced,
@@ -3092,7 +3109,7 @@ const LogReviewer = (props) => {
                             }, ariaLabel: "only show error logs", selected: actionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true })),
                     (actionErrorFilterState.type === undefined
                         || actionErrorFilterState.type === LogType$1.Action) && (React.createElement(TabBox, { title: "Action Log Details" },
-                        React.createElement(ButtonInputGroup, { label: "Action" }, Object.keys(LogAction$1)
+                        React.createElement(ButtonInputGroup, { label: "Action", className: "mb-2" }, Object.keys(LogAction$1)
                             .map((action, i) => {
                             const description = genHumanReadableName(action);
                             return (React.createElement(CheckboxButton, { id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: i === Object.keys(LogAction$1).length - 1, onChanged: (checked) => {
@@ -3103,18 +3120,20 @@ const LogReviewer = (props) => {
                                     });
                                 } }));
                         })),
-                        React.createElement(ButtonInputGroup, { label: "Target" }, Object.keys((_e = LogMetadata.Target) !== null && _e !== void 0 ? _e : {})
-                            .map((target, i) => {
-                            var _a;
-                            const description = genHumanReadableName(target);
-                            return (React.createElement(CheckboxButton, { id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, onChanged: (checked) => {
-                                    actionErrorFilterState.target[target] = checked;
-                                    dispatch({
-                                        type: ActionType.UpdateActionErrorFilterState,
-                                        actionErrorFilterState,
-                                    });
-                                }, noMarginOnRight: i === Object.keys((_a = LogMetadata.Target) !== null && _a !== void 0 ? _a : {}).length - 1 }));
-                        })))),
+                        React.createElement(ButtonInputGroup, { label: "Target" },
+                            (Object.keys((_e = LogMetadata.Target) !== null && _e !== void 0 ? _e : {})) && (React.createElement("div", null, "This app does not have any targets yet.")),
+                            Object.keys((_f = LogMetadata.Target) !== null && _f !== void 0 ? _f : {})
+                                .map((target, i) => {
+                                var _a;
+                                const description = genHumanReadableName(target);
+                                return (React.createElement(CheckboxButton, { id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, onChanged: (checked) => {
+                                        actionErrorFilterState.target[target] = checked;
+                                        dispatch({
+                                            type: ActionType.UpdateActionErrorFilterState,
+                                            actionErrorFilterState,
+                                        });
+                                    }, noMarginOnRight: i === Object.keys((_a = LogMetadata.Target) !== null && _a !== void 0 ? _a : {}).length - 1 }));
+                            })))),
                     (actionErrorFilterState.type === undefined
                         || actionErrorFilterState.type === LogType$1.Error) && (React.createElement(TabBox, { title: "Error Log Details" },
                         React.createElement("div", { className: "input-group mb-2" },
@@ -3732,7 +3751,11 @@ const LogReviewer = (props) => {
             },
         ];
         // Create intelliTable
-        const dataTable = (React.createElement(IntelliTable, { title: "Matching Logs", id: "logs", data: logs, columns: columns }));
+        const dataTable = (logs.length === 0
+            ? (React.createElement("div", { className: "alert alert-warning" },
+                React.createElement("h4", { className: "m-1" }, "No Logs to Show"),
+                React.createElement("div", null, "Either your filters are too strict or no matching logs have been created yet.")))
+            : (React.createElement(IntelliTable, { title: "Matching Logs", id: "logs", data: logs, columns: columns })));
         // Main body
         body = (React.createElement(React.Fragment, null,
             filters,
@@ -3744,13 +3767,8 @@ const LogReviewer = (props) => {
         React.createElement("div", { className: "LogReviewer-inner-container" },
             React.createElement("div", { className: "LogReviewer-header" },
                 React.createElement("div", { className: "LogReviewer-header-title" },
-                    React.createElement("h1", { className: "m-0" }, "Log Review Dashboard")),
-                React.createElement("button", { type: "button", className: "LogReviewer-header-close-button btn btn-lg", "aria-label": "close log reviewer panel", onClick: onClose, style: {
-                        border: 0,
-                        backgroundColor: 'transparent',
-                        padding: 0,
-                        margin: 0,
-                    } },
+                    React.createElement("h3", { className: "m-0" }, "Log Review Dashboard")),
+                React.createElement("button", { type: "button", className: "LogReviewer-header-close-button btn btn-dark btn-lg", "aria-label": "close log reviewer panel", onClick: onClose },
                     React.createElement(FontAwesomeIcon, { icon: faTimes }))),
             React.createElement("div", { className: "LogReviewer-contents" }, body))));
 };