From dcde879a9aab70a88ef5841b5eacc37c19d9b75a 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 4c5aa5b4b857f..a5b67505473c2 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 c4c0a2d9f7a27..6d7bfa003fdf2 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" } } }