Merge branch 'main' into do_in_canvas_controller

canvas_modules/common-canvas/package.json

@@ -27,8 +27,8 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-python": "^6.1.4",
     "@codemirror/lang-sql": "^6.5.5",
-    "codemirror-lang-r": "^0.1.0-2",
     "@codemirror/language": "^6.10.1",
+    "@codemirror/legacy-modes": "^6.3.3",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.1",
     "@codemirror/autocomplete": "^6.12.0",
@@ -119,7 +119,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [
-      "/node_modules/(?!(lezer-r|d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom)/)"
+      "node_modules/(?!(@codemirror/legacy-modes|d3-*))"
     ],
     "moduleFileExtensions": [
       "js",

canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss

@@ -17,7 +17,6 @@
 .properties-checkbox {
 	display: flex;
 	align-items: center;
-	flex-wrap: wrap;
 	.tooltip-container {
 		margin-left: $spacing-03;
 		cursor: pointer;

canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx

@@ -41,12 +41,11 @@ import { Compartment } from "@codemirror/state";
 import { tags } from "@lezer/highlight";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { python } from "@codemirror/lang-python";
-import { r } from "codemirror-lang-r";
 import { sql } from "@codemirror/lang-sql";
 import { javascript } from "@codemirror/lang-javascript";
 
 import { getPythonHints } from "./languages/python-hint";
-import { getRHints } from "./languages/r-hint";
+import { rLanguage } from "./languages/r-hint";
 import { clem } from "./languages/CLEM-hint";
 
 const pxPerChar = 8.5;
@@ -168,14 +167,13 @@ class ExpressionControl extends React.Component {
 			this.origHint = getPythonHints();
 			break;
 		case "text/x-rsrc":
-			language = r();
-			this.origHint = getRHints();
+			language = rLanguage(); // custom language
 			break;
 		case "javascript":
 			language = javascript();
 			break;
 		default:
-			language = clem();
+			language = clem(); // custom language
 		}
 
 		// Custom completions add to the language completions

canvas_modules/common-canvas/src/common-properties/controls/expression/languages/r-hint.js

@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-// Ref: https://cran.r-project.org/doc/manuals/r-release/R-lang.html#Reserved-words
-// Search for "10.3.3 Reserved words"
-const keywords = "if|else|repeat|while|function|for|in|next|break" +
-	"|TRUE|FALSE|NULL|Inf|NaN|NA|NA_integer_|NA_real_|NA_complex_|NA_character_";
-
-const rKeywords = keywords.split("|");
+import { LanguageSupport, StreamLanguage } from "@codemirror/language";
+import { completeFromList } from "@codemirror/autocomplete";
+import { r } from "@codemirror/legacy-modes/mode/r";
 
 const builtIns = "zapsmall xzfile xtfrm xor writeLines writeChar writeBin write withVisible withRestarts within" +
 	" withCallingHandlers withAutoprint with while which weekdays warnings warning version Vectorize vector vapply" +
@@ -70,13 +67,23 @@ const rBuiltIns = builtIns.split(" ");
 function getRHints() {
 	const rHints = [];
 
-	rKeywords.forEach((keyword) => rHints.push({ label: keyword, type: "keyword" }));
-
 	rBuiltIns.forEach((builtIn) => rHints.push({ label: builtIn, type: "keyword" }));
 
 	return rHints;
 }
 
+// Define R language
+const rLan = StreamLanguage.define(r);
+
+// Autocompletions
+const rCompletion = rLan.data.of({
+	autocomplete: completeFromList(getRHints())
+});
+
+function rLanguage() {
+	return new LanguageSupport(rLan, [rCompletion]);
+}
+
 export {
-	getRHints
+	rLanguage
 };

canvas_modules/common-canvas/src/palette/palette-dialog-topbar.jsx

@@ -16,14 +16,10 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import PaletteDialogTopbarThreeWayIcon from "./palette-dialog-topbar-three-way-icon.jsx";
-import Close32Icon from "../../assets/images/palette/close_32.svg";
-import PaletteGridSelectedIcon from "../../assets/images/palette/palette_grid_selected.svg";
-import PaletteGridHoverIcon from "../../assets/images/palette/palette_grid_hover.svg";
-import PaletteGridDeSelectedIcon from "../../assets/images/palette/palette_grid_deselected.svg";
-import PaletteListSelectedIcon from "../../assets/images/palette/palette_list_selected.svg";
-import PaletteListHoverIcon from "../../assets/images/palette/palette_list_hover.svg";
-import PaletteListDeSelectedIcon from "../../assets/images/palette/palette_list_deselected.svg";
+
+import { CloseOutline16, Grid16, List16 } from "@carbon/icons-react";
+
+import Toolbar from "../toolbar";
 
 class PaletteDialogTopbar extends React.Component {
 	constructor(props) {
@@ -34,9 +30,7 @@ class PaletteDialogTopbar extends React.Component {
 
 		this.mouseDown = this.mouseDown.bind(this);
 		this.doubleClick = this.doubleClick.bind(this);
-		this.close = this.close.bind(this);
-		this.gridViewSelected = this.gridViewSelected.bind(this);
-		this.listViewSelected = this.listViewSelected.bind(this);
+		this.toolbarActionHandler = this.toolbarActionHandler.bind(this);
 	}
 
 	mouseDown(mouseDownEvent) {
@@ -47,40 +41,35 @@ class PaletteDialogTopbar extends React.Component {
 		this.props.windowMaximizeMethod(doubleClickEvent);
 	}
 
-	close(closeEvent) {
-		this.props.canvasController.closePalette(closeEvent);
-	}
+	toolbarActionHandler(action) {
+		if (action === "close") {
+			this.props.canvasController.closePalette();
 
-	gridViewSelected() {
-		this.props.showGridMethod(true);
-	}
+		} else if (action === "grid") {
+			this.props.showGridMethod(true);
 
-	listViewSelected() {
-		this.props.showGridMethod(false);
+		} else if (action === "list") {
+			this.props.showGridMethod(false);
+		}
 	}
 
 	render() {
+		const config = {
+			leftBar: [
+				{ action: "grid", iconEnabled: (<Grid16 />), enable: true, isSelected: this.props.showGrid },
+				{ action: "list", iconEnabled: (<List16 />), enable: true, isSelected: !this.props.showGrid },
+				{ divider: true }
+			],
+			rightBar: [
+				{ divider: true },
+				{ action: "close", iconEnabled: (<CloseOutline16 />), enable: true }
+			]
+		};
+
+
 		return (
 			<div className="palette-dialog-topbar" onMouseDown={this.mouseDown} onDoubleClick={this.doubleClick}>
-				<span className="left-navbar">
-					<PaletteDialogTopbarThreeWayIcon iconClickedMethod={this.gridViewSelected}
-						isSelected={this.props.showGrid}
-						selectedIconName={PaletteGridSelectedIcon}
-						hoverIconName={PaletteGridHoverIcon}
-						deselectedIconName={PaletteGridDeSelectedIcon}
-					/>
-					<PaletteDialogTopbarThreeWayIcon iconClickedMethod={this.listViewSelected}
-						isSelected={!this.props.showGrid}
-						selectedIconName={PaletteListSelectedIcon}
-						hoverIconName={PaletteListHoverIcon}
-						deselectedIconName={PaletteListDeSelectedIcon}
-					/>
-				</span>
-				<span className="right-navbar">
-					<a className="secondary-action" onClick={this.close}>
-						<img src={Close32Icon} draggable="false" className="close-icon" />
-					</a>
-				</span>
+				<Toolbar instanceId = {0} config={config} toolbarActionHandler={this.toolbarActionHandler} />
 			</div>
 		);
 	}

canvas_modules/common-canvas/src/palette/palette.scss

@@ -420,47 +420,9 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-topbar {
-	height: 40px;
-	padding: 10px;
+	height: 41px;
 	background-color: $ui-03;
 	border-bottom: $palette-border-width solid $palette-border-color;
-
-	.left-navbar {
-		height: 20px;
-		float: left;
-		vertical-align: middle;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
-
-	.right-navbar {
-		height: 20px;
-		float: right;
-		vertical-align: middle;
-	}
-
-	.secondary-action {
-		margin-left: 10px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-	}
-
-	.close-icon svg {
-		fill: $interactive-02;
-	}
-
-	.palette-three-way-icon-div {
-		margin-left: 5px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-		height: 20px;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
 }
 
 .palette-dialog-content {
@@ -472,7 +434,7 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-categories {
-	background-color: $ui-03;
+	background-color: $ui-01;
 	width: 130px;
 	min-width: 130px; /* Set a min-width to ensure space for the scroll bar when it is displayed */
 	border-right: $palette-border-width solid $palette-border-color;

canvas_modules/common-canvas/src/toolbar/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Toolbar from "./toolbar.jsx";
+export default Toolbar;