diff --git a/src/qqq/pages/processes/ProcessRun.tsx b/src/qqq/pages/processes/ProcessRun.tsx
index f2c33e6..c99d816 100644
--- a/src/qqq/pages/processes/ProcessRun.tsx
+++ b/src/qqq/pages/processes/ProcessRun.tsx
@@ -54,7 +54,7 @@ import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import MDButton from "qqq/components/legacy/MDButton";
import MDProgress from "qqq/components/legacy/MDProgress";
import MDTypography from "qqq/components/legacy/MDTypography";
-import HelpContent from "qqq/components/misc/HelpContent";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
@@ -136,7 +136,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
const [renderedWidgets, setRenderedWidgets] = useState({} as {[step: string]: {[widgetName: string]: any}});
- const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
+ const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// for setting the processError state - call this function, which will also set the isUserFacingError state //
@@ -455,14 +455,12 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
});
}
- // todo - not ready - need process (or screen) meta-data to have helpContents...
- /*
- ///////////////////////////////
- // screen-level help content //
- ///////////////////////////////
+ /////////////////////////////////////
+ // screen(step)-level help content //
+ /////////////////////////////////////
let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
- const formattedHelpContent = ;
- */
+ const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
+ const formattedHelpContent = ;
return (
<>
@@ -479,13 +477,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
}
{
- /*
- // todo - not ready - need process (or screen) meta-data to have helpContents...
- formattedHelpContent &&
-
+ showHelp &&
+
{formattedHelpContent}
- */
}
{
@@ -1018,7 +1013,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
}
});
- DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null, null);
+ DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData?.name, null, null);
setFormFields(newDynamicFormFields);
setValidationScheme(Yup.object().shape(newFormValidations));
diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css
index d786c36..31b669f 100644
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@@ -653,6 +653,11 @@ input[type="search"]::-webkit-search-results-decoration
min-height: unset !important;
}
+.MuiDataGrid-columnHeaders
+{
+ scrollbar-gutter: stable;
+}
+
/* new style for toggle buttons */
.MuiToggleButtonGroup-root
{
@@ -708,3 +713,66 @@ input[type="search"]::-webkit-search-results-decoration
color: white;
background-color: #0062FF !important;
}
+
+.helpContentAlert
+{
+ padding: 6px 16px;
+ font-size: 1rem;
+ font-weight: 300;
+ line-height: 1.6;
+ display: flex;
+}
+
+.helpContentAlert .MuiAlert-icon
+{
+ display: flex;
+ margin-right: 12px;
+ padding: 7px 0;
+ font-size: 22px;
+ opacity: 0.9;
+}
+
+.helpContentAlert .MuiAlert-icon .material-icons-round
+{
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+}
+
+.helpContentAlert .MuiAlert-message
+{
+ padding: 8px 0;
+}
+
+.helpContentAlert.success
+{
+ background-color: rgb(240, 248, 241);
+ color: rgb(44, 76, 46);
+}
+
+.helpContentAlert.success .MuiAlert-icon .material-icons-round
+{
+ color: #4CAF50;
+}
+
+.helpContentAlert.warning
+{
+ background-color: rgb(254, 245, 234);
+ color: rgb(100, 65, 20);
+}
+
+.helpContentAlert.warning .MuiAlert-icon .material-icons-round
+{
+ color: #fb8c00;
+}
+
+.helpContentAlert.error
+{
+ background-color: rgb(254, 239, 238);
+ color: rgb(98, 41, 37);
+}
+
+.helpContentAlert.error .MuiAlert-icon .material-icons-round
+{
+ color: #F44335;
+}