chore(ui): TE-1104 Auto-login user into swagger using platform auth t…

…oken

thirdeye-ui/docker/templates/default.conf.template

@@ -32,17 +32,6 @@ server {
         proxy_read_timeout 300;
         server_tokens off;
     }
-    location ~/swagger(.*) {
-        proxy_pass $backend_servers/swagger$1;
-        proxy_ssl_server_name on;
-        proxy_redirect off;
-        proxy_set_header Host $proxy_host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Host $server_name;
-        proxy_read_timeout 300;
-        server_tokens off;
-    }
     location ~/openapi(.*) {
         proxy_pass $backend_servers/openapi$1;
         proxy_ssl_server_name on;

thirdeye-ui/package.json

@@ -93,6 +93,7 @@
         "react-markdown": "^8.0.4",
         "react-router-dom": "^6.18.0",
         "react-show-more-text": "^1.6.2",
+        "swagger-ui-react": "^5.10.5",
         "uuid": "^8.3.2",
         "yup": "1.3.2",
         "zustand": "^3.2.0"
@@ -119,6 +120,7 @@
         "@types/react-highlight-words": "^0.16.1",
         "@types/react-show-more-text": "^1.4.2",
         "@types/react-test-renderer": "^17.0.0",
+        "@types/swagger-ui-react": "^4.18.3",
         "@types/testing-library__jest-dom": "^5.9.5",
         "@types/uuid": "^8.3.4",
         "@typescript-eslint/eslint-plugin": "4.31.0",

thirdeye-ui/src/app/components/app-bar/app-bar-config-provider/app-bar-config-provider.component.tsx

@@ -33,7 +33,10 @@ import { useAuthV1 } from "../../../platform/stores/auth-v1/auth-v1.store";
 import { ActionStatus } from "../../../rest/actions.interfaces";
 import { notifyIfErrors } from "../../../utils/notifications/notifications.util";
 import { useTranslation } from "react-i18next";
-import { useNotificationProviderV1 } from "../../../platform/components";
+import {
+    useAuthProviderV1,
+    useNotificationProviderV1,
+} from "../../../platform/components";
 import { useUserPreferences } from "../../../utils/user-preferences/user-preferences";
 import { UserPreferencesKeys } from "../../../utils/user-preferences/user-preferences.interfaces";
 
@@ -42,6 +45,7 @@ export const AppBarConfigProvider: FunctionComponent<AppBarConfigProviderProps>
         const { t } = useTranslation();
         const { notify } = useNotificationProviderV1();
         const { setWorkspace, workspace } = useAuthV1();
+        const { authenticated } = useAuthProviderV1();
         const { setPreference, localPreferences } = useUserPreferences();
         const [showAppNavBar, setShowAppNavBar] = useState(true);
         const [okToRender, setOkToRender] = useState(false);
@@ -146,14 +150,16 @@ export const AppBarConfigProvider: FunctionComponent<AppBarConfigProviderProps>
 
         return (
             <AppBarConfigProviderContext.Provider value={{ setShowAppNavBar }}>
-                {showNavbar && <AppBar />}
+                {showNavbar && authenticated && <AppBar />}
                 <div className={compoenentStyles.rightView}>
-                    <Appheader
-                        isFullScreen={!showNavbar}
-                        selectedWorkspace={mappedSelectedWorkspace}
-                        workspaces={mappedWorkspaces}
-                        onWorkspaceChange={handleWorkspaceChange}
-                    />
+                    {authenticated && (
+                        <Appheader
+                            isFullScreen={!showNavbar}
+                            selectedWorkspace={mappedSelectedWorkspace}
+                            workspaces={mappedWorkspaces}
+                            onWorkspaceChange={handleWorkspaceChange}
+                        />
+                    )}
                     <div
                         className={compoenentStyles.mainContent}
                         key={mainViewKey}

thirdeye-ui/src/app/components/app-bar/app-bar.component.tsx

@@ -136,11 +136,7 @@ export const AppBar: FunctionComponent = () => {
                 </NavBarLinkV1>
 
                 {/* Swagger */}
-                <NavBarLinkV1
-                    externalLink
-                    href={getSwaggerPath()}
-                    target="_blank"
-                >
+                <NavBarLinkV1 href={getSwaggerPath()}>
                     <NavBarLinkIconV1>
                         <CodeIcon />
                     </NavBarLinkIconV1>

thirdeye-ui/src/app/pages/swagger/index.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+import React from "react";
+import SwaggerUI, { SwaggerUIProps } from "swagger-ui-react";
+import "swagger-ui-react/swagger-ui.css";
+import { useAuthV1 } from "../../platform/stores/auth-v1/auth-v1.store";
+
+export const SwaggerDocs = (): JSX.Element => {
+    const [workspace] = useAuthV1((state) => [state.workspace]);
+    const authData = localStorage.getItem("auth-v1");
+    const accessToken = authData && JSON.parse(authData!).state.accessToken;
+
+    const swaggerOptions: SwaggerUIProps = {
+        requestInterceptor: (req) => {
+            if (accessToken) {
+                req.headers["Authorization"] = `Bearer ${accessToken}`;
+            }
+            if (workspace.id) {
+                req.headers["namespace"] = workspace.id;
+            }
+
+            return req;
+        },
+        onComplete: (): void => {
+            const authButton = document.querySelector(".auth-wrapper > button");
+            authButton?.addEventListener("click", (): void => {
+                setTimeout((): void => {
+                    const inputs = document.querySelectorAll<HTMLInputElement>(
+                        ".modal-ux-content input"
+                    );
+                    if (workspace.id) {
+                        inputs[0].value = workspace.id;
+                    }
+                    if (accessToken) {
+                        inputs[1].value = `Bearer ${accessToken}`;
+                    }
+                });
+            });
+        },
+    };
+
+    return (
+        <div>
+            <SwaggerUI url="/openapi.json" {...swaggerOptions} />
+        </div>
+    );
+};

thirdeye-ui/src/app/routers/general-authenticated/general-authenticated.router.tsx

@@ -47,6 +47,12 @@ const PageNotFoundPage = lazy(() =>
     ).then((module) => ({ default: module.PageNotFoundPage }))
 );
 
+const SwaggerDocs = lazy(() =>
+    import(/* webpackChunkName: "swagger-page" */ "../../pages/swagger").then(
+        (module) => ({ default: module.SwaggerDocs })
+    )
+);
+
 export const GeneralAuthenticatedRouter: FunctionComponent = () => {
     return (
         <Suspense fallback={<AppLoadingIndicatorV1 />}>
@@ -57,6 +63,7 @@ export const GeneralAuthenticatedRouter: FunctionComponent = () => {
                     element={<Navigate replace to={getHomePath()} />}
                     path={AppRoute.BASE}
                 />
+                <Route element={<SwaggerDocs />} path={AppRoute.SWAGGER} />
 
                 {/* Home path */}
                 <Route

thirdeye-ui/src/app/routers/general-unauthenticated/general-unauthenticated.router.tsx

@@ -23,12 +23,19 @@ const LoginPage = lazy(() =>
     ).then((module) => ({ default: module.LoginPage }))
 );
 
+const SwaggerDocs = lazy(() =>
+    import(/* webpackChunkName: "swagger-page" */ "../../pages/swagger").then(
+        (module) => ({ default: module.SwaggerDocs })
+    )
+);
+
 export const GeneralUnauthenticatedRouter: FunctionComponent = () => {
     return (
         <Suspense fallback={<AppLoadingIndicatorV1 />}>
             <Routes>
                 {/* Login path */}
                 <Route element={<LoginPage />} path={AppRoute.LOGIN} />
+                <Route element={<SwaggerDocs />} path={AppRoute.SWAGGER} />
 
                 {/* No match found, redirect to login path */}
                 <Route

thirdeye-ui/webpack.config.dev.js

@@ -179,7 +179,7 @@ module.exports = {
         // Proxy configuration
         proxy: [
             {
-                context: ["/api", "/swagger"],
+                context: ["/api", "/openapi"],
                 target:
                     process.env.TE_DEV_PROXY_SERVER || "http://localhost:8080/",
                 changeOrigin: true,