35 | {
41 | console.log(e);
42 | }}
43 | disabled
44 | />
45 |
52 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@elyra/pipeline-editor",
3 | "version": "1.12.1",
4 | "main": "dist/index.js",
5 | "homepage": "https://github.com/elyra-ai/pipeline-editor",
6 | "bugs": {
7 | "url": "https://github.com/elyra-ai/pipeline-editor/issues"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/elyra-ai/pipeline-editor"
12 | },
13 | "license": "Apache-2.0",
14 | "files": [
15 | "dist"
16 | ],
17 | "scripts": {
18 | "clean": "rm -rf node_modules; rm -rf dist; yarn unlink || true",
19 | "build": "microbundle --css inline -f cjs",
20 | "watch": "microbundle --css inline -o dist/index.js --no-pkg-main -f modern --watch --no-compress",
21 | "link": "yarn link"
22 | },
23 | "dependencies": {
24 | "@elyra/canvas": "^12.23.2",
25 | "@elyra/pipeline-services": "^1.12.1",
26 | "@rjsf/core": "^4.2.3",
27 | "@rjsf/utils": "^5.0.0-beta.2",
28 | "@rjsf/validator-ajv6": "^5.0.0-beta.2",
29 | "carbon-components": "^10.43.0",
30 | "carbon-components-react": "^7.48.0",
31 | "carbon-icons": "7.0.7",
32 | "downshift": "^6.1.2",
33 | "immer": "^9.0.7",
34 | "nanoid": "^3.1.20",
35 | "react-dom": "^17.0.1",
36 | "react-intl": "^5.0.0",
37 | "react-redux": "^7.0.0",
38 | "redux": "^4.0.5",
39 | "styled-components": "^5.2.1"
40 | },
41 | "devDependencies": {
42 | "@testing-library/jest-dom": "^5.11.9",
43 | "@testing-library/react": "^11.2.5",
44 | "@testing-library/user-event": "^12.8.0",
45 | "@types/react": "^17.0.1",
46 | "@types/react-dom": "^17.0.0",
47 | "@types/react-intl": "^3.0.0",
48 | "@types/react-redux": "^7.1.16",
49 | "@types/styled-components": "^5.1.7",
50 | "react": "^17.0.1"
51 | },
52 | "peerDependencies": {
53 | "react": ">=17.0.0"
54 | },
55 | "publishConfig": {
56 | "access": "public"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/ThemeProvider/useSystemInfo.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { useEffect, useMemo, useState } from "react";
18 |
19 | function useSystemInfo() {
20 | const [mode, setMode] = useState<"dark" | "light">(
21 | window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
22 | );
23 |
24 | useEffect(() => {
25 | const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
26 |
27 | try {
28 | // Chrome & Firefox
29 | darkMediaQuery.addEventListener("change", (e) => {
30 | if (e.matches) {
31 | setMode("dark");
32 | } else {
33 | setMode("light");
34 | }
35 | });
36 | } catch {
37 | try {
38 | // Old Safari
39 | darkMediaQuery.addListener((e) => {
40 | if (e.matches) {
41 | setMode("dark");
42 | } else {
43 | setMode("light");
44 | }
45 | });
46 | } catch {}
47 | }
48 | }, []);
49 |
50 | const platform = useMemo<"mac" | "win" | "other">(() => {
51 | if (window.navigator.platform.startsWith("Mac")) {
52 | return "mac";
53 | }
54 | if (window.navigator.platform.startsWith("Win")) {
55 | return "win";
56 | }
57 | return "other";
58 | }, []);
59 |
60 | return useMemo(() => ({ mode, platform }), [mode, platform]);
61 | }
62 |
63 | export default useSystemInfo;
64 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/NodeTooltip/index.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import styled from "styled-components";
18 |
19 | import { hasValue, toPrettyString } from "./utils";
20 |
21 | interface Props {
22 | error?: string;
23 | nodeLabel?: string;
24 | properties: {
25 | label: string;
26 | value: any;
27 | }[];
28 | }
29 |
30 | const Container = styled.div`
31 | padding-top: 7px;
32 | text-align: left;
33 | `;
34 |
35 | const Key = styled.div`
36 | color: ${({ theme }) => theme.palette.text.primary};
37 | font-weight: 600;
38 | `;
39 |
40 | const Value = styled.div`
41 | margin-left: 7px;
42 | margin-bottom: 7px;
43 | white-space: pre-wrap;
44 | `;
45 |
46 | const ErrorValue = styled(Value)`
47 | color: ${({ theme }) => theme.palette.text.error};
48 | `;
49 |
50 | function NodeTooltip({ error, nodeLabel, properties }: Props) {
51 | return (
52 |
55 | Error
56 | {toPrettyString(error)}
57 |
58 | )}
59 |
64 | {label}
65 | {toPrettyString(value)}
66 |
67 | ))}
68 | Elyra Pipeline Editor
19 | 20 |
21 | 
22 |
25 | A react component for editing pipeline files. Used across all Elyra applications and browser extensions. 26 |
27 | 28 |
29 | 
30 | 
31 |
right panel
}
25 | mode="closed"
26 | />
27 | );
28 |
29 | expect(screen.getByText(/left panel/i)).toBeInTheDocument();
30 | expect(screen.queryByText(/right panel/i)).not.toBeInTheDocument();
31 | });
32 |
33 | it("renders both panels when open", () => {
34 | render(
35 | right panel
}
38 | mode="open"
39 | />
40 | );
41 |
42 | expect(screen.getByText(/left panel/i)).toBeInTheDocument();
43 | expect(screen.getByText(/right panel/i)).toBeInTheDocument();
44 | });
45 |
46 | it("renders both panels when collapsed", () => {
47 | render(
48 | right panel
}
51 | mode="collapsed"
52 | />
53 | );
54 |
55 | expect(screen.getByText(/left panel/i)).toBeInTheDocument();
56 | expect(screen.getByText(/right panel/i)).toBeInTheDocument();
57 | });
58 |
59 | it("should adjust width when dragged", () => {
60 | render(
61 | right panel
}
64 | mode="open"
65 | />
66 | );
67 |
68 | const before = screen.getByTestId("drag-handle").style.right;
69 |
70 | fireEvent.mouseDown(screen.getByTestId("drag-handle"));
71 | fireEvent.mouseMove(screen.getByTestId("drag-handle"), { clientX: 0 });
72 | fireEvent.mouseUp(screen.getByTestId("drag-handle"));
73 |
74 | const after = screen.getByTestId("drag-handle").style.right;
75 |
76 | expect(after).not.toBe(before);
77 | });
78 |
79 | it("should not adjust width when handle has not been clicked", () => {
80 | render(
81 | right panel
}
84 | mode="open"
85 | />
86 | );
87 |
88 | const before = screen.getByTestId("drag-handle").style.right;
89 |
90 | fireEvent.mouseDown(screen.getByTestId("drag-handle"));
91 | fireEvent.mouseUp(screen.getByTestId("drag-handle"));
92 |
93 | fireEvent.mouseMove(screen.getByTestId("drag-handle"), { clientX: 0 });
94 |
95 | const after = screen.getByTestId("drag-handle").style.right;
96 |
97 | expect(after).toBe(before);
98 | });
99 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/ThemeProvider/utils.test.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { deepmerge } from "./utils";
18 |
19 | describe("deepmerge", () => {
20 | it("returns target when source is empty", () => {
21 | const target = {
22 | one: {
23 | two: {
24 | three: "x",
25 | },
26 | },
27 | };
28 |
29 | const source = {};
30 |
31 | const actual = deepmerge(target, source);
32 |
33 | expect(actual).toEqual(target);
34 | });
35 |
36 | it("adds missing objects", () => {
37 | interface Target {
38 | one: {
39 | two: {
40 | three: string;
41 | };
42 | };
43 | four?: {
44 | five?: string;
45 | six?: string;
46 | };
47 | }
48 |
49 | const target: Target = {
50 | one: {
51 | two: {
52 | three: "x",
53 | },
54 | },
55 | };
56 |
57 | const source = {
58 | four: {
59 | five: "y",
60 | six: "z",
61 | },
62 | };
63 |
64 | const expected = {
65 | one: {
66 | two: {
67 | three: "x",
68 | },
69 | },
70 | four: {
71 | five: "y",
72 | six: "z",
73 | },
74 | };
75 |
76 | const actual = deepmerge(target, source);
77 |
78 | expect(actual).toEqual(expected);
79 | });
80 |
81 | it("updates values", () => {
82 | const target = {
83 | one: {
84 | two: {
85 | three: "x",
86 | },
87 | },
88 | };
89 |
90 | const source = {
91 | one: {
92 | two: {
93 | three: "y",
94 | },
95 | },
96 | };
97 |
98 | const expected = {
99 | one: {
100 | two: {
101 | three: "y",
102 | },
103 | },
104 | };
105 |
106 | const actual = deepmerge(target, source);
107 |
108 | expect(actual).toEqual(expected);
109 | });
110 |
111 | it("doesn't update if undefined", () => {
112 | const target = {
113 | one: {
114 | two: {
115 | three: "x",
116 | },
117 | },
118 | };
119 |
120 | const source = {
121 | one: {
122 | two: {
123 | three: undefined,
124 | },
125 | },
126 | };
127 |
128 | const expected = {
129 | one: {
130 | two: {
131 | three: "x",
132 | },
133 | },
134 | };
135 |
136 | const actual = deepmerge(target, source);
137 |
138 | expect(actual).toEqual(expected);
139 | });
140 | });
141 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
18 |
19 | # Contributing
20 |
21 | Welcome to Elyra! If you are interested in contributing to the [Elyra code repo](README.md)
22 | then checkout the [Contributor's Guide](https://github.com/elyra-ai/community/blob/main/CONTRIBUTING.md) and
23 | the [Code of Conduct](https://github.com/elyra-ai/community/blob/main/CODE_OF_CONDUCT.md).
24 |
25 | The [Elyra community repo](https://github.com/elyra-ai/community) contains information on how the community
26 | is organized and other information that is pertinent to contributing.
27 |
28 | ## Community Roles
29 |
30 | ### Contributors
31 |
32 | Contributors are Members who are active/inactive contributors to the community. They can have issues and Pull Requests assigned to them. Contributors can be active in many ways including but not limited to:
33 |
34 | - Authoring or reviewing PRs on GitHub
35 | - Filing or commenting on issues on GitHub
36 | - Contributing community discussions (e.g. Slack, meetings, Gitter, email discussion forums, Stack Overflow, etc)
37 | - Creator of content, promotion and advocating
38 |
39 | Active Contributors are defined as anyone from the community with twenty (20) or more measurable contributions
40 | during the previous 12-month period, inclusive of code merged, code reviews performed, documentation page edits,
41 | (creation, modification, comments or attachments)
42 |
43 | ### Committers
44 |
45 | Contributors who give frequent and valuable contributions to a subproject of the Project can have their
46 | status promoted to that of a Committer for that subproject. A Committer has write access to the source code
47 | repository and gains voting rights allowing them to affect the future of the subproject.
48 |
49 | In order for a Contributor to become a Committer, another Committer can nominate that Contributor or the Contributor can ask for it.
50 | Once a Contributor is nominated, all Committers will be asked to vote. If there are at least 3 positive votes and no negative
51 | votes, the Contributor is converted into a Committer and given write access to the source code repository.
52 |
53 | ## Committers
54 |
55 | | Name | Company | GitHub ID |
56 | | :-------------: | :-----: | :-----------: |
57 | | Alan Chin | IBM | akchinSTC |
58 | | Alex Bozarth | IBM | ajbozarth |
59 | | Karla Spuldaro | IBM | karlaspuldaro |
60 | | Luciano Resende | Apple | lresende |
61 | | Martha Cryan | IBM | marthacryan |
62 | | Nick Bourdakos | | bourdakos1 |
63 |
64 | ## Contributors
65 |
66 | | Name | GitHub ID |
67 | | :-----------: | :----------: |
68 | | Rachael House | rachaelhouse |
69 |
--------------------------------------------------------------------------------
/packages/pipeline-services/src/migration/migrateV5/index.test.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import produce from "immer";
18 |
19 | import rawMigrate from "./";
20 |
21 | // wrap migrate functions in immer
22 | const migrate = produce
27 | {props.formData ?? props.schema.default}
28 |
29 | );
30 | }
31 | if (
32 | props.schema.uniqueItems &&
33 | (props.schema.items as any)?.enum?.length === 0
34 | ) {
35 | children = (
36 |
37 | No pipeline parameters are defined.
38 |
39 | );
40 | } else if (props.schema.uniqueItems && props.formData) {
41 | const filteredItems = props.formData.filter((item: any) => {
42 | return (props.schema.items as any)?.enum?.includes(item);
43 | });
44 | if (filteredItems.length !== props.formData.length) {
45 | props.onChange(filteredItems);
46 | }
47 | }
48 | const requiredError = props.required && props.formData === undefined;
49 | const hasError = props.rawErrors || requiredError;
50 | return (
51 |
59 | {hasError && }
60 | {props.schema.title !== undefined && props.schema.title !== " " ? (
61 | is a required property }
86 |
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/CustomFormControls/components.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import styled from "styled-components";
18 |
19 | export const EnumButton = styled.button.attrs({ type: "button" })`
20 | /* higher specificity to override button styles */
21 | && {
22 | background-color: ${({ theme }) => theme.palette.secondary.main};
23 | color: ${({ theme }) => theme.palette.secondary.contrastText};
24 | border: 1px solid ${({ theme }) => theme.palette.inputBorder};
25 | display: flex;
26 | width: 100%;
27 | height: 26px;
28 | align-items: center;
29 | justify-content: space-between;
30 | padding: 2px 8px;
31 | border-radius: ${({ theme }) => theme.shape.borderRadius};
32 | }
33 |
34 | &&:hover {
35 | background-color: ${({ theme }) => theme.palette.secondary.main};
36 | border: 1px solid ${({ theme }) => theme.palette.highlight.hover};
37 | border-radius: ${({ theme }) => theme.shape.borderRadius};
38 | }
39 |
40 | &&:focus {
41 | border: 1px solid ${({ theme }) => theme.palette.focus};
42 | border-radius: ${({ theme }) => theme.shape.borderRadius};
43 | }
44 | `;
45 |
46 | export const EnumLabel = styled.div`
47 | white-space: nowrap;
48 | overflow: hidden;
49 | text-overflow: ellipsis;
50 | `;
51 |
52 | export const EnumIcon = styled.div`
53 | display: flex;
54 | align-items: center;
55 | justify-content: center;
56 | `;
57 |
58 | export const EnumMenu = styled.ul`
59 | z-index: 10;
60 | position: absolute;
61 | top: 26px;
62 | left: 0;
63 | right: 0;
64 | color: ${({ theme }) => theme.palette.secondary.contrastText};
65 | background-color: ${({ theme }) => theme.palette.background.secondary};
66 | padding: 2px;
67 | padding-bottom: 4px;
68 | margin: 0;
69 | list-style-type: none;
70 | border-radius: ${({ theme }) => theme.shape.borderRadius};
71 | `;
72 |
73 | export const EnumMenuItem = styled.li`
74 | cursor: pointer;
75 | height: 18px;
76 | line-height: 18px;
77 | padding-left: 3.5px;
78 | color: ${({ theme }) => theme.palette.text.primary};
79 |
80 | &:hover {
81 | background-color: ${({ theme }) => theme.palette.hover};
82 | border-radius: ${({ theme }) => theme.shape.borderRadius};
83 | }
84 | `;
85 |
86 | export const EnumContainer = styled.div<{ isOpen: boolean }>`
87 | position: relative;
88 | margin-top: 9px;
89 | width: 100%;
90 | max-width: 320px;
91 |
92 | & ${EnumButton}, & ${EnumMenu} {
93 | border: 1px solid ${({ theme }) => theme.palette.inputBorder};
94 | border-radius: ${({ theme }) => theme.shape.borderRadius};
95 | }
96 |
97 | & ${EnumMenu} {
98 | display: ${({ isOpen }) => (isOpen ? "block" : "none")};
99 | }
100 | `;
101 |
--------------------------------------------------------------------------------
/packages/pipeline-services/src/migration/migrateV8/index.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | const widgetMap: { [key: string]: string } = {
18 | BooleanControl: "boolean",
19 | NumberControl: "number",
20 | NestedEnumControl: "inputpath",
21 | StringControl: "string",
22 | };
23 |
24 | const regexMap: { [key: string]: RegExp } = {
25 | env_vars: /(?
66 |
69 | {props.schema.description && (
70 |
82 | ) : undefined}
83 | {children}
84 | {props.errors}
85 | {requiredError &&
71 |
80 | )}
81 | ?
72 | 77 | {props.schema.description} 78 |
79 |
110 |
134 | );
135 | };
136 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/CustomFormControls/CustomArray.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { useCallback } from "react";
18 |
19 | import { ArrayFieldTemplateProps } from "@rjsf/core";
20 |
21 | const renderDefaults = (
22 | items: any[],
23 | props: any
24 | ): React.ReactElement | undefined => {
25 | const allRendered = [];
26 | if (items.length === 0) {
27 | return undefined;
28 | } else if (props.schema.items?.type === "object") {
29 | for (const item of items) {
30 | const itemRendered = [];
31 | for (const key in props.schema.items.properties ?? {}) {
32 | const propertySchema = props.schema.items.properties[key];
33 | if (propertySchema.type === "boolean") {
34 | itemRendered.push(
35 |
111 |
125 |
126 | {option !== null && (
127 |
36 |
42 |
43 | );
44 | } else {
45 | itemRendered.push(
46 |
47 |
48 |
49 |
50 | );
51 | }
52 | }
53 | allRendered.push(
54 |
55 |
61 | {itemRendered}
62 |
63 | );
64 | }
65 | } else {
66 | for (const item of items) {
67 | if (item === null || item === undefined || item === "") {
68 | return undefined;
69 | } else {
70 | return (
71 |
72 |
75 | );
76 | }
77 | }
78 | }
79 | return {item}
73 | (pipeline default)
74 | {allRendered}
;
80 | };
81 |
82 | /**
83 | * React component that allows for custom add / remove buttons in the array
84 | * field component.
85 | */
86 | export const ArrayTemplate: React.FC
100 | {props.items.map((item) => {
101 | return (
102 |
146 | );
147 | };
148 |
--------------------------------------------------------------------------------
/packages/pipeline-services/src/migration/migrateV6/index.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import path from "path";
18 |
19 | import { ComponentNotFoundError } from "../errors";
20 |
21 | export const opMap: { [key: string]: string } = {
22 | run_notebook_using_papermill_Runnotebookusingpapermill:
23 | "elyra-kfp-examples-catalog:61e6f4141f65",
24 | filter_text_using_shell_and_grep_Filtertext:
25 | "elyra-kfp-examples-catalog:737915b826e9",
26 | component_Downloaddata: "elyra-kfp-examples-catalog:a08014f9252f",
27 | component_Calculatedatahash: "elyra-kfp-examples-catalog:d68ec7fcdf46",
28 | bash_operator_BashOperator: "elyra-airflow-examples-catalog:3a55d015ea96",
29 | email_operator_EmailOperator: "elyra-airflow-examples-catalog:a043648d3897",
30 | http_operator_SimpleHttpOperator:
31 | "elyra-airflow-examples-catalog:b94cd49692e2",
32 | spark_sql_operator_SparkSqlOperator:
33 | "elyra-airflow-examples-catalog:3b639742748f",
34 | spark_submit_operator_SparkSubmitOperator:
35 | "elyra-airflow-examples-catalog:b29c25ec8bd6",
36 | slack_operator_SlackAPIPostOperator:
37 | "elyra-airflow-examples-catalog:16a204f716a2",
38 | };
39 |
40 | const runtimeTypeMap: { [key: string]: string } = {
41 | kfp: "KUBEFLOW_PIPELINES",
42 | airflow: "APACHE_AIRFLOW",
43 | };
44 |
45 | function migrate(pipelineFlow: any, palette: any) {
46 | let paletteNodes = [];
47 | for (const c of palette?.categories || []) {
48 | if (c.node_types) {
49 | paletteNodes.push(...c.node_types);
50 | }
51 | }
52 |
53 | // Add runtime type based on previous runtime property
54 | pipelineFlow.pipelines[0].app_data.runtime_type =
55 | runtimeTypeMap[pipelineFlow.pipelines[0].app_data.runtime];
56 | delete pipelineFlow.pipelines[0].app_data.runtime;
57 |
58 | for (const pipeline of pipelineFlow.pipelines) {
59 | for (const node of pipeline.nodes) {
60 | const newOp = opMap[node.op];
61 | if (newOp) {
62 | // update op string
63 | node.op = newOp;
64 |
65 | // update component_source from string to json
66 | const opParts = newOp.split(":");
67 | const catalog_type = opParts[0];
68 | const component_ref: { [key: string]: any } = {};
69 | component_ref["component-id"] = path.basename(
70 | node.app_data.component_source
71 | );
72 | // handle the two cases where the filename changed
73 | if (component_ref["component-id"] === "component.yaml") {
74 | switch (opParts[1]) {
75 | case "a08014f9252f":
76 | component_ref["component-id"] = "download_data.yaml";
77 | break;
78 | case "d68ec7fcdf46":
79 | component_ref["component-id"] = "calculate_hash.yaml";
80 | }
81 | }
82 | node.app_data.component_source = JSON.stringify({
83 | catalog_type,
84 | component_ref,
85 | });
86 |
87 | // update format of values that have switch to using OneOfControl
88 | // running this inside the if since only those nodes use OneOfControl
89 | // only running on airflow components since kfp migration is handled in v7
90 | if (
91 | pipelineFlow.pipelines[0].app_data.runtime_type === "APACHE_AIRFLOW"
92 | ) {
93 | const nodePropertiesSchema = paletteNodes.find(
94 | (n: any) => n.op === node.op
95 | );
96 | if (nodePropertiesSchema === undefined) {
97 | throw new ComponentNotFoundError();
98 | }
99 | const propertyDefs =
100 | nodePropertiesSchema.app_data.properties.uihints.parameter_info;
101 | Object.keys(node.app_data.component_parameters ?? {}).forEach(
102 | (key) => {
103 | const propDef = propertyDefs.find(
104 | (p: any) => p.parameter_ref === "elyra_" + key
105 | );
106 | if (propDef?.custom_control_id === "OneOfControl") {
107 | const activeControl: string =
108 | Object.keys(propDef.data.controls).find(
109 | (c: string) => c !== "NestedEnumControl"
110 | ) || "";
111 | node.app_data.component_parameters[key] = {
112 | activeControl,
113 | [activeControl]: node.app_data.component_parameters[key],
114 | };
115 | }
116 | }
117 | );
118 | }
119 | }
120 | }
121 | }
122 |
123 | pipelineFlow.pipelines[0].app_data.version = 6;
124 |
125 | return pipelineFlow;
126 | }
127 |
128 | export default migrate;
129 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/NodeTooltip/utils.test.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { hasValue, toPrettyString } from "./utils";
18 |
19 | describe("toPrettyString", () => {
20 | it("returns the same string for a string", () => {
21 | const result = toPrettyString("hello world");
22 | expect(result).toEqual("hello world");
23 | });
24 |
25 | it("returns a string for a number", () => {
26 | const result = toPrettyString(42);
27 | expect(result).toEqual("42");
28 | });
29 |
30 | it("returns a string for a simple string array", () => {
31 | const result = toPrettyString(["one", "two", "three"]);
32 | expect(result).toEqual("one\ntwo\nthree");
33 | });
34 |
35 | it("returns a string for a simple array with numbers", () => {
36 | const result = toPrettyString([1, 2, 3]);
37 | expect(result).toEqual("1\n2\n3");
38 | });
39 |
40 | it("returns a string for a simple array with null holes", () => {
41 | const result = toPrettyString([null, null, null]);
42 | expect(result).toEqual("null\nnull\nnull");
43 | });
44 |
45 | it("returns a string for a simple array with undefined holes", () => {
46 | const result = toPrettyString([undefined, undefined, undefined]);
47 | expect(result).toEqual("undefined\nundefined\nundefined");
48 | });
49 |
50 | it("returns an empty string for an empty array", () => {
51 | const result = toPrettyString([]);
52 | expect(result).toEqual("");
53 | });
54 |
55 | it("returns a string for a sparse array", () => {
56 | // eslint-disable-next-line no-sparse-arrays
57 | const result = toPrettyString(["one", , , "two", , "three"]);
58 | expect(result).toEqual("one\n\n\ntwo\n\nthree");
59 | });
60 |
61 | it("returns 'Yes' for a true boolean", () => {
62 | const result = toPrettyString(true);
63 | expect(result).toEqual("Yes");
64 | });
65 |
66 | it("returns 'No' for a false boolean", () => {
67 | const result = toPrettyString(false);
68 | expect(result).toEqual("No");
69 | });
70 |
71 | it("returns a string for undefined", () => {
72 | const result = toPrettyString(undefined);
73 | expect(result).toEqual("undefined");
74 | });
75 |
76 | it("returns a string for null", () => {
77 | const result = toPrettyString(null);
78 | expect(result).toEqual("null");
79 | });
80 |
81 | it("returns a string for NaN", () => {
82 | const result = toPrettyString(NaN);
83 | expect(result).toEqual("NaN");
84 | });
85 |
86 | it("returns a string for an object", () => {
87 | const result = toPrettyString({ one: 1, two: 2, three: 3 });
88 | expect(result).toEqual("one: 1\ntwo: 2\nthree: 3");
89 | });
90 |
91 | it("returns a string for an error", () => {
92 | const result = toPrettyString(new Error("this is an error"));
93 | expect(result).toEqual("Error: this is an error");
94 | });
95 | });
96 |
97 | describe("hasValue", () => {
98 | it("returns true for a true value", () => {
99 | const result = hasValue(true);
100 | expect(result).toEqual(true);
101 | });
102 |
103 | it("returns true for a false value", () => {
104 | const result = hasValue(true);
105 | expect(result).toEqual(true);
106 | });
107 |
108 | it("returns true for a string", () => {
109 | const result = hasValue("hello");
110 | expect(result).toEqual(true);
111 | });
112 |
113 | it("returns true for an array", () => {
114 | const result = hasValue(["one", "two", "three"]);
115 | expect(result).toEqual(true);
116 | });
117 |
118 | it("returns true for an object", () => {
119 | const result = hasValue({ one: 1, two: 2, three: 3 });
120 | expect(result).toEqual(true);
121 | });
122 |
123 | it("returns true for a number", () => {
124 | const result = hasValue(42);
125 | expect(result).toEqual(true);
126 | });
127 |
128 | it("returns true for zero", () => {
129 | const result = hasValue(0);
130 | expect(result).toEqual(true);
131 | });
132 |
133 | it("returns true for NaN", () => {
134 | const result = hasValue(NaN);
135 | expect(result).toEqual(true);
136 | });
137 |
138 | it("returns false for an empty string", () => {
139 | const result = hasValue("");
140 | expect(result).toEqual(false);
141 | });
142 |
143 | it("returns false for an empty array", () => {
144 | const result = hasValue([]);
145 | expect(result).toEqual(false);
146 | });
147 |
148 | it("returns false for a null value", () => {
149 | const result = hasValue(null);
150 | expect(result).toEqual(false);
151 | });
152 |
153 | it("returns false for an undefined value", () => {
154 | const result = hasValue(undefined);
155 | expect(result).toEqual(false);
156 | });
157 | });
158 |
--------------------------------------------------------------------------------
/packages/pipeline-services/src/validation/utils.test.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { Node } from "jsonc-parser";
18 |
19 | import { getLinks, getNodes, findNode, rangeForLocation } from "./utils";
20 |
21 | describe("findNode", () => {
22 | it("returns undefined if node doesn't exist", () => {
23 | const pipeline = { nodes: [{ id: "node-1" }] };
24 | const node = findNode(pipeline, "node-2");
25 | expect(node).toBeUndefined();
26 | });
27 |
28 | it("returns the node if it exists", () => {
29 | const pipeline = { nodes: [{ id: "node-1" }] };
30 | const node = findNode(pipeline, "node-1");
31 | expect(node.id).toBe("node-1");
32 | });
33 | });
34 |
35 | describe("getNodes", () => {
36 | it("gets a list of nodes", () => {
37 | const pipeline = { nodes: ["I am a node"] };
38 | const nodes = getNodes(pipeline);
39 | expect(nodes).toEqual(["I am a node"]);
40 | });
41 | });
42 |
43 | describe("getLinks", () => {
44 | it("returns an empty list when there are no nodes", () => {
45 | const pipeline = { nodes: [] };
46 | const links = getLinks(pipeline);
47 | expect(links).toHaveLength(0);
48 | });
49 |
50 | it("returns an empty list when the source node doesn't exist", () => {
51 | const pipeline = {
52 | nodes: [
53 | {
54 | id: "node-1",
55 | type: "execution_node",
56 | inputs: [
57 | {
58 | links: [
59 | {
60 | id: "link-1",
61 | node_id_ref: "node-2",
62 | },
63 | ],
64 | },
65 | ],
66 | },
67 | ],
68 | };
69 | const links = getLinks(pipeline);
70 | expect(links).toHaveLength(0);
71 | });
72 |
73 | it("returns an empty list when there are no links", () => {
74 | const pipeline = {
75 | nodes: [
76 | {
77 | id: "node-1",
78 | type: "execution_node",
79 | inputs: [
80 | {
81 | links: [],
82 | },
83 | ],
84 | },
85 | ],
86 | };
87 | const links = getLinks(pipeline);
88 | expect(links).toHaveLength(0);
89 | });
90 |
91 | it("returns an empty list when links are undefined", () => {
92 | const pipeline = {
93 | nodes: [
94 | {
95 | id: "node-1",
96 | type: "execution_node",
97 | inputs: [
98 | {
99 | links: undefined,
100 | },
101 | ],
102 | },
103 | ],
104 | };
105 | const links = getLinks(pipeline);
106 | expect(links).toHaveLength(0);
107 | });
108 |
109 | it("returns an empty list when there are no inputs", () => {
110 | const pipeline = {
111 | nodes: [
112 | {
113 | id: "node-1",
114 | type: "execution_node",
115 | inputs: [],
116 | },
117 | ],
118 | };
119 | const links = getLinks(pipeline);
120 | expect(links).toHaveLength(0);
121 | });
122 |
123 | it("returns an empty list when inputs are undefined", () => {
124 | const pipeline = {
125 | nodes: [
126 | {
127 | id: "node-1",
128 | type: "execution_node",
129 | inputs: undefined,
130 | },
131 | ],
132 | };
133 | const links = getLinks(pipeline);
134 | expect(links).toHaveLength(0);
135 | });
136 |
137 | it("returns link between two nodes", () => {
138 | const pipeline = {
139 | nodes: [
140 | {
141 | id: "node-1",
142 | type: "execution_node",
143 | inputs: [
144 | {
145 | links: [
146 | {
147 | id: "link-1",
148 | node_id_ref: "node-2",
149 | },
150 | ],
151 | },
152 | ],
153 | },
154 | {
155 | id: "node-2",
156 | type: "execution_node",
157 | },
158 | ],
159 | };
160 | const links = getLinks(pipeline);
161 | expect(links).toHaveLength(1);
162 | expect(links[0].id).toBe("link-1");
163 | expect(links[0].srcNodeId).toBe("node-2");
164 | expect(links[0].trgNodeId).toBe("node-1");
165 | });
166 | });
167 |
168 | describe("rangeForLocation", () => {
169 | it("returns 0,0 for undefined", () => {
170 | const range = rangeForLocation(undefined);
171 | expect(range).toEqual({ offset: 0, length: 0 });
172 | });
173 |
174 | it("returns range for range", () => {
175 | const range = rangeForLocation({
176 | parent: { offset: 10, colonOffset: 15 },
177 | } as Node);
178 | expect(range).toEqual({ offset: 10, length: 5 });
179 | });
180 | });
181 |
--------------------------------------------------------------------------------
/packages/pipeline-editor/src/TabbedPanelLayout/index.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2018-2023 Elyra Authors
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import React from "react";
18 |
19 | import styled, { useTheme } from "styled-components";
20 |
21 | import IconButton from "../IconButton";
22 |
23 | interface Props {
24 | tabs: {
25 | id: string;
26 | label: string;
27 | title?: string;
28 | icon?: React.ReactNode;
29 | content: React.ReactNode;
30 | }[];
31 | collapsed?: boolean;
32 | showCloseButton?: boolean;
33 | currentTab?: string;
34 | onClose?: () => any;
35 | onTabClick?: (id: string) => any;
36 | }
37 |
38 | const VerticalTabGroup = styled.div`
39 | padding: 7px 0;
40 | display: flex;
41 | flex-direction: column;
42 | align-items: center;
43 | `;
44 |
45 | const HorizontalTabGroup = styled.div`
46 | display: flex;
47 | `;
48 |
49 | const Tab = styled.div`
50 | ${VerticalTabGroup} & {
51 | margin: 3px 0;
52 | }
53 | ${VerticalTabGroup} &:hover {
54 | background-color: ${({ theme }) => theme.palette.hover};
55 | }
56 | ${VerticalTabGroup} &:active {
57 | background-color: ${({ theme }) => theme.palette.active};
58 | }
59 | ${HorizontalTabGroup} & {
60 | cursor: pointer;
61 | user-select: none;
62 | text-transform: uppercase;
63 | padding: 4px 10px 3px;
64 | }
65 | `;
66 |
67 | const ActionBar = styled.div`
68 | padding: 0 8px;
69 | display: flex;
70 | justify-content: space-between;
71 | `;
72 |
73 | const Content = styled.div`
74 | position: absolute;
75 | top: 35px;
76 | bottom: 0;
77 | overflow: auto;
78 | width: 100%;
79 | `;
80 |
81 | const StyledIconButton = styled(IconButton)`
82 | display: flex;
83 | justify-content: center;
84 | align-items: center;
85 | height: 35px;
86 | line-height: 35px;
87 | min-width: 28px;
88 | margin-right: 4px;
89 | `;
90 |
91 | interface LabelProps {
92 | active: boolean;
93 | }
94 |
95 | const Label = styled.div
103 | {item.children}
104 |
111 |
112 | );
113 | })}
114 | {renderedDefaults}
115 | {props.canAdd && (
116 |
122 | )}
123 | {props.uiSchema.canRefresh && (
124 |
135 | )}
136 | {props.uiSchema?.files && (
137 |
144 | )}
145 |