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; +}