From 6255c7fe67ba91e2b057c50c2151f23456568722 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Thu, 14 Dec 2023 09:50:35 +0000 Subject: [PATCH] feat: switch toggle label (#19324) * feat: switch toggle label * snapshots --- .../__snapshots__/transform.test.ts.snap | 52 +++++++++---------- ee/frontend/mobile-replay/transformers.ts | 45 ++++++++++------ 2 files changed, 54 insertions(+), 43 deletions(-) diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap index fea84cb06f161..020bc40108c03 100644 --- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap +++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap @@ -802,12 +802,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = ` "type": 2, }, { - "id": 134, + "id": 133, "textContent": "first", "type": 3, }, ], - "id": 133, + "id": 134, "tagName": "label", "type": 2, }, @@ -888,12 +888,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = ` "type": 2, }, { - "id": 137, + "id": 136, "textContent": "second", "type": 3, }, ], - "id": 136, + "id": 137, "tagName": "label", "type": 2, }, @@ -976,12 +976,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = ` "type": 2, }, { - "id": 140, + "id": 139, "textContent": "third", "type": 3, }, ], - "id": 139, + "id": 140, "tagName": "label", "type": 2, }, @@ -2188,6 +2188,11 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = ` "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ + { + "id": 146, + "textContent": "first", + "type": 3, + }, { "attributes": { "style": "height:100%;flex:1", @@ -2228,13 +2233,8 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = ` "tagName": "div", "type": 2, }, - { - "id": 147, - "textContent": "first", - "type": 3, - }, ], - "id": 146, + "id": 147, "tagName": "label", "type": 2, }, @@ -2304,6 +2304,11 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = ` "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ + { + "id": 152, + "textContent": "second", + "type": 3, + }, { "attributes": { "style": "height:100%;flex:1", @@ -2344,13 +2349,8 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = ` "tagName": "div", "type": 2, }, - { - "id": 153, - "textContent": "second", - "type": 3, - }, ], - "id": 152, + "id": 153, "tagName": "label", "type": 2, }, @@ -2420,6 +2420,11 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = ` "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ + { + "id": 158, + "textContent": "third", + "type": 3, + }, { "attributes": { "style": "height:100%;flex:1", @@ -2460,13 +2465,8 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = ` "tagName": "div", "type": 2, }, - { - "id": 159, - "textContent": "third", - "type": 3, - }, ], - "id": 158, + "id": 159, "tagName": "label", "type": 2, }, @@ -3208,12 +3208,12 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = ` "type": 2, }, { - "id": 117, + "id": 116, "textContent": "i will wrap the checkbox", "type": 3, }, ], - "id": 116, + "id": 117, "tagName": "label", "type": 2, }, diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformers.ts index 1c72e61e8f508..0e26c0aedb6ec 100644 --- a/ee/frontend/mobile-replay/transformers.ts +++ b/ee/frontend/mobile-replay/transformers.ts @@ -12,11 +12,13 @@ import { textNode, wireframe, wireframeButton, + wireframeCheckBox, wireframeDiv, wireframeImage, wireframeInputComponent, wireframePlaceholder, wireframeProgress, + wireframeRadio, wireframeRadioGroup, wireframeRectangle, wireframeSelect, @@ -527,6 +529,29 @@ function makeToggleElement(wireframe: wireframeToggle): (elementNode & { id: num } } +function makeLabelledInput( + wireframe: wireframeCheckBox | wireframeRadio | wireframeToggle, + theInputElement: serializedNodeWithId +): serializedNodeWithId { + const theLabel: serializedNodeWithId = { + type: NodeType.Text, + textContent: wireframe.label || '', + id: idSequence.next().value, + } + + const orderedChildren = wireframe.inputType === 'toggle' ? [theLabel, theInputElement] : [theInputElement, theLabel] + + return { + type: NodeType.Element, + tagName: 'label', + attributes: { + style: makeStylesString(wireframe), + }, + id: idSequence.next().value, + childNodes: orderedChildren, + } +} + function makeInputElement( wireframe: wireframeInputComponent, children: serializedNodeWithId[] @@ -547,7 +572,7 @@ function makeInputElement( return makeProgressElement(wireframe, children) } - const theInputElement: (elementNode & { id: number }) | null = + const theInputElement: serializedNodeWithId | null = wireframe.inputType === 'toggle' ? makeToggleElement(wireframe) : { @@ -557,27 +582,13 @@ function makeInputElement( id: wireframe.id, childNodes: children, } + if (!theInputElement) { return null } if ('label' in wireframe) { - return { - type: NodeType.Element, - tagName: 'label', - attributes: { - style: makeStylesString(wireframe), - }, - id: idSequence.next().value, - childNodes: [ - theInputElement, - { - type: NodeType.Text, - textContent: wireframe.label || '', - id: idSequence.next().value, - }, - ], - } + return makeLabelledInput(wireframe, theInputElement) } else { return { ...theInputElement,