feat: update the demo page flow

Author: steveninhle

ui/dashboard/src/app/index.tsx

@@ -14,13 +14,15 @@ import {
   AuthProvider,
   useAuth,
   getCurrentEnvironment,
-  hasEditable
+  hasEditable,
+  AuthDemoCallbackPage
 } from 'auth';
 import { ENVIRONMENT_WITH_EMPTY_ID } from 'constants/app';
 import {
   PAGE_PATH_APIKEYS,
   PAGE_PATH_AUDIT_LOGS,
   PAGE_PATH_AUTH_CALLBACK,
+  PAGE_PATH_AUTH_DEMO_CALLBACK,
   PAGE_PATH_AUTH_SIGNIN,
   PAGE_PATH_DEBUGGER,
   PAGE_PATH_DEMO_SITE,
@@ -104,6 +106,10 @@ function App() {
                 path={PAGE_PATH_AUTH_CALLBACK}
                 element={<AuthCallbackPage />}
               />
+              <Route
+                path={PAGE_PATH_AUTH_DEMO_CALLBACK}
+                element={<AuthDemoCallbackPage />}
+              />
               <Route
                 path={PAGE_PATH_AUTH_SIGNIN}
                 element={<SignInEmailPage />}

ui/dashboard/src/auth/auth-demo-callback.tsx

@@ -0,0 +1,52 @@
+import { FC, useEffect, memo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { exchangeDemoToken, ExchangeTokenPayload } from '@api/auth';
+import { urls } from 'configs';
+import { PAGE_PATH_DEMO_SITE } from 'constants/routing';
+import { getCookieState } from 'cookie';
+import { useSubmit, useToast } from 'hooks';
+import queryString from 'query-string';
+import { AppLoading } from 'app';
+import { useAuth } from './auth-context';
+
+export const AuthDemoCallbackPage: FC = memo(() => {
+  const { errorNotify } = useToast();
+  const { setIsGoogleAuthError, setIsInitialLoading } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const query = location.search;
+
+  const { onSubmit: onGoogleDemoHandler } = useSubmit(
+    async (payload: ExchangeTokenPayload) => {
+      try {
+        const response = await exchangeDemoToken(payload);
+        if (response.token) {
+          navigate(`${PAGE_PATH_DEMO_SITE}?token=${response.token}`);
+        }
+      } catch (error) {
+        setIsGoogleAuthError(true);
+        setIsInitialLoading(false);
+        errorNotify(error);
+        navigate(PAGE_PATH_DEMO_SITE);
+      }
+    }
+  );
+
+  useEffect(() => {
+    const { code, state } = queryString.parse(query);
+    const cookieState = getCookieState();
+    setIsInitialLoading(true);
+
+    if (!!code && typeof code === 'string' && state === cookieState) {
+      onGoogleDemoHandler({
+        code,
+        redirectUrl: urls.AUTH_DEMO_REDIRECT,
+        type: 2 // Google auth type
+      });
+    } else {
+      throw new Error('Invalid authentication.');
+    }
+  }, [query]);
+
+  return <AppLoading />;
+});

ui/dashboard/src/auth/index.tsx

@@ -1,3 +1,4 @@
 export * from './auth-context';
 export * from './auth-callback';
 export * from './utils';
+export * from './auth-demo-callback';

ui/dashboard/src/configs/index.ts

@@ -1,3 +1,7 @@
+import {
+  PAGE_PATH_AUTH_CALLBACK,
+  PAGE_PATH_AUTH_DEMO_CALLBACK
+} from 'constants/routing';
 import resolveConfig from 'tailwindcss/resolveConfig';
 import customTailwindConfig from '../../tailwind.config';
 
@@ -23,8 +27,12 @@ export const urls = {
     releaseMode !== 'prod' ? import.meta.env.VITE_WEB_API_ENDPOINT : '',
   AUTH_REDIRECT:
     releaseMode !== 'prod'
-      ? `${import.meta.env.VITE_AUTH_REDIRECT_ENDPOINT}/auth/callback`
-      : `${window.location.origin}/auth/callback`,
+      ? `${import.meta.env.VITE_AUTH_REDIRECT_ENDPOINT}${PAGE_PATH_AUTH_CALLBACK}`
+      : `${window.location.origin}${PAGE_PATH_AUTH_CALLBACK}`,
+  AUTH_DEMO_REDIRECT:
+    releaseMode !== 'prod'
+      ? `${import.meta.env.VITE_AUTH_REDIRECT_ENDPOINT}${PAGE_PATH_AUTH_DEMO_CALLBACK}`
+      : `${window.location.origin}${PAGE_PATH_AUTH_DEMO_CALLBACK}`,
   ORIGIN_URL:
     releaseMode !== 'prod'
       ? `${import.meta.env.VITE_AUTH_REDIRECT_ENDPOINT}`

ui/dashboard/src/constants/routing.ts

@@ -37,5 +37,6 @@ export const PAGE_PATH_FEATURE_HISTORY = '/history';
 export const PAGE_PATH_FEATURE_CODE_REFS = '/code-references';
 
 export const PAGE_PATH_AUTH_CALLBACK = '/auth/callback';
+export const PAGE_PATH_AUTH_DEMO_CALLBACK = '/demo/auth/callback';
 export const PAGE_PATH_AUTH_SIGNIN = '/auth/signin';
 export const PAGE_PATH_DEMO_SITE = '/demo';

ui/dashboard/src/pages/audit-logs/collection-layout/audit-log-list.tsx

@@ -48,18 +48,20 @@ const AuditLogList = memo(
                 {getDateLabel(item)}
               </p>
               <div className="flex flex-col w-full gap-y-2">
-                {formattedAuditLogs.get(item)?.map((item, i) => (
-                  <AuditLogItem
-                    isExpanded={
-                      expandOrCollapseAllState === ExpandOrCollapse.EXPAND ||
-                      expandedItems.includes(item.id)
-                    }
-                    key={item.id}
-                    prefix={`line-${index}${i}`}
-                    auditLog={item}
-                    onClick={() => onToggleExpandItem(item.id)}
-                  />
-                ))}
+                {formattedAuditLogs
+                  .get(item)
+                  ?.map((item, i) => (
+                    <AuditLogItem
+                      isExpanded={
+                        expandOrCollapseAllState === ExpandOrCollapse.EXPAND ||
+                        expandedItems.includes(item.id)
+                      }
+                      key={item.id}
+                      prefix={`line-${index}${i}`}
+                      auditLog={item}
+                      onClick={() => onToggleExpandItem(item.id)}
+                    />
+                  ))}
               </div>
             </div>
           );

ui/dashboard/src/pages/demo/demo-form.tsx

@@ -12,7 +12,6 @@ import Input from 'components/input';
 interface AccessDemoForm {
   organizationName: string;
   organizationUrlCode: string;
-  email: string;
   isAgree: boolean;
 }
 
@@ -28,22 +27,20 @@ const formSchema = ({ requiredMessage, translation }: FormSchemaProps) =>
           name: translation('common:url-code')
         })
       ),
-    email: yup.string().email().required(requiredMessage),
     isAgree: yup
       .boolean()
       .isTrue(translation('message:required-agreement-terms'))
       .required(requiredMessage)
   });
 
 const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
-  const { t } = useTranslation(['auth', 'common', 'form', 'message']);
+  const { t } = useTranslation(['common', 'form', 'message']);
 
   const form = useForm({
     resolver: yupResolver(useFormSchema(formSchema)),
     defaultValues: {
       organizationName: '',
       organizationUrlCode: '',
-      email: '',
       isAgree: undefined
     },
     mode: 'onChange'
@@ -109,19 +106,6 @@ const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
             </Form.Item>
           )}
         />
-        <Form.Field
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <Form.Item>
-              <Form.Label required>{t('owner-email')}</Form.Label>
-              <Form.Control>
-                <Input placeholder={t('email')} {...field} />
-              </Form.Control>
-              <Form.Message />
-            </Form.Item>
-          )}
-        />
         <Form.Field
           control={form.control}
           name="isAgree"

ui/dashboard/src/pages/demo/index.tsx

@@ -1,9 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { authenticationUrl } from '@api/auth';
 import { useQueryDemoSiteStatus } from '@queries/demo-site-status';
 import { urls } from 'configs';
+import { setCookieState } from 'cookie';
 import { useSubmit } from 'hooks';
 import { useTranslation } from 'i18n';
+import queryString from 'query-string';
 import { cn } from 'utils/style';
 import { IconGoogle } from '@icons';
 import AuthWrapper from 'pages/signin/elements/auth-wrapper';
@@ -13,19 +16,23 @@ import FormLoading from 'elements/form-loading';
 import DemoForm from './demo-form';
 
 const AccessDemoPage = () => {
-  const { t } = useTranslation(['auth', 'common', 'form', 'message']);
+  const { t } = useTranslation(['common', 'auth', 'message']);
+  const location = useLocation();
+  const query = location.search;
 
+  const [userToken, setUserToken] = useState('');
   const { data: demoSiteStatusData, isLoading } = useQueryDemoSiteStatus();
-  const isDemoSiteEnabled = !demoSiteStatusData?.isDemoSiteEnabled;
 
-  const [isAuthenticated] = useState(false);
+  const isDemoSiteEnabled = demoSiteStatusData?.isDemoSiteEnabled;
+  const isAuthenticated = Boolean(userToken);
 
   const { onSubmit: onGoogleLoginHandler, submitting } = useSubmit(() => {
     const state = `${Date.now()}`;
+    setCookieState(state);
 
     return authenticationUrl({
       state,
-      redirectUrl: urls.AUTH_REDIRECT,
+      redirectUrl: urls.AUTH_DEMO_REDIRECT,
       type: 2 // Google auth type
     }).then(response => {
       if (response.url) {
@@ -34,14 +41,21 @@ const AccessDemoPage = () => {
     });
   });
 
+  useEffect(() => {
+    const { token } = queryString.parse(query);
+    if (token && typeof token === 'string') {
+      setUserToken(token);
+    }
+  }, [query]);
+
   return (
     <AuthWrapper>
       {isLoading ? (
         <FormLoading />
       ) : (
         <>
           <h1 className="text-gray-900 typo-head-bold-huge">
-            {t(isAuthenticated ? 'privacy-notice' : 'demo')}
+            {t(isAuthenticated ? 'auth:privacy-notice' : 'auth:demo')}
           </h1>
           <div
             className={cn('text-gray-600 typo-para-medium mt-6', {

ui/dashboard/src/pages/feature-flag-details/code-refs/code-accordion/highlighter/style.css

@@ -3,8 +3,8 @@
 }
 
 .token.boolean {
-    @apply !text-accent-pink-500;
-  }
+  @apply !text-accent-pink-500;
+}
 
 .token.comment {
   @apply !text-accent-green-600;