From 167af989d5ed4028746b75da4038275fda71b658 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Tue, 5 Mar 2024 14:36:54 -0600 Subject: [PATCH] Add tooltips from metaData/helpContent to widget blocks. --- .../widgets/blocks/BigNumberBlock.tsx | 8 ++--- .../widgets/blocks/BlockElementWrapper.tsx | 30 +++++++++++++++++-- .../components/widgets/blocks/BlockModels.ts | 3 +- .../widgets/blocks/NumberIconBadgeBlock.tsx | 6 ++-- .../widgets/blocks/ProgressBarBlock.tsx | 8 ++--- .../blocks/TableSubRowDetailRowBlock.tsx | 6 ++-- .../components/widgets/blocks/TextBlock.tsx | 4 +-- .../widgets/blocks/UpOrDownNumberBlock.tsx | 6 ++-- 8 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/qqq/components/widgets/blocks/BigNumberBlock.tsx b/src/qqq/components/widgets/blocks/BigNumberBlock.tsx index 56cf404..50e2d33 100644 --- a/src/qqq/components/widgets/blocks/BigNumberBlock.tsx +++ b/src/qqq/components/widgets/blocks/BigNumberBlock.tsx @@ -21,8 +21,6 @@ import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper"; import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels"; -import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock"; - /******************************************************************************* @@ -40,7 +38,7 @@ export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComp
- + {data.values.heading}
@@ -49,14 +47,14 @@ export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComp
- + {data.values.number}
{ data.values.context &&
- + {data.values.context}
diff --git a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx index 5e0352a..dbfcce2 100644 --- a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx +++ b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx @@ -20,14 +20,18 @@ */ +import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; import {Tooltip} from "@mui/material"; -import React, {ReactElement} from "react"; +import React, {ReactElement, useContext} from "react"; import {Link} from "react-router-dom"; +import QContext from "QContext"; +import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent"; import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels"; interface BlockElementWrapperProps { data: BlockData; + metaData: QWidgetMetaData; slot: string linkProps?: any; children: ReactElement; @@ -36,8 +40,10 @@ interface BlockElementWrapperProps /******************************************************************************* ** For Blocks - wrap their "slot" elements with an optional tooltip and/or link *******************************************************************************/ -export default function BlockElementWrapper({data, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element +export default function BlockElementWrapper({data, metaData, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element { + const {helpHelpActive} = useContext(QContext); + let link: BlockLink; let tooltip: BlockTooltip; @@ -61,6 +67,26 @@ export default function BlockElementWrapper({data, slot, linkProps, children}: B tooltip = data.tooltip; } + if(!tooltip) + { + const helpRoles = ["ALL_SCREENS"] + + /////////////////////////////////////////////////////////////////////////////////////////////// + // the full keys in the helpContent table will look like: // + // widget:MyCoolWidget;slot=myBlockId,label (if the block has a blockId in data) // + // widget:MyCoolWidget;slot=label (no blockId; note, label is slot name here) // + // in the widget metaData, the map of helpContent will just have the "slot" portion as a key // + /////////////////////////////////////////////////////////////////////////////////////////////// + const key = data.blockId ? `${data.blockId},${slot}` : slot; + const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles); + + if(showHelp) + { + const formattedHelpContent = ; + tooltip = {title: formattedHelpContent, placement: "bottom"} + } + } + let rs = children; if(link) diff --git a/src/qqq/components/widgets/blocks/BlockModels.ts b/src/qqq/components/widgets/blocks/BlockModels.ts index ed6078a..22a7c1e 100644 --- a/src/qqq/components/widgets/blocks/BlockModels.ts +++ b/src/qqq/components/widgets/blocks/BlockModels.ts @@ -24,6 +24,7 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Q export interface BlockData { + blockId?: string; blockTypeName: string; tooltip?: BlockTooltip; @@ -38,7 +39,7 @@ export interface BlockData export interface BlockTooltip { - title: string; + title: string | JSX.Element; placement: string; } diff --git a/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx b/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx index f6cc116..8c9f86e 100644 --- a/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx +++ b/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx @@ -28,19 +28,19 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo ** ** ${number} ${icon} *******************************************************************************/ -export default function NumberIconBadgeBlock({data}: StandardBlockComponentProps): JSX.Element +export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element { return (
{ data.values.number && - + {data.values.number} } { data.values.iconName && - + {data.values.iconName} } diff --git a/src/qqq/components/widgets/blocks/ProgressBarBlock.tsx b/src/qqq/components/widgets/blocks/ProgressBarBlock.tsx index fbf1afc..8008ca3 100644 --- a/src/qqq/components/widgets/blocks/ProgressBarBlock.tsx +++ b/src/qqq/components/widgets/blocks/ProgressBarBlock.tsx @@ -35,14 +35,14 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo ** ${heading} ** ${bar} ${value} *******************************************************************************/ -export default function ProgressBarBlock({data}: StandardBlockComponentProps): JSX.Element +export default function ProgressBarBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element { return ( { data.values.heading &&
- + {data.values.heading}
@@ -50,7 +50,7 @@ export default function ProgressBarBlock({data}: StandardBlockComponentProps): J
- +
{ data.values.percent > 0 ?
: <> @@ -59,7 +59,7 @@ export default function ProgressBarBlock({data}: StandardBlockComponentProps): J
- + {data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}
diff --git a/src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx b/src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx index 4f52b65..2e91299 100644 --- a/src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx +++ b/src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx @@ -29,7 +29,7 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo ** ** ${label} ${value} *******************************************************************************/ -export default function TableSubRowDetailRowBlock({data}: StandardBlockComponentProps): JSX.Element +export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element { return (
@@ -37,7 +37,7 @@ export default function TableSubRowDetailRowBlock({data}: StandardBlockComponent { data.values.label &&
- + {data.values.label}
@@ -45,7 +45,7 @@ export default function TableSubRowDetailRowBlock({data}: StandardBlockComponent { data.values.value && - + {data.values.value} } diff --git a/src/qqq/components/widgets/blocks/TextBlock.tsx b/src/qqq/components/widgets/blocks/TextBlock.tsx index a10f3c1..334feb1 100644 --- a/src/qqq/components/widgets/blocks/TextBlock.tsx +++ b/src/qqq/components/widgets/blocks/TextBlock.tsx @@ -27,10 +27,10 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo ** ** ${text} *******************************************************************************/ -export default function TextBlock({data}: StandardBlockComponentProps): JSX.Element +export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element { return ( - + {data.values.text} ); diff --git a/src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx b/src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx index b5aafdd..20e0106 100644 --- a/src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx +++ b/src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx @@ -35,7 +35,7 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo ** ${icon} ${number} ** ${context} *******************************************************************************/ -export default function UpOrDownNumberBlock({data}: StandardBlockComponentProps): JSX.Element +export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element { if (!data.styles) { @@ -61,7 +61,7 @@ export default function UpOrDownNumberBlock({data}: StandardBlockComponentProps)
- + <> {iconName} {data.values.number} @@ -70,7 +70,7 @@ export default function UpOrDownNumberBlock({data}: StandardBlockComponentProps)
- + {data.values.context}