Merge branch 'main' into update-readme-elyra-npm-documentation

canvas_modules/common-canvas/src/common-properties/components/truncated-content-tooltip/truncated-content-tooltip.jsx

@@ -30,7 +30,7 @@ export default class TruncatedContentTooltip extends React.Component {
 			tooltipText = String(this.props.tooltipText);
 		}
 		if (this.props.content && this.props.content.type === Checkbox && this.tooltipRef && this.tooltipRef.firstChild) {
-			truncatedRef = this.tooltipRef.firstChild.lastChild; // checkbox label is in div -> label -> span
+			truncatedRef = this.tooltipRef.firstChild.lastChild.previousSibling; // checkbox label is in div -> label -> span
 		}
 		const tooltip = (
 			<div className="properties-tooltips">

canvas_modules/harness/cypress/e2e/properties/properties-tooltips.cy.js

@@ -107,8 +107,7 @@ describe("Test if tips show up in table headers correctly", function() {
 		cy.saveWideFlyout("Configure Rename fields");
 	});
 
-	// TODO : Enable this test after fixing table tooltip issue.
-	it.skip("Test if tips show when checkbox in header has ellipsis", function() {
+	it("Test if tips show when checkbox in header has ellipsis", function() {
 		cy.toggleCategory("More Tables");
 		cy.openSubPanel("Configure Dummy Types");
 		cy.get(".properties-wf-children div[data-id='properties-vt-header-override']")

docs/pages/01.01.01-nodes.md

@@ -61,7 +61,7 @@ Here's an example of a node using a JSX object which is an icon imported from th
 
 ## Node positioning
 
-Nodes are positioned at the x/y coordinate from the canvas origin of the node's top-left corner. The x/y corrdinates are stored in the node object from the pipeline flow.
+Nodes are positioned at the x/y coordinate from the canvas origin of the node's top-left corner. The x/y coordinates are stored in the node object from the pipeline flow.
 
 ## Ports
 

docs/pages/01.06-notification-panel.md

@@ -2,12 +2,19 @@
 
 The Notificaiotn Panel allows the application to display error, warning, success and info messages to the user.
 
-The canvas toolbar can provide a button to display a [sub-panel](01.05-toolbar.md/#sub-panel) that contains the notifications. The button will be added to the far right side of the toolbar whenever a [Notification Config](03.02.03-notification-config.md) is specified to the `<CommonCanvas>` React object.
+<img src="../assets/cc-notification-panel.png" width="350" />
 
-The notifications button in the toolbar indictaes the state and number of the messages in the panel. If any message in the array is of type 'warning', a notifications icon in warning (yellow) state will be shown. If any message in the array is of type 'error', a notifications icon in error (red) state will be shown. A number will be shown within the notifications icon to indicate the number of messages.
+The canvas toolbar provides a button to display a [sub-panel](01.05-toolbar.md/#sub-panel) that contains the notifications. The button will be added to the far right side of the toolbar whenever a [Notification Config](03.02.03-notification-config.md) is specified to the `<CommonCanvas>` React object.
 
+The notifications button in the toolbar indicates the state and number of the messages in the panel.
+
+A colored circle will be shown to indicate the highest severity message to be shown in the notification panel: info/blue, success/green, warning/yellow or error/red. Also, a number is displayed within the icon to indicate the number of current messages.
+
+<img src="../assets/cc-notif-icon-info.png" width="75" />
+<img src="../assets/cc-notif-icon-success.png" width="79" />
+<img src="../assets/cc-notif-icon-warning.png" width="75" />
+<img src="../assets/cc-notif-icon-error.png" width="77" />
 
-<img src="../assets/cc-notification-panel.png" width="350" />
 
 
 

docs/pages/index.md

@@ -22,11 +22,11 @@ display connected nodes representing any kind of operations.
 * Is fast to get running - and **easy to customize**  - with extensive customization capability.
 * Delivers a JSON powered **properties management** component to allow easy, no-code handling of
 mulltiple properties windows - for when you have a multitude of node types each with their own range of properties.
-* Is delivered as a package from the [**NPM registry**](https://www.npmjs.com/package/@elyra/canvas)
 * Conforms to the [**IBM Carbon**](https://carbondesignsystem.com/all-about-carbon/what-is-carbon/) visual design language - and therefore plugs in easily to any application wishing to follow the Carbon standards including dark mode and light mode themes.
 * Delivers built-in **accessibility** so there's no need to worry about keyboard navigation, accessible colors, screen reader integration, etc.
 * Is translated into **12 languages**.
 * Is the mainstay of several IBM products/applications.
+* Is delivered as a package from the [**NPM registry**](https://www.npmjs.com/package/@elyra/canvas)
 
 ## Try Elyra Canvas
 
@@ -44,7 +44,7 @@ The elyra-ai/canvas repo contains three main modules:
 
 	Common Properties is a React component and has an associated properties controller object.
 
-* [Test Harness](https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness#test-harness) - This is a node.js application that wrappers `<CommonCanvas>` and `<CommonProperties>`. Although it is primarily for testing it does provides a UI that:
+* [Test Harness](https://elyra-canvas-test-harness.u20youmx4sm.us-south.codeengine.appdomain.cloud/#/) - This is a node.js application that wrappers `<CommonCanvas>` and `<CommonProperties>`. Although it is primarily for testing it does provides a UI that:
 	* Displays a set of sample applications
 	* Is a sandbox to try out different Elyra Canvas features.