You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kie.apache.org by po...@apache.org on 2023/10/11 17:24:51 UTC
[incubator-kie-tools-temporary-rnd-do-not-use] 10/32: kie-issues#561: Test Scenario Editor: CheatSheet Dock (#1984)
This is an automated email from the ASF dual-hosted git repository.
porcelli pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools-temporary-rnd-do-not-use.git
commit 0ad83a5cbccbbccb720d5c3a891a9a5ad93e4326
Author: Yeser Amer <ye...@ibm.com>
AuthorDate: Wed Sep 27 15:26:44 2023 +0200
kie-issues#561: Test Scenario Editor: CheatSheet Dock (#1984)
---
packages/scesim-editor/src/TestScenarioEditor.css | 3 +-
packages/scesim-editor/src/TestScenarioEditor.tsx | 41 +--------
.../drawer/TestScenarioDrawerCheatSheetPanel.tsx | 96 ++++++++++++++++++++++
.../src/drawer/TestScenarioDrawerPanel.tsx | 3 +-
.../src/drawer/TestScenarioDrawerSettingsPanel.css | 1 -
.../src/drawer/TestScenarioDrawerSettingsPanel.tsx | 3 +-
.../src/i18n/TestScenarioEditorI18n.ts | 35 ++++++++
packages/scesim-editor/src/i18n/locales/en.ts | 47 ++++++++++-
.../TestScenarioSideBarMenu.css} | 19 +++--
.../src/sidebar/TestScenarioSideBarMenu.tsx | 93 +++++++++++++++++++++
10 files changed, 289 insertions(+), 52 deletions(-)
diff --git a/packages/scesim-editor/src/TestScenarioEditor.css b/packages/scesim-editor/src/TestScenarioEditor.css
index 3bb63d10fe..32bee76cd1 100644
--- a/packages/scesim-editor/src/TestScenarioEditor.css
+++ b/packages/scesim-editor/src/TestScenarioEditor.css
@@ -41,8 +41,7 @@
}
.kie-scesim-editor--right-sidebar .pf-c-button {
- margin-bottom: 5px;
- margin-top: 5px;
+ margin-bottom: 10px;
}
.kie-scesim-editor--tabs ~ section {
diff --git a/packages/scesim-editor/src/TestScenarioEditor.tsx b/packages/scesim-editor/src/TestScenarioEditor.tsx
index 3bda006a00..d82d22d4e8 100644
--- a/packages/scesim-editor/src/TestScenarioEditor.tsx
+++ b/packages/scesim-editor/src/TestScenarioEditor.tsx
@@ -40,18 +40,15 @@ import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
import { Tabs, Tab, TabTitleIcon, TabTitleText } from "@patternfly/react-core/dist/js/components/Tabs";
import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput";
import { Title } from "@patternfly/react-core/dist/js/components/Title";
-import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
import AddIcon from "@patternfly/react-icons/dist/esm/icons/add-circle-o-icon";
-import CogIcon from "@patternfly/react-icons/dist/esm/icons/cog-icon";
import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
-import EditIcon from "@patternfly/react-icons/dist/esm/icons/edit-alt-icon";
import ErrorIcon from "@patternfly/react-icons/dist/esm/icons/error-circle-o-icon";
-import InfoIcon from "@patternfly/react-icons/dist/esm/icons/info-icon";
import TableIcon from "@patternfly/react-icons/dist/esm/icons/table-icon";
import ErrorBoundary from "./reactExt/ErrorBoundary";
import TestScenarioDrawerPanel from "./drawer/TestScenarioDrawerPanel";
+import TestScenarioSideBarMenu from "./sidebar/TestScenarioSideBarMenu";
import { EMPTY_ONE_EIGHT } from "./resources/EmptyScesimFile";
@@ -215,38 +212,6 @@ function TestScenarioCreationPanel({
);
}
-function TestScenarioDocksPanel({
- onDockButtonClicked,
-}: {
- onDockButtonClicked: (selected: TestScenarioEditorDock) => void;
-}) {
- return (
- <div className="kie-scesim-editor--right-sidebar">
- <Tooltip content={<div>Data Objects tool: It provides a tool to add your Data Objects in Test Scenarios</div>}>
- <Button
- variant="plain"
- onClick={() => onDockButtonClicked(TestScenarioEditorDock.DATA_OBJECT)}
- icon={<EditIcon />}
- />
- </Tooltip>
- <Tooltip content={<div>Settings</div>}>
- <Button
- variant="plain"
- onClick={() => onDockButtonClicked(TestScenarioEditorDock.SETTINGS)}
- icon={<CogIcon />}
- />
- </Tooltip>
- <Tooltip content={<div>CheatSheet: In this panel you can found useful information for Test Scenario Usage</div>}>
- <Button
- variant="plain"
- onClick={() => onDockButtonClicked(TestScenarioEditorDock.CHEATSHEET)}
- icon={<InfoIcon />}
- />
- </Tooltip>
- </div>
- );
-}
-
function TestScenarioMainPanel({
fileName,
scesimModel,
@@ -270,7 +235,7 @@ function TestScenarioMainPanel({
});
}, []);
- const openDockPanel = useCallback((selected: TestScenarioEditorDock.DATA_OBJECT) => {
+ const openDockPanel = useCallback((selected: TestScenarioEditorDock) => {
setDockPanel({ isOpen: true, selected: selected });
}, []);
@@ -339,7 +304,7 @@ function TestScenarioMainPanel({
</Tab>
</Tabs>
</div>
- <TestScenarioDocksPanel onDockButtonClicked={openDockPanel} />
+ <TestScenarioSideBarMenu selectedSideBarMenuItem={dockPanel} onSideBarButtonClicked={openDockPanel} />
</>
);
}
diff --git a/packages/scesim-editor/src/drawer/TestScenarioDrawerCheatSheetPanel.tsx b/packages/scesim-editor/src/drawer/TestScenarioDrawerCheatSheetPanel.tsx
new file mode 100644
index 0000000000..cc048c2646
--- /dev/null
+++ b/packages/scesim-editor/src/drawer/TestScenarioDrawerCheatSheetPanel.tsx
@@ -0,0 +1,96 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 * as React from "react";
+
+import { Text, TextContent, TextList, TextListItem } from "@patternfly/react-core/dist/js/components/Text";
+
+import { TestScenarioType } from "../TestScenarioEditor";
+import { useTestScenarioEditorI18n } from "../i18n";
+
+function TestScenarioDrawerCheatSheetPanel({ assetType }: { assetType: string }) {
+ const { i18n } = useTestScenarioEditorI18n();
+
+ return (
+ <TextContent>
+ <Text>{i18n.drawer.cheatSheet.paragraph1}</Text>
+ <Text>{i18n.drawer.cheatSheet.paragraph2(i18n.drawer.dataObject.title)}</Text>
+ <Text>{i18n.drawer.cheatSheet.paragraph3(i18n.tab.backgroundTabTitle, i18n.tab.scenarioTabTitle)}</Text>
+ <Text>{i18n.drawer.cheatSheet.paragraph4}</Text>
+ {assetType === TestScenarioType[TestScenarioType.DMN] && <Text>{i18n.drawer.cheatSheet.paragraph5DMN}</Text>}
+ <Text>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.paragraph6DMN
+ : i18n.drawer.cheatSheet.paragraph6Rule}
+ </Text>
+ <TextList>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression1DMN
+ : i18n.drawer.cheatSheet.expression1Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression2DMN
+ : i18n.drawer.cheatSheet.expression2Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression3DMN
+ : i18n.drawer.cheatSheet.expression3Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression4DMN
+ : i18n.drawer.cheatSheet.expression4Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression5DMN
+ : i18n.drawer.cheatSheet.expression5Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression6DMN
+ : i18n.drawer.cheatSheet.expression6Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression7DMN
+ : i18n.drawer.cheatSheet.expression7Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression8DMN
+ : i18n.drawer.cheatSheet.expression8Rule}
+ </TextListItem>
+ <TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN]
+ ? i18n.drawer.cheatSheet.expression9DMN
+ : i18n.drawer.cheatSheet.expression9Rule}
+ </TextListItem>
+ {assetType === TestScenarioType[TestScenarioType.DMN] && (
+ <TextListItem>{i18n.drawer.cheatSheet.expression10DMN}</TextListItem>
+ )}
+ </TextList>
+ </TextContent>
+ );
+}
+
+export default TestScenarioDrawerCheatSheetPanel;
diff --git a/packages/scesim-editor/src/drawer/TestScenarioDrawerPanel.tsx b/packages/scesim-editor/src/drawer/TestScenarioDrawerPanel.tsx
index 116a453ca4..ee5088462a 100644
--- a/packages/scesim-editor/src/drawer/TestScenarioDrawerPanel.tsx
+++ b/packages/scesim-editor/src/drawer/TestScenarioDrawerPanel.tsx
@@ -29,6 +29,7 @@ import {
} from "@patternfly/react-core/dist/js/components/Drawer";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
+import TestScenarioDrawerCheatSheetPanel from "./TestScenarioDrawerCheatSheetPanel";
import TestScenarioDrawerSettingsPanel from "../drawer/TestScenarioDrawerSettingsPanel";
import { TestScenarioEditorDock, TestScenarioSettings } from "../TestScenarioEditor";
import { useTestScenarioEditorI18n } from "../i18n";
@@ -78,7 +79,7 @@ function TestScenarioDrawerPanel({
{(() => {
switch (selectedDock) {
case TestScenarioEditorDock.CHEATSHEET:
- return i18n.drawer.cheatSheet.title;
+ return <TestScenarioDrawerCheatSheetPanel assetType={testScenarioSettings.assetType} />;
case TestScenarioEditorDock.DATA_OBJECT:
return i18n.drawer.dataObject.description;
case TestScenarioEditorDock.SETTINGS:
diff --git a/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css b/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css
index d79b3d056e..aa465dccc2 100644
--- a/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css
+++ b/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css
@@ -26,7 +26,6 @@
}
.kie-scesim-editor-drawer-settings--info-icon {
- display: inline-block;
margin-left: 5px;
vertical-align: top;
}
diff --git a/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.tsx b/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.tsx
index dae027fb37..334260074b 100644
--- a/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.tsx
+++ b/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.tsx
@@ -26,11 +26,12 @@ import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { TestScenarioSettings, TestScenarioType } from "../TestScenarioEditor";
import { useTestScenarioEditorI18n } from "../i18n";
-import "./TestScenarioDrawerSettingsPanel.css";
import { Icon } from "@patternfly/react-core/dist/esm/components/Icon/Icon";
import { InfoCircleIcon } from "@patternfly/react-icons/dist/esm/icons/info-circle-icon";
import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip";
+import "./TestScenarioDrawerSettingsPanel.css";
+
function TestScenarioDrawerSettingsPanel({
fileName,
onUpdateSettingField,
diff --git a/packages/scesim-editor/src/i18n/TestScenarioEditorI18n.ts b/packages/scesim-editor/src/i18n/TestScenarioEditorI18n.ts
index d4fc09f652..454e203d6d 100644
--- a/packages/scesim-editor/src/i18n/TestScenarioEditorI18n.ts
+++ b/packages/scesim-editor/src/i18n/TestScenarioEditorI18n.ts
@@ -27,6 +27,32 @@ interface TestScenarioEditorDictionary extends ReferenceDictionary {
title: string;
};
cheatSheet: {
+ expression1DMN: string;
+ expression1Rule: string;
+ expression2DMN: string;
+ expression2Rule: string;
+ expression3DMN: string;
+ expression3Rule: string;
+ expression4DMN: string;
+ expression4Rule: string;
+ expression5DMN: string;
+ expression5Rule: string;
+ expression6DMN: string;
+ expression6Rule: string;
+ expression7DMN: string;
+ expression7Rule: string;
+ expression8DMN: string;
+ expression8Rule: string;
+ expression9DMN: string;
+ expression9Rule: string;
+ expression10DMN: string;
+ paragraph1: string;
+ paragraph2: (testScenarioTab: string) => string;
+ paragraph3: (backgroundTab: string, testScenarioTab: string) => string;
+ paragraph4: string;
+ paragraph5DMN: string;
+ paragraph6DMN: string;
+ paragraph6Rule: string;
title: string;
};
settings: {
@@ -48,6 +74,15 @@ interface TestScenarioEditorDictionary extends ReferenceDictionary {
title: string;
};
};
+ sidebar: {
+ cheatSheetTooltip: string;
+ dataObjectsTooltip: string;
+ settingsTooltip: string;
+ };
+ tab: {
+ backgroundTabTitle: string;
+ scenarioTabTitle: string;
+ };
}
export default interface TestScenarioEditorI18n extends TestScenarioEditorDictionary, CommonI18n {}
diff --git a/packages/scesim-editor/src/i18n/locales/en.ts b/packages/scesim-editor/src/i18n/locales/en.ts
index ee48db46f3..eacdd7b1b7 100644
--- a/packages/scesim-editor/src/i18n/locales/en.ts
+++ b/packages/scesim-editor/src/i18n/locales/en.ts
@@ -29,7 +29,43 @@ export const en: TestScenarioEditorI18n = {
title: "Data Objects tool",
},
cheatSheet: {
- title: "Scenario Cheatsheet",
+ paragraph1: "To start off, use contextual menus in the table to insert or edit or delete new columns and rows.",
+ paragraph2: (dataObjectsDrawer: string) =>
+ `Before defining the individual test scenarios, verify the instance and field mappings for each column. If any changes are necessary, use the ${dataObjectsDrawer} to update the mapping.`,
+ paragraph3: (backgroundTab: string, testScenarioTab: string) =>
+ `If the same GIVEN data is shared with the multiple test scenarios, you can use the ${backgroundTab} tab to define them only once. The way to create a column in the ${backgroundTab} tab is the same as of the ${testScenarioTab} tab.`,
+ paragraph4: "Now, define the test scenarios. Each cell of the table must contain a valid expression.",
+ paragraph5DMN:
+ "Values in the GIVEN part of the table are evaluated as literal expressions, whereas values in the EXPECT section are evaluated as unary expressions. The correctness of these unary tests is verified using the results from a DMN evaluation.",
+ paragraph6DMN: "DMN-based scenarios use the FEEL expression language. Supported data types are:",
+ paragraph6Rule: "In rule-based scenarios, the following expressions are supported:",
+ expression1DMN:
+ 'numbers and strings (strings must be delimited by quotation marks), for example "John Doe" or ""',
+ expression1Rule:
+ "= (or no symbol) specifies equality of a value. This is the default operator of each column and the only operator that is supported in the GIVEN section of the table.",
+ expression2DMN: "boolean values (true, false, and null)",
+ expression2Rule: "!, !=, <> specify inequality of a value. This operator can be combined with other operators.",
+ expression3DMN: 'dates and time, for example date("2019-05-13") or time("14:10:00+02:00")',
+ expression3Rule:
+ "<, >, <=, >= specify a comparison: less than, greater than, less or equals than, and greater or equals than.",
+ expression4DMN: 'Days and time duration, for example duration("P1DT23H12M30S")',
+ expression4Rule:
+ "[value1, value2, value3] specifies a list of values. If one or more values are valid, the scenario definition is evaluated as true.",
+ expression5DMN: 'Years and months duration, for example duration("P3Y5M")',
+ expression5Rule:
+ "expression1; expression2; expression3 specifies a list of expressions. If all expressions are valid, the scenario definition is evaluated as true.",
+ expression6DMN: "functions",
+ expression6Rule: "To define an empty string, use =, [], or ;",
+ expression7DMN: 'contexts, for example {x : 5, even : false, type : "integer number"}',
+ expression7Rule: "To define a null value, use null.",
+ expression8DMN: "ranges and lists, for example [1 .. 10] or [2, 3, 4, 5]",
+ expression8Rule: "An empty cell is skipped from the evaluation.",
+ expression9DMN:
+ "In EXPECT section the type could also just a boolean with the result of the assertion and you can use ? identifier to access value to check.",
+ expression9Rule:
+ "To specify a MVEL expression (or invoke a Java method) just put # at the beginning of the expression. In GIVEN section, return type of the expression has to be the same one of type of the column. In EXPECT section the type could also just a boolean with the result of the assertion and you can use actualValue identifier to access value to check.",
+ expression10DMN: "An empty cell is skipped from the evaluation.",
+ title: "Cheatsheet",
},
settings: {
assetType: "Type",
@@ -52,4 +88,13 @@ export const en: TestScenarioEditorI18n = {
title: "Settings",
},
},
+ sidebar: {
+ cheatSheetTooltip: "CheatSheet: Useful information for Test Scenario Usage",
+ dataObjectsTooltip: "Data Objects: It provides a tool to edit your Scenarios",
+ settingsTooltip: "Setting: Properties of this Test Scenario asset",
+ },
+ tab: {
+ backgroundTabTitle: "Background",
+ scenarioTabTitle: "Test Scenario",
+ },
};
diff --git a/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css b/packages/scesim-editor/src/sidebar/TestScenarioSideBarMenu.css
similarity index 63%
copy from packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css
copy to packages/scesim-editor/src/sidebar/TestScenarioSideBarMenu.css
index d79b3d056e..fb09316d12 100644
--- a/packages/scesim-editor/src/drawer/TestScenarioDrawerSettingsPanel.css
+++ b/packages/scesim-editor/src/sidebar/TestScenarioSideBarMenu.css
@@ -17,16 +17,19 @@
* under the License.
*/
-.kie-scesim-editor-drawer-settings--checkbox {
+.kie-scesim-editor-side-bar-menu--button {
display: inline-block;
+ --pf-c-button--m-plain--Color: #06c;
+ --pf-c-button--m-plain--hover--Color: #06c;
}
-.kie-scesim-editor-drawer-settings--checkbox-group {
- margin-top: 30px;
-}
-
-.kie-scesim-editor-drawer-settings--info-icon {
+.kie-scesim-editor-side-bar-menu--button-selected {
+ background-color: #06c;
display: inline-block;
- margin-left: 5px;
- vertical-align: top;
+ --pf-c-button--m-plain--BackgroundColor: #06c;
+ --pf-c-button--m-plain--Color: #fff;
+ --pf-c-button--m-plain--focus--BackgroundColor: #06c;
+ --pf-c-button--m-plain--focus--Color: #fff;
+ --pf-c-button--m-plain--hover--BackgroundColor: #06c;
+ --pf-c-button--m-plain--hover--Color: #fff;
}
diff --git a/packages/scesim-editor/src/sidebar/TestScenarioSideBarMenu.tsx b/packages/scesim-editor/src/sidebar/TestScenarioSideBarMenu.tsx
new file mode 100644
index 0000000000..911ea84cc7
--- /dev/null
+++ b/packages/scesim-editor/src/sidebar/TestScenarioSideBarMenu.tsx
@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 * as React from "react";
+import { useCallback } from "react";
+
+import { Button } from "@patternfly/react-core/dist/js/components/Button";
+import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
+
+import CogIcon from "@patternfly/react-icons/dist/esm/icons/cog-icon";
+import EditIcon from "@patternfly/react-icons/dist/esm/icons/edit-alt-icon";
+import InfoIcon from "@patternfly/react-icons/dist/esm/icons/info-icon";
+
+import { TestScenarioEditorDock } from "../TestScenarioEditor";
+import { useTestScenarioEditorI18n } from "../i18n";
+
+import "./TestScenarioSideBarMenu.css";
+
+function TestScenarioSideBarMenu({
+ onSideBarButtonClicked,
+ selectedSideBarMenuItem,
+}: {
+ onSideBarButtonClicked: (selected: TestScenarioEditorDock) => void;
+ selectedSideBarMenuItem: { isOpen: boolean; selected: TestScenarioEditorDock };
+}) {
+ const { i18n } = useTestScenarioEditorI18n();
+
+ const isSelectedMenuItem = useCallback(
+ (item: TestScenarioEditorDock) => {
+ return selectedSideBarMenuItem.isOpen && selectedSideBarMenuItem.selected === item;
+ },
+ [selectedSideBarMenuItem]
+ );
+
+ return (
+ <div className="kie-scesim-editor--right-sidebar">
+ <Tooltip content={i18n.sidebar.dataObjectsTooltip}>
+ <Button
+ className={
+ isSelectedMenuItem(TestScenarioEditorDock.DATA_OBJECT)
+ ? "kie-scesim-editor-side-bar-menu--button-selected"
+ : "kie-scesim-editor-side-bar-menu--button"
+ }
+ variant="plain"
+ onClick={() => onSideBarButtonClicked(TestScenarioEditorDock.DATA_OBJECT)}
+ icon={<EditIcon />}
+ />
+ </Tooltip>
+ <Tooltip content={i18n.sidebar.cheatSheetTooltip}>
+ <Button
+ className={
+ isSelectedMenuItem(TestScenarioEditorDock.CHEATSHEET)
+ ? "kie-scesim-editor-side-bar-menu--button-selected"
+ : "kie-scesim-editor-side-bar-menu--button"
+ }
+ icon={<InfoIcon />}
+ onClick={() => onSideBarButtonClicked(TestScenarioEditorDock.CHEATSHEET)}
+ variant="plain"
+ />
+ </Tooltip>
+ <Tooltip content={<div>{i18n.sidebar.settingsTooltip}</div>}>
+ <Button
+ className={
+ isSelectedMenuItem(TestScenarioEditorDock.SETTINGS)
+ ? "kie-scesim-editor-side-bar-menu--button-selected"
+ : "kie-scesim-editor-side-bar-menu--button"
+ }
+ icon={<CogIcon />}
+ onClick={() => onSideBarButtonClicked(TestScenarioEditorDock.SETTINGS)}
+ variant="plain"
+ />
+ </Tooltip>
+ </div>
+ );
+}
+
+export default TestScenarioSideBarMenu;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@kie.apache.org
For additional commands, e-mail: commits-help@kie.apache.org