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" } } }