[TH2-4271] Separate gRPC and MQ pin descriptions in CRD

.github/workflows/build-release.yml

@@ -32,13 +32,12 @@ jobs:
         uses: docker/login-action@v1
         with:
           registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.CR_PAT }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: build image & push to registry
         uses: docker/build-push-action@v2
         with:
           push: true
           tags: ghcr.io/${{ github.repository }}:${{ steps.version.outputs.prop }}
           labels: com.exactpro.th2.${{ steps.repo.outputs.REPOSITORY_NAME }}=${{ steps.version.outputs.prop }}
-

.github/workflows/build-snapshot.yml

@@ -43,13 +43,12 @@ jobs:
         uses: docker/login-action@v1
         with:
           registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.CR_PAT }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: build image & push to registry
         uses: docker/build-push-action@v2
         with:
           push: true
           tags: ghcr.io/${{ github.repository }}:${{ steps.snapshot_name.outputs.value }}
           labels: com.exactpro.th2.${{ steps.repo.outputs.REPOSITORY_NAME }}=${{ steps.version.outputs.prop }}
-

.github/workflows/ci-unwelcome-words.yml

@@ -7,17 +7,17 @@ jobs:
   test:
     runs-on: ubuntu-20.04
     steps:
-    - uses: actions/checkout@v2
-      with:
-        ref: ${{ github.sha }}
-    - name: Checkout tool
-      uses: actions/checkout@v2
-      with:
-        repository: exactpro-th2/ci-github-action
-        ref: master
-        token: ${{ secrets.PAT_CI_ACTION }}
-        path: ci-github-action
-    - name: Run CI action
-      uses: ./ci-github-action
-      with:
-        ref: ${{ github.sha }}
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.sha }}
+      - name: Checkout tool
+        uses: actions/checkout@v2
+        with:
+          repository: exactpro-th2/ci-github-action
+          ref: master
+          token: ${{ secrets.PAT_CI_ACTION }}
+          path: ci-github-action
+      - name: Run CI action
+        uses: ./ci-github-action
+        with:
+          ref: ${{ github.sha }}

package.json

@@ -1,7 +1,7 @@
 {
 	"homepage": ".",
 	"name": "th2-infra-editor",
-	"version": "2.1.4",
+	"version": "2.1.5",
 	"private": true,
 	"dependencies": {
 		"@monaco-editor/loader": "^1.3.2",

src/components/Header.tsx

@@ -126,8 +126,7 @@ function Header() {
 					<select
 						disabled={requestsExist}
 						onChange={e => selectSchema(e.target.value)}
-						value={selectedSchemaName || undefined}
-					>
+						value={selectedSchemaName || undefined}>
 						{schemas.map(schema => (
 							<option key={schema} value={schema}>
 								{schema}
@@ -142,8 +141,7 @@ function Header() {
 				onClick={() => {
 					setOpenConfirmationModal(true);
 					setConfirmationModalType('save');
-				}}
-			>
+				}}>
 				<span className={requestsExist ? classes.badge : classes.disableBadge}>
 					{preparedRequests.length}
 				</span>
@@ -155,8 +153,7 @@ function Header() {
 					onClick={() => {
 						setOpenConfirmationModal(true);
 						setConfirmationModalType('discard');
-					}}
-				>
+					}}>
 					Discard changes
 				</button>
 			)}

src/components/config/Config.tsx

@@ -57,8 +57,8 @@ function Config() {
 	const boxUpdater = useBoxUpdater();
 
 	const customConfig = useInput({
-		initialValue: selectedBox?.spec['custom-config']
-			? JSON.stringify(selectedBox?.spec['custom-config'], null, 4)
+		initialValue: selectedBox?.spec['customConfig']
+			? JSON.stringify(selectedBox?.spec['customConfig'], null, 4)
 			: '',
 		id: 'custom-config',
 	});
@@ -69,20 +69,20 @@ function Config() {
 	});
 
 	const extendedSettings = useInput({
-		initialValue: selectedBox?.spec['extended-settings']
-			? JSON.stringify(selectedBox.spec['extended-settings'], null, 4)
+		initialValue: selectedBox?.spec['extendedSettings']
+			? JSON.stringify(selectedBox.spec['extendedSettings'], null, 4)
 			: '',
 		id: 'extended-settings',
 	});
 
 	const imageName = useInput({
-		initialValue: selectedBox?.spec['image-name'] || '',
+		initialValue: selectedBox?.spec['imageName'] || '',
 		id: 'imageName',
 		label: 'Image name',
 	});
 
 	const imageVersion = useInput({
-		initialValue: selectedBox?.spec['image-version'] || '',
+		initialValue: selectedBox?.spec['imageVersion'] || '',
 		id: 'imageVersion',
 		label: 'Image version',
 	});
@@ -116,10 +116,10 @@ function Config() {
 				name: name.value,
 				spec: {
 					...originalBox.spec,
-					'custom-config': customConfig.value ? JSON.parse(customConfig.value) : '',
-					'image-name': imageName.value,
-					'image-version': imageVersion.value,
-					'extended-settings': extendedSettings.value ? JSON.parse(extendedSettings.value) : '',
+					customConfig: customConfig.value ? JSON.parse(customConfig.value) : '',
+					imageName: imageName.value,
+					imageVersion: imageVersion.value,
+					extendedSettings: extendedSettings.value ? JSON.parse(extendedSettings.value) : '',
 					pins: JSON.parse(pinsConfig.value),
 				},
 			});
@@ -163,10 +163,10 @@ interface ConfigurableBoxOptions {
 	kind: BoxEntity['kind'];
 	name: BoxEntity['name'];
 	spec: {
-		'custom-config': BoxEntity['spec']['custom-config'];
-		'image-name': BoxEntity['spec']['image-name'];
-		'image-version': BoxEntity['spec']['image-version'];
-		'extended-settings': BoxEntity['spec']['extended-settings'];
+		customConfig: BoxEntity['spec']['customConfig'];
+		imageName: BoxEntity['spec']['imageName'];
+		imageVersion: BoxEntity['spec']['imageVersion'];
+		extendedSettings: BoxEntity['spec']['extendedSettings'];
 		pins: BoxEntity['spec']['pins'];
 	};
 }

src/components/config/ConfigEditor.tsx

@@ -48,8 +48,8 @@ const ConfigEditor = ({ value, setValue, schema, pinsConnectionsLenses = false }
 	const setLens = () => {
 		const lenses: monacoEditor.languages.CodeLens[] = [];
 		const pinsConnections = getCountPinsConnections(
-			boxesStore.selectedBox?.spec.pins,
 			boxUpdater.selectedBoxConnections,
+			boxesStore.selectedBox?.spec.pins,
 		);
 		const pinsPositions: PinsPositions[] = [];
 		if (pinsConnections) {

src/components/editors/ConnectionConfig.tsx

@@ -16,7 +16,7 @@
 
 import { createUseStyles } from 'react-jss';
 import { Theme } from '../../styles/theme';
-import { ExtendedConnectionOwner } from '../../models/Box';
+import { ExtendedConnectionOwner, getPinConnectionType, getPins } from '../../models/Box';
 import { useInput } from '../../hooks/useInput';
 import Input from '../util/Input';
 import { observer } from 'mobx-react-lite';
@@ -118,7 +118,7 @@ function ConnectionConfig(props: ConnectionConfigProps) {
 			return [];
 		}
 
-		return box.spec.pins ?? [];
+		return getPins(box.spec.pins);
 	}, [box]);
 
 	const pinValidate = useCallback(pin => pins.map(pin => pin.name).includes(pin), [pins]);
@@ -145,12 +145,13 @@ function ConnectionConfig(props: ConnectionConfigProps) {
 	const isPinSupportedServiceClassOption = useCallback(() => {
 		return (
 			pinValidate(pinInput.value) &&
-			pins.filter(item => item.name === pinInput.value)[0]['connection-type'] === 'mq'
+			getPinConnectionType(pins.filter(item => item.name === pinInput.value)[0], box?.spec.pins) ===
+				'mq'
 		);
 	}, [pinInput.value, pinValidate, pins]);
 
 	const serviceClassInput = useInput({
-		initialValue: owner?.['service-class'] || '',
+		initialValue: owner?.['serviceClass'] || '',
 		id: `${id}ServiceClass`,
 		label: 'Service class',
 		disabled: disabled || isPinSupportedServiceClassOption(),
@@ -176,8 +177,11 @@ function ConnectionConfig(props: ConnectionConfigProps) {
 			box: boxInput.value,
 			pin: pinInput.value,
 			strategy: strategyInput.value,
-			'service-class': serviceClassInput.value,
-			connectionType: pins.filter(item => item.name === pinInput.value)[0]['connection-type'],
+			serviceClass: serviceClassInput.value,
+			connectionType: getPinConnectionType(
+				pins.filter(item => item.name === pinInput.value)[0],
+				box?.spec.pins,
+			),
 		});
 	}, [
 		boxInput.isValid,

src/components/editors/ConnectionEditor.tsx

@@ -16,7 +16,7 @@
 
 import { useCallback, useMemo, useState } from 'react';
 import { createUseStyles } from 'react-jss';
-import { ExtendedConnectionOwner, isBoxEntity, Pin } from '../../models/Box';
+import { ExtendedConnectionOwner, getPins, isBoxEntity, Pin } from '../../models/Box';
 import { Theme } from '../../styles/theme';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -209,7 +209,7 @@ function ConnectionEditor(props: ConnectionsEditorProps) {
 				.filter(box => box.name === owner.box)
 				.uniqBy('name')
 				.filter(isBoxEntity)
-				.map(box => box.spec?.pins || [])
+				.map(box => getPins(box.spec.pins))
 				.flatten()
 				.filter(pin => pin.name === owner.pin)
 				.head()
@@ -220,11 +220,7 @@ function ConnectionEditor(props: ConnectionsEditorProps) {
 			}
 
 			return chain(boxesStore.boxes)
-				.filter(
-					box =>
-						(box.spec?.pins || []).filter(box => box['connection-type'] === pin['connection-type'])
-							.length > 0,
-				)
+				.filter(box => getPins(box.spec.pins, owner.connectionType).length > 0)
 				.map(box => box.name)
 				.value();
 		},
@@ -321,8 +317,7 @@ function ConnectionEditor(props: ConnectionsEditorProps) {
 			<div className={classes.actions}>
 				<button
 					onClick={cancelOrDelete}
-					className={classNames(classes.button, classes.deleteButton)}
-				>
+					className={classNames(classes.button, classes.deleteButton)}>
 					{editableLink ? 'Delete' : 'Cancel'}
 				</button>
 				<button onClick={submit} className={submitButtonClassName}>

src/components/layouts/BoxCreationLayout.tsx

@@ -71,21 +71,21 @@ const BoxCreationLayout = () => {
 	});
 
 	const imageName = useInput({
-		id: 'box-image-name',
-		name: 'box-image-name',
+		id: 'boxImageName',
+		name: 'boxImageName',
 		label: 'Image name',
 	});
 
 	const imageVersion = useInput({
-		id: 'box-image-version',
-		name: 'box-image-version',
+		id: 'boxImageVersion',
+		name: 'boxImageVersion',
 		label: 'Image version',
 	});
 
 	const nodePort = useInput({
 		label: 'Node port',
-		id: 'node-port',
-		name: 'node-port',
+		id: 'nodePort',
+		name: 'nodePort',
 		validate: (value: string) =>
 			value.trim().length > 0 ? /^\d+$/.test(value) && parseInt(value) <= 65535 : true,
 		required: false,
@@ -100,11 +100,11 @@ const BoxCreationLayout = () => {
 			let nodePort = parseInt(nodePortString) || null;
 
 			const spec: BoxEntity['spec'] = {
-				pins: [],
-				'image-name': imageName,
-				'image-version': imageVersion,
+				pins: {},
+				imageName: imageName,
+				imageVersion: imageVersion,
 				type,
-				'extended-settings': {
+				extendedSettings: {
 					service: {
 						enabled: false,
 					},
@@ -141,8 +141,7 @@ const BoxCreationLayout = () => {
 			<button
 				disabled={inputs.some(input => !input.isValid)}
 				className={classes.submitButton}
-				onClick={createNewBox}
-			>
+				onClick={createNewBox}>
 				Create
 			</button>
 		</div>

src/components/links/Links.tsx

@@ -22,7 +22,7 @@ import { useBoxUpdater } from '../../hooks/useBoxUpdater';
 import { useBoxesStore } from '../../hooks/useBoxesStore';
 import { useEffect, useMemo, useState } from 'react';
 import ConnectionEditor from '../editors/ConnectionEditor';
-import { BoxEntity, ExtendedConnectionOwner, Pin } from '../../models/Box';
+import { BoxEntity, ExtendedConnectionOwner, getPinConnectionType, Pin } from '../../models/Box';
 import SelectedBox from '../resources/SelectedBox';
 import { ConnectionDirection, Link } from '../../models/LinksDefinition';
 import { chain } from 'lodash';
@@ -106,7 +106,7 @@ function Links() {
 			.filter(link => link[direction]?.box === boxesStore.selectedBox?.name)
 			.filter(link => link[direction === 'from' ? 'to' : 'from']?.box === box?.name)
 			.filter(link => link[direction]?.pin === pin?.name)
-			.filter(link => link[direction]?.connectionType === pin?.['connection-type'])
+			.filter(link => link[direction]?.connectionType === getPinConnectionType(pin, box?.spec.pins))
 			.head()
 			.value();
 

src/components/resources/Box.tsx

@@ -143,23 +143,21 @@ function Box(props: Props) {
 	const subscriptionStore = useSubscriptionStore();
 	const status = useRef(subscriptionStore.boxStates.get(box.name) || BoxStatus.PENDING);
 
-	const slicedImageName = getImageNameWithoutDomain(box.spec['image-name']);
+	const slicedImageName = getImageNameWithoutDomain(box.spec['imageName']);
 
 	return (
 		<div
 			className={classNames(classes.container, {
 				[classes.selectable]: typeof onSelect === 'function',
 				[classes.selected]: isSelected,
 			})}
-			onClick={() => onSelect && onSelect(box)}
-		>
+			onClick={() => onSelect && onSelect(box)}>
 			<div className={classes.header}>
 				<Status status={status.current} />
 				<span
 					style={{ backgroundColor: color }}
 					className={classNames(classes.bodyValue, classes.type)}
-					title={getBoxType(box)}
-				>
+					title={getBoxType(box)}>
 					{getBoxType(box)}
 				</span>
 				<h5 className={classes.name} title={box.name}>

src/components/resources/SelectedBox.tsx

@@ -113,7 +113,7 @@ function SelectedBox(props: Props) {
 	// TODO: fix status
 	const status = useMemo(() => Object.values(BoxStatus)[box.name.length % 2], [box.name.length]);
 
-	const slicedImageName = getImageNameWithoutDomain(box.spec['image-name']);
+	const slicedImageName = getImageNameWithoutDomain(box.spec['imageName']);
 
 	return (
 		<div className={classes.container}>