tools-webapp

component-tools-webapp/src/main/frontend/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "component-tools-webapp",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"start": "cross-env ICON_BUNDLE=true talend-scripts start",
+		"build": "cross-env ICON_BUNDLE=true talend-scripts build"
+	},
+	"dependencies": {
+		"@talend/bootstrap-theme": "9.2.0",
+		"@talend/design-system": "11.0.5",
+		"@talend/icons": "7.10.2",
+		"@talend/react-cmf": "10.0.1",
+		"@talend/react-components": "17.1.2",
+		"@talend/react-forms": "15.0.2",
+		"@talend/react-containers": "11.0.4",
+		"classnames": "2.5.1",
+		"lodash": "4.17.21",
+		"prop-types": "15.8.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-redux": "9.1.2",
+		"react-router-dom": "6.24.1",
+		"redux": "5.0.1",
+		"redux-thunk": "3.1.0",
+		"asciidoctor": "3.0.4"
+	},
+	"devDependencies": {
+		"@talend/scripts-config-react-webpack": "^16.8.0",
+		"@talend/scripts-core": "^16.5.1",
+		"cross-env": "^7.0.3",
+		"webpack": "5.92.1"
+	}
+}

component-tools-webapp/src/main/frontend/src/app/components/App/App.component.js

@@ -0,0 +1,68 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 React from "react";
+
+import {
+	IconsProvider,
+	HeaderBar,
+	Layout,
+	Notification,
+} from "@talend/react-components";
+
+import Menu from "../Menu";
+import Detail from "../Detail";
+
+import theme from "./App.scss";
+
+class App extends React.Component {
+	constructor(props) {
+		super(props);
+		this.notificationLeaveFn = this.notificationLeaveFn.bind(this);
+	}
+
+	notificationLeaveFn(notification) {
+		this.props.removeNotification(notification);
+	}
+
+	render() {
+		const header = (
+			<HeaderBar
+				logo={{ isFull: true }}
+				brand={{
+					id: "header-brand",
+					label: "Talend Component Kit Web Tester",
+				}}
+			/>
+		);
+		const menu = <Menu />;
+
+		return (
+			<div className={theme.App}>
+				<IconsProvider />
+				<Layout mode={"TwoColumns"} header={header} one={menu}>
+					<Detail saga="Detail::start" />
+				</Layout>
+				<Notification
+					notifications={this.props.notifications}
+					leaveFn={this.notificationLeaveFn}
+				/>
+			</div>
+		);
+	}
+}
+
+export default App;

component-tools-webapp/src/main/frontend/src/app/components/App/App.connect.js

@@ -0,0 +1,27 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { removeNotification } from '../../store/application/actions';
+
+import App from './App.component';
+
+export default connect(state => (state.app || {}).application || {}, dispatch => {
+  return {
+    removeNotification: bindActionCreators(removeNotification, dispatch),
+  };
+})(App);

component-tools-webapp/src/main/frontend/src/app/components/App/App.scss

@@ -0,0 +1,26 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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.
+ */
+@use "@talend/bootstrap-theme/src/theme/guidelines" as *;
+
+.App {
+  :global(.tc-layout-two-columns-left) {
+    border: 1px solid #eee;
+    background: transparent;
+  }
+  :global(.tc-layout-two-columns-main) {
+    padding: $padding-normal $padding-larger;
+  }
+}

component-tools-webapp/src/main/frontend/src/app/components/App/index.js

@@ -0,0 +1,19 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 App from './App.connect';
+
+export default App;

component-tools-webapp/src/main/frontend/src/app/components/Detail/Detail.component.js

@@ -0,0 +1,97 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 React from "react";
+import { Inject } from "@talend/react-cmf";
+import { ComponentForm } from "@talend/react-containers";
+// import service from "@talend/react-containers/lib/ComponentForm/kit/defaultRegistry";
+
+const service = ComponentForm.kit.defaultRegistry;
+
+function NoSelectedComponent() {
+	return (
+		<div>
+			<h1>No component selected</h1>
+			<p>Click on a component to see its form</p>
+		</div>
+	);
+}
+
+function Detail(props) {
+	let notSelected = null;
+	let submitted = null;
+	let form = null;
+
+	const validationWithSuccessFeedback = ({ trigger, schema, body, errors }) => {
+		if (body.status === "OK" && trigger.type === "healthcheck") {
+			props.onNotification({
+				id: `healthcheck_${new Date().getTime()}`,
+				title: "Success",
+				message:
+					body.comment ||
+					`Trigger ${trigger.type} / ${trigger.family} / ${trigger.action} succeeded`,
+			});
+		}
+		return service.validation({ schema, body, errors });
+	};
+	const registry = {
+		healthcheck: validationWithSuccessFeedback,
+		built_in_suggestable: function () {
+			return {
+				titleMap: Array(10)
+					.fill()
+					.map((x, i) => ({ name: "Proposal " + i, value: "value_" + i })),
+			};
+		},
+	};
+
+	if (!props.definitionURL) {
+		notSelected = <NoSelectedComponent />;
+	} else {
+		const lang =
+			new URLSearchParams(window.location.search).get("language") || "en";
+		form = (
+			<Inject
+				id="detail-form"
+				componentId="detail-form"
+				component="ComponentForm"
+				definitionURL={`/api/v1${props.definitionURL}${props.definitionURL.indexOf("?") > 0 ? "&" : "?"}language=${lang}`}
+				triggerURL={`/api/v1/application/action`}
+				lang={lang}
+				customTriggers={registry}
+			/>
+		);
+		if (props.submitted) {
+			const configuration = ComponentForm.kit.flatten(props.uiSpec.properties);
+			submitted = (
+				<div>
+					<pre>{JSON.stringify(configuration, undefined, 2)}</pre>
+				</div>
+			);
+		}
+	}
+	return (
+		<div>
+			<div className="col-md-6">
+				{notSelected}
+				{form}
+			</div>
+			<div className="col-md-6">{submitted}</div>
+		</div>
+	);
+}
+
+export default Detail;

component-tools-webapp/src/main/frontend/src/app/components/Detail/Detail.connect.js

@@ -0,0 +1,51 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 { cmfConnect } from '@talend/react-cmf';
+import { bindActionCreators } from 'redux';
+import get from 'lodash/get';
+import {
+	backToComponentEdit,
+	onComponentPropertiesChange,
+	onComponentErrorsChange,
+	submitComponent,
+	onNotification,
+} from '../../store/component/actions';
+import startSaga from './Detail.saga';
+
+import Detail from './Detail.component';
+
+function mapStateToProps(state) {
+	return {
+		definitionURL: get(state, 'app.componentsList.selectedNode.$$detail'),
+		...(state.app || {}).component || {},
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		backToComponentEdit: bindActionCreators(backToComponentEdit, dispatch),
+		onChange: bindActionCreators(onComponentPropertiesChange, dispatch),
+		onErrors: bindActionCreators(onComponentErrorsChange, dispatch),
+		onNotification: bindActionCreators(onNotification, dispatch),
+	};
+}
+
+Detail.displayName = 'Detail';
+Detail.sagas = {
+    'Detail::start': startSaga,
+};
+export default cmfConnect({ mapStateToProps, mapDispatchToProps })(Detail);

component-tools-webapp/src/main/frontend/src/app/components/Detail/Detail.saga.js

@@ -0,0 +1,28 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 { takeLatest, put } from "redux-saga/effects";
+import { ComponentForm } from "@talend/react-containers";
+import { SUBMIT_COMPONENT } from "../../store/constants";
+
+function* doSubmit({ properties, componentId }) {
+	if (componentId === "detail-form") {
+		yield put({ type: SUBMIT_COMPONENT, properties });
+	}
+}
+
+export default function* start() {
+	yield takeLatest(ComponentForm.ON_SUBMIT, doSubmit);
+}

component-tools-webapp/src/main/frontend/src/app/components/Detail/index.js

@@ -0,0 +1,19 @@
+/**
+ *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
+ *
+ *  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 Detail from './Detail.connect';
+
+export default Detail;