chore(compass-components): update ai entry text and icon, align style…

…s for multi-line COMPASS-7207 (#4855)
mongodb-js · Sep 18, 2023 · da59aa9 · da59aa9
1 parent 86b4aea
commit da59aa9
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 165 deletions.
diff --git a/...compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx b/...compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx
@@ -90,7 +90,7 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   return (
     <div className={containerStyles}>
       {isAIFeatureEnabled && showAIEntry && (
-        <AIExperienceEntry onClick={onShowAIInputClick} />
+        <AIExperienceEntry onClick={onShowAIInputClick} type="aggregation" />
       )}
       {showInsights && showCollectionScanInsight && (
         <div>

diff --git a/.../compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx b/.../compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx
@@ -91,7 +91,10 @@ export const PipelineStages: React.FunctionComponent<PipelineStagesProps> = ({
           {isAIFeatureEnabled && showAIEntry && (
             <>
               {nbsp}
-              <AIExperienceEntry onClick={onShowAIInputClick} />
+              <AIExperienceEntry
+                onClick={onShowAIInputClick}
+                type="aggregation"
+              />
             </>
           )}
         </Description>

diff --git a/packages/compass-aggregations/src/modules/pipeline-builder/pipeline-ai.ts b/packages/compass-aggregations/src/modules/pipeline-builder/pipeline-ai.ts
@@ -423,7 +423,7 @@ const aiPipelineReducer: Reducer<AIPipelineState> = (
     )
   ) {
     // If fetching query failed due to authentication error, reset the state to
-    // hide the input and show the "Ask AI" button again: this should start the
+    // hide the input and show the "Generate aggregation" button again: this should start the
     // sign in flow for the user when clicked
     if (action.networkErrorCode === 401) {
       return { ...initialState };

diff --git a/packages/compass-components/src/components/generative-ai/ai-entry-svg.tsx b/packages/compass-components/src/components/generative-ai/ai-entry-svg.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+
+export const aiEntrySVGStyles = css({
+  alignSelf: 'center',
+  path: {
+    transition: 'fill 0.16s ease-in',
+  },
+});
+
+export const aiEntrySVGDarkModeStyles = css({
+  path: {
+    fill: palette.green.dark1,
+  },
+
+  '&:hover': {
+    path: {
+      fill: palette.green.base,
+    },
+  },
+});
+
+export const aiEntrySVGLightModeStyles = css({
+  path: {
+    fill: palette.green.dark2,
+  },
+  '&:hover': {
+    path: {
+      fill: palette.green.dark1,
+    },
+  },
+});
+
+export const DEFAULT_AI_ENTRY_SIZE = 16;
+
+// Note: This is duplicated below as a string for HTML.
+const AIEntrySVG = ({
+  darkMode,
+  size = DEFAULT_AI_ENTRY_SIZE,
+}: {
+  darkMode?: boolean;
+  size?: number;
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={cx(
+      aiEntrySVGStyles,
+      darkMode ? aiEntrySVGDarkModeStyles : aiEntrySVGLightModeStyles
+    )}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.27339 2.89343L5.27506 5.88842C5.17495 6.18877 4.93927 6.42445 4.63892 6.52456L1.64393 7.52289C1.18542 7.67573 1.18542 8.32427 1.64393 8.47711L4.63892 9.47544C4.93927 9.57555 5.17495 9.81123 5.27506 10.1116L6.27339 13.1066C6.42623 13.5651 7.07477 13.5651 7.22761 13.1066L8.22594 10.1116C8.32605 9.81123 8.56173 9.57555 8.86208 9.47544L11.8571 8.47711C12.3156 8.32427 12.3156 7.67573 11.8571 7.52289L8.86208 6.52456C8.56173 6.42445 8.32605 6.18877 8.22594 5.88842L7.22761 2.89343C7.07477 2.43492 6.42623 2.43492 6.27339 2.89343Z"
+      fill="#00684A"
+    />
+    <path
+      d="M12.5469 1.17194L12.3159 1.8651C12.2158 2.16545 11.9801 2.40113 11.6797 2.50125L10.9866 2.7323C10.7573 2.80872 10.7573 3.13299 10.9866 3.20941L11.6797 3.44046C11.9801 3.54058 12.2158 3.77626 12.3159 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.2551 4.0766C13.3552 3.77626 13.5909 3.54058 13.8912 3.44046L14.5844 3.20941C14.8136 3.13299 14.8136 2.80872 14.5844 2.7323L13.8912 2.50125C13.5909 2.40113 13.3552 2.16545 13.2551 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z"
+      fill="#00684A"
+    />
+    <path
+      d="M12.5469 11.2302L12.3159 11.9234C12.2158 12.2237 11.9801 12.4594 11.6797 12.5595L10.9866 12.7906C10.7573 12.867 10.7573 13.1913 10.9866 13.2677L11.6797 13.4988C11.9801 13.5989 12.2158 13.8346 12.3159 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.2551 14.1349C13.3552 13.8346 13.5909 13.5989 13.8912 13.4988L14.5844 13.2677C14.8136 13.1913 14.8136 12.867 14.5844 12.7906L13.8912 12.5595C13.5909 12.4594 13.3552 12.2237 13.2551 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z"
+      fill="#00684A"
+    />
+  </svg>
+);
+
+// Note: This is duplicated above for react.
+const getAIEntrySVGString = () => `<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M6.27339 2.89343L5.27506 5.88842C5.17495 6.18877 4.93927 6.42445 4.63892 6.52456L1.64393 7.52289C1.18542 7.67573 1.18542 8.32427 1.64393 8.47711L4.63892 9.47544C4.93927 9.57555 5.17495 9.81123 5.27506 10.1116L6.27339 13.1066C6.42623 13.5651 7.07477 13.5651 7.22761 13.1066L8.22594 10.1116C8.32605 9.81123 8.56173 9.57555 8.86208 9.47544L11.8571 8.47711C12.3156 8.32427 12.3156 7.67573 11.8571 7.52289L8.86208 6.52456C8.56173 6.42445 8.32605 6.18877 8.22594 5.88842L7.22761 2.89343C7.07477 2.43492 6.42623 2.43492 6.27339 2.89343Z" fill="#00684A"/>
+  <path d="M12.5469 1.17194L12.3159 1.8651C12.2158 2.16545 11.9801 2.40113 11.6797 2.50125L10.9866 2.7323C10.7573 2.80872 10.7573 3.13299 10.9866 3.20941L11.6797 3.44046C11.9801 3.54058 12.2158 3.77626 12.3159 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.2551 4.0766C13.3552 3.77626 13.5909 3.54058 13.8912 3.44046L14.5844 3.20941C14.8136 3.13299 14.8136 2.80872 14.5844 2.7323L13.8912 2.50125C13.5909 2.40113 13.3552 2.16545 13.2551 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill="#00684A"/>
+  <path d="M12.5469 11.2302L12.3159 11.9234C12.2158 12.2237 11.9801 12.4594 11.6797 12.5595L10.9866 12.7906C10.7573 12.867 10.7573 13.1913 10.9866 13.2677L11.6797 13.4988C11.9801 13.5989 12.2158 13.8346 12.3159 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.2551 14.1349C13.3552 13.8346 13.5909 13.5989 13.8912 13.4988L14.5844 13.2677C14.8136 13.1913 14.8136 12.867 14.5844 12.7906L13.8912 12.5595C13.5909 12.4594 13.3552 12.2237 13.2551 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill="#00684A"/>
+</svg>
+`;
+
+export { getAIEntrySVGString, AIEntrySVG };
diff --git a/packages/compass-components/src/components/generative-ai/ai-experience-entry.tsx b/packages/compass-components/src/components/generative-ai/ai-experience-entry.tsx
@@ -4,12 +4,12 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import {
-  RobotSVG,
-  getRobotSVGString,
-  robotSVGDarkModeStyles,
-  robotSVGLightModeStyles,
-  robotSVGStyles,
-} from './robot-svg';
+  AIEntrySVG,
+  getAIEntrySVGString,
+  aiEntrySVGDarkModeStyles,
+  aiEntrySVGLightModeStyles,
+  aiEntrySVGStyles,
+} from './ai-entry-svg';
 import { focusRing } from '../../hooks/use-focus-ring';
 import { useDarkMode } from '../../hooks/use-theme';
 
@@ -36,7 +36,7 @@ const aiEntryStyles = css(
     gap: `${spacing[1]}px`,
 
     transition: 'color 0.16s ease-in',
-    rect: {
+    path: {
       transition: 'fill 0.16s ease-in',
     },
 
@@ -45,40 +45,42 @@ const aiEntryStyles = css(
     },
   },
   focusRing,
-  robotSVGStyles
+  aiEntrySVGStyles
 );
 
 const aiEntryDarkModeStyles = css(
   {
     color: palette.green.dark1,
     '&:hover': {
-      rect: {
+      path: {
         fill: palette.green.base,
       },
       color: palette.green.base,
     },
   },
-  robotSVGDarkModeStyles
+  aiEntrySVGDarkModeStyles
 );
 
 const aiEntryLightModeStyles = css(
   {
     color: palette.green.dark2,
     '&:hover': {
-      rect: {
+      path: {
         fill: palette.green.dark1,
       },
       color: palette.green.dark1,
     },
   },
-  robotSVGLightModeStyles
+  aiEntrySVGLightModeStyles
 );
 
 function AIExperienceEntry({
   'data-testid': dataTestId,
+  type,
   onClick,
 }: {
   ['data-testid']?: string;
+  type: 'aggregation' | 'query';
   onClick: () => void;
 }) {
   const darkMode = useDarkMode();
@@ -92,8 +94,8 @@ function AIExperienceEntry({
       onClick={onClick}
       data-testid={dataTestId}
     >
-      Ask AI
-      <RobotSVG />
+      Generate {type}
+      <AIEntrySVG darkMode={darkMode} />
     </button>
   );
 }
@@ -115,7 +117,7 @@ function createAIPlaceholderHTMLPlaceholder({
   containerEl.appendChild(placeholderTextEl);
 
   const aiButtonEl = document.createElement('button');
-  aiButtonEl.setAttribute('data-testid', 'open-ai-query-ask-ai-button');
+  aiButtonEl.setAttribute('data-testid', 'open-ai-query-entry-button');
   // By default placeholder container will have pointer events disabled
   aiButtonEl.style.pointerEvents = 'auto';
   // We stop mousedown from propagating and preventing default behavior to avoid
@@ -136,9 +138,9 @@ function createAIPlaceholderHTMLPlaceholder({
     darkMode ? aiEntryDarkModeStyles : aiEntryLightModeStyles
   );
 
-  const robotIconSVG = `<span>Ask AI</span>
-${getRobotSVGString()}`;
-  aiButtonEl.innerHTML = robotIconSVG;
+  const aiButtonContent = `<span>Generate query</span>
+${getAIEntrySVGString()}`;
+  aiButtonEl.innerHTML = aiButtonContent;
 
   containerEl.appendChild(aiButtonEl);
 

diff --git a/packages/compass-components/src/components/generative-ai/generative-ai-input.tsx b/packages/compass-components/src/components/generative-ai/generative-ai-input.tsx
@@ -7,7 +7,7 @@ import { Button, Icon, IconButton, TextInput } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
 import { ErrorSummary } from '../error-warning-summary';
 import { SpinLoader } from '../loader';
-import { DEFAULT_ROBOT_SIZE, RobotSVG } from './robot-svg';
+import { DEFAULT_AI_ENTRY_SIZE, AIEntrySVG } from './ai-entry-svg';
 import { AIFeedback } from './ai-feedback';
 import { AIGuideCue } from './ai-guide-cue';
 import { focusRing } from '../../hooks/use-focus-ring';
@@ -101,7 +101,7 @@ const buttonHighlightLightModeStyles = css({
 const loaderContainerStyles = css({
   padding: spacing[1],
   display: 'inline-flex',
-  width: DEFAULT_ROBOT_SIZE + spacing[2],
+  width: DEFAULT_AI_ENTRY_SIZE + spacing[2],
   justifyContent: 'space-around',
 });
 
@@ -114,10 +114,17 @@ const buttonResetStyles = css({
 });
 
 const closeAIButtonStyles = css(buttonResetStyles, focusRing, {
+  height: spacing[4] + spacing[1],
+  display: 'flex',
+  alignItems: 'center',
   padding: spacing[1],
   position: 'absolute',
 });
 
+const aiEntryContainerStyles = css({
+  display: 'flex',
+});
+
 const closeText = 'Close AI Helper';
 
 const SubmitArrowSVG = ({ darkMode }: { darkMode?: boolean }) => (
@@ -245,26 +252,6 @@ function GenerativeAIInput({
             }
             onKeyDown={onTextInputKeyDown}
           />
-          <button
-            className={closeAIButtonStyles}
-            data-testid="close-ai-button"
-            aria-label={closeText}
-            title={closeText}
-            onClick={() => onClose()}
-          >
-            <AIGuideCue
-              showGuideCue={isAggregationGeneratedFromQuery}
-              onCloseGuideCue={() => {
-                onResetIsAggregationGeneratedFromQuery?.();
-              }}
-              refEl={guideCueRef}
-              title="Aggregation generated"
-              description="Your query requires stages from MongoDB's aggregation framework. Continue to work on it in our Aggregation Pipeline Builder"
-            />
-            <span ref={guideCueRef}>
-              <RobotSVG />
-            </span>
-          </button>
           <div className={floatingButtonsContainerStyles}>
             {isFetching ? (
               <div className={loaderContainerStyles}>
@@ -328,6 +315,26 @@ function GenerativeAIInput({
               )}
             </Button>
           </div>
+          <button
+            className={closeAIButtonStyles}
+            data-testid="close-ai-button"
+            aria-label={closeText}
+            title={closeText}
+            onClick={() => onClose()}
+          >
+            <AIGuideCue
+              showGuideCue={isAggregationGeneratedFromQuery}
+              onCloseGuideCue={() => {
+                onResetIsAggregationGeneratedFromQuery?.();
+              }}
+              refEl={guideCueRef}
+              title="Aggregation generated"
+              description="Your query requires stages from MongoDB's aggregation framework. Continue to work on it in our Aggregation Pipeline Builder"
+            />
+            <span className={aiEntryContainerStyles} ref={guideCueRef}>
+              <AIEntrySVG darkMode={darkMode} />
+            </span>
+          </button>
         </div>
         {didSucceed && onSubmitFeedback && (
           <AIFeedback onSubmitFeedback={onSubmitFeedback} />