QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

For CE-1280 - add helpContent to process steps, along with css for help content to do standard app style alerts

Browse Source
This commit is contained in:
darin.kelkhoff
2024-05-15 19:42:25 -05:00
parent a36bdb1474
commit 2b5cc1610f
2 changed files with 78 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/qqq/pages/processes/ProcessRun.tsx
View File

@ -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 = <HelpContent helpContents={process.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
*/
const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
const formattedHelpContent = <HelpContent helpContents={step.helpContents} roles={helpRoles} helpContentKey={`process:${processName};step:${step?.name}`} />;
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 &&
<Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
showHelp &&
<Box fontSize={"0.875rem"} color={colors.blueGray.main} pb={2}>
{formattedHelpContent}
</Box>
*/
}
{
@ -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));

68
src/qqq/styles/qqq-override-styles.css
View File

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