✨ DOP-4624 now using mongodb-chatbot-ui component's dark mode (#1137)

Co-authored-by: Caesar Bell <[email protected]>
mongodb · Jun 20, 2024 · 882d9fd · 882d9fd
1 parent fc3abcc
commit 882d9fd
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 20 deletions.
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
 import { theme } from '../../theme/docsTheme';
+import ChatbotUi from '../ChatbotUi';
 import DarkModeDropdown from './DarkModeDropdown';
 
 const ActionBarContainer = styled('div')`
@@ -11,33 +12,68 @@ const ActionBarContainer = styled('div')`
   padding-top: ${theme.size.small};
   padding-bottom: ${theme.size.small};
   padding-right: ${theme.size.large};
-  padding-left: ${theme.size.xlarge};
   width: 100%;
   position: sticky;
   top: 0;
+  flex-wrap: wrap;
   z-index: ${theme.zIndexes.header};
   background-color: ${(props) => (props.darkMode ? palette.black : palette.white)};
   border-bottom: 1px solid ${(props) => (props.darkMode ? palette.gray.dark2 : palette.gray.light2)};
+
+  @media ${theme.screenSize.mediumAndUp} {
+    & > div {
+      flex: 0 1 auto;
+    }
+  }
+
+  @media ${theme.screenSize.upToMedium} {
+    justify-content: space-between;
+    padding-right: 0;
+  }
 `;
 
-const SearchBarPlacholder = styled('div')``;
+const ActionBarSearchContainer = styled.div`
+  align-items: center;
+  display: flex;
+  width: 80%;
+
+  @media ${theme.screenSize.upToMedium} {
+    width: 100%;
+  }
+
+  @media ${theme.screenSize.upToSmall} {
+    & > div {
+      padding: ${theme.size.default} 32px;
+    }
+  }
+`;
 
 const ActionsBox = styled('div')`
   display: flex;
   align-items: center;
   column-gap: ${theme.size.default};
+
+  @media ${theme.screenSize.upToMedium} {
+    padding-left: 3rem;
+  }
+
+  @media ${theme.screenSize.upToSmall} {
+    padding-left: 2rem;
+  }
 `;
 
 const ActionBar = ({ ...props }) => {
   const { darkMode } = useDarkMode();
   return (
     <ActionBarContainer className={props.className} darkMode={darkMode}>
-      <SearchBarPlacholder>
-        <input placeholder="This will be search chatbot"></input>
-      </SearchBarPlacholder>
+      <ActionBarSearchContainer>
+        <ChatbotUi darkMode={darkMode} />
+      </ActionBarSearchContainer>
       <ActionsBox>
         <DarkModeDropdown></DarkModeDropdown>
-        Feedback Button here
+        <div>
+          <button>Feedback</button>
+        </div>
       </ActionsBox>
     </ActionBarContainer>
   );

diff --git a/src/components/ChatbotUi.js b/src/components/ChatbotUi.js
@@ -1,8 +1,8 @@
 import React, { lazy } from 'react';
+import PropTypes from 'prop-types';
 import Skeleton from 'react-loading-skeleton';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { palette } from '@leafygreen-ui/palette';
 import { theme } from '../theme/docsTheme';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { useSiteMetadata } from '../hooks/use-site-metadata';
@@ -23,6 +23,7 @@ const CONTENT_MAX_WIDTH = theme.breakpoints.xxLarge;
 const landingTemplateStyling = css`
   position: sticky;
   top: 0px;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
   display: grid;
   padding: 16px 0px 0px 0px;
   // Use landing template's grid layout to help with alignment
@@ -57,16 +58,12 @@ const StyledChatBotUiContainer = styled.div`
   padding: ${theme.size.default} 50px;
   z-index: 1;
   width: 100%;
-  background: ${palette.white};
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
+  background: inherit;
   min-height: 96px;
   align-items: center;
 
   > div {
     max-width: 862px;
-    p {
-      color: ${palette.black};
-    }
 
     @media ${theme.screenSize.upToLarge} {
       max-width: unset;
@@ -80,7 +77,8 @@ const StyledChatBotUiContainer = styled.div`
     align-items: self-end;
   }
 
-  ${({ template }) => template === 'landing' && landingTemplateStyling};
+  ${({ template }) =>
+    template === 'landing' && process.env['GATSBY_ENABLE_DARK_MODE'] !== 'true' && landingTemplateStyling};
 `;
 
 const DocsChatbot = lazy(() =>
@@ -91,7 +89,7 @@ const DocsChatbot = lazy(() =>
 
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
 
-const ChatbotUi = ({ template }) => {
+const ChatbotUi = ({ template, darkMode }) => {
   const { snootyEnv } = useSiteMetadata();
 
   const CHATBOT_SERVER_BASE_URL =
@@ -103,13 +101,21 @@ const ChatbotUi = ({ template }) => {
     <StyledChatBotUiContainer data-testid="chatbot-ui" template={template}>
       {/* We wrapped this in a Suspense. We can use this opportunity to render a loading state if we decided we want that */}
       <SuspenseHelper fallback={<Skeleton borderRadius={SKELETON_BORDER_RADIUS} height={48} />}>
-        <Chatbot maxInputCharacters={DEFAULT_MAX_INPUT} serverBaseUrl={CHATBOT_SERVER_BASE_URL}>
-          <DocsChatbot suggestedPrompts={defaultSuggestedPrompts} />
+        <Chatbot maxInputCharacters={DEFAULT_MAX_INPUT} serverBaseUrl={CHATBOT_SERVER_BASE_URL} darkMode={darkMode}>
+          <DocsChatbot suggestedPrompts={defaultSuggestedPrompts} darkMode={darkMode} />
         </Chatbot>
       </SuspenseHelper>
     </StyledChatBotUiContainer>
   );
 };
 
+ChatbotUi.defaultProps = {
+  darkMode: false,
+};
+
+ChatbotUi.prototype = {
+  darkMode: PropTypes.bool,
+};
+
 export default ChatbotUi;
 export const DEFAULT_MAX_INPUT = 300;
diff --git a/src/components/ComponentFactory.js b/src/components/ComponentFactory.js
@@ -10,7 +10,6 @@ import Card from './Card';
 import CardGroup from './Card/CardGroup';
 import Chapter from './Chapters/Chapter';
 import Chapters from './Chapters';
-import ChatbotUi from './ChatbotUi';
 import Code from './Code/Code';
 import CodeIO from './Code/CodeIO';
 import CommunityPillLink from './CommunityPillLink';
@@ -136,7 +135,6 @@ const componentMap = {
   'card-group': CardGroup,
   chapter: Chapter,
   chapters: Chapters,
-  chatbot: ChatbotUi,
   code: Code,
   'community-driver': CommunityPillLink,
   'io-code-block': CodeIO,

diff --git a/tests/unit/Chatbot.test.js b/tests/unit/Chatbot.test.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import ComponentFactory from '../../src/components/ComponentFactory';
+import ActionBar from '../../src/components/ActionBar/ActionBar';
 
 jest.mock('../../src/hooks/use-site-metadata', () => ({
   useSiteMetadata: () => ({ reposDatabase: 'pool_test' }),
 }));
 
 describe('Chatbot Ui', () => {
   it('renders the chatbot through the ComponentFactor', async () => {
-    const wrapper = render(<ComponentFactory nodeData={{ type: 'chatbot' }} />);
+    const wrapper = render(<ActionBar />);
     await waitFor(() => expect(wrapper.getByTestId('chatbot-ui')).toBeInTheDocument());
   });
 });