feat: Custom names for Step Tabs (#2783)

Co-authored-by: FelixSjogren <felixarvidsjogren@gmail.com>
Co-authored-by: Stagge <jonatan.stagge@gmail.com>
Co-authored-by: felixsj <felixsj@kth.se>
Co-authored-by: FelixSjogren <35043497+FelixSjogren@users.noreply.github.com>
Co-authored-by: isadorawinter <isadora.winter@hotmail.com>

companion/lib/Controls/ControlTypes/Button/Normal.js

@@ -960,6 +960,25 @@ export default class ControlButtonNormal extends ButtonControlBase {
 		return false
 	}
 
+	/**
+	 * Rename step
+	 * @param {string} stepId the id of the action-set
+	 * @param {string | undefined} newName the new name of the step
+	 * @returns {boolean} success
+	 * @access public
+	 */
+	stepRename(stepId, newName) {
+		if (this.steps[stepId]) {
+			if (newName !== undefined) {
+				this.steps[stepId].rename(newName)
+			}
+			this.commitChange(true)
+			return true
+		}
+
+		return false
+	}
+
 	/**
 	 * Convert this control to JSON
 	 * To be sent to the client and written to the db

companion/lib/Controls/Controller.js

@@ -697,6 +697,17 @@ class ControlsController extends CoreBase {
 			}
 		})
 
+		client.onPromise('controls:step:rename', (controlId, stepId, newName) => {
+			const control = this.getControl(controlId)
+			if (!control) return false
+
+			if (control.supportsSteps) {
+				return control.stepRename(stepId, newName)
+			} else {
+				throw new Error(`Control "${controlId}" does not support steps`)
+			}
+		})
+
 		client.onPromise('triggers:subscribe', () => {
 			client.join(TriggersListRoom)
 

companion/lib/Controls/Fragments/FragmentActions.js

@@ -552,4 +552,14 @@ export default class FragmentActions extends CoreBase {
 
 		return changed
 	}
+
+	/**
+	 * Rename this control
+	 * @param {string} newName the new name
+	 * @returns {void}
+	 * @access public
+	 */
+	rename(newName) {
+		this.options.name = newName
+	}
 }

companion/lib/Controls/IControlFragments.js

@@ -89,6 +89,17 @@ export class ControlWithSteps extends ControlBase {
 	stepSwap(_stepId1, _stepId2) {
 		throw new Error('Not implemented')
 	}
+
+	/**
+	 * Rename step
+	 * @param {string} _stepId the id of the action-set
+	 * @param {string | undefined} _newName The new name of the step
+	 * @returns {boolean} success
+	 * @access public
+	 */
+	stepRename(_stepId, _newName) {
+		throw new Error('Not implemented')
+	}
 }
 
 /**

shared-lib/lib/Model/ActionModel.ts

@@ -11,6 +11,7 @@ export interface ActionInstance {
 
 export interface ActionStepOptions {
 	runWhileHeld: number[]
+	name?: string
 }
 
 // TODO - type better?

shared-lib/lib/SocketIO.ts

@@ -172,6 +172,7 @@ export interface ClientToBackendEventsMap {
 	'controls:step:remove': (controlId: string, stepId: string) => boolean
 	'controls:step:swap': (controlId: string, stepId1: string, stepId2: string) => boolean
 	'controls:step:set-current': (controlId: string, stepId: string) => boolean
+	'controls:step:rename': (controlId: string, stepId: string, newName: string) => boolean
 
 	'controls:event:set-headline': (controlId: string, eventId: string, headline: string) => boolean
 	'controls:event:enabled': (controlId: string, eventId: string, enabled: boolean) => boolean

webui/src/Buttons/EditButton.tsx

@@ -462,6 +462,14 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc
 		},
 		[socket, controlId]
 	)
+	const renameStep = useCallback(
+		(stepId: string, newName: string) => {
+			socketEmitPromise(socket, 'controls:step:rename', [controlId, stepId, newName]).catch((e) => {
+				console.error('Failed to rename step:', e)
+			})
+		},
+		[socket, controlId]
+	)
 
 	const appendSet = useCallback(
 		(stepId: string) => {
@@ -506,16 +514,38 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc
 								// both selected and the current step
 								const isActiveAndCurrent = k === selectedIndex && runtimeProps.current_step_id === k
 
+								const name = steps[k].options?.name;
+								const displayText = name && name !== "" ? 
+										name + ` (${i + 1})` 
+										: (i === 0 ? 'Step ' + (i + 1) : i + 1)
+
 								if (moreThanOneStep) {
 									if (isActiveAndCurrent) linkClassname = 'selected-and-active'
 									else if (isCurrent) linkClassname = 'only-current'
 								}
 
+								const [showInputField, setShowInputField] = useState(false);
+
 								return (
 									<CNavItem key={k} className="nav-steps-special">
-										<CNavLink data-tab={`step:${k}`} className={linkClassname}>
-											{i === 0 ? (keys.length > 1 ? 'Step ' + (i + 1) : 'Actions') : i + 1}
-										</CNavLink>
+										{showInputField ? (
+											<CNavLink className={linkClassname}>
+												<input
+													type="text"
+													value={name}
+													onChange={(e)=>renameStep(k.toString(), e.target.value)}
+													onKeyDown={(e)=>{(e.key === 'Enter' || e.key === "Escape") && setShowInputField(false)}}
+													onBlur={()=>setShowInputField(false)}
+													autoFocus
+												>			
+												</input>
+											</CNavLink>
+										) 
+										: (
+											<CNavLink onDoubleClick={()=>setShowInputField(true)} data-tab={`step:${k}`} className={linkClassname}>
+												{displayText}
+											</CNavLink>
+										)}	
 									</CNavItem>
 								)
 							})}