feat(editor): implement renameProperty configurator

swisscom · Oct 11, 2024 · 9e723b5 · 9e723b5
1 parent d1e1d19
commit 9e723b5
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 42 deletions.
diff --git a/src/main/frontend/sections/editor/PipelineStep.tsx b/src/main/frontend/sections/editor/PipelineStep.tsx
@@ -12,6 +12,7 @@ import { EachStep } from './types/EachStep';
 import { FilterNodeStep } from './types/FilterNodeStep';
 import { MoveNodeStep } from './types/MoveNodeStep';
 import { NodeQueryStep } from './types/NodeQueryStep';
+import { RenamePropertyStep } from './types/RenamePropertyStep';
 
 export const PipelineStep: FC<{ parentHops: Hop[]; hop: Hop }> = ({ parentHops, hop }) => {
 	switch (hop.type) {
@@ -31,6 +32,8 @@ export const PipelineStep: FC<{ parentHops: Hop[]; hop: Hop }> = ({ parentHops,
 			return <MoveNodeStep parentHops={parentHops} hop={hop} />;
 		case 'nodeQuery':
 			return <NodeQueryStep parentHops={parentHops} hop={hop} />;
+		case 'renameProperty':
+			return <RenamePropertyStep parentHops={parentHops} hop={hop} />;
 		default:
 			return <FallbackStep parentHops={parentHops} hop={hop} />;
 	}

diff --git a/src/main/frontend/sections/editor/types/ChildNodesStep.tsx b/src/main/frontend/sections/editor/types/ChildNodesStep.tsx
@@ -28,13 +28,12 @@ export const ChildNodesStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHop
 				<p>
 					Gets all child nodes of this node accessible through the current Session that match namePattern. The pattern
 					may be a full name, a partial name with one or more wildcard characters (*), or a disjunction of those (using
-					the <code className="code font--serif">|</code> character).
+					the <code>|</code> character).
 				</p>
 				<p>
-					For example, <code className="code font--serif">jcr:* | myapp:report | my doc</code> will run the pipeline
-					actions for each accessible child node that is either called{' '}
-					<code className="code font--serif">myapp:report</code>, <code className="code font--serif">my doc</code>, or
-					whose name begins with the prefix <code className="code font--serif">jcr:</code>.
+					For example, <code>jcr:* | myapp:report | my doc</code> will run the pipeline actions for each accessible
+					child node that is either called <code>myapp:report</code>, <code>my doc</code>, or whose name begins with the
+					prefix <code>jcr:</code>.
 				</p>
 				<p>
 					For more information, see <a href="https://adobe.ly/2YrfG1G">Node#getNodes(String)</a>

diff --git a/src/main/frontend/sections/editor/types/CopyNodeStep.tsx b/src/main/frontend/sections/editor/types/CopyNodeStep.tsx
@@ -29,25 +29,20 @@ export const CopyNodeStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHops,
 					<br />
 					The last path segment will be the name of the new node, the rest will point to its parent.
 					<br />
-					Thus, <code className="code font--serif">newNodeName</code>,{' '}
-					<code className="code font--serif">./newNodeName</code>,{' '}
-					<code className="code font--serif">/absolute/path/to/newNodeName</code>,{' '}
-					<code className="code font--serif">relative/path/to/newNodeName</code>, and{' '}
-					<code className="code font--serif">./relative/path/to/newNodeName</code> are all valid values.
+					Thus, <code>newNodeName</code>, <code>./newNodeName</code>, <code>/absolute/path/to/newNodeName</code>,{' '}
+					<code>relative/path/to/newNodeName</code>, and <code>./relative/path/to/newNodeName</code> are all valid
+					values.
 				</p>
 				<p>
-					The effective parent must already exist. Example: Target is{' '}
-					<code className="code font--serif">node1/newNodeName</code>
+					The effective parent must already exist. Example: Target is <code>node1/newNodeName</code>
 				</p>
 				<ul className="list">
 					<li>
-						If the path <code className="code font--serif">{'${node.parent.path}'}/node1</code> exists ,{' '}
-						<code className="code font--serif">newNodeName</code> will be created as a child of the{' '}
-						<code className="code font--serif">node1</code> sibling of the source
+						If the path <code>{'${node.parent.path}'}/node1</code> exists , <code>newNodeName</code> will be
+						created as a child of the <code>node1</code> sibling of the source
 					</li>
 					<li>
-						If <code className="code font--serif">{'${node.parent.path}'}/node1</code> does not exist, the
-						operation will throw.
+						If <code>{'${node.parent.path}'}/node1</code> does not exist, the operation will throw.
 					</li>
 				</ul>
 			</Help>

diff --git a/src/main/frontend/sections/editor/types/CreateChildNodeStep.tsx b/src/main/frontend/sections/editor/types/CreateChildNodeStep.tsx
@@ -33,15 +33,13 @@ export const CreateChildNodeStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ pare
 					non-existing parents will throw an exception.
 				</p>
 				<p>
-					For example, a value of <code className="code font--serif">node1/newNodeName</code> will create the node{' '}
-					<code className="code font--serif">newNodeName</code> as a child of the existing{' '}
-					<code className="code font--serif">node1</code> child of the current node and throw if{' '}
-					<code className="code font--serif">node1</code> doesn’t exist.
+					For example, a value of <code>node1/newNodeName</code> will create the node <code>newNodeName</code> as a
+					child of the existing <code>node1</code> child of the current node and throw if <code>node1</code> doesn’t
+					exist.
 				</p>
 				<h5>jcr:primaryType of new node</h5>
 				<p>
-					The primary type to set on the new node. If left empty, defaults to{' '}
-					<code className="code font--serif">nt:unstructured</code>
+					The primary type to set on the new node. If left empty, defaults to <code>nt:unstructured</code>
 				</p>
 				<h5>If the target node exists</h5>
 				<p>

diff --git a/src/main/frontend/sections/editor/types/FilterNodeStep.tsx b/src/main/frontend/sections/editor/types/FilterNodeStep.tsx
@@ -24,7 +24,7 @@ export const FilterNodeStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHop
 				</p>
 				<p>This field expects an expression, thus surrounding the expression with {'${}'} is invalid.</p>
 				<p>
-					With the word <code className="code font--serif">node</code> you can reference the current node.
+					With the word <code>node</code> you can reference the current node.
 				</p>
 			</Help>
 		</StepEditor>

diff --git a/src/main/frontend/sections/editor/types/MoveNodeStep.tsx b/src/main/frontend/sections/editor/types/MoveNodeStep.tsx
@@ -13,18 +13,23 @@ export const MoveNodeStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHops,
 	return (
 		<StepEditor parentHops={parentHops} hop={hop} title={shortDescription(hop)}>
 			<Input
-				label="New Name (use <code>/dev/null</code> to delete)"
+				label={
+					<>
+						New Name{' '}
+						<small>
+							(use <code>/dev/null</code> to delete)
+						</small>
+					</>
+				}
 				value={hop.newName ?? ''}
 				onChange={newName => (hop.newName = newName)}
-				placeholder="[]"
 			/>
 			<Conflict
 				label="If the target node exists"
 				forceLabel="Replace the target node"
 				value={hop.conflict ?? 'ignore'}
 				onChange={conflict => (hop.conflict = conflict)}
 			/>
-			,
 			<Help title={title}>
 				<p>Move the current node to a new destination</p>
 				<h5>New Name</h5>
@@ -35,29 +40,24 @@ export const MoveNodeStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHops,
 					<br />
 					The last path segment will be the name of the new node, the rest will point to its parent.
 					<br />
-					Thus, <code className="code font--serif">newNodeName</code>,{' '}
-					<code className="code font--serif">./newNodeName</code>,{' '}
-					<code className="code font--serif">/absolute/path/to/newNodeName</code>,{' '}
-					<code className="code font--serif">relative/path/to/newNodeName</code>, and{' '}
-					<code className="code font--serif">./relative/path/to/newNodeName</code> are all valid values.
+					Thus, <code>newNodeName</code>, <code>./newNodeName</code>, <code>/absolute/path/to/newNodeName</code>,{' '}
+					<code>relative/path/to/newNodeName</code>, and <code>./relative/path/to/newNodeName</code> are all valid
+					values.
 				</p>
 				<p>
-					The effective parent must already exist. Example: Target is{' '}
-					<code className="code font--serif">node1/newNodeName</code>
+					The effective parent must already exist. Example: Target is <code>node1/newNodeName</code>
 				</p>
 				<ul className="list">
 					<li>
-						If the path <code className="code font--serif">{'${node.parent.path}'}/node1</code> exists ,{' '}
-						<code className="code font--serif">newNodeName</code> will be created as a child of the{' '}
-						<code className="code font--serif">node1</code> sibling of the source
+						If the path <code>{'${node.parent.path}'}/node1</code> exists , <code>newNodeName</code> will be
+						created as a child of the <code>node1</code> sibling of the source
 					</li>
 					<li>
-						If <code className="code font--serif">{'${node.parent.path}'}/node1</code> does not exist, the
-						operation will throw.
+						If <code>{'${node.parent.path}'}/node1</code> does not exist, the operation will throw.
 					</li>
 				</ul>
 				<p>
-					Setting <code className="code font--serif">{DEV_NULL}</code> as the new name will delete the node.
+					Setting <code>{DEV_NULL}</code> as the new name will delete the node.
 				</p>
 			</Help>
 		</StepEditor>

diff --git a/src/main/frontend/sections/editor/types/RenamePropertyStep.tsx b/src/main/frontend/sections/editor/types/RenamePropertyStep.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import { Hop } from '../../../model/hops';
+import { StepEditor } from '../../../widgets/StepEditor';
+
+import { shortDescription, title, Type, DEV_NULL } from '../../../model/hops/renameProperty';
+import { Help } from '../../../widgets/Help';
+import { Input } from '../../../widgets/Input';
+import { Conflict } from '../../../widgets/Conflict';
+
+export const RenamePropertyStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHops, hop }) => {
+	return (
+		<StepEditor parentHops={parentHops} hop={hop} title={shortDescription(hop)}>
+			<Input label="Property Name" value={hop.propertyName ?? ''} onChange={propertyName => (hop.propertyName = propertyName)} />
+			<Input
+				label={
+					<>
+						New Name of Property{' '}
+						<small>
+							(use <code>/dev/null</code> to delete)
+						</small>
+					</>
+				}
+				value={hop.newName ?? ''}
+				onChange={newName => (hop.newName = newName)}
+			/>
+			<Conflict
+				label="If the source property does not exist"
+				forceLabel="Ignore but do not warn"
+				value={hop.doesNotExist ?? 'ignore'}
+				onChange={doesNotExist => (hop.doesNotExist = doesNotExist)}
+			/>
+			<Conflict
+				label="If the target property exists"
+				forceLabel="Overwrite the existing property"
+				value={hop.conflict ?? 'ignore'}
+				onChange={conflict => (hop.conflict = conflict)}
+			/>
+			<Help title={title}>
+				<h5>Current Name of the Property</h5>
+				<p>The name of the property you want to change.</p>
+				<h5>New Name of the Property</h5>
+				<p>The new name of the property</p>
+				<p>
+					Setting <code>{DEV_NULL}</code> as the new name will delete the property.
+				</p>
+			</Help>
+		</StepEditor>
+	);
+};
diff --git a/src/main/frontend/widgets/Input.tsx b/src/main/frontend/widgets/Input.tsx
@@ -1,12 +1,12 @@
-import React, { FC, useContext, useEffect, useRef, useState } from 'react';
+import React, { FC, ReactNode, useContext, useEffect, useRef, useState } from 'react';
 
 import { ScriptContext } from '../App';
 import type { CoralIcon } from '../coral/custom-elements';
 
 export type Options = [value: string, label: string, icon?: CoralIcon][];
 
 export const Input: FC<{
-	label?: string;
+	label?: ReactNode;
 	value: string;
 	name?: string;
 	placeholder?: string;