Skip to content

v13.0.0
Compare
Choose a tag to compare
@nmgokhale nmgokhale released this 23 Apr 17:23
· 54 commits to main since this release
v13.0.0
a1d222d
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

Feature Enhancements

In this new major version, Elyra Canvas supports:

  • Carbon 11
  • React 18
  • Node 20

Documentation

The Elyra Canvas documentation has moved and is now available at a new location: https://elyra-ai.github.io/canvas/ .
We are using GitHub pages for the documentation. Users can now easily search for a word in the entire documentation. Each page shows index on left-side and contents within the page on right-side for better navigation.

The Elyra Canvas Wiki is deprecated and will be removed soon. Please start using the new link.

Elyra.canvas.documentation.mov

Developer Notes

We will continue to support two versions of @elyra/canvas until September 2024. All consuming applications should plan to upgrade to Carbon 11 within this time.

  • @elyra/canvas - v12.x uses Carbon 10 - Support will end on 30 September 2024
  • @elyra/canvas - v13.x uses Carbon 11

12.x versions will be in maintenance mode supporting bugs and security fixes. Any new features will be available in 13.x versions. Both versions support consuming applications running on React 16, 17 and 18.

General

Carbon 11 and React 18 for elyra-canvas

Carbon has been updated to the latest version v1.55.0. All the consuming applications using @elyra/canvas v13.x must be using Carbon 11. @carbon/react package is added as a peerDependency in v13.x. Please follow carbon v10 to v11 migration guide for more details.

Elyra canvas is now using React 18. However, we continue to support consuming applications running on React 16, 17 and 18.

Upgrade Elyra canvas and Test harness to Node 20.x.

Elyra Canvas has been upgraded from Node 16.x to 20.x.

Common-Canvas

#1865 Add dividers for the context toolbar

Dividers are now supported in the context toolbar. To add a divider, specify the following in the array returned by the contextMenuHandler callback:

   <divider: true, toolbarItem: true />

See details here: https://elyra-ai.github.io/canvas/03.03.01-context-menu-handler/#return-array-for-context-toolbar

#1891 Enable multiple undo/redo button and panel

The common-canvas toolbar now supports a “dual-purpose” button. That is, a single button that has two parts, the left side of the button can be clicked to perform the action indicated by the button’s icon and the right side of the button, shown as a chevron, can be clicked to open a panel underneath the chevron that will allow what ever additional function the application developer wishes to present to the user that is connected with the action.

For example, this dual-purpose button, which can be seen in the ‘Stages’ sample app in the test harness, will perform the ‘undo’ action if clicked on the left-hand side:
image

and will display an additional panel when clicked on the right-hand side:
image

A dual-purpose button can be specified in the toolbar config like this:

const toolbarConfig = {

     leftBar: [
         {
             action: "undo",
             label: "Undo",
             purpose: "dual",
             subPanel: MultiUndoPanel,
             subPanelData: { canvasController: this.canvasController }
         }
     ],
     rightBar: []
 };

where:

  • purpose can be either “single” (the default) or “dual”
  • subPanel is the React object to be inserted into the panel
  • subPanelData is an object that is passed into the panel when it is created

#1888 Enable HTML code in Comments when Markdown is Enabled

When the enableMarkdownInComments config field is set to true, common-canvas allows the user to enter markdown syntax into the comment text which is used to format the text output.
The Markdown support in comments has been extended in this release, to allow the user to enter HTML into the markdown text. This is then run, when the comment is presented in display mode. HTML support allows the user more extensive customization capabilities including the specification of CSS for the text.

For example, specifying this will color the word Red:

Some <span style="color: red">Red</span> text

html-markdown

Common-Properties

#1646 Use Carbon 11 Accordions in Common Properties Panels

Common properties now uses Carbon 11 Accordions for displaying categories in flyout view. Multiple categories can be opened at once.
Note - If consuming application has added any unit tests related to right flyout categories, please update them as now Common Properties is using Carbon 11 Accordion so class names should be updated if needed.

Screenshot 2024-04-23 at 10 21 31 AM

Issues Resolved

Full Changelog: v13.0.0-alpha.1...v13.0.0

Contributors

JesusGuerrero, tomlyn, and 4 other contributors
Assets 2