From c842f9ba65c287c396493a91b9b38dcdca37f446 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Mon, 5 Jan 2026 10:21:55 -0600 Subject: [PATCH 1/6] Update react-components_lesson-01.adoc Updated language and code about authentication --- .../react-components/react-components_lesson-01.adoc | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc index ba0d4a6ff..9e66d67a8 100644 --- a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc +++ b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc @@ -32,7 +32,9 @@ return ( ); ---- -The `tsInitialize()` function wraps around the entire process of calling the `init()` function from the Visual Embed SDK (note that authentication has not been implemented in this example): +The `tsInitialize()` function wraps around the entire process of calling the `init()` function from the Visual Embed SDK. + +Please note that authentication has not been implemented in this example. You must be signed into ThoughtSpot already in another tab in your browser. Production level xref:embed-authentication.adoc[authentication methods] are covered elsewhere in the documentation. [source,typescript] ---- @@ -44,10 +46,9 @@ The `tsInitialize()` function wraps around the entire process of calling the `in const ee = init({ thoughtSpotHost: constants.tsURL, authType: AuthType.None, - username: constants.username, - getAuthToken: () => { + /* getAuthToken: () => { return getAuthToken(constants.username); - }, + },*/ callPrefetch: true, customizations: {}, } as EmbedConfig); From 468fc23b2fa18036df051d9946fc52cb1c7b8934 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Mon, 5 Jan 2026 10:42:04 -0600 Subject: [PATCH 2/6] Update react-components_intro.adoc Better explanation of Next.js, Flowbite, and Tailwind --- .../react-components/react-components_intro.adoc | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/modules/tutorials/pages/react-components/react-components_intro.adoc b/modules/tutorials/pages/react-components/react-components_intro.adoc index 4cdc5e771..e50482976 100644 --- a/modules/tutorials/pages/react-components/react-components_intro.adoc +++ b/modules/tutorials/pages/react-components/react-components_intro.adoc @@ -23,7 +23,11 @@ There are many great resources for understanding React itself, including the lin React projects almost always use many different packages on top of the baseline "React" install. -Within the tutorial, all packages will be given a brief explanation, with links to the respective project documentation. +Primarily, the example app is built using link:https://nextjs.org/[Next.js], one of the most widely used React frameworks. The structure of the app, including routing, takes into account the features and patterns of Next.js, but using Next.js is not a requirement to use ThoughtSpot's React components. + +The example app also uses link:https://flowbite-react.com/[Flowbite] for pre-defined UI components and link:https://tailwindcss.com/docs/installation/framework-guides/nextjs[Tailwind CSS] as a unified styling system. + +The majority of `className` references in the example app are to specific Tailwind predefined classes and can be removed when adding code into your own application - nothing within the example related to ThoughtSpot depends on Tailwind or the Flowbite components. == Routes and pages *Routes* are URLs that load different "pages" within the app. @@ -91,6 +95,11 @@ link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/lib/co The `constants` const is declared and exported with several properties, the most important of which is `tsURL`, because it configures the ThoughtSpot instance from which the content will load. +[WARNING] +==== +You must include *https://* in the `tsURL` string to avoid browser redirect issues. +==== + [source,typescript] ---- export const constants = { From d1f4561babe78fb1ab14b22dfae1feff8c6b50b5 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Mon, 5 Jan 2026 10:59:35 -0600 Subject: [PATCH 3/6] Update react-components_lesson-01.adoc Updated init to show more essential basics --- .../pages/react-components/react-components_lesson-01.adoc | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc index 9e66d67a8..f706c83b8 100644 --- a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc +++ b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc @@ -45,12 +45,11 @@ Please note that authentication has not been implemented in this example. You mu // See https://developers.thoughtspot.com/docs/Interface_EmbedConfig for all configurations const ee = init({ thoughtSpotHost: constants.tsURL, - authType: AuthType.None, - /* getAuthToken: () => { - return getAuthToken(constants.username); - },*/ callPrefetch: true, customizations: {}, + authType: AuthType.None + // getAuthToken: () => { return Promise.resolve('{tokenCopiedFromPlayground}'); } , + // autoLogin: true, } as EmbedConfig); // Checks for Auth process completed as expected From abc769a0a48a58e6ff4826fe8e9563ce2f2ff181 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Wed, 7 Jan 2026 13:14:00 -0600 Subject: [PATCH 4/6] Update react-components_lesson-01.adoc Added note about the amount of doubled console messages --- .../pages/react-components/react-components_lesson-01.adoc | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc index f706c83b8..56c117bcb 100644 --- a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc +++ b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc @@ -67,6 +67,11 @@ Please note that authentication has not been implemented in this example. You mu }; ---- +[NOTE] +==== +When running the tutorial app locally, it is expected behavior to see duplicated calls and messages in the browser Developer Tools. Next.js is running in development mode and automatically renders components twice, causing the duplication. The code examples are correct and the issue will go away in a production Next.js environment, and is not an issue in other React frameworks. +==== + == Common customizations in the init As mentioned above, link:https://developers.thoughtspot.com/docs/Interface_EmbedConfig[many configuration options] can be specified as part of the `init()` function. From 253f3ea82e95652dd3294a9775e3bbdcdda2c9ca Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Fri, 9 Jan 2026 15:41:11 -0600 Subject: [PATCH 5/6] Update react-components_lesson-01.adoc Note about duplicated calls in React --- .../pages/react-components/react-components_lesson-01.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc index 56c117bcb..10d071514 100644 --- a/modules/tutorials/pages/react-components/react-components_lesson-01.adoc +++ b/modules/tutorials/pages/react-components/react-components_lesson-01.adoc @@ -69,7 +69,7 @@ Please note that authentication has not been implemented in this example. You mu [NOTE] ==== -When running the tutorial app locally, it is expected behavior to see duplicated calls and messages in the browser Developer Tools. Next.js is running in development mode and automatically renders components twice, causing the duplication. The code examples are correct and the issue will go away in a production Next.js environment, and is not an issue in other React frameworks. +When running the tutorial app locally, it is expected behavior to see duplicated calls and messages in the browser Developer Tools. Next.js is running in development mode using React Strict Mode, which automatically renders components twice, causing the duplication. ==== == Common customizations in the init From 1e1e7fe6fcf8db85cd796f68ca49cc17b88dbaf3 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Mon, 12 Jan 2026 15:27:26 -0600 Subject: [PATCH 6/6] Update react-components_lesson-03.adoc Removed older reference to Worksheets --- .../pages/react-components/react-components_lesson-03.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/tutorials/pages/react-components/react-components_lesson-03.adoc b/modules/tutorials/pages/react-components/react-components_lesson-03.adoc index 1340166f2..9baf18f7b 100644 --- a/modules/tutorials/pages/react-components/react-components_lesson-03.adoc +++ b/modules/tutorials/pages/react-components/react-components_lesson-03.adoc @@ -245,7 +245,7 @@ When this page renders, there is now a dynamic menu to get to any Liveboard the == Spotter embed pages and menu The example app contains an equivalent menu and component display page for Spotter content, under the link:https://github.com/thoughtspot/embed-example-react-app/tree/main/src/app/datachat[/app/datachat/^] subdirectory. -Spotter conversations are started against Models (formerly Worksheets), so the set of UI components and filters differs within the link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/app/datachat/page.tsx[menu page^]. +Spotter conversations are started against Models, so the set of UI components and filters differs within the link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/app/datachat/page.tsx[menu page^]. The basic concepts from the entire tutorial apply regardless of which component you are using.