fix(search-indexes): ui fixes COMPASS-7304 (#4982)

Author: mabaasit

package-lock.json

@@ -46,6 +46,7 @@
     "@leafygreen-ui/hooks": "^7.3.3",
     "@leafygreen-ui/icon": "^11.21.0",
     "@leafygreen-ui/icon-button": "^15.0.3",
+    "@leafygreen-ui/info-sprinkle": "^1.0.0",
     "@leafygreen-ui/inline-definition": "^6.0.0",
     "@leafygreen-ui/leafygreen-provider": "^3.1.0",
     "@leafygreen-ui/lib": "^10.0.0",

packages/compass-components/package.json

@@ -19,6 +19,7 @@ import {
   MongoDBLogo,
 } from '@leafygreen-ui/logo';
 import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
+import { InfoSprinkle } from '@leafygreen-ui/info-sprinkle';
 
 // If a leafygreen Menu (and therefore MenuItems) makes its way into a <form>,
 // clicking on a menu item will submit that form. This is because it uses a button
@@ -144,4 +145,5 @@ export {
   Link,
   Description,
   SearchInput,
+  InfoSprinkle,
 };

packages/compass-components/src/components/leafygreen.tsx

@@ -150,6 +150,7 @@ export const IndexesToolbar: React.FunctionComponent<IndexesToolbarProps> = ({
             )}
             {isSearchManagementActive && (
               <SegmentedControl
+                size="small"
                 onChange={(evt) => onChangeIndexView(evt as IndexView)}
                 className={alignSelfEndStyles}
                 label="Viewing"

packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx

@@ -4,48 +4,24 @@ import React, { useState, useCallback } from 'react';
 import {
   Select,
   Option,
-  Icon,
   css,
-  Tooltip,
+  spacing,
+  InfoSprinkle,
+  Label,
 } from '@mongodb-js/compass-components';
 
-const dropdownLabelStyles = css({
+const containerStyles = css({
   display: 'flex',
-  pointerEvents: 'auto', // leafy green specifies none in the label, which is wrong
+  flexDirection: 'column',
+  gap: spacing[1],
 });
 
-const fillParentStyles = css({
-  flexGrow: 1,
+const dropdownLabelStyles = css({
+  display: 'flex',
+  gap: spacing[1],
+  alignItems: 'center',
 });
 
-type SearchIndexTemplateDropdownLabelProps = {
-  label: string;
-  tooltip: string;
-};
-
-const SearchIndexTemplateDropdownLabel: React.FunctionComponent<
-  SearchIndexTemplateDropdownLabelProps
-> = ({ label, tooltip }) => (
-  <div className={dropdownLabelStyles}>
-    <span className={fillParentStyles}>{label}</span>
-    <Tooltip
-      align="right"
-      triggerEvent="hover"
-      trigger={({ children, ...props }) => (
-        <div {...props}>
-          <Icon
-            data-testid="search-template-info-icon"
-            glyph="InfoWithCircle"
-          />
-          {children}
-        </div>
-      )}
-    >
-      {tooltip}
-    </Tooltip>
-  </div>
-);
-
 type SearchIndexTemplateDropdownProps = {
   tooltip: string;
   onTemplate: (template: SearchTemplate) => void;
@@ -65,20 +41,24 @@ export const SearchIndexTemplateDropdown: React.FunctionComponent<
   );
 
   return (
-    <Select
-      value={templateValue}
-      allowDeselect={false}
-      onChange={onChooseTemplate}
-      /* @ts-expect-error The label can be any React component, however, the type definition forces a string. */
-      label={
-        <SearchIndexTemplateDropdownLabel label="Template" tooltip={tooltip} />
-      }
-    >
-      {ATLAS_SEARCH_TEMPLATES.map((template, idx) => (
-        <Option key={idx} value={`${idx}`}>
-          {template.name}
-        </Option>
-      ))}
-    </Select>
+    <div className={containerStyles}>
+      <div className={dropdownLabelStyles}>
+        <Label htmlFor="template-dropdown">Template</Label>
+        <InfoSprinkle align="right">{tooltip}</InfoSprinkle>
+      </div>
+      <Select
+        id="template-dropdown"
+        aria-labelledby="Template"
+        value={templateValue}
+        allowDeselect={false}
+        onChange={onChooseTemplate}
+      >
+        {ATLAS_SEARCH_TEMPLATES.map((template, idx) => (
+          <Option key={idx} value={`${idx}`}>
+            {template.name}
+          </Option>
+        ))}
+      </Select>
+    </div>
   );
 };

packages/compass-indexes/src/components/search-index-template-dropdown/index.tsx

@@ -58,7 +58,6 @@ const templateToolbarStyles = css({
   display: 'flex',
   flexDirection: 'row',
   gap: spacing[3],
-  padding: spacing[1],
 });
 
 const templateToolbarTextDescriptionStyles = css({
@@ -72,13 +71,17 @@ const templateToolbarDropdownStyles = css({
 const formContainerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[3],
+  gap: spacing[2],
   overflow: 'auto',
+  // This is to accomodate for the focus ring that is visible
+  // when the index name input is focussed.
   padding: spacing[1],
 });
 
-const editorStyles = css({
-  marginTop: spacing[2],
+const formFieldContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[1],
 });
 
 const footerStyles = css({
@@ -227,7 +230,7 @@ export const BaseSearchIndexModal: React.FunctionComponent<
         <div className={formContainerStyles}>
           {mode === 'create' && (
             <>
-              <section>
+              <section className={formFieldContainerStyles}>
                 <Label htmlFor="name-of-search-index">
                   Name of Search Index
                 </Label>
@@ -251,45 +254,46 @@ export const BaseSearchIndexModal: React.FunctionComponent<
               <HorizontalRule />
             </>
           )}
-          <section className={templateToolbarStyles}>
-            <div className={templateToolbarTextDescriptionStyles}>
-              <Label htmlFor="definition-of-search-index">
-                Index Definition
-              </Label>
-              <br />
-              {mode === 'create' && (
-                <Body>
-                  By default, search indexes will have the following search
-                  configurations. You can refine this later.
-                </Body>
-              )}
-              <Link
-                href="https://www.mongodb.com/docs/atlas/atlas-search/tutorial/"
-                target="_blank"
-                hideExternalIcon={true}
-              >
-                View Atlas Search tutorials{' '}
-                <Icon size="small" glyph="OpenNewTab"></Icon>
-              </Link>
-            </div>
-            <div className={templateToolbarDropdownStyles}>
-              <SearchIndexTemplateDropdown
-                tooltip="Selecting a new template will replace your existing index definition in the code editor."
-                onTemplate={onChangeTemplate}
-              />
-            </div>
-          </section>
-          <CodemirrorMultilineEditor
-            ref={editorRef}
-            id="definition-of-search-index"
-            data-testid="definition-of-search-index"
-            className={editorStyles}
-            text={indexDefinition}
-            annotations={annotations}
-            onChangeText={onSearchIndexDefinitionChanged}
-            minLines={16}
-            completer={completer}
-          />
+          <div className={formFieldContainerStyles}>
+            <section className={templateToolbarStyles}>
+              <div className={templateToolbarTextDescriptionStyles}>
+                <Label htmlFor="definition-of-search-index">
+                  Index Definition
+                </Label>
+                <br />
+                {mode === 'create' && (
+                  <Body>
+                    By default, search indexes will have the following search
+                    configurations. You can refine this later.
+                  </Body>
+                )}
+                <Link
+                  href="https://www.mongodb.com/docs/atlas/atlas-search/tutorial/"
+                  target="_blank"
+                  hideExternalIcon={true}
+                >
+                  View Atlas Search tutorials{' '}
+                  <Icon size="small" glyph="OpenNewTab"></Icon>
+                </Link>
+              </div>
+              <div className={templateToolbarDropdownStyles}>
+                <SearchIndexTemplateDropdown
+                  tooltip="Selecting a new template will replace your existing index definition in the code editor."
+                  onTemplate={onChangeTemplate}
+                />
+              </div>
+            </section>
+            <CodemirrorMultilineEditor
+              ref={editorRef}
+              id="definition-of-search-index"
+              data-testid="definition-of-search-index"
+              text={indexDefinition}
+              annotations={annotations}
+              onChangeText={onSearchIndexDefinitionChanged}
+              minLines={16}
+              completer={completer}
+            />
+          </div>
         </div>
         {parsingError && <WarningSummary warnings={parsingError.message} />}
         {!parsingError && error && <ErrorSummary errors={error} />}

packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx

@@ -452,7 +452,7 @@ export const createIndex = (
       title: `Your index ${indexName} is in progress.`,
       dismissible: true,
       timeout: 5000,
-      variant: 'success',
+      variant: 'progress',
     });
 
     void dispatch(switchToSearchIndexes());
@@ -494,7 +494,7 @@ export const updateIndex = (
         title: `Your index ${indexName} is being updated.`,
         dismissible: true,
         timeout: 5000,
-        variant: 'success',
+        variant: 'progress',
       });
       void dispatch(fetchIndexes(SearchIndexesStatuses.REFRESHING));
     } catch (e) {
@@ -633,7 +633,7 @@ export const dropSearchIndex = (
         title: `Your index ${name} is being deleted.`,
         dismissible: true,
         timeout: 5000,
-        variant: 'success',
+        variant: 'progress',
       });
       void dispatch(fetchIndexes(SearchIndexesStatuses.REFRESHING));
     } catch (e) {