#RI-5422 - add sign in

redisinsight/ui/src/components/config/Config.tsx

@@ -2,11 +2,16 @@ import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
 import { isNumber } from 'lodash'
-import { BrowserStorageItem } from 'uiSrc/constants'
+import { BrowserStorageItem, FeatureFlags } from 'uiSrc/constants'
 import { BuildType } from 'uiSrc/constants/env'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
 import { localStorageService } from 'uiSrc/services'
-import { fetchFeatureFlags, setFeaturesToHighlight, setOnboarding } from 'uiSrc/slices/app/features'
+import {
+  appFeatureFlagsFeaturesSelector,
+  fetchFeatureFlags,
+  setFeaturesToHighlight,
+  setOnboarding
+} from 'uiSrc/slices/app/features'
 import { fetchNotificationsAction } from 'uiSrc/slices/app/notifications'
 
 import {
@@ -31,11 +36,13 @@ import { fetchGuideLinksAction } from 'uiSrc/slices/content/guide-links'
 import { setCapability } from 'uiSrc/slices/app/context'
 
 import favicon from 'uiSrc/assets/favicon.ico'
+import { fetchProfile } from 'uiSrc/slices/oauth/cloud'
 
 const SETTINGS_PAGE_PATH = '/settings'
 const Config = () => {
   const serverInfo = useSelector(appServerInfoSelector)
   const { config, spec } = useSelector(userSettingsSelector)
+  const { [FeatureFlags.cloudSso]: cloudSsoFeature } = useSelector(appFeatureFlagsFeaturesSelector)
   const { pathname } = useLocation()
 
   const dispatch = useDispatch()
@@ -51,6 +58,10 @@ const Config = () => {
     dispatch(fetchContentRecommendations())
     dispatch(fetchGuideLinksAction())
 
+    if (cloudSsoFeature?.flag) {
+      dispatch(fetchProfile())
+    }
+
     // get tutorials
     dispatch(fetchTutorials())
     dispatch(fetchCustomTutorials())

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/AiAssistant.tsx

@@ -1,16 +1,21 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 
-import { aiAssistantChatSelector } from 'uiSrc/slices/panels/aiAssistant'
+import { oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud'
+import { FeatureFlags } from 'uiSrc/constants'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { WelcomeAiAssistant, Chat } from './components'
 import styles from './styles.module.scss'
 
 const AiAssistant = () => {
-  const { id } = useSelector(aiAssistantChatSelector)
+  const { data } = useSelector(oauthCloudUserSelector)
+  const { [FeatureFlags.cloudSso]: cloudSsoFeature } = useSelector(appFeatureFlagsFeaturesSelector)
+
+  const isShowAuth = cloudSsoFeature?.flag && !data
 
   return (
     <div className={styles.wrapper}>
-      {id ? (<Chat />) : (<WelcomeAiAssistant />)}
+      {isShowAuth ? (<WelcomeAiAssistant />) : (<Chat />)}
     </div>
   )
 }

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/components/chat-form/ChatForm.tsx

@@ -56,7 +56,6 @@ const ChatForm = (props: Props) => {
         className={styles.textarea}
         value={value}
         onChange={handleChange}
-        style={{ height: textAreaRef.current?.scrollHeight || 0 }}
       />
       <EuiButton
         fill

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/components/chat-form/styles.module.scss

@@ -2,9 +2,10 @@
   position: relative;
 
   .textarea {
+    height: 0;
     resize: none !important;
-    background-color: #171717 !important;
-    border: 1px solid #3D3D3D !important;
+    background-color: var(--browserTableRowEven) !important;
+    border: 1px solid var(--separatorColor) !important;
 
     padding: 8px 40px 8px 10px;
     scroll-padding-bottom: 8px;
@@ -19,7 +20,7 @@
     transition: border-color ease .3s;
 
     &:focus {
-      border-color: #8BA2FF !important;
+      border-color: var(--euiColorPrimary) !important;
     }
   }
 

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/components/chat-history/styles.module.scss

@@ -13,6 +13,16 @@ $delay: .13s;
     .euiMarkdownFormat {
       font-family: 'Graphik', sans-serif;
       font-size: 12px;
+
+      .euiCodeBlock {
+        background: var(--browserTableRowEven);
+        font-size: 12px !important;
+
+
+        &__code {
+          font-family: 'Graphik', sans-serif;
+        }
+      }
     }
   }
 }
@@ -40,12 +50,12 @@ $delay: .13s;
 
 .answer {
   align-self: flex-start;
-  background-color: #2B2B2B;
+  background-color: var(--euiColorLightestShade);
 }
 
 .question {
   align-self: flex-end;
-  background-color: #292F47;
+  background-color: var(--insightsTriggerBgColor);
 }
 
 

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/components/chat/Chat.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { EuiButtonEmpty } from '@elastic/eui'
 import {
   aiAssistantChatSelector,
-  askAssistantChatbot,
+  askAssistantChatbot, createAssistantChatAction,
   getAssistantChatHistoryAction,
   removeAssistantChatAction
 } from 'uiSrc/slices/panels/aiAssistant'
@@ -31,8 +31,17 @@ const Chat = () => {
   const handleSubmit = (message: string) => {
     scrollToBottom('smooth')
 
+    if (!id) {
+      dispatch(createAssistantChatAction((chatId) => sendChatMessage(chatId, message)))
+      return
+    }
+
+    sendChatMessage(id, message)
+  }
+
+  const sendChatMessage = (chatId: string, message: string) => {
     dispatch(askAssistantChatbot(
-      id,
+      chatId,
       message,
       {
         onMessage: (message: any) => {
@@ -67,20 +76,18 @@ const Chat = () => {
 
   return (
     <div className={styles.wrapper}>
-      {!!messages?.length && (
-        <div className={styles.header}>
-          <span />
-          <EuiButtonEmpty
-            disabled={!!progressingMessage}
-            iconType="eraser"
-            size="xs"
-            onClick={onClearSession}
-            className={styles.startSessionBtn}
-          >
-            Restart Session
-          </EuiButtonEmpty>
-        </div>
-      )}
+      <div className={styles.header}>
+        <span />
+        <EuiButtonEmpty
+          disabled={!!progressingMessage || !messages?.length}
+          iconType="eraser"
+          size="xs"
+          onClick={onClearSession}
+          className={styles.startSessionBtn}
+        >
+          Restart Session
+        </EuiButtonEmpty>
+      </div>
       <div className={styles.chatHistory}>
         <ChatHistory
           progressingMessage={progressingMessage}

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/components/chat/styles.module.scss

@@ -7,7 +7,7 @@
   flex-direction: column;
 
   .header {
-    background-color: var(--tableLightBorderColor);
+    background-color: var(--browserTableRowEven);
     flex-shrink: 0;
 
     display: flex;

redisinsight/ui/src/components/database-side-panels/panels/ai-assistant/components/welcome-ai-assistant/WelcomeAiAssistant.tsx

@@ -1,34 +1,27 @@
 import React from 'react'
 import { EuiImage, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'
-import { useDispatch } from 'react-redux'
 import AiRobotImg from 'uiSrc/assets/img/ai/ai-robot.svg'
 
-import { createAssistantChatAction } from 'uiSrc/slices/panels/aiAssistant'
+import { OAuthSocial } from 'uiSrc/components'
 import styles from './styles.module.scss'
 
-const WelcomeAiAssistant = () => {
-  const dispatch = useDispatch()
-
-  const handleStartChat = () => {
-    dispatch(createAssistantChatAction())
-  }
-
-  return (
-    <div className={styles.wrapper}>
-      <EuiTitle><span>Sign in</span></EuiTitle>
-      <EuiSpacer size="m" />
-      <EuiText color="subdued">
-        Inquire about any aspect of Redis that piques your interest, and receive instant answers!
-      </EuiText>
-
-      <EuiSpacer size="l" />
-
-      <button onClick={handleStartChat} type="button">
-        <EuiImage src={AiRobotImg} alt="ai chat" />
-      </button>
-
-    </div>
-  )
-}
+const WelcomeAiAssistant = () => (
+  <div className={styles.wrapper}>
+    <EuiTitle><span>Use Redis AI expert</span></EuiTitle>
+    <EuiSpacer size="m" />
+    <EuiText color="subdued" style={{ lineHeight: '1.35' }}>
+      Explore Redis effortlessly, starting now!
+      <br />
+      Ask any question and get instant answers with our powerful chatbot.
+    </EuiText>
+
+    <EuiSpacer size="l" />
+    <EuiImage src={AiRobotImg} alt="ai chat" />
+    <EuiSpacer size="l" />
+
+    <EuiTitle size="xs"><h5 style={{ marginBottom: '-18px' }}>Sign in with</h5></EuiTitle>
+    <OAuthSocial hideTitle />
+  </div>
+)
 
 export default WelcomeAiAssistant

redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.spec.tsx

@@ -32,7 +32,7 @@ jest.mock('uiSrc/slices/oauth/cloud', () => ({
 jest.mock('uiSrc/slices/instances/cloud', () => ({
   ...jest.requireActual('uiSrc/slices/instances/cloud'),
   cloudSelector: jest.fn().mockReturnValue({
-    isAutodiscoverySSO: true,
+    ssoFlow: 'import',
   }),
 }))
 
@@ -78,8 +78,8 @@ describe('OAuthSelectAccountDialog', () => {
       eventData: {
         accountsCount: 2,
       }
-    })
-    sendEventTelemetry.mockRestore()
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
   it('click on submit btn should call getUserInfo', async () => {
@@ -109,8 +109,8 @@ describe('OAuthSelectAccountDialog', () => {
         accountsCount: 2,
         action: 'import'
       }
-    })
-    sendEventTelemetry.mockRestore()
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
   })
   it('on error in activeAccount telemetry should be sent', async () => {
     const sendEventTelemetryMock = jest.fn();
@@ -141,7 +141,7 @@ describe('OAuthSelectAccountDialog', () => {
         error: errorMessage,
         accountsCount: 2,
       }
-    })
-    sendEventTelemetry.mockRestore()
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
   })
 })

redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx

@@ -38,12 +38,14 @@ interface FormValues {
 }
 
 const OAuthSelectAccountDialog = () => {
-  const { isAutodiscoverySSO, isRecommendedSettings } = useSelector(cloudSelector)
+  const { ssoFlow, isRecommendedSettings } = useSelector(cloudSelector)
   const { accounts = [], currentAccountId } = useSelector(oauthCloudUserDataSelector) ?? {}
   const { isOpenSelectAccountDialog } = useSelector(oauthCloudSelector)
   const { loading } = useSelector(oauthCloudUserSelector)
   const { loading: plansLoadings } = useSelector(oauthCloudPlanSelector)
 
+  const isAutodiscoverySSO = ssoFlow === 'import'
+
   const history = useHistory()
   const dispatch = useDispatch()
 

redisinsight/ui/src/components/oauth/oauth-sign-in-dialog/OAuthSignInDialog.tsx

@@ -3,15 +3,14 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiLink,
   EuiModal,
   EuiModalBody,
   EuiText,
   EuiTitle,
 } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { OAuthSocial } from 'uiSrc/components'
+import { OAuthSocial, OAuthSocialType } from 'uiSrc/components'
 import { setSignInDialogState, oauthCloudSelector } from 'uiSrc/slices/oauth/cloud'
 
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
@@ -21,7 +20,9 @@ import styles from './styles.module.scss'
 
 const OAuthSignInDialog = () => {
   const { isOpenSignInDialog } = useSelector(oauthCloudSelector)
-  const { isAutodiscoverySSO } = useSelector(cloudSelector)
+  const { ssoFlow } = useSelector(cloudSelector)
+
+  const isAutodiscoverySSO = ssoFlow === 'import'
 
   const dispatch = useDispatch()
 
@@ -69,7 +70,7 @@ const OAuthSignInDialog = () => {
               Use Redis as an all-in-one database <br /> and cache like never before
             </EuiText>
             <h4 className={styles.socialSubTitle}>Sign up with</h4>
-            <OAuthSocial />
+            <OAuthSocial type={OAuthSocialType.Create} />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiModalBody>