feat: Open create index modal with query context CLOUDP-311788 (#6904)

Author: waltertan12

package-lock.json

@@ -39,6 +39,7 @@
     "@leafygreen-ui/button": "^22.0.2",
     "@leafygreen-ui/card": "^12.0.2",
     "@leafygreen-ui/checkbox": "^14.0.2",
+    "@leafygreen-ui/chip": "^3.0.12",
     "@leafygreen-ui/code": "^16.0.2",
     "@leafygreen-ui/combobox": "^11.0.2",
     "@leafygreen-ui/confirmation-modal": "^6.0.2",

packages/compass-components/package.json

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Chip, Icon } from './leafygreen';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { fontWeights } from '@leafygreen-ui/tokens';
+import { palette } from '@leafygreen-ui/palette';
+import { useDarkMode } from '../hooks/use-theme';
+
+const chipLightModeStyles = css({
+  '--chipBackgroundColor': palette.blue.light3,
+  '--chipBorderColor': palette.blue.light2,
+  '--chipColor': palette.blue.dark1,
+});
+
+const chipDarkModeStyles = css({
+  '--chipBackgroundColor': palette.blue.dark2,
+  '--chipBorderColor': palette.blue.dark1,
+  '--chipColor': palette.blue.light2,
+});
+
+const chipStyles = css({
+  fontWeight: fontWeights.bold,
+  textTransform: 'uppercase',
+  color: 'var(--chipColor)',
+  backgroundColor: 'var(--chipBackgroundColor)',
+});
+
+export const InsightsChip = () => {
+  const isDarkMode = useDarkMode();
+  return (
+    <Chip
+      className={cx(
+        isDarkMode
+          ? [chipDarkModeStyles, chipStyles]
+          : [chipLightModeStyles, chipStyles]
+      )}
+      label="insight"
+      glyph={<Icon glyph="Bulb" />}
+    />
+  );
+};

packages/compass-components/src/components/insights-chip.tsx

@@ -12,6 +12,7 @@ import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
 import { default as LeafyGreenIcon } from '@leafygreen-ui/icon';
 import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
 export type { GlyphName } from '@leafygreen-ui/icon';
+import { Chip } from '@leafygreen-ui/chip';
 import {
   AtlasNavGraphic,
   MongoDBLogoMark,
@@ -142,6 +143,7 @@ export {
   Banner,
   Card,
   Checkbox,
+  Chip,
   Code,
   ConfirmationModal,
   ExpandedContent,

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

@@ -212,3 +212,4 @@ export {
 } from './components/virtual-list';
 export { SelectList } from './components/select-list';
 export { ParagraphSkeleton } from '@leafygreen-ui/skeleton-loader';
+export { InsightsChip } from './components/insights-chip';

packages/compass-components/src/index.ts

@@ -6,19 +6,19 @@ import type { MongoServerError } from 'mongodb';
 import semver from 'semver';
 import StateMixin from '@mongodb-js/reflux-state-mixin';
 import type { Element } from 'hadron-document';
-import { Document } from 'hadron-document';
-import { validate } from 'mongodb-query-parser';
-import HadronDocument from 'hadron-document';
+import HadronDocument, { Document } from 'hadron-document';
+import { toJSString, validate } from 'mongodb-query-parser';
 import _parseShellBSON, { ParseMode } from '@mongodb-js/shell-bson-parser';
 import type { PreferencesAccess } from 'compass-preferences-model/provider';
 import { capMaxTimeMSAtPreferenceLimit } from 'compass-preferences-model/provider';
 import type { Stage } from '@mongodb-js/explain-plan-helper';
 import { ExplainPlan } from '@mongodb-js/explain-plan-helper';
+import { EJSON } from 'bson';
 import type {
-  FavoriteQueryStorageAccess,
   FavoriteQueryStorage,
-  RecentQueryStorageAccess,
+  FavoriteQueryStorageAccess,
   RecentQueryStorage,
+  RecentQueryStorageAccess,
 } from '@mongodb-js/my-queries-storage/provider';
 
 import {
@@ -29,22 +29,22 @@ import {
 
 import type { DOCUMENTS_STATUSES } from '../constants/documents-statuses';
 import {
-  DOCUMENTS_STATUS_INITIAL,
-  DOCUMENTS_STATUS_FETCHING,
   DOCUMENTS_STATUS_ERROR,
-  DOCUMENTS_STATUS_FETCHED_INITIAL,
   DOCUMENTS_STATUS_FETCHED_CUSTOM,
+  DOCUMENTS_STATUS_FETCHED_INITIAL,
   DOCUMENTS_STATUS_FETCHED_PAGINATION,
+  DOCUMENTS_STATUS_FETCHING,
+  DOCUMENTS_STATUS_INITIAL,
 } from '../constants/documents-statuses';
 
 import type { UpdatePreview } from 'mongodb-data-service';
 import type { GridStore, TableHeaderType } from './grid-store';
 import configureGridStore from './grid-store';
 import type { TypeCastMap } from 'hadron-type-checker';
 import type AppRegistry from 'hadron-app-registry';
+import type { ActivateHelpers } from 'hadron-app-registry';
 import { BaseRefluxStore } from './base-reflux-store';
 import { openToast, showConfirmation } from '@mongodb-js/compass-components';
-import { toJSString } from 'mongodb-query-parser';
 import {
   openBulkDeleteFailureToast,
   openBulkDeleteProgressToast,
@@ -59,7 +59,6 @@ import type {
   MongoDBInstance,
 } from '@mongodb-js/compass-app-stores/provider';
 import configureActions from '../actions';
-import type { ActivateHelpers } from 'hadron-app-registry';
 import type { Logger } from '@mongodb-js/compass-logging/provider';
 import { mongoLogId } from '@mongodb-js/compass-logging/provider';
 import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
@@ -1834,7 +1833,9 @@ class CrudStoreImpl
   }
 
   openCreateIndexModal() {
-    this.localAppRegistry.emit('open-create-index-modal');
+    this.localAppRegistry.emit('open-create-index-modal', {
+      query: EJSON.serialize(this.queryBar.getLastAppliedQuery('crud')),
+    });
   }
 
   openCreateSearchIndexModal() {
@@ -1999,6 +2000,7 @@ export type DocumentsPluginServices = {
   queryBar: QueryBarService;
   collection: Collection;
 };
+
 export function activateDocumentsPlugin(
   options: CrudStoreOptions,
   {
@@ -2125,6 +2127,7 @@ type ErrorOrResult =
       result: undefined
     ]
   | [error: undefined | null, result: BSONObject];
+
 export async function findAndModifyWithFLEFallback(
   ds: DataService,
   ns: string,

packages/compass-crud/src/stores/crud-store.ts

@@ -36,6 +36,7 @@ describe('CreateIndexForm', () => {
         onRemoveFieldClick={() => {}}
         onTabClick={onTabClickSpy}
         showIndexesGuidanceVariant={showIndexesGuidanceVariant || false}
+        query={null}
       />
     );
   };