Integrate theme builder (#267)

* Theme builder integration

* nav

modules/ROOT/pages/common/nav.adoc

@@ -22,6 +22,7 @@
 ** link:{{navprefix}}/restV2-playground?apiResourceId=http%2Fgetting-started%2Fintroduction[REST API v2 Playground]
 ** link:{{navprefix}}/graphql-play-ground[GraphQL Playground]
 ** +++<a href="{{previewPrefix}}/api/rest/playgroundV1" target="_blank">REST API v1 Playground</a>+++
+** link:{{navprefix}}/theme-builder[Theme Builder]
 ** link:{{navprefix}}/spotdev-portal[How to use]
 *** link:{{navprefix}}/dev-playground[Visual Embed Playground]
 *** link:{{navprefix}}/graphql-playground[GraphQL Playground]

modules/ROOT/pages/playground-theme-builder.adoc

@@ -0,0 +1,10 @@
+= Theme builder Playground
+:toc: true
+
+:page-title: ThoughtSpot's theme builder
+:page-pageid: theme-builder
+:page-description: ThoughtSpot's theme builder allows you to create custom themes for your ThoughtSpot instance. You can customize the colors, fonts, and other visual elements of the ThoughtSpot interface to match your brand identity.
+
+ThoughtSpot's theme builder allows you to create custom themes for your ThoughtSpot instance. You can customize the colors, fonts, and other visual elements of the ThoughtSpot interface to match your brand identity.
+
+

src/components/DevDocTemplate/index.tsx

@@ -49,6 +49,7 @@ import {
 import { getAllPageIds } from '../LeftSidebar/helper';
 import t from '../../utils/lang-utils';
 import { getHTMLFromComponent } from '../../utils/react-utils';
+import { ThemeBuilder } from './playGround/ThemeBuilder';
 
 const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
     const {
@@ -130,9 +131,13 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
     );
     const isApiPlayground =
         params[TS_PAGE_ID_PARAM] === CUSTOM_PAGE_ID.API_PLAYGROUND;
+
+    const isThemeBuilder =
+        params[TS_PAGE_ID_PARAM] === CUSTOM_PAGE_ID.THEME_BUILDER;
+
     const isGQPlayGround =
         params[TS_PAGE_ID_PARAM] === CUSTOM_PAGE_ID.GQ_PLAYGROUND;
-    const isPlayGround = isGQPlayGround || isApiPlayground;
+    const isPlayGround = isGQPlayGround || isApiPlayground || isThemeBuilder;
 
     const isAskDocsPage = params[TS_PAGE_ID_PARAM] === CUSTOM_PAGE_ID.ASK_DOCS;
 
@@ -432,6 +437,11 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                     params={params}
                 />
             );
+
+        if (isThemeBuilder) {
+            return <ThemeBuilder backLink={backLink} />;
+        }
+
         return (
             <GraphQLPlayGround
                 location={location}

src/components/DevDocTemplate/playGround/ThemeBuilder.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import BackButton from '../../BackButton';
+
+export const ThemeBuilder: React.FC<ThemeBuilderProps> = (props) => {
+    const playgroundUrl = 'https://thoughtspot-theme-builder-five.vercel.app/';
+
+    return (
+        <div className="restApiWrapper">
+            <BackButton
+                title="Back"
+                backLink={props.backLink}
+                internalRedirect
+            />
+            <iframe
+                ref={null}
+                src={playgroundUrl}
+                height="100%"
+                width="100%"
+                id="theme-builder"
+            />
+        </div>
+    );
+};
+
+type ThemeBuilderProps = {
+    backLink: string;
+};

src/configs/doc-configs.js

@@ -44,6 +44,7 @@ module.exports = {
         API_PLAYGROUND: 'restV2-playground',
         ASK_DOCS: 'ask-docs',
         GQ_PLAYGROUND: 'graphql-play-ground',
+        THEME_BUILDER: 'theme-builder',
     },
     CLUSTER_TYPES: {
         PROD: 'PROD',