release_12.42.0

Feature Enhancements

Common-Canvas

#1542 Classes required to implement and extend Action are not exported

Six "action classes" are now exported from common-canvas. These cover some of the basic operations on the canvas:

• CreateAutoNodeAction
• CreateNodeAction
• CreateNodeLinkAction
• DeleteObjectsAction
• DisconnectObjectsAction
• PasteAction

Applications can extend these classes to augment the basic behavior with application specific behavior. It is the application’s responsibility to add the extended object to the command stack when the user performs the corresponding action.

Although we don't have any plans to alter the internal workings of these six command action classes, there is always the chance that a change in the future might alter a field name. If you extend these classes, it is therefore recommended that you have sufficient regression tests for your extensions that would highlight such a problem, should it occur.

#1705 Canvas-controller method isContextMenuForNonSelectedObj incorrectly named

The name of the internal canvas-controller method has changed from isContextMenuForNonSelectedObj to isContextToolbarForNonSelectedObj

#1680 Accessibility: Toolbar should use arrow keys to move focus to buttons

Some of the internal class names for DOM elements in the toolbar have changed.
toolbar-spacer is now toolbar-overflow-container and
toolbar-overflow-menu-item is now toolbar-sub-menu-item

Common-Properties

#1640 Remove react-codemirror2 and upgrade to codemirror 6

react-codemirror2 wrapper (an unsupported package) is now removed. This change involves a major version upgrade from Codemirror 5.x to Codemirror 6.x. We have implemented these changes to upgrade to the latest supported code mirror libraries. This affects the code editor in Expression control.

The expression builder will continue to work successfully with your current code however with this release you might see an error in the console. To fix the console error, please follow instructions given under "Gruntfile changes" section.

Gruntfile changes -

Common-properties is no longer exporting lib/codemirror.css and addon/hint/show-hint.css files.
If your application is using following grunt config, please remove this grunt config -

codeMirror: {
	files: [{
		expand: true,
		flatten: false,
		cwd: "./node_modules/codemirror/",
		src: ["lib/codemirror.css", "addon/hint/show-hint.css"],
		dest: ".build/css/codemirror"
	}]
}

Also remove following stylesheets from your application's index.js file -

<link rel="stylesheet" href={`/canvas${getHashedResource("/css/codemirror/addon/hint/show-hint.css")}`} />
<link rel="stylesheet" href={`/canvas${getHashedResource("/css/codemirror/lib/codemirror.css")}`} />

CSS Changes -

Since common-properties is no longer exporting lib/codemirror.css file, if you create a new Codemirror 6.x instance in your application, elyra-canvas codemirror CSS from this file will no longer be imported into your classnames. Please ensure all custom CSS overrides works fine in your application.

Codemirror 6.x creates a rather different DOM structure for the editor. If you're writing custom CSS for the editor, you'll probably have to change it a bit. Class names roughly correspond like this -

react-codemirror2 → elyra-CodeMirror

CodeMirror → cm-editor

CodeMirror-line → cm-line

CodeMirror-scroll → cm-scroller

CodeMirror-sizer → cm-content

CodeMirror-focused → cm-focused

CodeMirror-gutters → cm-gutters

CodeMirror-gutter → cm-gutter

CodeMirror-gutter-elt → cm-gutterElement

Please make any other changes in class names as required after inspecting Elements tab in the browser.

Autocompletions -
Expression control supports following languages -

• Python
• R
• SQL
• JavaScript
• CLEM

Autocompletions will start showing up as soon as you start typing in the code editor. They can also show up using ctrl + space key combination. Autocompletions will show language specific keywords, custom keywords specified here, and field names from the expression builder table.

Jest tests failures -
If you notice several jest unit tests are failing with this error -

● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    ...

    Details:

    @elyra/canvas/canvas_modules/common-canvas/node_modules/lezer-r/dist/highlight.js:1

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { styleTags, tags as t } from "@lezer/highlight";

                                                                                             ^^^^^^
    SyntaxError: Cannot use import statement outside a module

Please add this config in your package.json file to fix jest tests -

"jest": {
    "transformIgnorePatterns": [
      "node_modules/@elyra/canvas/node_modules/(?!lezer-r)"
    ]
  }

Issues Resolved

#1707 Context toolbar overflow menu not fully displayed when no enough vertical space (#1708)
#1709 Animate the opening of toolbar sub-areas (#1710)
#1640 Remove react-codemirror2 and upgrade to codemirror 6 (#1641)
#1680 Accessibility: Toolbar should use arrow keys to move focus to buttons (#1681)
#1705 Canvas-controller method isContextMenuForNonSelectedObj incorrectly named (#1706)
#1699 Context toolbar overflow menu remains open when moving mouse cursor to new node (#1700)
#1542 Classes required to implement and extend Action are not exported (part 2) (#1698)
#1542 Classes required to implement and extend Action are not exported (#1697)
#1695 Elyra/canvas failed with error while rendered on Node.js (#1696)
#1693 Test harness crashes when opening the API tab after selecting sample flow (#1694)
#1689 Add set active tab method in Common Properties (#1690)
#1691 Link temporarily visually connected to new target when cancelling updateLink via beforeEditActionHandler (#1692)
#1685 : Set tooltip visible based on closest for link click (#1686)