Merge pull request finos#36 from Finsemble/49663-tooltips

tooltip

Author: kenny-ciq

toolbox/fdc3-workbench/src/components/Workbench/AppChannelListeners.tsx

@@ -56,6 +56,7 @@ export const AppChannelListeners = observer(() => {
 	return (
 		<AccordionList
 			title="App Channels"
+			icon="Any context already in the channel will NOT be received automatically"
 			noItemsText="No App Channel Listeners"
 			listItems={contextListeners}
 			onDelete={handleDeleteListener}

toolbox/fdc3-workbench/src/components/Workbench/ContextListeners.tsx

@@ -56,6 +56,7 @@ export const ContextListeners = observer(() => {
 	return (
 		<AccordionList
 			title="System Channels"
+			icon="Any context already in the channel will be received automatically"
 			noItemsText="No System Channels Listeners"
 			listItems={contextListeners}
 			onDelete={handleDeleteListener}

toolbox/fdc3-workbench/src/components/Workbench/Workbench.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { Tooltip } from "@material-ui/core";
+import InfoIcon from '@material-ui/icons/Info';
 import { Tabs, Tab } from "@material-ui/core";
 import { TabPanel } from "../common/TabPanel";
 import { ContextListeners } from "./ContextListeners";
@@ -10,6 +12,11 @@ import { SystemLog } from "./SystemLog";
 
 const useStyles = makeStyles((theme: Theme) =>
 	createStyles({
+		'@global': {
+			".MuiTab-wrapper": {
+				flexDirection: "row !important"
+			}
+		},
 		root: {
 			flexGrow: 1,
 		},
@@ -33,6 +40,11 @@ const useStyles = makeStyles((theme: Theme) =>
 			borderBottomWidth: "1px",
 			minHeight: "28px",
 		},
+		icon: {
+			marginBottom: "3px !important",
+			fontSize: "15px",
+			marginRight: "3px"
+		},
 	})
 );
 
@@ -64,7 +76,13 @@ export const Workbench = observer(() => {
 				}}
 				className={classes.tabs}
 			>
-				<Tab label="Listeners" {...a11yProps(0)} />
+				<Tab label="Listeners" {...a11yProps(0)} style={{display:'flex',alignItems:'center'}} icon={
+					<Tooltip 
+						title="Context received will be displayed here, but you will not receive your own messages back" 
+						aria-label="Context received will be displayed here, but you will not receive your own messages back" >
+						<InfoIcon className={classes.icon} />
+					</Tooltip>}
+				/>
 				<Tab label="System Log" {...a11yProps(1)} />
 			</Tabs>
 

toolbox/fdc3-workbench/src/components/common/AccordionContent.tsx

@@ -2,10 +2,13 @@ import React from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { Tooltip } from "@material-ui/core";
+import InfoIcon from '@material-ui/icons/Info';
 
 export interface AccordionContentProps {
 	title: string;
 	children: React.ReactNode;
+	icon?: string;
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -49,10 +52,15 @@ const useStyles = makeStyles((theme: Theme) =>
 		expand_icon: {
 			color: "#0086bf",
 		},
+		icon: {
+			marginBottom: "-1px !important",
+			fontSize: "15px",
+			marginLeft: "5px"
+		}
 	})
 );
 
-export const AccordionContent: React.FC<AccordionContentProps> = ({ title, children }: AccordionContentProps) => {
+export const AccordionContent: React.FC<AccordionContentProps> = ({ icon, title, children }: AccordionContentProps) => {
 	const classes = useStyles();
 
 	return (
@@ -66,6 +74,9 @@ export const AccordionContent: React.FC<AccordionContentProps> = ({ title, child
 			>
 				<Typography variant="h5" className={classes.accordionTitle}>
 					{title}
+					{icon && <Tooltip title={icon} aria-label={icon}>
+						<InfoIcon className={classes.icon}/>
+					</Tooltip>}
 				</Typography>
 			</AccordionSummary>
 

toolbox/fdc3-workbench/src/components/common/AccordionList.tsx

@@ -12,6 +12,7 @@ export interface AccordionListItem {
 
 export interface AccordionListProps {
 	title: string;
+	icon?: string;
 	listItems: AccordionListItem[];
 	noItemsText: string;
 	onDelete?: (id: string) => void;
@@ -38,6 +39,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export const AccordionList: React.FC<AccordionListProps> = ({
 	title,
+	icon,
 	listItems,
 	noItemsText,
 	onDelete,
@@ -51,7 +53,7 @@ export const AccordionList: React.FC<AccordionListProps> = ({
 	};
 
 	return (
-		<AccordionContent title={title}>
+		<AccordionContent title={title} icon={icon}>
 			{!listItems.length && <Typography variant="body1">{noItemsText}</Typography>}
 			{!!listItems.length && (
 				<List className={classes.list}>