main-release sync

modules/ROOT/pages/customize-icons.adoc

@@ -10,15 +10,34 @@ You can customize the icons on a ThoughtSpot page using an icon sprite SVG file
 
 == Before you begin
 
-* Identify the icons that you want to override.
-.. On your ThoughtSpot instance, right-click on the icon and select *Inspect*.
-.. Inspect the `<svg>` element.
-.. Note the icon ID.
-* Add the SVG hosting domain to the following allowlists on the *Develop* > *Security Settings* page:
+[#identifyIconId]
+=== Identify the icons that you want to override
+
+. On your ThoughtSpot instance, right-click on the icon and select *Inspect*.
+. Inspect the `<svg>` element.
+. Inside should be a `<use>` element, like: `<use xlink:href="#rd-icon-cog"></use>`
+. Copy the icon ID, which is the portion after the `#` within the `xlink:href=` property.
++
+[.widthAuto]
+[.bordered]
+image::./images/locate-icon-customization.png[Locate icon ID]
+
+The most common icon ID to override is `rd-icon-spotter`, the Spotter image, but any SVG icon can be identified and an override supplied in the file.
+
+=== Update allowlists in Security Settings page
+
+For ease of testing, the domain `https://cdn.jsdeliver.net` is already whitelisted on the ThoughtSpot link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[public Playground] and trial sites.
+
+If you want to enable the use of any existing examples on your own instance, or any file from GitHub, add the `https://cdn.jsdeliver.net` domain to the SVG hosting domain to the following allowlists on the *Develop* > *Security Settings* page:
+
 ** xref:security-settings.adoc#csp-connect-src[CSP connect-src domains allowlist]
 ** xref:security-settings.adoc#csp-trusted-domain[CSP img-src domains allowlist]
-+
-* xref:customize-icons.adoc#_try_it_out_in_the_embed_playground[Try out] the icon override code in the embed Playground. For ease of testing, the domain `cdn.jsdeliver.net` is already whitelisted on the ThoughtSpot link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[public Playground] and trial sites.
+
+You can add any other domains where you host the SVG override files to the same allowlists.
+
+=== Test an override file
+
+The Developer Embed Playground allows you to xref:customize-icons.adoc#tryItOut[try out any override] from an allowlisted origin.
 
 == Create an icon override
 The basic structure of an icon override file is shown in the following snippet:
@@ -33,6 +52,8 @@ The basic structure of an icon override file is shown in the following snippet:
 </svg>
 ----
 
+The `id=` property of the `<symbol>` tag tells ThoughtSpot which icon to substitute with the provided SVG. This `id=` should match the icon ID you xref:#identifyIconId[identified at the start].
+
 The `<path />` portion within the `<symbol>` tags is the definition of the actual drawing.
 
 You are defining a small icon, so it should fit within a square boundary and have a single solid color.
@@ -41,6 +62,8 @@ There are many simple SVG icon examples available online, for example, the link:
 
 You only need to copy the `<path>` tags from your example SVG within the `<symbol> </symbol>` tags.
 
+You can declare multiple `<symbol>` tags within one SVG file if you are substituting a number of icons.
+
 === viewBox property
 
 The link:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox[viewBox property^] is in the order `min-x`, `min-y`, `width`, and `height`.
@@ -60,9 +83,28 @@ You can add the `fill` property to the `<symbol>` tag to define a different fill
 == Override an icon
 To override an icon:
 
-. Create an icon sprite file with the SVG element, define the properties, and specify the icon ID.
+. Ensure that you have xref:#identifyIconId[the ID of the icon] you want to replace.
+. To replace the icon with an SVG, open the icon in a web browser, click **Inspect**, and then copy the SVG code.
+. Create an icon sprite file with the SVG code.
+. In the `<symbol>` element, specify ID of the icon you want to replace. For example, `rd-icon-spotter`.
+. Modify the xref:#_viewbox_property[viewBox] and xref:_fill_property[fill] properties as required.
 +
-The following code snippet shows how to override the chart icon  (`rd-icon-chart`) on the *Answers* page.
+Th following code snippet shows an example of the SVG code for the icon sprite that overrides the Spotter icon:
++
+[source,HTML]
+----
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;visibility:hidden;">
+   <defs/>
+   <symbol id="rd-icon-spotter" viewBox="0 0 48 48" fill="black">
+      <path xmlns="http://www.w3.org/2000/svg" d="M45.6,18.7,41,14.9V7.5a1,1,0,0,0-.6-.9L30.5,2.1h-.4l-.6.2L24,5.9,18.5,2.2,17.9,2h-.4L7.6,6.6a1,1,0,0,0-.6.9v7.4L2.4,18.7a.8.8,0,0,0-.4.8v9H2a.8.8,0,0,0,.4.8L7,33.1v7.4a1,1,0,0,0,.6.9l9.9,4.5h.4l.6-.2L24,42.1l5.5,3.7.6.2h.4l9.9-4.5a1,1,0,0,0,.6-.9V33.1l4.6-3.8a.8.8,0,0,0,.4-.7V19.4h0A.8.8,0,0,0,45.6,18.7Zm-5.1,6.8H42v1.6l-3.5,2.8-.4.3-.4-.2a1.4,1.4,0,0,0-2,.7,1.5,1.5,0,0,0,.6,2l.7.3h0v5.4l-6.6,3.1-4.2-2.8-.7-.5V25.5H27a1.5,1.5,0,0,0,0-3H25.5V9.7l.7-.5,4.2-2.8L37,9.5v5.4h0l-.7.3a1.5,1.5,0,0,0-.6,2,1.4,1.4,0,0,0,1.3.9l.7-.2.4-.2.4.3L42,20.9v1.6H40.5a1.5,1.5,0,0,0,0,3ZM21,25.5h1.5V38.3l-.7.5-4.2,2.8L11,38.5V33.1h0l.7-.3a1.5,1.5,0,0,0,.6-2,1.4,1.4,0,0,0-2-.7l-.4.2-.4-.3L6,27.1V25.5H7.5a1.5,1.5,0,0,0,0-3H6V20.9l3.5-2.8.4-.3.4.2.7.2a1.4,1.4,0,0,0,1.3-.9,1.5,1.5,0,0,0-.6-2L11,15h0V9.5l6.6-3.1,4.2,2.8.7.5V22.5H21a1.5,1.5,0,0,0,0,3Z"/>
+      <path xmlns="http://www.w3.org/2000/svg" d="M13.9,9.9a1.8,1.8,0,0,0,0,2.2l2.6,2.5v2.8l-4,4v5.2l4,4v2.8l-2.6,2.5a1.8,1.8,0,0,0,0,2.2,1.5,1.5,0,0,0,1.1.4,1.5,1.5,0,0,0,1.1-.4l3.4-3.5V29.4l-4-4V22.6l4-4V13.4L16.1,9.9A1.8,1.8,0,0,0,13.9,9.9Z"/>
+      <path xmlns="http://www.w3.org/2000/svg" d="M31.5,14.6l2.6-2.5a1.8,1.8,0,0,0,0-2.2,1.8,1.8,0,0,0-2.2,0l-3.4,3.5v5.2l4,4v2.8l-4,4v5.2l3.4,3.5a1.7,1.7,0,0,0,2.2,0,1.8,1.8,0,0,0,0-2.2l-2.6-2.5V30.6l4-4V21.4l-4-4Z"/>
+   </symbol>
+</svg>
+----
+
++
+The following example overrides the chart icon  (`rd-icon-chart`) on the *Answers* page.
 +
 [source,HTML]
 ----
@@ -75,9 +117,8 @@ The following code snippet shows how to override the chart icon  (`rd-icon-chart
    </symbol>
 </svg>
 ----
-+
 
-To override multiple icons, use the following format:
+. To override multiple icons at once, you can use the following format:
 +
 [source,HTML]
 ----
@@ -122,27 +163,32 @@ For example, the following code snippets use the link:https://github.com/thought
 +
 The following figures show the icons before and after the override.
 +
+Spotter icon on the Spotter interface::
++
 [width="100%" cols="6,6"]
 |======
-||
-2+|**Chart icon** on Answers
-a|Before +
-
-image::./images/pre-icon-override.png[Before icon override]
-a|After +
-
-image::./images/post-icon-override.png[After icon override]
-
-2+|**Spotter icon**
-a|Before +
+a|**Before** +
 [.bordered]
 image::./images/spotter-icon.png[Conversation embed]
-a|After +
+a|**After** +
 [.bordered]
 image::./images/spotter-icon-customization.png[Spotter icon customization]
+|======
 
+Chart icon on the Answer page::
+The chart icon is available on the Answer page, which can be viewed in full app, Search data, or Natural Language Search embed.
++
+[width="100%" cols="6,6"]
+|======
+a|**Before** +
+
+image::./images/pre-icon-override.png[Before icon override]
+a|**After** +
+
+image::./images/post-icon-override.png[After icon override]
 |======
 
+[#tryItOut]
 == Try it out in the Playground
 The +++<a href="{{previewPrefix}}/playground/search" target="_blank">Visual Embed SDK Playground </a>+++ allows you to try out the icon customization framework.
 

modules/ROOT/pages/open-issues.adoc

@@ -8,6 +8,24 @@
 
 This page lists the known issues that you might run into while embedding ThoughtSpot in your app, or when using the embedded interface or making REST API calls.
 
+
+== Version 10.5.0.cl
+
+[cols="2,6"]
+[options='header']
+|=====
+|Issue Description| Symptoms, conditions, and workaround
+|The `LogLevel: Error` property does not suppress information alerts, debug alerts and warnings from the ThoughtSpot application.|
+**Symptom**: +
+Although the `LogLevel` attribute in the Visual Embed SDK is set to `Error` to show only the error logs in the browser console, other ThoughtSpot application logs such as information alerts, warnings, and debug messages are also displayed.
+
+**Conditions** +
+This issue is observed on ThoughtSpot instances running 10.5.0.cl and earlier versions.
+
+**Workaround** +
+None.
+|=====
+
 == Version 9.12.5.cl
 
 [cols="2,6"]
@@ -37,7 +55,9 @@ On exporting and reimporting TML in YAML format in the REST API v2 Playground, t
 `Invalid YAML/JSON syntax in file.`
 **Conditions**: +
 This issue occurs because when reimporting TML invalid characters are added to the TML YAML content in the Playground resulting in an invalid syntax error.
-**Workaround**:
+**Workaround**: +
+See xref:tml.adoc#_yaml_reimport_in_rest_api_playground[YAML reimport in the REST API v2 Playground].
+
 We recommend the following steps to work around this issue: +
 
 . On the REST API v2 Playground, +++<a href="{{navprefix}}/restV2-playground?apiResourceId=http%2Fapi-endpoints%2Fmetadata%2Fexport-metadata-tml">export the TML in YAML format</a>+++.
@@ -82,12 +102,10 @@ The request body JSON appears as shown in this example:
 If you still get an error, try out the steps shown in this video:
 +
 video::./images/yaml-tml-export.mp4[width=100%,options="autoplay,loop"]
-
 ||
 |=====
 
 
-
 == Version 9.10.0.cl
 
 [cols="2,6"]

modules/ROOT/pages/security-settings.adoc

@@ -105,12 +105,14 @@ To add domain names to the CORS allowlist, follow these steps:
 [IMPORTANT]
 ====
 [#port-protocol]
-Note the following points if using port or protocol in the domain name string:
 
-* The UI allows you to add a domain URL with or without the protocol (`http/https`) in the CSP allowlist. To avoid long URLs in the CSP header, we recommend that you don't include the protocol in the domain name string. However, for non-HTTPS domains, such as your local testing environment, do include `http` in the domain name string.
-* Although you can add a domain URL with the protocol (`http/https`) to the CORS allowlist, ThoughtSpot ignores the protocol in the domain names of CORS hosts. Therefore, you can exclude the protocol in the domain name strings.
-* If your domain URL has a non-standard port such as 8080, specify the port number in the domain name string.
-* You can add multiple domain names to the CORS and CSP Visual Embed hosts list on the **Develop** > **Security Settings** page. Ensure that the CORS and CSP host allowlist does not exceed 4096 characters.
+* You can add multiple domains to the CORS and CSP Visual Embed allowlists on the **Develop** **Customizations** > **Security Settings** page. Ensure that the CORS and CSP allowlists do not exceed 4096 characters.
+* *Protocol in the domain URL*:
+** CSP hosts — The UI allows adding a domain URL with or without the protocol (`http/https`). However, to avoid long URLs in the CSP header, you can exclude the protocol in the domain URL strings.
+** CORS hosts — The UI allows adding a domain URL with the protocol (`http/https`). If the domain  URLs are using `https`, you can exclude the protocol in domain URL strings, because ThoughtSpot assigns `https` to the URLs by default.
+** For localhost and non-HTTPS URLs — For non-HTTPs domains or localhost such as `localhost:3000`, if you add the domain without the protocol, the `https` protocol will be assigned to the URL by default. Due to this, the localhost domain with `http` (`\http://localhost:3000`) might result in a CSP or CORS error. Therefore, include the `http` protocol in the domain name strings for non-HTTPS domains and localhost.
+* **Port**: If your domain URL has a non-standard port such as 8080, specify the port number in the domain name string.
+
 ====
 
 The following table shows the valid domain name strings for the CORS and CSP allowlists.
@@ -127,7 +129,6 @@ CSP img-src
 
 a|Domain URL strings without protocol
 
-
 * `thoughtspot.com`
 * `www.thoughtspot.com` +
 
@@ -137,6 +138,7 @@ a|Domain URL strings for localhost
 
 * `localhost`
 * `localhost:3000`
+* `\http://localhost:8080`
 * `\http://localhost:3000`
 
 |[tag greenBackground tick]#✓# Supported|[tag greenBackground tick]#✓# Supported 2*|[tag greenBackground tick]#✓# Supported

modules/ROOT/pages/tml.adoc

@@ -369,6 +369,53 @@ ThoughtSpot offers a lot of flexibility within its set of xref:intro-thoughtspot
 == Limitations of working with TML files
 There are certain limitations to the changes you can apply by editing a ThoughtSpot object through TML. Visit link:https://docs.thoughtspot.com/cloud/latest/tml#_limitations_of_working_with_tml_files[Limitations of working with TML files, window=_blank] for detailed information.
 
+=== YAML reimport in REST API v2 Playground
+
+In the REST API v2 Playground, if the TML YAML contains invalid characters, the import API operation fails with an invalid syntax error. To work around this issue, use the following steps:
+
+. On the REST API v2 Playground, +++<a href="{{navprefix}}/restV2-playground?apiResourceId=http%2Fapi-endpoints%2Fmetadata%2Fexport-metadata-tml">export the TML in YAML format</a>+++.
+. Copy the edoc output from the API response in the code panel.
+. Paste it in a text editor such as Sublime. +
+For example, `"guid: a162289a-c1ab-427e-9985-8fb5f7c7e539\nliveboard:\n  name: Liveboard 1\n"`
++
+. Check if the output is enclosed in quotation marks ("). Remove the quotation marks and update the TML text as shown here: +
+`guid: a162289a-c1ab-427e-9985-8fb5f7c7e539\nliveboard:\n  name: Liveboard 1\n`
+
+. On the+++<a href="{{navprefix}}/restV2-playground?apiResourceId=http%2Fapi-endpoints%2Fmetadata%2Fimport-metadata-tml"> Import Metadata TML API page</a>+++, go to **body** > **metadata_tmls** parameter. +
+. Add / remove objects in that list based on how many TML objects you want to import.
+. Click **VIEW JSON** to view the object properties in JSON format. +
+The request body JSON appears as shown in this example:
++
+[source,JSON]
+----
+{
+  "metadata_tmls": [
+    "metadata_tmls3"
+  ],
+  "import_policy": "PARTIAL",
+  "create_new": false,
+  "all_orgs_context": false
+}
+----
+. Replace `metadata_tmls3` with the text copied from step 4. Ensure that the text you copy doesn't include additional characters and quotation marks.
++
+[source,JSON]
+----
+{
+  "metadata_tmls": [
+    "guid: a162289a-c1ab-427e-9985-8fb5f7c7e539\nliveboard:\n  name: Liveboard 1\n"
+  ],
+  "import_policy": "PARTIAL",
+  "create_new": false,
+  "all_orgs_context": false
+}
+----
+. Execute the API call by clicking **Try it Out**. +
++
+If you still get an error, try out the steps shown in this video:
++
+video::./images/yaml-tml-export.mp4[width=100%,options="autoplay,loop"]
+
 == Deployment and version control of TML objects
 For information about version control and TML deployment, see the following pages:
 

modules/tutorials/pages/react-components/react-components_lesson-03.adoc

@@ -20,7 +20,7 @@ The example app has a dedicated link:https://github.com/thoughtspot/embed-exampl
 The following steps are required for this page:
 
 1. Make a REST API request to ThoughtSpot to retrieve the details of the objects
-2. Build the table from the results and construct links to the link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/app/dashboard/%5BdashboardId%5D/page.tsx[/dashboard/{dashboardId^] page to display the Liveboard.
+2. Build the table from the results and construct links to the link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/app/dashboard/%5BdashboardId%5D/page.tsx[/dashboard/{dashboardId}^] page to display the Liveboard.
 
 === Create state variables
 The menu page provides some UI options to configure the REST API request that generates the menu items. The pattern in React is for options to update shared link:https://react.dev/learn/reacting-to-input-with-state[state variables^] using the link:https://react.dev/reference/react/useState[useState()^] function, with updates triggered within components when the associated `setState()` function is called.