add appName for the assistant

Author: lerouxb

packages/compass-assistant/src/compass-assistant-drawer.tsx

@@ -35,9 +35,10 @@ const assistantTitleTextStyles = css({
  * it's within an AssistantProvider.
  */
 export const CompassAssistantDrawer: React.FunctionComponent<{
+  appName: string;
   autoOpen?: boolean;
   hasNonGenuineConnections?: boolean;
-}> = ({ autoOpen, hasNonGenuineConnections = false }) => {
+}> = ({ appName, autoOpen, hasNonGenuineConnections = false }) => {
   const chat = useContext(AssistantContext);
   const { clearChat } = useContext(AssistantActionsContext);
 
@@ -68,8 +69,6 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
     );
   }
 
-  const appName = 'Compass'; // TODO
-
   return (
     <DrawerSection
       id={ASSISTANT_DRAWER_ID}
@@ -97,7 +96,7 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
       guideCue={{
         cueId: 'assistant-drawer',
         title: 'Introducing MongoDB Assistant',
-        description: `AI-powered assistant to intelligently guide you through your database tasks. Get expert MongoDB help and streamline your workflow directly within ${appName}`,
+        description: `AI-powered assistant to intelligently guide you through your database tasks. Get expert MongoDB help and streamline your workflow directly within ${appName}.`,
         buttonText: 'Got it',
         tooltipAlign: 'left',
         tooltipJustify: 'start',

packages/compass-assistant/src/compass-assistant-provider.spec.tsx

@@ -89,6 +89,7 @@ const TestComponent: React.FunctionComponent<{
         <DrawerAnchor>
           <div data-testid="provider-children">Provider children</div>
           <CompassAssistantDrawer
+            appName="Compass"
             autoOpen={autoOpen}
             hasNonGenuineConnections={hasNonGenuineConnections}
           />

packages/compass-web/src/compass-assistant-drawer.tsx

@@ -6,7 +6,11 @@ import { CompassAssistantDrawer } from '@mongodb-js/compass-assistant';
 // TODO(COMPASS-7830): This is a temporary solution to pass the
 // hasNonGenuineConnections prop to the CompassAssistantDrawer as otherwise
 // we end up with a circular dependency.
-export function CompassAssistantDrawerWithConnections() {
+export function CompassAssistantDrawerWithConnections({
+  appName,
+}: {
+  appName: string;
+}) {
   // Check for non-genuine connections
   const activeConnectionIds = useConnectionIds(
     (conn) =>
@@ -15,6 +19,7 @@ export function CompassAssistantDrawerWithConnections() {
   );
   return (
     <CompassAssistantDrawer
+      appName={appName}
       hasNonGenuineConnections={activeConnectionIds.length > 0}
     />
   );

packages/compass-web/src/entrypoint.tsx

@@ -305,7 +305,7 @@ function CompassWorkspace({
                   <CreateNamespacePlugin></CreateNamespacePlugin>
                   <DropNamespacePlugin></DropNamespacePlugin>
                   <RenameCollectionPlugin></RenameCollectionPlugin>
-                  <CompassAssistantDrawerWithConnections />
+                  <CompassAssistantDrawerWithConnections appName="Data Explorer" />
                 </>
               );
             }}

packages/compass/src/app/components/compass-assistant-drawer.tsx

@@ -6,7 +6,11 @@ import { CompassAssistantDrawer } from '@mongodb-js/compass-assistant';
 // TODO(COMPASS-7830): This is a temporary solution to pass the
 // hasNonGenuineConnections prop to the CompassAssistantDrawer as otherwise
 // we end up with a circular dependency.
-export function CompassAssistantDrawerWithConnections() {
+export function CompassAssistantDrawerWithConnections({
+  appName,
+}: {
+  appName: string;
+}) {
   // Check for non-genuine connections
   const activeConnectionIds = useConnectionIds(
     (conn) =>
@@ -15,6 +19,7 @@ export function CompassAssistantDrawerWithConnections() {
   );
   return (
     <CompassAssistantDrawer
+      appName={appName}
       hasNonGenuineConnections={activeConnectionIds.length > 0}
     />
   );

packages/compass/src/app/components/workspace.tsx

@@ -112,7 +112,7 @@ export default function Workspace({
               <CreateNamespacePlugin></CreateNamespacePlugin>
               <DropNamespacePlugin></DropNamespacePlugin>
               <RenameCollectionPlugin></RenameCollectionPlugin>
-              <CompassAssistantDrawerWithConnections />
+              <CompassAssistantDrawerWithConnections appName="Compass" />
             </>
           )}
         ></WorkspacesPlugin>