From d118844525073ded9587cdb7fa4c514dd573efa9 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Tue, 5 Dec 2023 17:56:23 +0000 Subject: [PATCH] feat: add interaction components to schema (#19040) * feat: add interaction components to schema * expand radio * liek this * Update query snapshots * Update query snapshots * like this * Update ee/frontend/mobile-replay/mobile.types.ts Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> * Update ee/frontend/mobile-replay/mobile.types.ts Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> * Update ee/frontend/mobile-replay/mobile.types.ts Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> * Update ee/frontend/mobile-replay/mobile.types.ts Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> * Update ee/frontend/mobile-replay/mobile.types.ts Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> * Update ee/frontend/mobile-replay/mobile.types.ts Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> * collapse unnecessary name * gen the schema --------- Co-authored-by: test-python Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> --- ee/frontend/mobile-replay/mobile.types.ts | 58 ++- .../schema/mobile/rr-mobile-schema.json | 342 ++++++++++++++++++ 2 files changed, 399 insertions(+), 1 deletion(-) diff --git a/ee/frontend/mobile-replay/mobile.types.ts b/ee/frontend/mobile-replay/mobile.types.ts index 4c5aa5b4b857f7..a5b67505473c21 100644 --- a/ee/frontend/mobile-replay/mobile.types.ts +++ b/ee/frontend/mobile-replay/mobile.types.ts @@ -122,6 +122,51 @@ type wireframeBase = { style?: MobileStyles } +export type wireframeInputBase = wireframeBase & { + type: 'input' + disabled: boolean +} + +export type wireframeCheckBox = wireframeInputBase & { + inputType: 'checkbox' + checked: boolean + label?: string +} + +export type wireframeRadioGroup = wireframeBase & { + groupName: string +} + +export type wireframeRadio = wireframeInputBase & { + inputType: 'radio' + checked: boolean + label?: string +} + +export type wireframeInput = wireframeInputBase & { + inputType: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' + value?: string +} + +export type wireframeSelect = wireframeInputBase & { + inputType: 'select' + value?: string + options?: string[] +} + +export type wireframeTextArea = wireframeInputBase & { + inputType: 'textarea' + value?: string +} + +export type wireframeButton = wireframeInputBase & { + inputType: 'button' + /** + * @description this is the text that is displayed on the button, if not sent then you must send childNodes with the button content + */ + value?: string +} + export type wireframeText = wireframeBase & { type: 'text' text: string @@ -146,7 +191,18 @@ export type wireframeDiv = wireframeBase & { type: 'div' } -export type wireframe = wireframeText | wireframeImage | wireframeRectangle | wireframeDiv +export type wireframe = + | wireframeText + | wireframeImage + | wireframeRectangle + | wireframeDiv + | wireframeCheckBox + | wireframeRadioGroup + | wireframeRadio + | wireframeInput + | wireframeSelect + | wireframeTextArea + | wireframeButton // the rrweb full snapshot event type, but it contains wireframes not html export type fullSnapshotEvent = { diff --git a/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json b/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json index c4c0a2d9f7a275..6d7bfa003fdf20 100644 --- a/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json +++ b/ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json @@ -199,9 +199,124 @@ }, { "$ref": "#/definitions/wireframeDiv" + }, + { + "$ref": "#/definitions/wireframeCheckBox" + }, + { + "$ref": "#/definitions/wireframeRadioGroup" + }, + { + "$ref": "#/definitions/wireframeRadio" + }, + { + "$ref": "#/definitions/wireframeInput" + }, + { + "$ref": "#/definitions/wireframeSelect" + }, + { + "$ref": "#/definitions/wireframeTextArea" + }, + { + "$ref": "#/definitions/wireframeButton" } ] }, + "wireframeButton": { + "additionalProperties": false, + "properties": { + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "disabled": { + "type": "boolean" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "inputType": { + "const": "button", + "type": "string" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "value": { + "description": "this is the text that is displayed on the button, if not sent then you must send childNodes with the button content", + "type": "string" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["disabled", "height", "id", "inputType", "type", "width", "x", "y"], + "type": "object" + }, + "wireframeCheckBox": { + "additionalProperties": false, + "properties": { + "checked": { + "type": "boolean" + }, + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "disabled": { + "type": "boolean" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "inputType": { + "const": "checkbox", + "type": "string" + }, + "label": { + "type": "string" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["checked", "disabled", "height", "id", "inputType", "type", "width", "x", "y"], + "type": "object" + }, "wireframeDiv": { "additionalProperties": false, "properties": { @@ -276,6 +391,137 @@ "required": ["base64", "height", "id", "type", "width", "x", "y"], "type": "object" }, + "wireframeInput": { + "additionalProperties": false, + "properties": { + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "disabled": { + "type": "boolean" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "inputType": { + "enum": ["text", "password", "email", "number", "search", "tel", "url"], + "type": "string" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "value": { + "type": "string" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["disabled", "height", "id", "inputType", "type", "width", "x", "y"], + "type": "object" + }, + "wireframeRadio": { + "additionalProperties": false, + "properties": { + "checked": { + "type": "boolean" + }, + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "disabled": { + "type": "boolean" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "inputType": { + "const": "radio", + "type": "string" + }, + "label": { + "type": "string" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["checked", "disabled", "height", "id", "inputType", "type", "width", "x", "y"], + "type": "object" + }, + "wireframeRadioGroup": { + "additionalProperties": false, + "properties": { + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "groupName": { + "type": "string" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["groupName", "height", "id", "type", "width", "x", "y"], + "type": "object" + }, "wireframeRectangle": { "additionalProperties": false, "properties": { @@ -311,6 +557,57 @@ "required": ["height", "id", "type", "width", "x", "y"], "type": "object" }, + "wireframeSelect": { + "additionalProperties": false, + "properties": { + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "disabled": { + "type": "boolean" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "inputType": { + "const": "select", + "type": "string" + }, + "options": { + "items": { + "type": "string" + }, + "type": "array" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "value": { + "type": "string" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["disabled", "height", "id", "inputType", "type", "width", "x", "y"], + "type": "object" + }, "wireframeText": { "additionalProperties": false, "properties": { @@ -348,6 +645,51 @@ }, "required": ["height", "id", "text", "type", "width", "x", "y"], "type": "object" + }, + "wireframeTextArea": { + "additionalProperties": false, + "properties": { + "childWireframes": { + "items": { + "$ref": "#/definitions/wireframe" + }, + "type": "array" + }, + "disabled": { + "type": "boolean" + }, + "height": { + "type": "number" + }, + "id": { + "type": "number" + }, + "inputType": { + "const": "textarea", + "type": "string" + }, + "style": { + "$ref": "#/definitions/MobileStyles" + }, + "type": { + "$ref": "#/definitions/MobileNodeType" + }, + "value": { + "type": "string" + }, + "width": { + "type": "number" + }, + "x": { + "description": "x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0", + "type": "number" + }, + "y": { + "type": "number" + } + }, + "required": ["disabled", "height", "id", "inputType", "type", "width", "x", "y"], + "type": "object" } } }