+
+ Perform a
+ {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
+
+
+ with maxEdits
+
+ onChangeProperty('maxEdits', Number(e.target.value))
+ }
+ />
+
+
+
+ for all documents where
+ {/* @ts-expect-error leafygreen unresonably expects a labelledby here */}
+
+ {formData.path === 'fields' && (
+ onChangeProperty('fields', val)}
+ fields={fields}
+ multiselect={true}
+ />
+ )}
+ {formData.path === 'wildcard' && (
+ onChangeProperty('wildcard', e.target.value)}
+ />
+ )}
+
+
+ contains
+
onChangeProperty('text', e.target.value)}
+ />
+
+ using
+
+ onChangeProperty('indexName', value ?? '')
+ }
+ searchState={(() => {
+ if (indexesStatus === 'LOADING') {
+ return 'loading';
+ }
+ if (indexesStatus === 'ERROR') {
+ return 'error';
+ }
+ return 'unset';
+ })()}
+ searchLoadingMessage="Fetching search indexes ..."
+ searchErrorMessage={
+ 'Failed to fetch the search indexes. Type the index name manually.'
+ }
+ options={indexes.map((x) => ({ value: x.name }))}
+ renderOption={(option, index, isCustom) => {
+ return (
+
+ );
+ }}
+ />
+
+
+
diff --git a/packages/compass-aggregations/src/modules/search-indexes.spec.ts b/packages/compass-aggregations/src/modules/search-indexes.spec.ts
new file mode 100644
index 00000000000..4961706b13d
--- /dev/null
+++ b/packages/compass-aggregations/src/modules/search-indexes.spec.ts
@@ -0,0 +1,192 @@
+import { expect } from 'chai';
+import reducer, { fetchIndexes, ActionTypes } from './search-indexes';
+import configureStore from '../../test/configure-store';
+import { DATA_SERVICE_CONNECTED } from './data-service';
+import sinon from 'sinon';
+
+describe('search-indexes module', function () {
+ describe('#reducer', function () {
+ it('returns default state', function () {
+ expect(
+ reducer(undefined, {
+ type: 'test',
+ })
+ ).to.deep.equal({
+ isSearchIndexesSupported: false,
+ indexes: [],
+ status: 'INITIAL',
+ });
+ });
+ it('returns state when fetching starts', function () {
+ expect(
+ reducer(undefined, {
+ type: ActionTypes.FetchIndexesStarted,
+ })
+ ).to.deep.equal({
+ isSearchIndexesSupported: false,
+ indexes: [],
+ status: 'LOADING',
+ });
+ });
+ it('returns state when fetching succeeds', function () {
+ expect(
+ reducer(undefined, {
+ type: ActionTypes.FetchIndexesFinished,
+ indexes: [{ name: 'default' }, { name: 'vector_index' }],
+ })
+ ).to.deep.equal({
+ isSearchIndexesSupported: false,
+ indexes: [{ name: 'default' }, { name: 'vector_index' }],
+ status: 'READY',
+ });
+ });
+ it('returns state when fetching fails', function () {
+ expect(
+ reducer(undefined, {
+ type: ActionTypes.FetchIndexesFailed,
+ })
+ ).to.deep.equal({
+ isSearchIndexesSupported: false,
+ indexes: [],
+ status: 'ERROR',
+ });
+ });
+ });
+ describe('#actions', function () {
+ let store: ReturnType
;
+ beforeEach(function () {
+ store = configureStore({
+ pipeline: [],
+ isSearchIndexesSupported: true,
+ namespace: 'test.listings',
+ });
+ });
+ context('fetchIndexes', function () {
+ it('fetches search indexes and sets status to READY', async function () {
+ const spy = sinon.spy((ns: string) => {
+ expect(ns).to.equal('test.listings');
+ return Promise.resolve([
+ { name: 'default' },
+ { name: 'vector_index' },
+ ]);
+ });
+
+ store.dispatch({
+ type: DATA_SERVICE_CONNECTED,
+ dataService: {
+ getSearchIndexes: spy,
+ },
+ });
+
+ await store.dispatch(fetchIndexes());
+
+ expect(store.getState().searchIndexes).to.deep.equal({
+ isSearchIndexesSupported: true,
+ indexes: [{ name: 'default' }, { name: 'vector_index' }],
+ status: 'READY',
+ });
+ });
+
+ it('does not fetch indexes when status is LOADING', async function () {
+ // Set the status to LOADING
+ store.dispatch({
+ type: ActionTypes.FetchIndexesStarted,
+ });
+
+ const spy = sinon.spy();
+ store.dispatch({
+ type: DATA_SERVICE_CONNECTED,
+ dataService: {
+ getSearchIndexes: spy,
+ },
+ });
+
+ await store.dispatch(fetchIndexes());
+ await store.dispatch(fetchIndexes());
+ await store.dispatch(fetchIndexes());
+
+ expect(spy.callCount).to.equal(0);
+ });
+
+ it('does not fetch indexes when status is READY', async function () {
+ // Set the status to LOADING
+ store.dispatch({
+ type: ActionTypes.FetchIndexesFinished,
+ indexes: [{ name: 'default' }, { name: 'vector_index' }],
+ });
+
+ const spy = sinon.spy();
+ store.dispatch({
+ type: DATA_SERVICE_CONNECTED,
+ dataService: {
+ getSearchIndexes: spy,
+ },
+ });
+
+ await store.dispatch(fetchIndexes());
+ await store.dispatch(fetchIndexes());
+ await store.dispatch(fetchIndexes());
+
+ expect(spy.callCount).to.equal(0);
+
+ expect(store.getState().searchIndexes).to.deep.equal({
+ isSearchIndexesSupported: true,
+ indexes: [{ name: 'default' }, { name: 'vector_index' }],
+ status: 'READY',
+ });
+ });
+
+ it('sets ERROR status when fetching indexes fails', async function () {
+ const spy = sinon.spy((ns: string) => {
+ expect(ns).to.equal('test.listings');
+ return Promise.reject(new Error('Failed to fetch indexes'));
+ });
+
+ store.dispatch({
+ type: DATA_SERVICE_CONNECTED,
+ dataService: {
+ getSearchIndexes: spy,
+ },
+ });
+
+ await store.dispatch(fetchIndexes());
+
+ expect(store.getState().searchIndexes).to.deep.equal({
+ isSearchIndexesSupported: true,
+ indexes: [],
+ status: 'ERROR',
+ });
+ });
+
+ it('fetchs indexes in error state', async function () {
+ // Set the status to ERROR
+ store.dispatch({
+ type: ActionTypes.FetchIndexesFailed,
+ });
+
+ const spy = sinon.spy((ns: string) => {
+ expect(ns).to.equal('test.listings');
+ return Promise.resolve([
+ { name: 'default' },
+ { name: 'vector_index' },
+ ]);
+ });
+
+ store.dispatch({
+ type: DATA_SERVICE_CONNECTED,
+ dataService: {
+ getSearchIndexes: spy,
+ },
+ });
+
+ await store.dispatch(fetchIndexes());
+
+ expect(store.getState().searchIndexes).to.deep.equal({
+ isSearchIndexesSupported: true,
+ indexes: [{ name: 'default' }, { name: 'vector_index' }],
+ status: 'READY',
+ });
+ });
+ });
+ });
+});
diff --git a/packages/compass-aggregations/src/modules/search-indexes.ts b/packages/compass-aggregations/src/modules/search-indexes.ts
index 7e4d59f92fe..411e0a588f5 100644
--- a/packages/compass-aggregations/src/modules/search-indexes.ts
+++ b/packages/compass-aggregations/src/modules/search-indexes.ts
@@ -1,19 +1,115 @@
-import type { Reducer } from 'redux';
+import type { AnyAction, Reducer } from 'redux';
import type { PipelineBuilderThunkAction } from '.';
import { localAppRegistryEmit } from '@mongodb-js/mongodb-redux-common/app-registry';
+import type { SearchIndex } from 'mongodb-data-service';
+import { isAction } from '../utils/is-action';
+
+enum SearchIndexesStatuses {
+ INITIAL = 'INITIAL',
+ LOADING = 'LOADING',
+ READY = 'READY',
+ ERROR = 'ERROR',
+}
+
+export type SearchIndexesStatus = keyof typeof SearchIndexesStatuses;
+
+export enum ActionTypes {
+ FetchIndexesStarted = 'compass-aggregations/search-indexes/FetchIndexesStarted',
+ FetchIndexesFinished = 'compass-aggregations/search-indexes/FetchIndexesFinished',
+ FetchIndexesFailed = 'compass-aggregations/search-indexes/FetchIndexesFailed',
+}
+
+type FetchIndexesStartedAction = {
+ type: ActionTypes.FetchIndexesStarted;
+};
+
+type FetchIndexesFinishedAction = {
+ type: ActionTypes.FetchIndexesFinished;
+ indexes: SearchIndex[];
+};
+
+type FetchIndexesFailedAction = {
+ type: ActionTypes.FetchIndexesFailed;
+};
type State = {
isSearchIndexesSupported: boolean;
+ indexes: SearchIndex[];
+ status: SearchIndexesStatus;
};
export const INITIAL_STATE: State = {
isSearchIndexesSupported: false,
+ indexes: [],
+ status: SearchIndexesStatuses.INITIAL,
};
-const reducer: Reducer = (state = INITIAL_STATE) => {
+const reducer: Reducer = (state = INITIAL_STATE, action: AnyAction) => {
+ if (
+ isAction(action, ActionTypes.FetchIndexesStarted)
+ ) {
+ return {
+ ...state,
+ status: SearchIndexesStatuses.LOADING,
+ };
+ }
+ if (
+ isAction(
+ action,
+ ActionTypes.FetchIndexesFinished
+ )
+ ) {
+ return {
+ ...state,
+ indexes: action.indexes,
+ status: SearchIndexesStatuses.READY,
+ };
+ }
+ if (
+ isAction(action, ActionTypes.FetchIndexesFailed)
+ ) {
+ return {
+ ...state,
+ status: SearchIndexesStatuses.ERROR,
+ };
+ }
return state;
};
+export const fetchIndexes = (): PipelineBuilderThunkAction> => {
+ return async (dispatch, getState) => {
+ const {
+ namespace,
+ dataService: { dataService },
+ searchIndexes: { status },
+ } = getState();
+
+ if (
+ !dataService ||
+ status === SearchIndexesStatuses.LOADING ||
+ status === SearchIndexesStatuses.READY
+ ) {
+ return;
+ }
+
+ dispatch({
+ type: ActionTypes.FetchIndexesStarted,
+ });
+
+ try {
+ const indexes = await dataService.getSearchIndexes(namespace);
+ dispatch({
+ type: ActionTypes.FetchIndexesFinished,
+ indexes,
+ });
+ } catch (e) {
+ dispatch({
+ type: ActionTypes.FetchIndexesFailed,
+ });
+ }
+ };
+};
+
export const createSearchIndex = (): PipelineBuilderThunkAction => {
return (dispatch) => {
dispatch(localAppRegistryEmit('open-create-search-index-modal'));
diff --git a/packages/compass-aggregations/src/stores/store.ts b/packages/compass-aggregations/src/stores/store.ts
index 14dd961732e..cb59538b327 100644
--- a/packages/compass-aggregations/src/stores/store.ts
+++ b/packages/compass-aggregations/src/stores/store.ts
@@ -26,6 +26,7 @@ import {
} from '../modules/collections-fields';
import type { CollectionInfo } from '../modules/collections-fields';
import { disableAIFeature } from '../modules/pipeline-builder/pipeline-ai';
+import { INITIAL_STATE as SEARCH_INDEXES_INITIAL_STATE } from '../modules/search-indexes';
export type ConfigureStoreOptions = {
/**
@@ -233,6 +234,7 @@ const configureStore = (options: ConfigureStoreOptions) => {
sourceName: options.sourceName,
editViewName: options.editViewName,
searchIndexes: {
+ ...SEARCH_INDEXES_INITIAL_STATE,
isSearchIndexesSupported: Boolean(options.isSearchIndexesSupported),
},
},
diff --git a/packages/compass-aggregations/src/utils/pipeline-storage.ts b/packages/compass-aggregations/src/utils/pipeline-storage.ts
index 2bda3bce86c..98acb089285 100644
--- a/packages/compass-aggregations/src/utils/pipeline-storage.ts
+++ b/packages/compass-aggregations/src/utils/pipeline-storage.ts
@@ -1,5 +1,5 @@
+import type { Stats } from '@mongodb-js/compass-user-data';
import { UserData, z } from '@mongodb-js/compass-user-data';
-import type { Stats } from 'fs';
import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
import { prettify } from '../modules/pipeline-builder/pipeline-parser/utils';
diff --git a/packages/compass-app-stores/package.json b/packages/compass-app-stores/package.json
index feebee5368e..d3caf8f17f7 100644
--- a/packages/compass-app-stores/package.json
+++ b/packages/compass-app-stores/package.json
@@ -11,7 +11,7 @@
"email": "compass@mongodb.com"
},
"homepage": "https://github.com/mongodb-js/compass",
- "version": "7.3.1",
+ "version": "7.3.2",
"repository": {
"type": "git",
"url": "https://github.com/mongodb-js/compass.git"
@@ -54,11 +54,11 @@
"reformat": "npm run prettier -- --write . && npm run eslint . --fix"
},
"devDependencies": {
- "@mongodb-js/eslint-config-compass": "^1.0.9",
+ "@mongodb-js/eslint-config-compass": "^1.0.10",
"@mongodb-js/mocha-config-compass": "^1.3.1",
"@mongodb-js/prettier-config-compass": "^1.0.1",
"@mongodb-js/tsconfig-compass": "^1.0.3",
- "@mongodb-js/webpack-config-compass": "^1.2.2",
+ "@mongodb-js/webpack-config-compass": "^1.2.3",
"@types/chai": "^4.2.21",
"@types/mocha": "^9.0.0",
"@types/sinon-chai": "^3.2.5",
@@ -66,7 +66,7 @@
"debug": "^4.3.1",
"depcheck": "^1.4.1",
"eslint": "^7.25.0",
- "hadron-app-registry": "^9.0.11",
+ "hadron-app-registry": "^9.0.12",
"mocha": "^10.2.0",
"mongodb-ns": "^2.4.0",
"nyc": "^15.1.0",
@@ -76,10 +76,10 @@
"xvfb-maybe": "^0.2.1"
},
"dependencies": {
- "mongodb-instance-model": "^12.12.1"
+ "mongodb-instance-model": "^12.12.2"
},
"peerDependencies": {
- "mongodb-instance-model": "^12.12.1"
+ "mongodb-instance-model": "^12.12.2"
},
"publishConfig": {
"access": "public"
diff --git a/packages/compass-collection/package.json b/packages/compass-collection/package.json
index 3a3bac7fc8a..3b1e2e6146a 100644
--- a/packages/compass-collection/package.json
+++ b/packages/compass-collection/package.json
@@ -14,7 +14,7 @@
"email": "compass@mongodb.com"
},
"homepage": "https://github.com/mongodb-js/compass",
- "version": "4.15.1",
+ "version": "4.16.0",
"apiVersion": "3.0.0",
"repository": {
"type": "git",
@@ -56,28 +56,28 @@
"reformat": "npm run prettier -- --write . && npm run eslint . --fix"
},
"peerDependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
- "@mongodb-js/compass-logging": "^1.2.2",
+ "@mongodb-js/compass-components": "^1.16.0",
+ "@mongodb-js/compass-logging": "^1.2.3",
"bson": "^6.0.0",
- "compass-preferences-model": "^2.15.1",
- "hadron-app-registry": "^9.0.11",
+ "compass-preferences-model": "^2.15.2",
+ "hadron-app-registry": "^9.0.12",
"hadron-ipc": "^3.2.2",
"react": "^17.0.2"
},
"dependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
- "@mongodb-js/compass-logging": "^1.2.2",
+ "@mongodb-js/compass-components": "^1.16.0",
+ "@mongodb-js/compass-logging": "^1.2.3",
"bson": "^6.0.0",
- "compass-preferences-model": "^2.15.1",
- "hadron-app-registry": "^9.0.11",
+ "compass-preferences-model": "^2.15.2",
+ "hadron-app-registry": "^9.0.12",
"hadron-ipc": "^3.2.2"
},
"devDependencies": {
- "@mongodb-js/eslint-config-compass": "^1.0.9",
+ "@mongodb-js/eslint-config-compass": "^1.0.10",
"@mongodb-js/mocha-config-compass": "^1.3.1",
"@mongodb-js/prettier-config-compass": "^1.0.1",
"@mongodb-js/tsconfig-compass": "^1.0.3",
- "@mongodb-js/webpack-config-compass": "^1.2.2",
+ "@mongodb-js/webpack-config-compass": "^1.2.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"@types/chai": "^4.2.21",
@@ -92,9 +92,9 @@
"eslint": "^7.25.0",
"mocha": "^10.2.0",
"mongodb": "^6.0.0",
- "mongodb-collection-model": "^5.12.1",
- "mongodb-data-service": "^22.12.1",
- "mongodb-instance-model": "^12.12.1",
+ "mongodb-collection-model": "^5.12.2",
+ "mongodb-data-service": "^22.12.2",
+ "mongodb-instance-model": "^12.12.2",
"mongodb-ns": "^2.4.0",
"numeral": "^2.0.6",
"nyc": "^15.1.0",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 0379ab49673..7d826a006f5 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@mongodb-js/compass-components",
- "version": "1.15.0",
+ "version": "1.16.0",
"description": "React Components used in Compass",
"license": "SSPL",
"main": "lib/index.js",
@@ -79,7 +79,7 @@
"@react-stately/tooltip": "^3.0.5",
"bson": "^6.0.0",
"focus-trap-react": "^8.4.2",
- "hadron-document": "^8.4.1",
+ "hadron-document": "^8.4.2",
"hadron-type-checker": "^7.1.0",
"is-electron-renderer": "^2.0.1",
"lodash": "^4.17.21",
@@ -93,7 +93,7 @@
"react": "^17.0.2"
},
"devDependencies": {
- "@mongodb-js/eslint-config-compass": "^1.0.9",
+ "@mongodb-js/eslint-config-compass": "^1.0.10",
"@mongodb-js/mocha-config-compass": "^1.3.1",
"@mongodb-js/prettier-config-compass": "^1.0.1",
"@mongodb-js/tsconfig-compass": "^1.0.3",
diff --git a/packages/compass-components/src/components/guide-cue/guide-cue-service.ts b/packages/compass-components/src/components/guide-cue/guide-cue-service.ts
index 45eb959722e..a710c36cadc 100644
--- a/packages/compass-components/src/components/guide-cue/guide-cue-service.ts
+++ b/packages/compass-components/src/components/guide-cue/guide-cue-service.ts
@@ -88,14 +88,19 @@ export class GuideCueService extends EventTarget {
if (!this._activeCue) {
return;
}
- return this.dispatchEvent(
- new CustomEvent('show-cue', {
- detail: {
- cueId: this._activeCue.cueId,
- groupId: this._activeCue.groupId,
- },
- })
- );
+ try {
+ return this.dispatchEvent(
+ new CustomEvent('show-cue', {
+ detail: {
+ cueId: this._activeCue.cueId,
+ groupId: this._activeCue.groupId,
+ },
+ })
+ );
+ } catch (ex) {
+ // TODO(COMPASS-7357): this seems to be a temporary error happening sometimes during test.
+ // In that case, assume the event is not dispatched
+ }
}
private validateCueData(groupId: GroupName, step: number) {
diff --git a/packages/compass-connection-import-export/package.json b/packages/compass-connection-import-export/package.json
index 6198e585ceb..01cf19e7887 100644
--- a/packages/compass-connection-import-export/package.json
+++ b/packages/compass-connection-import-export/package.json
@@ -14,7 +14,7 @@
"email": "compass@mongodb.com"
},
"homepage": "https://github.com/mongodb-js/compass",
- "version": "0.13.1",
+ "version": "0.14.0",
"repository": {
"type": "git",
"url": "https://github.com/mongodb-js/compass.git"
@@ -51,20 +51,20 @@
"reformat": "npm run prettier -- --write . && npm run eslint . --fix"
},
"peerDependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
+ "@mongodb-js/compass-components": "^1.16.0",
"hadron-ipc": "^3.2.2",
- "mongodb-data-service": "^22.12.1",
+ "mongodb-data-service": "^22.12.2",
"react": "^17.0.2"
},
"dependencies": {
"@electron/remote": "^2.0.11",
- "@mongodb-js/compass-components": "^1.15.0",
+ "@mongodb-js/compass-components": "^1.16.0",
"hadron-ipc": "^3.2.2",
- "mongodb-data-service": "^22.12.1"
+ "mongodb-data-service": "^22.12.2"
},
"devDependencies": {
- "@mongodb-js/connection-storage": "^0.6.1",
- "@mongodb-js/eslint-config-compass": "^1.0.9",
+ "@mongodb-js/connection-storage": "^0.6.2",
+ "@mongodb-js/eslint-config-compass": "^1.0.10",
"@mongodb-js/mocha-config-compass": "^1.3.1",
"@mongodb-js/prettier-config-compass": "^1.0.1",
"@mongodb-js/tsconfig-compass": "^1.0.3",
@@ -77,7 +77,7 @@
"@types/react-dom": "^17.0.10",
"@types/sinon-chai": "^3.2.5",
"chai": "^4.3.6",
- "compass-preferences-model": "^2.15.1",
+ "compass-preferences-model": "^2.15.2",
"depcheck": "^1.4.1",
"eslint": "^7.25.0",
"gen-esm-wrapper": "^1.1.0",
diff --git a/packages/compass-connections/package.json b/packages/compass-connections/package.json
index 98b23832e43..de0445cd615 100644
--- a/packages/compass-connections/package.json
+++ b/packages/compass-connections/package.json
@@ -13,7 +13,7 @@
"email": "compass@mongodb.com"
},
"homepage": "https://github.com/mongodb-js/compass",
- "version": "1.16.1",
+ "version": "1.17.0",
"repository": {
"type": "git",
"url": "https://github.com/mongodb-js/compass.git"
@@ -48,28 +48,28 @@
"reformat": "npm run prettier -- --write . && npm run eslint . --fix"
},
"peerDependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
- "compass-preferences-model": "^2.15.1",
+ "@mongodb-js/compass-components": "^1.16.0",
+ "compass-preferences-model": "^2.15.2",
"hadron-ipc": "^3.2.2",
- "mongodb-data-service": "^22.12.1",
+ "mongodb-data-service": "^22.12.2",
"react": "^17.0.2"
},
"dependencies": {
- "@mongodb-js/compass-connection-import-export": "^0.13.1",
- "@mongodb-js/compass-logging": "^1.2.2",
- "@mongodb-js/compass-utils": "^0.5.1",
- "@mongodb-js/connection-form": "^1.15.1",
- "compass-preferences-model": "^2.15.1",
+ "@mongodb-js/compass-connection-import-export": "^0.14.0",
+ "@mongodb-js/compass-logging": "^1.2.3",
+ "@mongodb-js/compass-utils": "^0.5.2",
+ "@mongodb-js/connection-form": "^1.16.0",
+ "compass-preferences-model": "^2.15.2",
"hadron-ipc": "^3.2.2",
"lodash": "^4.17.21",
"mongodb": "^6.0.0",
"uuid": "^8.2.0"
},
"devDependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
- "@mongodb-js/compass-maybe-protect-connection-string": "^0.13.1",
- "@mongodb-js/connection-storage": "^0.6.1",
- "@mongodb-js/eslint-config-compass": "^1.0.9",
+ "@mongodb-js/compass-components": "^1.16.0",
+ "@mongodb-js/compass-maybe-protect-connection-string": "^0.13.2",
+ "@mongodb-js/connection-storage": "^0.6.2",
+ "@mongodb-js/eslint-config-compass": "^1.0.10",
"@mongodb-js/mocha-config-compass": "^1.3.1",
"@mongodb-js/prettier-config-compass": "^1.0.1",
"@mongodb-js/tsconfig-compass": "^1.0.3",
@@ -84,13 +84,13 @@
"chai": "^4.3.4",
"depcheck": "^1.4.1",
"eslint": "^7.25.0",
- "hadron-app-registry": "^9.0.11",
+ "hadron-app-registry": "^9.0.12",
"lodash": "^4.17.21",
"mocha": "^10.2.0",
"mongodb-build-info": "^1.7.0",
"mongodb-cloud-info": "^2.0.1",
"mongodb-connection-string-url": "^2.6.0",
- "mongodb-data-service": "^22.12.1",
+ "mongodb-data-service": "^22.12.2",
"nyc": "^15.1.0",
"prettier": "^2.7.1",
"react": "^17.0.2",
diff --git a/packages/compass-crud/package.json b/packages/compass-crud/package.json
index 72ae37de8bb..800b89b92c1 100644
--- a/packages/compass-crud/package.json
+++ b/packages/compass-crud/package.json
@@ -1,7 +1,7 @@
{
"name": "@mongodb-js/compass-crud",
"productName": "Compass CRUD plugin",
- "version": "13.15.1",
+ "version": "13.16.0",
"description": "Compass Plugin for CRUD Operations",
"author": {
"name": "MongoDB Inc",
@@ -56,23 +56,23 @@
"reformat": "npm run prettier -- --write . && npm run eslint . --fix"
},
"peerDependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
- "@mongodb-js/compass-editor": "^0.14.1",
- "@mongodb-js/compass-logging": "^1.2.2",
- "@mongodb-js/explain-plan-helper": "^1.1.2",
+ "@mongodb-js/compass-components": "^1.16.0",
+ "@mongodb-js/compass-editor": "^0.15.0",
+ "@mongodb-js/compass-logging": "^1.2.3",
+ "@mongodb-js/explain-plan-helper": "^1.1.3",
"bson": "^6.0.0",
- "compass-preferences-model": "^2.15.1",
- "hadron-document": "^8.4.1",
+ "compass-preferences-model": "^2.15.2",
+ "hadron-document": "^8.4.2",
"hadron-type-checker": "^7.1.0",
"react": "^17.0.2"
},
"devDependencies": {
- "@mongodb-js/compass-test-server": "^0.1.3",
- "@mongodb-js/eslint-config-compass": "^1.0.9",
+ "@mongodb-js/compass-test-server": "^0.1.4",
+ "@mongodb-js/eslint-config-compass": "^1.0.10",
"@mongodb-js/mocha-config-compass": "^1.3.1",
"@mongodb-js/prettier-config-compass": "^1.0.1",
"@mongodb-js/tsconfig-compass": "^1.0.3",
- "@mongodb-js/webpack-config-compass": "^1.2.2",
+ "@mongodb-js/webpack-config-compass": "^1.2.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"@types/reflux": "^6.4.3",
@@ -85,12 +85,13 @@
"electron": "^25.8.4",
"enzyme": "^3.11.0",
"eslint": "^7.25.0",
- "hadron-app": "^5.12.1",
- "hadron-app-registry": "^9.0.11",
+ "hadron-app": "^5.12.2",
+ "hadron-app-registry": "^9.0.12",
"lodash": "^4.17.21",
"mocha": "^10.2.0",
- "mongodb-data-service": "^22.12.1",
- "mongodb-instance-model": "^12.12.1",
+ "mongodb-data-service": "^22.12.2",
+ "mongodb-instance-model": "^12.12.2",
+ "mongodb-query-parser": "^3.1.3",
"mongodb-ns": "^2.4.0",
"nyc": "^15.1.0",
"prop-types": "^15.7.2",
@@ -102,13 +103,13 @@
"sinon": "^8.1.1"
},
"dependencies": {
- "@mongodb-js/compass-components": "^1.15.0",
- "@mongodb-js/compass-editor": "^0.14.1",
- "@mongodb-js/compass-logging": "^1.2.2",
- "@mongodb-js/explain-plan-helper": "^1.1.2",
+ "@mongodb-js/compass-components": "^1.16.0",
+ "@mongodb-js/compass-editor": "^0.15.0",
+ "@mongodb-js/compass-logging": "^1.2.3",
+ "@mongodb-js/explain-plan-helper": "^1.1.3",
"bson": "^6.0.0",
- "compass-preferences-model": "^2.15.1",
- "hadron-document": "^8.4.1",
+ "compass-preferences-model": "^2.15.2",
+ "hadron-document": "^8.4.2",
"hadron-type-checker": "^7.1.0"
}
}
diff --git a/packages/compass-crud/src/components/bulk-delete-modal.spec.tsx b/packages/compass-crud/src/components/bulk-delete-modal.spec.tsx
new file mode 100644
index 00000000000..350d77794e6
--- /dev/null
+++ b/packages/compass-crud/src/components/bulk-delete-modal.spec.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BulkDeleteModal from './bulk-delete-modal';
+
+function renderBulkDeleteModal(
+ props?: Partial>
+) {
+ return render(
+ {}}
+ onConfirmDeletion={() => {}}
+ {...props}
+ />
+ );
+}
+
+describe('BulkDeleteModal Component', function () {
+ afterEach(function () {
+ cleanup();
+ });
+
+ it('does not render if closed', function () {
+ renderBulkDeleteModal({ open: false });
+ expect(screen.queryByText(/Delete/)).to.not.exist;
+ });
+
+ it('does render if open', function () {
+ renderBulkDeleteModal();
+ expect(screen.queryAllByText(/Delete/)).to.not.be.empty;
+ });
+
+ it('shows the number of documents that will be deleted', function () {
+ renderBulkDeleteModal({ documentCount: 42 });
+ expect(screen.queryAllByText('Delete 42 documents')[0]).to.be.visible;
+ });
+
+ it('shows the affected collection', function () {
+ renderBulkDeleteModal({ namespace: 'mydb.mycoll' });
+ expect(screen.queryByText('mydb.mycoll')).to.be.visible;
+ });
+
+ it('shows the provided query', function () {
+ renderBulkDeleteModal({ filterQuery: '{ a: 1 }' });
+ expect(screen.queryByDisplayValue('{ a: 1 }')).to.be.visible;
+ });
+
+ it('closes the modal when cancelled', function () {
+ const onCloseSpy = sinon.spy();
+ renderBulkDeleteModal({ onCancel: onCloseSpy });
+
+ userEvent.click(screen.getByText('Close').closest('button')!);
+ expect(onCloseSpy).to.have.been.calledOnce;
+ });
+
+ it('confirms deletion when clicked on the Delete documents button', function () {
+ const onConfirmDeletionSpy = sinon.spy();
+ renderBulkDeleteModal({
+ documentCount: 10,
+ onConfirmDeletion: onConfirmDeletionSpy,
+ });
+
+ userEvent.click(
+ screen.getAllByText('Delete 10 documents')[1].closest('button')!
+ );
+ expect(onConfirmDeletionSpy).to.have.been.calledOnce;
+ });
+});
diff --git a/packages/compass-crud/src/components/bulk-delete-modal.tsx b/packages/compass-crud/src/components/bulk-delete-modal.tsx
new file mode 100644
index 00000000000..649345773dc
--- /dev/null
+++ b/packages/compass-crud/src/components/bulk-delete-modal.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import {
+ Modal,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Button,
+ TextInput,
+ KeylineCard,
+ css,
+ cx,
+ spacing,
+ InfoSprinkle,
+ Label,
+} from '@mongodb-js/compass-components';
+import ReadonlyDocument from './readonly-document';
+
+const modalFooterSpacingStyles = css({
+ gap: spacing[2],
+});
+
+const documentHorizontalWrapper = css({
+ display: 'flex',
+ flexDirection: 'row',
+ flex: 'none',
+ flexShrink: 0,
+ overflow: 'auto',
+ marginBottom: spacing[2],
+ gap: spacing[2],
+ maxWidth: '100%',
+});
+
+const documentContainerStyles = css({
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 'none',
+ flexShrink: 0,
+ marginBottom: spacing[2],
+ width: '100%',
+});
+
+const documentStyles = css({
+ flexBasis: '164px',
+ flexGrow: 1,
+ flexShrink: 0,
+ overflow: 'auto',
+ padding: 0,
+ width: '100%',
+});
+
+const modalBodySpacingStyles = css({
+ marginTop: spacing[3],
+ paddingLeft: spacing[5],
+ display: 'flex',
+ flexDirection: 'column',
+ gap: spacing[3],
+});
+
+const previewStyles = css({
+ minHeight: '200px',
+});
+
+type QueryLabelProps = {
+ tooltip: string;
+ label: string;
+};
+
+const queryLabelStyles = css({
+ display: 'flex',
+ gap: spacing[2],
+ alignItems: 'center',
+});
+
+const QueryLabel: React.FunctionComponent = ({
+ tooltip,
+ label,
+}) => {
+ return (
+
+
+ {tooltip}
+
+ );
+};
+
+type BulkDeleteModalProps = {
+ open: boolean;
+ documentCount: number;
+ filterQuery: string;
+ namespace: string;
+ sampleDocuments: Document[];
+ onCancel: () => void;
+ onConfirmDeletion: () => void;
+};
+
+const BulkDeleteModal: React.FunctionComponent = ({
+ open,
+ documentCount,
+ filterQuery,
+ namespace,
+ sampleDocuments,
+ onCancel,
+ onConfirmDeletion,
+}) => {
+ const preview = (
+
+ {sampleDocuments.map((doc, i) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+ Preview (sample of {sampleDocuments.length} documents)
+ {preview}
+
+
+
+
+
+
+
+ );
+};
+
+export default BulkDeleteModal;
diff --git a/packages/compass-crud/src/components/crud-toolbar.spec.tsx b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
index 162569a2f5f..6d46e89785d 100644
--- a/packages/compass-crud/src/components/crud-toolbar.spec.tsx
+++ b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
@@ -10,7 +10,7 @@ import {
within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-
+import preferencesAccess from 'compass-preferences-model';
import { CrudToolbar } from './crud-toolbar';
const noop = () => {
@@ -63,6 +63,7 @@ function renderCrudToolbar(
instanceDescription=""
onApplyClicked={noop}
onResetClicked={noop}
+ onDeleteButtonClicked={noop}
openExportFileDialog={noop}
outdated={false}
page={0}
@@ -71,16 +72,29 @@ function renderCrudToolbar(
resultId="123"
start={0}
viewSwitchHandler={noop}
+ queryLimit={0}
+ querySkip={0}
{...props}
/>
);
}
const addDataText = 'Add Data';
+const deleteDataText = 'Delete';
describe('CrudToolbar Component', function () {
+ let sandbox: sinon.SinonSandbox;
+
afterEach(function () {
cleanup();
+ return sandbox.restore();
+ });
+
+ beforeEach(function () {
+ sandbox = sinon.createSandbox();
+ sandbox.stub(preferencesAccess, 'getPreferences').returns({
+ enableBulkDeleteOperations: true,
+ } as any);
});
it('renders the query bar role', function () {
@@ -247,12 +261,13 @@ describe('CrudToolbar Component', function () {
);
});
- it('should not render the add data button when it is readonly', function () {
+ it('should not render both the add data button and the delete button when it is readonly', function () {
renderCrudToolbar({
readonly: true,
});
expect(screen.queryByText(addDataText)).to.not.exist;
+ expect(screen.queryByText(deleteDataText)).to.not.exist;
});
it('should call to open the export dialog when export is clicked', function () {
@@ -269,6 +284,46 @@ describe('CrudToolbar Component', function () {
expect(exportSpy.firstCall.args[0]).to.be.true;
});
+ describe('delete button', function () {
+ it('should not be visible when the enableBulkDeleteOperations toggle is off', function () {
+ sandbox.restore();
+ sandbox.stub(preferencesAccess, 'getPreferences').returns({
+ enableBulkDeleteOperations: false,
+ } as any);
+
+ expect(screen.queryByText(deleteDataText)).to.not.exist;
+ });
+
+ it('should render disabled when the query has a skip', function () {
+ renderCrudToolbar({
+ querySkip: 10,
+ });
+
+ expect(screen.getByText(deleteDataText).closest('button')).to.have.attr(
+ 'disabled'
+ );
+ });
+
+ it('should render disabled when the query has a limit', function () {
+ renderCrudToolbar({
+ queryLimit: 10,
+ });
+
+ expect(screen.getByText(deleteDataText).closest('button')).to.have.attr(
+ 'disabled'
+ );
+ });
+
+ it('should propagate click events', function () {
+ const onDeleteButtonClickedSpy = sinon.spy();
+
+ renderCrudToolbar({ onDeleteButtonClicked: onDeleteButtonClickedSpy });
+
+ userEvent.click(screen.getByText(deleteDataText).closest('button')!);
+ expect(onDeleteButtonClickedSpy).to.have.been.called;
+ });
+ });
+
it('should not render the outdated message', function () {
renderCrudToolbar();
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
index 30cfc4314c3..f8bd3f80c20 100644
--- a/packages/compass-crud/src/components/crud-toolbar.tsx
+++ b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -17,6 +17,7 @@ import { ViewSwitcher } from './view-switcher';
import type { DocumentView } from '../stores/crud-store';
import { AddDataMenu } from './add-data-menu';
import { usePreference } from 'compass-preferences-model';
+import DeleteMenu from './delete-data-menu';
const { track } = createLoggerAndTelemetry('COMPASS-CRUD-UI');
@@ -99,6 +100,7 @@ export type CrudToolbarProps = {
localAppRegistry: AppRegistry;
onApplyClicked: () => void;
onResetClicked: () => void;
+ onDeleteButtonClicked: () => void;
openExportFileDialog: (exportFullCollection?: boolean) => void;
outdated: boolean;
page: number;
@@ -108,6 +110,8 @@ export type CrudToolbarProps = {
start: number;
viewSwitchHandler: (view: DocumentView) => void;
insights?: Signal;
+ queryLimit?: number;
+ querySkip?: number;
};
const CrudToolbar: React.FunctionComponent = ({
@@ -124,6 +128,7 @@ const CrudToolbar: React.FunctionComponent = ({
localAppRegistry,
onApplyClicked,
onResetClicked,
+ onDeleteButtonClicked,
openExportFileDialog,
outdated,
page,
@@ -133,6 +138,8 @@ const CrudToolbar: React.FunctionComponent = ({
start,
viewSwitchHandler,
insights,
+ queryLimit,
+ querySkip,
}) => {
const queryBarRole = localAppRegistry.getRole('Query.QueryBar')![0];
@@ -168,6 +175,10 @@ const CrudToolbar: React.FunctionComponent = ({
);
const enableExplainPlan = usePreference('enableExplainPlan', React);
+ const shouldDisableBulkOp = useMemo(
+ () => querySkip || queryLimit,
+ [querySkip, queryLimit]
+ );
return (
@@ -207,6 +218,13 @@ const CrudToolbar: React.FunctionComponent = ({
leftGlyph: ,
}}
/>
+ {!readonly && (
+
+ )}
diff --git a/packages/compass-crud/src/components/delete-data-menu.tsx b/packages/compass-crud/src/components/delete-data-menu.tsx
new file mode 100644
index 00000000000..99d56ac9ca1
--- /dev/null
+++ b/packages/compass-crud/src/components/delete-data-menu.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Icon, Button, Tooltip } from '@mongodb-js/compass-components';
+import { usePreference } from 'compass-preferences-model';
+
+type DeleteMenuButtonProps = {
+ isWritable: boolean;
+ onClick: () => void;
+};
+
+const DeleteMenuButton: React.FunctionComponent
= ({
+ isWritable,
+ onClick,
+}) => {
+ const isVisible = usePreference('enableBulkDeleteOperations', React);
+
+ if (!isVisible) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+type DeleteMenuProps = DeleteMenuButtonProps & {
+ disabledTooltip: string;
+};
+
+const DeleteMenu: React.FunctionComponent = ({
+ isWritable,
+ onClick,
+ disabledTooltip,
+}) => {
+ if (isWritable) {
+ return (
+
+ );
+ }
+
+ return (
+ ) => (
+
+
+ {tooltipChildren}
+
+ )}
+ // Disable the tooltip when the instance is in a writable state.
+ isDisabled={isWritable}
+ justify="middle"
+ delay={500}
+ >
+ {disabledTooltip}
+
+ );
+};
+
+export default DeleteMenu;
diff --git a/packages/compass-crud/src/components/document-list.tsx b/packages/compass-crud/src/components/document-list.tsx
index 554ab554897..bea484ba65f 100644
--- a/packages/compass-crud/src/components/document-list.tsx
+++ b/packages/compass-crud/src/components/document-list.tsx
@@ -21,6 +21,7 @@ import type { DocumentTableViewProps } from './table-view/document-table-view';
import DocumentTableView from './table-view/document-table-view';
import type { CrudToolbarProps } from './crud-toolbar';
import { CrudToolbar } from './crud-toolbar';
+import { toJSString } from 'mongodb-query-parser';
import type { DOCUMENTS_STATUSES } from '../constants/documents-statuses';
import {
@@ -37,8 +38,8 @@ import type {
DocumentView,
QueryState,
} from '../stores/crud-store';
-import type Document from 'hadron-document';
import { getToolbarSignal } from '../utils/toolbar-signal';
+import BulkDeleteModal from './bulk-delete-modal';
const listAndJsonStyles = css({
padding: spacing[3],
@@ -235,6 +236,36 @@ class DocumentList extends React.Component {
}
}
+ onOpenBulkDeleteDialog() {
+ this.props.store.openBulkDeleteDialog();
+ }
+
+ onCancelBulkDeleteDialog() {
+ this.props.store.closeBulkDeleteDialog();
+ }
+
+ onConfirmBulkDeleteDialog() {
+ void this.props.store.runBulkDelete();
+ }
+
+ /**
+ * Render the bulk deletion modal
+ */
+ renderDeletionModal() {
+ return (
+
+ );
+ }
/**
* Render EmptyContent view when no documents are present.
*
@@ -315,6 +346,7 @@ class DocumentList extends React.Component {
isExportable={this.props.isExportable}
onApplyClicked={this.onApplyClicked.bind(this)}
onResetClicked={this.onResetClicked.bind(this)}
+ onDeleteButtonClicked={this.onOpenBulkDeleteDialog.bind(this)}
openExportFileDialog={this.props.openExportFileDialog}
outdated={this.props.outdated}
readonly={!this.props.isEditable}
@@ -323,6 +355,8 @@ class DocumentList extends React.Component {
instanceDescription={this.props.instanceDescription}
refreshDocuments={this.props.refreshDocuments}
resultId={this.props.resultId}
+ querySkip={this.props.store.state.query.skip}
+ queryLimit={this.props.store.state.query.limit}
insights={getToolbarSignal(
JSON.stringify(this.props.query.filter),
Boolean(this.props.isCollectionScan),
@@ -338,6 +372,7 @@ class DocumentList extends React.Component {
{this.renderZeroState()}
{this.renderContent()}
{this.renderInsertModal()}
+ {this.renderDeletionModal()}