({
+ id: 'TEST',
+ }),
+ };
+
describe('with a successful server response', function () {
it('should succeed', async function () {
const mockAtlasAiService = {
@@ -54,6 +60,7 @@ describe('aiQueryReducer', function () {
},
{
dataService: mockDataService,
+ connectionInfoAccess,
atlasAuthService: { on: sandbox.stub() },
atlasAiService: mockAtlasAiService,
preferences,
@@ -99,6 +106,7 @@ describe('aiQueryReducer', function () {
const store = createStore({}, {
atlasAuthService: { on: sandbox.stub() },
atlasAiService: mockAtlasAiService,
+ connectionInfoAccess,
dataService: {
sample() {
return Promise.resolve([]);
@@ -131,6 +139,7 @@ describe('aiQueryReducer', function () {
return Promise.resolve([]);
},
},
+ connectionInfoAccess,
preferences,
logger: createNoopLogger(),
track: createNoopTrack(),
@@ -172,6 +181,7 @@ describe('aiQueryReducer', function () {
},
{
dataService: mockDataService,
+ connectionInfoAccess,
atlasAuthService: { on: sandbox.stub() },
atlasAiService: mockAtlasAiService,
preferences,
@@ -212,6 +222,7 @@ describe('aiQueryReducer', function () {
},
{
dataService: mockDataService,
+ connectionInfoAccess,
atlasAuthService: { on: sandbox.stub() },
atlasAiService: mockAtlasAiService,
preferences,
diff --git a/packages/compass-query-bar/src/stores/ai-query-reducer.ts b/packages/compass-query-bar/src/stores/ai-query-reducer.ts
index f7530728493..0c6c7c43ee3 100644
--- a/packages/compass-query-bar/src/stores/ai-query-reducer.ts
+++ b/packages/compass-query-bar/src/stores/ai-query-reducer.ts
@@ -16,6 +16,7 @@ import type { AtlasServiceError } from '@mongodb-js/atlas-service/renderer';
import type { Logger } from '@mongodb-js/compass-logging/provider';
import { mongoLogId } from '@mongodb-js/compass-logging/provider';
import type { TrackFunction } from '@mongodb-js/compass-telemetry';
+import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
type AIQueryStatus = 'ready' | 'fetching' | 'success';
@@ -115,6 +116,7 @@ type FailedResponseTrackMessage = {
log: Logger['log'];
track: TrackFunction;
requestId: string;
+ connectionInfo: ConnectionInfo;
};
function trackAndLogFailed({
@@ -125,6 +127,7 @@ function trackAndLogFailed({
log,
track,
requestId,
+ connectionInfo,
}: FailedResponseTrackMessage) {
log.warn(mongoLogId(1_001_000_198), 'AIQuery', 'AI query request failed', {
statusCode,
@@ -133,13 +136,17 @@ function trackAndLogFailed({
errorCode,
requestId,
});
- track('AI Response Failed', () => ({
- editor_view_type: 'find',
- error_name: errorName,
- status_code: statusCode,
- error_code: errorCode ?? '',
- request_id: requestId,
- }));
+ track(
+ 'AI Response Failed',
+ () => ({
+ editor_view_type: 'find',
+ error_name: errorName,
+ status_code: statusCode,
+ error_code: errorCode ?? '',
+ request_id: requestId,
+ }),
+ connectionInfo
+ );
}
export const runAIQuery = (
@@ -157,6 +164,7 @@ export const runAIQuery = (
preferences,
atlasAiService,
logger: { log },
+ connectionInfoAccess,
track,
}
) => {
@@ -165,12 +173,18 @@ export const runAIQuery = (
const abortController = new AbortController();
const { id: requestId, signal } = getAbortSignal();
- track('AI Prompt Submitted', () => ({
- editor_view_type: 'find',
- user_input_length: userInput.length,
- has_sample_documents: provideSampleDocuments,
- request_id: requestId,
- }));
+ const connectionInfo = connectionInfoAccess.getCurrentConnectionInfo();
+
+ track(
+ 'AI Prompt Submitted',
+ () => ({
+ editor_view_type: 'find',
+ user_input_length: userInput.length,
+ has_sample_documents: provideSampleDocuments,
+ request_id: requestId,
+ }),
+ connectionInfo
+ );
const {
aiQuery: { aiQueryRequestId: existingRequestId },
@@ -234,6 +248,7 @@ export const runAIQuery = (
log,
track,
requestId,
+ connectionInfo,
});
// We're going to reset input state with this error, show the error in the
// toast instead
@@ -286,6 +301,7 @@ export const runAIQuery = (
log,
track,
requestId,
+ connectionInfo,
});
dispatch({
type: AIQueryActionTypes.AIQueryFailed,
@@ -314,6 +330,7 @@ export const runAIQuery = (
log,
track,
requestId,
+ connectionInfo,
});
return;
}
@@ -326,6 +343,7 @@ export const runAIQuery = (
log,
track,
requestId,
+ connectionInfo,
});
dispatch({
type: AIQueryActionTypes.AIQueryFailed,
@@ -351,11 +369,15 @@ export const runAIQuery = (
shape: Object.keys(generatedFields),
}
);
- track('AI Response Generated', () => ({
- editor_view_type: 'find',
- query_shape: Object.keys(generatedFields),
- request_id: requestId,
- }));
+ track(
+ 'AI Response Generated',
+ () => ({
+ editor_view_type: 'find',
+ query_shape: Object.keys(generatedFields),
+ request_id: requestId,
+ }),
+ connectionInfo
+ );
dispatch({
type: AIQueryActionTypes.AIQuerySucceeded,
diff --git a/packages/compass-query-bar/src/stores/query-bar-reducer.ts b/packages/compass-query-bar/src/stores/query-bar-reducer.ts
index 71da0837305..0996a5c9036 100644
--- a/packages/compass-query-bar/src/stores/query-bar-reducer.ts
+++ b/packages/compass-query-bar/src/stores/query-bar-reducer.ts
@@ -394,7 +394,7 @@ const saveRecentQuery = (
query: Omit
): QueryBarThunkAction> => {
return async (
- _dispatch,
+ dispatch,
getState,
{ recentQueryStorage, logger: { debug } }
) => {
@@ -424,6 +424,7 @@ const saveRecentQuery = (
existingQuery._id,
updateAttributes
);
+ dispatch(fetchSavedQueries());
return;
}
@@ -432,6 +433,7 @@ const saveRecentQuery = (
_ns: namespace,
_host: host ?? '',
});
+ dispatch(fetchSavedQueries());
} catch (e) {
debug('Failed to save recent query', e);
}
diff --git a/packages/compass-query-bar/src/stores/query-bar-store.spec.ts b/packages/compass-query-bar/src/stores/query-bar-store.spec.ts
new file mode 100644
index 00000000000..370507d03ec
--- /dev/null
+++ b/packages/compass-query-bar/src/stores/query-bar-store.spec.ts
@@ -0,0 +1,74 @@
+import sinon from 'sinon';
+import { activatePlugin } from './query-bar-store';
+import { createNoopLogger } from '@mongodb-js/compass-logging/provider';
+import { createNoopTrack } from '@mongodb-js/compass-telemetry/provider';
+import { AppRegistry } from 'hadron-app-registry';
+import type { PreferencesAccess } from 'compass-preferences-model';
+import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
+import { expect } from 'chai';
+import { waitFor } from '@testing-library/react';
+describe('createQueryWithHistoryAutocompleter', function () {
+ let preferences: PreferencesAccess;
+ let loadAllStub: sinon.SinonStub;
+ beforeEach(async function () {
+ loadAllStub = sinon.stub();
+ preferences = await createSandboxFromDefaultPreferences();
+ });
+ afterEach(function () {
+ sinon.restore();
+ });
+ it('calls fetchSavedQueries when activatePlugin is called', async function () {
+ const mockService = {
+ getQueryFromUserInput: sinon
+ .stub()
+ .resolves({ content: { query: { filter: '{_id: 1}' } } }),
+ };
+ const mockDataService = {
+ sample: sinon.stub().resolves([{ _id: 42 }]),
+ getConnectionString: sinon.stub().returns({
+ hosts: ['localhost:27017'],
+ }),
+ };
+ activatePlugin(
+ {
+ namespace: 'test.coll',
+ isReadonly: true,
+ serverVersion: '6.0.0',
+ isSearchIndexesSupported: true,
+ isTimeSeries: false,
+ isClustered: false,
+ isFLE: false,
+ isDataLake: false,
+ isAtlas: false,
+ },
+ {
+ localAppRegistry: new AppRegistry(),
+ globalAppRegistry: new AppRegistry(),
+ dataService: mockDataService,
+ recentQueryStorageAccess: {
+ getStorage: () => ({
+ loadAll: loadAllStub,
+ }),
+ },
+ favoriteQueryStorageAccess: {
+ getStorage: () => ({
+ loadAll: loadAllStub,
+ }),
+ },
+ atlasAuthService: { on: sinon.stub() },
+ atlasAiService: mockService,
+ preferences,
+ logger: createNoopLogger(),
+ track: createNoopTrack(),
+ instance: { isWritable: true, on: sinon.stub() },
+ } as any,
+ {
+ on: () => {},
+ cleanup: () => {},
+ } as any
+ );
+ await waitFor(() => {
+ expect(loadAllStub).to.have.been.calledTwice;
+ });
+ });
+});
diff --git a/packages/compass-query-bar/src/stores/query-bar-store.ts b/packages/compass-query-bar/src/stores/query-bar-store.ts
index a3fd82c2f96..70a1dbcf532 100644
--- a/packages/compass-query-bar/src/stores/query-bar-store.ts
+++ b/packages/compass-query-bar/src/stores/query-bar-store.ts
@@ -7,13 +7,17 @@ import {
import thunk from 'redux-thunk';
import type { AnyAction } from 'redux';
import type { ThunkAction, ThunkDispatch } from 'redux-thunk';
-import type { DataService } from '@mongodb-js/compass-connections/provider';
+import type {
+ ConnectionInfoAccess,
+ DataService,
+} from '@mongodb-js/compass-connections/provider';
import { DEFAULT_FIELD_VALUES } from '../constants/query-bar-store';
import { mapQueryToFormFields } from '../utils/query';
import {
queryBarReducer,
INITIAL_STATE as INITIAL_QUERY_BAR_STATE,
QueryBarActions,
+ fetchSavedQueries,
} from './query-bar-reducer';
import { aiQueryReducer } from './ai-query-reducer';
import { getQueryAttributes } from '../utils';
@@ -44,6 +48,7 @@ type QueryBarServices = {
preferences: PreferencesAccess;
logger: Logger;
track: TrackFunction;
+ connectionInfoAccess: ConnectionInfoAccess;
atlasAuthService: AtlasAuthService;
atlasAiService: AtlasAiService;
favoriteQueryStorageAccess?: FavoriteQueryStorageAccess;
@@ -77,6 +82,7 @@ export type QueryBarExtraArgs = {
recentQueryStorage?: RecentQueryStorage;
logger: Logger;
track: TrackFunction;
+ connectionInfoAccess: ConnectionInfoAccess;
atlasAiService: AtlasAiService;
};
@@ -119,6 +125,7 @@ export function activatePlugin(
preferences,
logger,
track,
+ connectionInfoAccess,
atlasAuthService,
atlasAiService,
favoriteQueryStorageAccess,
@@ -153,6 +160,7 @@ export function activatePlugin(
preferences,
logger,
track,
+ connectionInfoAccess,
atlasAiService,
}
);
@@ -164,5 +172,7 @@ export function activatePlugin(
});
});
+ store.dispatch(fetchSavedQueries());
+
return { store, deactivate: cleanup, context: QueryBarStoreContext };
}
diff --git a/packages/compass-saved-aggregations-queries/package.json b/packages/compass-saved-aggregations-queries/package.json
index 5f114ef1e2a..728e1820944 100644
--- a/packages/compass-saved-aggregations-queries/package.json
+++ b/packages/compass-saved-aggregations-queries/package.json
@@ -11,7 +11,7 @@
"email": "compass@mongodb.com"
},
"homepage": "https://github.com/mongodb-js/compass",
- "version": "1.33.0",
+ "version": "1.36.0",
"repository": {
"type": "git",
"url": "https://github.com/mongodb-js/compass.git"
@@ -48,19 +48,19 @@
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
},
"dependencies": {
- "@mongodb-js/compass-app-stores": "^7.19.0",
- "@mongodb-js/compass-components": "^1.26.0",
- "@mongodb-js/compass-connections": "^1.33.0",
- "@mongodb-js/compass-logging": "^1.3.1",
- "@mongodb-js/compass-telemetry": "^1.0.1",
- "@mongodb-js/compass-workspaces": "^0.14.0",
- "@mongodb-js/connection-form": "^1.31.0",
- "@mongodb-js/connection-info": "^0.4.1",
- "@mongodb-js/my-queries-storage": "^0.10.0",
+ "@mongodb-js/compass-app-stores": "^7.22.0",
+ "@mongodb-js/compass-components": "^1.28.0",
+ "@mongodb-js/compass-connections": "^1.36.0",
+ "@mongodb-js/compass-logging": "^1.4.1",
+ "@mongodb-js/compass-telemetry": "^1.1.1",
+ "@mongodb-js/compass-workspaces": "^0.17.0",
+ "@mongodb-js/connection-form": "^1.34.0",
+ "@mongodb-js/connection-info": "^0.5.1",
+ "@mongodb-js/my-queries-storage": "^0.13.0",
"bson": "^6.7.0",
- "compass-preferences-model": "^2.23.1",
+ "compass-preferences-model": "^2.25.0",
"fuse.js": "^6.5.3",
- "hadron-app-registry": "^9.1.12",
+ "hadron-app-registry": "^9.2.1",
"mongodb-ns": "^2.4.2",
"react": "^17.0.2",
"react-redux": "^8.1.3",
@@ -68,8 +68,8 @@
"redux-thunk": "^2.4.2"
},
"devDependencies": {
- "@mongodb-js/connection-storage": "^0.14.1",
- "@mongodb-js/eslint-config-compass": "^1.1.2",
+ "@mongodb-js/connection-storage": "^0.16.0",
+ "@mongodb-js/eslint-config-compass": "^1.1.3",
"@mongodb-js/mocha-config-compass": "^1.3.9",
"@mongodb-js/prettier-config-compass": "^1.0.2",
"@mongodb-js/tsconfig-compass": "^1.0.4",
diff --git a/packages/compass-saved-aggregations-queries/src/index.ts b/packages/compass-saved-aggregations-queries/src/index.ts
index bdcf6573577..c977c816dbd 100644
--- a/packages/compass-saved-aggregations-queries/src/index.ts
+++ b/packages/compass-saved-aggregations-queries/src/index.ts
@@ -2,7 +2,7 @@ import { registerHadronPlugin } from 'hadron-app-registry';
import { connectionsManagerLocator } from '@mongodb-js/compass-connections/provider';
import { mongoDBInstancesManagerLocator } from '@mongodb-js/compass-app-stores/provider';
import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
-import { createTelemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
import { activatePlugin } from './stores';
import AggregationsQueriesList from './components/aggregations-queries-list';
import type { WorkspaceComponent } from '@mongodb-js/compass-workspaces';
@@ -18,7 +18,7 @@ const serviceLocators = {
instancesManager: mongoDBInstancesManagerLocator,
preferencesAccess: preferencesLocator,
logger: createLoggerLocator('COMPASS-MY-QUERIES-UI'),
- track: createTelemetryLocator(),
+ track: telemetryLocator,
workspaces: workspacesServiceLocator,
pipelineStorage: pipelineStorageLocator,
favoriteQueryStorageAccess: favoriteQueryStorageAccessLocator,
diff --git a/packages/compass-schema-validation/package.json b/packages/compass-schema-validation/package.json
index 397f0b369f1..2d55fa0eda0 100644
--- a/packages/compass-schema-validation/package.json
+++ b/packages/compass-schema-validation/package.json
@@ -6,7 +6,7 @@
"email": "compass@mongodb.com"
},
"private": true,
- "version": "6.33.0",
+ "version": "6.36.0",
"repository": {
"type": "git",
"url": "https://github.com/mongodb-js/compass.git"
@@ -48,41 +48,41 @@
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
},
"devDependencies": {
- "@mongodb-js/eslint-config-compass": "^1.1.2",
+ "@mongodb-js/eslint-config-compass": "^1.1.3",
"@mongodb-js/mocha-config-compass": "^1.3.9",
"@mongodb-js/prettier-config-compass": "^1.0.2",
"@mongodb-js/tsconfig-compass": "^1.0.4",
"chai": "^4.2.0",
"depcheck": "^1.4.1",
- "electron": "^29.4.3",
+ "electron": "^29.4.5",
"electron-mocha": "^12.2.0",
"enzyme": "^3.11.0",
"eslint": "^7.25.0",
- "hadron-ipc": "^3.2.16",
+ "hadron-ipc": "^3.2.18",
"mocha": "^10.2.0",
- "mongodb-instance-model": "^12.22.1",
+ "mongodb-instance-model": "^12.23.1",
"nyc": "^15.1.0",
"react-dom": "^17.0.2",
"sinon": "^8.1.1",
"typescript": "^5.0.4"
},
"dependencies": {
- "@mongodb-js/compass-app-stores": "^7.19.0",
- "@mongodb-js/compass-collection": "^4.32.0",
- "@mongodb-js/compass-components": "^1.26.0",
- "@mongodb-js/compass-connections": "^1.33.0",
- "@mongodb-js/compass-crud": "^13.33.0",
- "@mongodb-js/compass-editor": "^0.25.0",
- "@mongodb-js/compass-field-store": "^9.8.0",
- "@mongodb-js/compass-logging": "^1.3.1",
- "@mongodb-js/compass-telemetry": "^1.0.1",
+ "@mongodb-js/compass-app-stores": "^7.22.0",
+ "@mongodb-js/compass-collection": "^4.35.0",
+ "@mongodb-js/compass-components": "^1.28.0",
+ "@mongodb-js/compass-connections": "^1.36.0",
+ "@mongodb-js/compass-crud": "^13.36.0",
+ "@mongodb-js/compass-editor": "^0.27.0",
+ "@mongodb-js/compass-field-store": "^9.11.0",
+ "@mongodb-js/compass-logging": "^1.4.1",
+ "@mongodb-js/compass-telemetry": "^1.1.1",
"bson": "^6.7.0",
- "compass-preferences-model": "^2.23.1",
- "hadron-app-registry": "^9.1.12",
+ "compass-preferences-model": "^2.25.0",
+ "hadron-app-registry": "^9.2.1",
"javascript-stringify": "^2.0.1",
"lodash": "^4.17.21",
"mongodb-ns": "^2.4.2",
- "mongodb-query-parser": "^4.1.2",
+ "mongodb-query-parser": "^4.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-redux": "^8.1.3",
diff --git a/packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx b/packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx
index 56f77310703..016e91481ed 100644
--- a/packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx
+++ b/packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx
@@ -28,6 +28,10 @@ import type {
} from '../../modules/validation';
import { checkValidator } from '../../modules/validation';
import { ActionSelector, LevelSelector } from '../validation-selectors';
+import {
+ type ConnectionInfoAccess,
+ withConnectionInfoAccess,
+} from '@mongodb-js/compass-connections/provider';
const validationEditorStyles = css({
padding: spacing[3],
@@ -117,6 +121,7 @@ export type ValidationEditorProps = {
isEditable: boolean;
darkMode?: boolean;
track: TrackFunction;
+ connectionInfoAccess: ConnectionInfoAccess;
};
/**
@@ -178,7 +183,11 @@ class ValidationEditor extends Component {
typeof checkedValidator.validator === 'object' &&
!!checkedValidator.validator?.$jsonSchema,
};
- this.props.track('Schema Validation Edited', trackEvent);
+ this.props.track(
+ 'Schema Validation Edited',
+ trackEvent,
+ this.props.connectionInfoAccess.getCurrentConnectionInfo()
+ );
}
/**
@@ -313,5 +322,7 @@ class ValidationEditor extends Component {
}
export default withTelemetry(
- withDarkMode(ValidationEditor)
+ withConnectionInfoAccess(
+ withDarkMode(ValidationEditor)
+ )
);
diff --git a/packages/compass-schema-validation/src/index.ts b/packages/compass-schema-validation/src/index.ts
index 3cd3f8f8c3b..ec4da917a16 100644
--- a/packages/compass-schema-validation/src/index.ts
+++ b/packages/compass-schema-validation/src/index.ts
@@ -2,13 +2,14 @@ import { onActivated } from './stores';
import CompassSchemaValidation from './components/compass-schema-validation';
import { registerHadronPlugin } from 'hadron-app-registry';
import {
+ connectionInfoAccessLocator,
dataServiceLocator,
type DataServiceLocator,
} from '@mongodb-js/compass-connections/provider';
import { mongoDBInstanceLocator } from '@mongodb-js/compass-app-stores/provider';
import { preferencesLocator } from 'compass-preferences-model/provider';
import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
-import { createTelemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
export const CompassSchemaValidationHadronPlugin = registerHadronPlugin(
{
@@ -20,10 +21,11 @@ export const CompassSchemaValidationHadronPlugin = registerHadronPlugin(
dataService: dataServiceLocator as DataServiceLocator<
'aggregate' | 'collectionInfo' | 'updateCollection'
>,
+ connectionInfoAccess: connectionInfoAccessLocator,
instance: mongoDBInstanceLocator,
preferences: preferencesLocator,
logger: createLoggerLocator('COMPASS-SCHEMA-VALIDATION-UI'),
- track: createTelemetryLocator(),
+ track: telemetryLocator,
}
);
export const CompassSchemaValidationPlugin = {
diff --git a/packages/compass-schema-validation/src/modules/index.ts b/packages/compass-schema-validation/src/modules/index.ts
index 8c3376bb51a..f0592fd6cbd 100644
--- a/packages/compass-schema-validation/src/modules/index.ts
+++ b/packages/compass-schema-validation/src/modules/index.ts
@@ -23,7 +23,10 @@ import type { EditModeAction, EditModeState } from './edit-mode';
import editMode, { INITIAL_STATE as EDIT_MODE_STATE } from './edit-mode';
import type { ThunkAction } from 'redux-thunk';
import type { PreferencesAccess } from 'compass-preferences-model';
-import type { DataService } from '@mongodb-js/compass-connections/provider';
+import type {
+ ConnectionInfoAccess,
+ DataService,
+} from '@mongodb-js/compass-connections/provider';
import type AppRegistry from 'hadron-app-registry';
import type { Logger } from '@mongodb-js/compass-logging/provider';
import type { TrackFunction } from '@mongodb-js/compass-telemetry';
@@ -61,6 +64,7 @@ export type SchemaValidationExtraArgs = {
DataService,
'aggregate' | 'collectionInfo' | 'updateCollection'
>;
+ connectionInfoAccess: ConnectionInfoAccess;
preferences: PreferencesAccess;
globalAppRegistry: AppRegistry;
logger: Logger;
diff --git a/packages/compass-schema-validation/src/modules/validation.ts b/packages/compass-schema-validation/src/modules/validation.ts
index 0cdb01d56dd..a98c34f5541 100644
--- a/packages/compass-schema-validation/src/modules/validation.ts
+++ b/packages/compass-schema-validation/src/modules/validation.ts
@@ -456,7 +456,11 @@ export function validationFromCollection(
export const saveValidation = (
validation: Validation
): SchemaValidationThunkAction> => {
- return async (dispatch, getState, { dataService, track }) => {
+ return async (
+ dispatch,
+ getState,
+ { dataService, track, connectionInfoAccess }
+ ) => {
const state = getState();
const namespace = state.namespace;
const checkedValidator = checkValidator(validation.validator);
@@ -471,7 +475,11 @@ export const saveValidation = (
validation_action: validation.validationAction,
validation_level: validation.validationLevel,
};
- track('Schema Validation Updated', trackEvent);
+ track(
+ 'Schema Validation Updated',
+ trackEvent,
+ connectionInfoAccess.getCurrentConnectionInfo()
+ );
try {
await dataService.updateCollection(
`${namespace.database}.${namespace.collection}`,
diff --git a/packages/compass-schema-validation/src/modules/zero-state.ts b/packages/compass-schema-validation/src/modules/zero-state.ts
index 22d2b70b09d..fcb98f5f5b1 100644
--- a/packages/compass-schema-validation/src/modules/zero-state.ts
+++ b/packages/compass-schema-validation/src/modules/zero-state.ts
@@ -48,9 +48,13 @@ export const zeroStateChanged = (
export const changeZeroState = (
isZeroState: boolean
): SchemaValidationThunkAction => {
- return (dispatch, _getState, { track }) => {
+ return (dispatch, _getState, { track, connectionInfoAccess }) => {
if (isZeroState === false) {
- track('Schema Validation Added');
+ track(
+ 'Schema Validation Added',
+ {},
+ connectionInfoAccess.getCurrentConnectionInfo()
+ );
}
return dispatch(zeroStateChanged(isZeroState));
};
diff --git a/packages/compass-schema-validation/src/stores/store.spec.ts b/packages/compass-schema-validation/src/stores/store.spec.ts
index 116f12ba577..bdc8f0f9b70 100644
--- a/packages/compass-schema-validation/src/stores/store.spec.ts
+++ b/packages/compass-schema-validation/src/stores/store.spec.ts
@@ -20,6 +20,7 @@ import { onActivated } from './store';
import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
import { createNoopLogger } from '@mongodb-js/compass-logging/provider';
import { createNoopTrack } from '@mongodb-js/compass-telemetry/provider';
+import type { ConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
const topologyDescription = {
type: 'Unknown',
@@ -45,6 +46,9 @@ describe('Schema Validation Store', function () {
let store: Store;
let deactivate: null | (() => void) = null;
const globalAppRegistry = new AppRegistry();
+ const connectionInfoAccess = {
+ getCurrentConnectionInfo: () => {},
+ } as ConnectionInfoAccess;
beforeEach(async function () {
const activateResult = onActivated(
@@ -56,6 +60,7 @@ describe('Schema Validation Store', function () {
preferences: await createSandboxFromDefaultPreferences(),
logger: createNoopLogger(),
track: createNoopTrack(),
+ connectionInfoAccess,
},
createActivateHelpers()
);
diff --git a/packages/compass-schema-validation/src/stores/store.ts b/packages/compass-schema-validation/src/stores/store.ts
index bb30e1bfea3..38510cf10cf 100644
--- a/packages/compass-schema-validation/src/stores/store.ts
+++ b/packages/compass-schema-validation/src/stores/store.ts
@@ -8,7 +8,10 @@ import { editModeChanged } from '../modules/edit-mode';
import semver from 'semver';
import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
import type { ActivateHelpers, AppRegistry } from 'hadron-app-registry';
-import type { DataService } from '@mongodb-js/compass-connections/provider';
+import type {
+ ConnectionInfoAccess,
+ DataService,
+} from '@mongodb-js/compass-connections/provider';
import type { MongoDBInstance } from '@mongodb-js/compass-app-stores/provider';
import type { PreferencesAccess } from 'compass-preferences-model';
import type { Logger } from '@mongodb-js/compass-logging/provider';
@@ -25,6 +28,7 @@ type SchemaValidationServices = {
DataService,
'aggregate' | 'collectionInfo' | 'updateCollection'
>;
+ connectionInfoAccess: ConnectionInfoAccess;
preferences: PreferencesAccess;
instance: MongoDBInstance;
logger: Logger;
@@ -36,7 +40,12 @@ export function configureStore(
state: Partial,
services: Pick<
SchemaValidationServices,
- 'globalAppRegistry' | 'dataService' | 'preferences' | 'logger' | 'track'
+ | 'globalAppRegistry'
+ | 'dataService'
+ | 'preferences'
+ | 'logger'
+ | 'track'
+ | 'connectionInfoAccess'
>
) {
return createStore(
@@ -57,6 +66,7 @@ export function onActivated(
{
globalAppRegistry,
dataService,
+ connectionInfoAccess,
preferences,
instance,
logger,
@@ -77,6 +87,7 @@ export function onActivated(
},
{
dataService,
+ connectionInfoAccess,
preferences,
globalAppRegistry,
logger,
diff --git a/packages/compass-schema/package.json b/packages/compass-schema/package.json
index 83bfdcb2fc4..19df073b66e 100644
--- a/packages/compass-schema/package.json
+++ b/packages/compass-schema/package.json
@@ -6,7 +6,7 @@
"email": "compass@mongodb.com"
},
"private": true,
- "version": "6.34.0",
+ "version": "6.37.0",
"repository": {
"type": "git",
"url": "https://github.com/mongodb-js/compass.git"
@@ -48,9 +48,9 @@
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
},
"devDependencies": {
- "@mongodb-js/eslint-config-compass": "^1.1.2",
+ "@mongodb-js/eslint-config-compass": "^1.1.3",
"@mongodb-js/mocha-config-compass": "^1.3.9",
- "@mongodb-js/my-queries-storage": "^0.10.0",
+ "@mongodb-js/my-queries-storage": "^0.13.0",
"@mongodb-js/prettier-config-compass": "^1.0.2",
"@mongodb-js/tsconfig-compass": "^1.0.4",
"@testing-library/react": "^12.1.5",
@@ -73,26 +73,26 @@
"xvfb-maybe": "^0.2.1"
},
"dependencies": {
- "@mongodb-js/compass-collection": "^4.32.0",
- "@mongodb-js/compass-components": "^1.26.0",
- "@mongodb-js/compass-connections": "^1.33.0",
- "@mongodb-js/compass-field-store": "^9.8.0",
- "@mongodb-js/compass-logging": "^1.3.1",
- "@mongodb-js/compass-telemetry": "^1.0.1",
- "@mongodb-js/compass-query-bar": "^8.34.0",
- "@mongodb-js/connection-storage": "^0.14.1",
+ "@mongodb-js/compass-collection": "^4.35.0",
+ "@mongodb-js/compass-components": "^1.28.0",
+ "@mongodb-js/compass-connections": "^1.36.0",
+ "@mongodb-js/compass-field-store": "^9.11.0",
+ "@mongodb-js/compass-logging": "^1.4.1",
+ "@mongodb-js/compass-telemetry": "^1.1.1",
+ "@mongodb-js/compass-query-bar": "^8.37.0",
+ "@mongodb-js/connection-storage": "^0.16.0",
"bson": "^6.7.0",
- "compass-preferences-model": "^2.23.1",
+ "compass-preferences-model": "^2.25.0",
"d3": "^3.5.17",
- "hadron-app-registry": "^9.1.12",
- "hadron-document": "^8.5.4",
+ "hadron-app-registry": "^9.2.1",
+ "hadron-document": "^8.5.5",
"leaflet": "^1.5.1",
"leaflet-defaulticon-compatibility": "^0.1.1",
"leaflet-draw": "^1.0.4",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"mongodb": "^6.7.0",
- "mongodb-query-util": "^2.2.3",
+ "mongodb-query-util": "^2.2.4",
"mongodb-schema": "^12.2.0",
"numeral": "^1.5.6",
"prop-types": "^15.7.2",
@@ -100,7 +100,7 @@
"react-leaflet": "^2.4.0",
"react-leaflet-draw": "^0.19.0",
"reflux": "^0.4.1",
- "@mongodb-js/reflux-state-mixin": "^1.0.2"
+ "@mongodb-js/reflux-state-mixin": "^1.0.3"
},
"is_compass_plugin": true
}
diff --git a/packages/compass-schema/src/components/compass-schema.tsx b/packages/compass-schema/src/components/compass-schema.tsx
index 231c85f8b07..6b4d47ff6b1 100644
--- a/packages/compass-schema/src/components/compass-schema.tsx
+++ b/packages/compass-schema/src/components/compass-schema.tsx
@@ -337,7 +337,7 @@ const FieldList: React.FunctionComponent<{
const nbsp = '\u00a0';
const title = 'Atlas’ Performance Advisor.';
const PerformanceAdvisorBanner = () => {
- const { atlasMetadata } = useConnectionInfo();
+ const connectionInfo = useConnectionInfo();
const track = useTelemetry();
return (
@@ -348,10 +348,12 @@ const PerformanceAdvisorBanner = () => {
Insight
{nbsp}or{nbsp}
- {atlasMetadata ? (
+ {connectionInfo.atlasMetadata ? (
track('Performance Advisor Clicked')}
+ href={getAtlasPerformanceAdvisorLink(connectionInfo.atlasMetadata)}
+ onClick={() =>
+ track('Performance Advisor Clicked', {}, connectionInfo)
+ }
hideExternalIcon
>
{title}
diff --git a/packages/compass-schema/src/index.ts b/packages/compass-schema/src/index.ts
index 0701e840424..201098d8abd 100644
--- a/packages/compass-schema/src/index.ts
+++ b/packages/compass-schema/src/index.ts
@@ -1,4 +1,5 @@
import {
+ connectionInfoAccessLocator,
dataServiceLocator,
type DataServiceLocator,
} from '@mongodb-js/compass-connections/provider';
@@ -7,7 +8,7 @@ import CompassSchema from './components/compass-schema';
import { registerHadronPlugin } from 'hadron-app-registry';
import { activateSchemaPlugin } from './stores/store';
import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
-import { createTelemetryLocator } from '@mongodb-js/compass-telemetry/provider';
+import { telemetryLocator } from '@mongodb-js/compass-telemetry/provider';
import { preferencesLocator } from 'compass-preferences-model/provider';
import { fieldStoreServiceLocator } from '@mongodb-js/compass-field-store';
import { queryBarServiceLocator } from '@mongodb-js/compass-query-bar';
@@ -23,10 +24,11 @@ export const CompassSchemaHadronPlugin = registerHadronPlugin(
'sample' | 'isCancelError'
>,
logger: createLoggerLocator('COMPASS-SCHEMA-UI'),
- track: createTelemetryLocator(),
+ track: telemetryLocator,
preferences: preferencesLocator,
fieldStoreService: fieldStoreServiceLocator,
queryBar: queryBarServiceLocator,
+ connectionInfoAccess: connectionInfoAccessLocator,
}
);
export const CompassSchemaPlugin = {
diff --git a/packages/compass-schema/src/stores/store.spec.ts b/packages/compass-schema/src/stores/store.spec.ts
index 096ed700631..f08d4617d25 100644
--- a/packages/compass-schema/src/stores/store.spec.ts
+++ b/packages/compass-schema/src/stores/store.spec.ts
@@ -8,6 +8,7 @@ import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
import { createNoopLogger } from '@mongodb-js/compass-logging/provider';
import type { FieldStoreService } from '@mongodb-js/compass-field-store';
import { createNoopTrack } from '@mongodb-js/compass-telemetry/provider';
+import type { ConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
const dummyLogger = createNoopLogger('TEST');
const dummyTrack = createNoopTrack();
@@ -31,6 +32,9 @@ describe('Schema Store', function () {
const globalAppRegistry = new AppRegistry();
const dataService = 'test';
const namespace = 'db.coll';
+ const connectionInfoAccess = {
+ getCurrentConnectionInfo: () => {},
+ } as ConnectionInfoAccess;
beforeEach(async function () {
const plugin = activateSchemaPlugin(
@@ -46,6 +50,7 @@ describe('Schema Store', function () {
preferences: await createSandboxFromDefaultPreferences(),
fieldStoreService: mockFieldStoreService,
queryBar: mockQueryBar as any,
+ connectionInfoAccess,
},
createActivateHelpers()
);
diff --git a/packages/compass-schema/src/stores/store.ts b/packages/compass-schema/src/stores/store.ts
index 1debaaf7b54..9485a1250e9 100644
--- a/packages/compass-schema/src/stores/store.ts
+++ b/packages/compass-schema/src/stores/store.ts
@@ -20,7 +20,10 @@ import {
import { capMaxTimeMSAtPreferenceLimit } from 'compass-preferences-model/provider';
import { openToast } from '@mongodb-js/compass-components';
import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
-import type { DataService as OriginalDataService } from '@mongodb-js/compass-connections/provider';
+import type {
+ ConnectionInfoAccess,
+ DataService as OriginalDataService,
+} from '@mongodb-js/compass-connections/provider';
import type { ActivateHelpers } from 'hadron-app-registry';
import type AppRegistry from 'hadron-app-registry';
import { configureActions } from '../actions';
@@ -57,6 +60,7 @@ function resultId(): number {
export type DataService = Pick;
export type SchemaPluginServices = {
dataService: DataService;
+ connectionInfoAccess: ConnectionInfoAccess;
localAppRegistry: Pick;
globalAppRegistry: Pick;
logger: Logger;
@@ -127,6 +131,7 @@ export function activateSchemaPlugin(
preferences,
fieldStoreService,
queryBar,
+ connectionInfoAccess,
}: SchemaPluginServices,
{ on, cleanup }: ActivateHelpers
) {
@@ -261,7 +266,11 @@ export function activateSchemaPlugin(
geo_data: schema ? schemaContainsGeoData(schema) : false,
analysis_time_ms: analysisTimeMS,
});
- track('Schema Analyzed', trackEvent);
+ track(
+ 'Schema Analyzed',
+ trackEvent,
+ connectionInfoAccess.getCurrentConnectionInfo()
+ );
},
startAnalysis: async function (this: SchemaStore) {
diff --git a/packages/compass-serverstats/package.json b/packages/compass-serverstats/package.json
index 30f834356f3..9ec09b697e4 100644
--- a/packages/compass-serverstats/package.json
+++ b/packages/compass-serverstats/package.json
@@ -2,7 +2,7 @@
"name": "@mongodb-js/compass-serverstats",
"description": "Compass Real Time",
"private": true,
- "version": "16.32.0",
+ "version": "16.35.0",
"main": "dist/index.js",
"compass:main": "src/index.ts",
"exports": {
@@ -30,15 +30,15 @@
},
"license": "SSPL",
"dependencies": {
- "@mongodb-js/compass-app-stores": "^7.19.0",
- "@mongodb-js/compass-components": "^1.26.0",
- "@mongodb-js/compass-connections": "^1.33.0",
- "@mongodb-js/compass-telemetry": "^1.0.1",
- "@mongodb-js/compass-workspaces": "^0.14.0",
+ "@mongodb-js/compass-app-stores": "^7.22.0",
+ "@mongodb-js/compass-components": "^1.28.0",
+ "@mongodb-js/compass-connections": "^1.36.0",
+ "@mongodb-js/compass-telemetry": "^1.1.1",
+ "@mongodb-js/compass-workspaces": "^0.17.0",
"d3": "^3.5.17",
"d3-timer": "^1.0.3",
"debug": "^4.3.4",
- "hadron-app-registry": "^9.1.12",
+ "hadron-app-registry": "^9.2.1",
"lodash": "^4.17.21",
"mongodb-ns": "^2.4.2",
"prop-types": "^15.7.2",
@@ -46,7 +46,7 @@
"reflux": "^0.4.1"
},
"devDependencies": {
- "@mongodb-js/eslint-config-compass": "^1.1.2",
+ "@mongodb-js/eslint-config-compass": "^1.1.3",
"@mongodb-js/mocha-config-compass": "^1.3.9",
"@mongodb-js/prettier-config-compass": "^1.0.2",
"@mongodb-js/tsconfig-compass": "^1.0.4",
diff --git a/packages/compass-serverstats/src/components/current-op-component.jsx b/packages/compass-serverstats/src/components/current-op-component.jsx
index 5d0fd30e278..a17af94ee28 100644
--- a/packages/compass-serverstats/src/components/current-op-component.jsx
+++ b/packages/compass-serverstats/src/components/current-op-component.jsx
@@ -4,6 +4,9 @@ const PropTypes = require('prop-types');
const Actions = require('../actions');
const DBErrorStore = require('../stores/dberror-store');
const { withTelemetry } = require('@mongodb-js/compass-telemetry/provider');
+const {
+ withConnectionInfoAccess,
+} = require('@mongodb-js/compass-connections/provider');
// const debug = require('debug')('mongodb-compass:server-stats:current-op-component');
@@ -97,7 +100,11 @@ class CurrentOpComponent extends React.Component {
* @param {Object} data - The row data.
*/
showOperationDetails(data) {
- this.props.track('CurrentOp showOperationDetails');
+ this.props.track(
+ 'CurrentOp showOperationDetails',
+ {},
+ this.props.connectionInfoAccess.getCurrentConnectionInfo()
+ );
Actions.showOperationDetails(data);
}
@@ -186,9 +193,10 @@ class CurrentOpComponent extends React.Component {
CurrentOpComponent.propTypes = {
store: PropTypes.any.isRequired,
interval: PropTypes.number.isRequired,
- track: PropTypes.any,
+ track: PropTypes.any.isRequired,
+ connectionInfoAccess: PropTypes.any.isRequired,
};
CurrentOpComponent.displayName = 'CurrentOpComponent';
-module.exports = withTelemetry(CurrentOpComponent);
+module.exports = withTelemetry(withConnectionInfoAccess(CurrentOpComponent));
diff --git a/packages/compass-serverstats/src/components/detailview-component.jsx b/packages/compass-serverstats/src/components/detailview-component.jsx
deleted file mode 100644
index 8b2a5b1f891..00000000000
--- a/packages/compass-serverstats/src/components/detailview-component.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-const React = require('react');
-const Actions = require('../actions');
-const { Button, Icon } = require('@mongodb-js/compass-components');
-const PropTypes = require('prop-types');
-const { withTelemetry } = require('@mongodb-js/compass-telemetry/provider');
-
-class DetailViewComponent extends React.Component {
- constructor(props) {
- super(props);
- this.state = { error: null, data: {}, display: 'none' };
- }
-
- componentDidMount() {
- this.unsubscribeShowOperationDetails = Actions.showOperationDetails.listen(
- this.show.bind(this)
- );
- this.unsubscribeHideOperationDetails = Actions.hideOperationDetails.listen(
- this.hide.bind(this)
- );
- }
-
- componentWillUnmount() {
- this.unsubscribeShowOperationDetails();
- this.unsubscribeHideOperationDetails();
- }
-
- /**
- * Set the component to visible.
- *
- * @param {Object} data - The operation data.
- */
- show(data) {
- this.setState({ data: data, display: 'block' });
- }
-
- /**
- * Set the component to hidden.
- */
- hide() {
- this.setState({ data: {}, display: 'none' });
- }
-
- killOp() {
- this.props.logger.track('DetailView killOp');
- Actions.killOp(this.state.data.opid);
- this.hideOperationDetails();
- }
-
- /**
- * Fire the show operation detail action with the row data.
- */
- hideOperationDetails() {
- this.props.logger.track('DetailView hideOperationDetails');
- Actions.hideOperationDetails();
- }
-
- removeMs(key, value) {
- if (key === 'ms_running') {
- return undefined;
- }
- return value;
- }
-
- renderError() {
- return (
-
- this.state.error.message
-
- );
- }
-
- renderZero() {
- return ;
- }
-
- renderGraph() {
- return (
-
-
-
-
-
{this.state.data.op}
-
- {this.state.data.ns}
-
-
- {this.state.data.ms_running + ' ms'}
-
-
-
- -
-
opid
-
- {this.state.data.opid}
-
-
- -
-
client s
-
- {this.state.data.client}
-
-
- -
-
active
-
- {this.state.data.active}
-
-
- -
-
wait lock
-
- {this.state.data.waitingForLock}
-
-
- -
-
-
-
-
-
-
- {JSON.stringify(this.state.data, this.removeMs, 4)}
-
-
-
+
+
+
+
{data.op}
+
{data.ns}
+
{`${data.ms_running} ms`}
+
+
+
+ {JSON.stringify(data, removeMS, 4)}
+
+
+
undefined}
runtime={fakeRuntime}
- emitShellPluginOpened={emitShellOpenedSpy}
enableShell
/>
);
@@ -49,23 +47,19 @@ describe('CompassShell', function () {
getComputedStyle(shellDomNode).getPropertyValue('display');
expect(shellDisplayStyle).to.equal('none');
});
-
- context('when is it expanded', function () {
- it('calls the function prop emitShellPluginOpened', function () {
- expect(emitShellOpenedSpy.calledOnce).to.equal(false);
-
- wrapper.setState({ height: 300 });
- wrapper.update();
-
- expect(emitShellOpenedSpy.calledOnce).to.equal(true);
- });
- });
});
context('when rendered expanded', function () {
context('when runtime property is not present', function () {
it('does not render a shell if runtime is null', function () {
- const wrapper = mount(
);
+ const wrapper = mount(
+
undefined}
+ runtime={null}
+ enableShell
+ />
+ );
try {
wrapper.setState({ height: 300 });
wrapper.update();
@@ -82,8 +76,9 @@ describe('CompassShell', function () {
beforeEach(function () {
wrapper = mount(
undefined}
runtime={fakeRuntime}
- emitShellPluginOpened={() => {}}
enableShell
/>
);
@@ -128,8 +123,9 @@ describe('CompassShell', function () {
it('renders the inital output', function () {
const wrapper = mount(
undefined}
runtime={fakeRuntime}
- emitShellPluginOpened={() => {}}
shellOutput={[
{
type: 'output',
@@ -159,7 +155,12 @@ describe('CompassShell', function () {
context('when historyStorage is not present', function () {
it('passes an empty history to the Shell', function () {
const wrapper = shallow(
-
+ undefined}
+ runtime={fakeRuntime}
+ enableShell
+ />
);
expect(wrapper.find(Shell).prop('initialHistory')).to.deep.equal([]);
@@ -174,8 +175,9 @@ describe('CompassShell', function () {
beforeEach(function () {
wrapper = mount(
undefined}
runtime={fakeRuntime}
- emitShellPluginOpened={() => {}}
enableShell
/>
);
@@ -221,22 +223,14 @@ describe('CompassShell', function () {
});
context('when historyStorage is present', function () {
- let fakeStorage;
-
- beforeEach(function () {
- fakeStorage = {
- load: sinon.spy(() => Promise.resolve([])),
- save: sinon.spy(() => Promise.resolve()),
- };
- });
+ const history = ['line1'];
it('passes the loaded history as initialHistory to Shell', async function () {
- fakeStorage.load = sinon.spy(() => Promise.resolve(['line1']));
-
const wrapper = shallow(
undefined}
enableShell
/>
);
@@ -251,10 +245,13 @@ describe('CompassShell', function () {
});
it('saves the history when history changes', async function () {
+ const changeSpy = sinon.spy();
+
const wrapper = shallow(
);
@@ -264,7 +261,7 @@ describe('CompassShell', function () {
const onHistoryChanged = wrapper.find(Shell).prop('onHistoryChanged');
onHistoryChanged(['line1']);
- expect(fakeStorage.save.calledWith(['line1'])).to.equal(true);
+ expect(changeSpy).to.have.been.calledOnceWith(['line1']);
wrapper.unmount();
});
@@ -291,22 +288,20 @@ describe('CompassShell', function () {
});
context('resize actions', function () {
- let onOpenShellSpy;
let wrapper;
beforeEach(function () {
- onOpenShellSpy = sinon.spy();
wrapper = mount(
undefined}
runtime={fakeRuntime}
- emitShellPluginOpened={onOpenShellSpy}
enableShell
/>
);
});
afterEach(function () {
wrapper.unmount();
- onOpenShellSpy = null;
wrapper = null;
});
@@ -379,10 +374,6 @@ describe('CompassShell', function () {
expect(shellDisplayStyle).to.equal('none');
});
- it('does not calls the function prop emitShellPluginOpened', function () {
- expect(onOpenShellSpy.called).to.equal(false);
- });
-
context('when it hits the resize threshold', function () {
beforeEach(function () {
wrapper.setState({ height: 151 });
@@ -395,10 +386,6 @@ describe('CompassShell', function () {
).to.equal(151);
expect(wrapper.state('height')).to.equal(151);
});
-
- it('calls the function prop emitShellPluginOpened', function () {
- expect(onOpenShellSpy.calledOnce).to.equal(true);
- });
});
});
});
diff --git a/packages/compass-shell/src/components/compass-shell/compass-shell.tsx b/packages/compass-shell/src/components/compass-shell/compass-shell.tsx
index 5037f9bfa5d..faac5612b9e 100644
--- a/packages/compass-shell/src/components/compass-shell/compass-shell.tsx
+++ b/packages/compass-shell/src/components/compass-shell/compass-shell.tsx
@@ -1,13 +1,7 @@
import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withPreferences } from 'compass-preferences-model/provider';
-import type { Shell as ShellType } from '@mongosh/browser-repl';
-
-// The browser-repl package.json defines exports['.'].require but not .module, hence require() instead of import
-const { Shell } =
- // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/consistent-type-imports
- require('@mongosh/browser-repl') as typeof import('@mongosh/browser-repl');
+import { Shell } from '@mongosh/browser-repl';
import {
ResizeHandle,
ResizeDirection,
@@ -16,12 +10,11 @@ import {
getScrollbarStyles,
palette,
} from '@mongodb-js/compass-components';
-
import ShellInfoModal from '../shell-info-modal';
import ShellHeader from '../shell-header';
import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
-import type { HistoryStorage } from '../../modules/history-storage';
-import type { RootState } from '../../modules';
+import type { RootState } from '../../stores/store';
+import { saveHistory, selectRuntimeById } from '../../stores/store';
const compassShellStyles = css(
{
@@ -63,42 +56,34 @@ function boundShellHeight(attemptedHeight: number): number {
}
export interface CompassShellProps {
- emitShellPluginOpened?: () => void;
runtime: WorkerRuntime | null;
shellOutput?: ShellOutputEntry[];
- historyStorage?: HistoryStorage;
enableShell: boolean;
+ initialHistory: string[] | null;
+ onHistoryChange: (history: string[]) => void;
}
interface CompassShellState {
height: number;
prevHeight: number;
- initialHistory: string[] | null;
isOperationInProgress: boolean;
showInfoModal: boolean;
}
-type ShellOutputEntry = ShellType['state']['output'][number];
+type ShellProps = React.ComponentProps;
+
+type ShellRef = Extract['ref'], { current: any }>;
+
+type ShellOutputEntry = Required['initialOutput'][number];
export class CompassShell extends Component<
CompassShellProps,
CompassShellState
> {
- static propTypes = {
- emitShellPluginOpened: PropTypes.func,
- runtime: PropTypes.object,
- shellOutput: PropTypes.array,
- historyStorage: PropTypes.object,
- enableShell: PropTypes.bool,
- };
-
- shellRef = React.createRef();
+ shellRef: ShellRef = React.createRef();
shellOutput: readonly ShellOutputEntry[];
static defaultProps = {
- emitShellPluginOpened: () => {
- /* ignore */
- },
runtime: null,
};
constructor(props: CompassShellProps) {
@@ -109,34 +94,11 @@ export class CompassShell extends Component<
this.state = {
height: shellHeightClosed,
prevHeight: defaultShellHeightOpened,
- initialHistory: this.props.historyStorage ? null : [],
isOperationInProgress: false,
showInfoModal: false,
};
}
- componentDidMount() {
- void this.loadHistory();
- window.addEventListener('beforeunload', this.terminateRuntime);
- }
-
- componentDidUpdate(
- prevProps: CompassShellProps,
- prevState: CompassShellState
- ) {
- const { height } = this.state;
- if (
- prevState.height < shellMinHeightOpened &&
- height > shellMinHeightOpened
- ) {
- this.props.emitShellPluginOpened?.();
- }
- }
-
- componentWillUnmount() {
- window.removeEventListener('beforeunload', this.terminateRuntime);
- }
-
onShellOutputChanged = (output: readonly ShellOutputEntry[]) => {
this.shellOutput = output;
};
@@ -159,40 +121,6 @@ export class CompassShell extends Component<
}
};
- saveHistory = (history: readonly string[]) => {
- void (async () => {
- if (!this.props.historyStorage) {
- return;
- }
-
- try {
- await this.props.historyStorage.save([...history]);
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
- }
- })();
- };
-
- loadHistory = async () => {
- if (!this.props.historyStorage) {
- return;
- }
-
- try {
- const history = await this.props.historyStorage.load();
- this.setState({
- initialHistory: history,
- });
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
- this.setState({
- initialHistory: [],
- });
- }
- };
-
updateHeight(height: number) {
if (height > shellMinHeightOpened) {
this.setState({
@@ -214,16 +142,10 @@ export class CompassShell extends Component<
focusEditor() {
if (this.shellRef.current && window.getSelection()?.type !== 'Range') {
- (this.shellRef.current as any) /* private ... */
- .focusEditor();
+ this.shellRef.current.focusEditor();
}
}
- /**
- * Render CompassShell component.
- *
- * @returns {React.Component} The rendered component.
- */
render() {
const { height, prevHeight, isOperationInProgress, showInfoModal } =
this.state;
@@ -231,7 +153,7 @@ export class CompassShell extends Component<
if (
!this.props.enableShell ||
!this.props.runtime ||
- !this.state.initialHistory
+ !this.props.initialHistory
) {
return ;
}
@@ -288,9 +210,11 @@ export class CompassShell extends Component<
{
+ this.props.onHistoryChange([...history]);
+ }}
onOutputChanged={this.onShellOutputChanged}
onOperationStarted={this.onOperationStarted}
onOperationEnd={this.onOperationEnd}
@@ -302,9 +226,12 @@ export class CompassShell extends Component<
}
}
-export default connect((state: RootState) => ({
- emitShellPluginOpened: () => {
- state.runtime.appRegistry?.emit('compass:compass-shell:opened');
+export default connect(
+ (state: RootState) => {
+ return {
+ runtime: selectRuntimeById(state),
+ initialHistory: state.history,
+ };
},
- runtime: state.runtime ? state.runtime.runtime : null,
-}))(withPreferences(CompassShell, ['enableShell']));
+ { onHistoryChange: saveHistory }
+)(withPreferences(CompassShell, ['enableShell']));
diff --git a/packages/compass-shell/src/components/compass-shell/tab-compass-shell.tsx b/packages/compass-shell/src/components/compass-shell/tab-compass-shell.tsx
index 47688bf22bf..04f0d9463f0 100644
--- a/packages/compass-shell/src/components/compass-shell/tab-compass-shell.tsx
+++ b/packages/compass-shell/src/components/compass-shell/tab-compass-shell.tsx
@@ -1,28 +1,25 @@
import { connect } from 'react-redux';
import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTabState } from '@mongodb-js/compass-workspaces/provider';
+import {
+ useOnTabReplace,
+ useTabState,
+} from '@mongodb-js/compass-workspaces/provider';
import {
Banner,
Link,
css,
getScrollbarStyles,
palette,
+ rafraf,
spacing,
} from '@mongodb-js/compass-components';
-import type { MapStateToProps } from 'react-redux';
-import type { Shell as ShellType } from '@mongosh/browser-repl';
import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
-
import ShellInfoModal from '../shell-info-modal';
import ShellHeader from '../shell-header/shell-header';
-import type { HistoryStorage } from '../../modules/history-storage';
-import type { RootState } from '../../modules';
import { usePreference } from 'compass-preferences-model/provider';
-
-// The browser-repl package.json defines exports['.'].require but not .module, hence require() instead of import
-const { Shell } =
- // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/consistent-type-imports
- require('@mongosh/browser-repl') as typeof import('@mongosh/browser-repl');
+import { Shell as _Shell } from '@mongosh/browser-repl';
+import type { RootState } from '../../stores/store';
+import { selectRuntimeById, saveHistory } from '../../stores/store';
const compassShellStyles = css(
{
@@ -47,54 +44,88 @@ const compassShellContainerStyles = css({
borderTop: `1px solid ${palette.gray.dark2}`,
});
-type ShellOutputEntry = ShellType['state']['output'][number];
+type ShellProps = React.ComponentProps;
+
+type ShellRef = Extract['ref'], { current: any }>;
+
+type ShellType = ShellRef['current'];
+
+type ShellOutputEntry = Required['initialOutput'][number];
type CompassShellProps = {
runtime: WorkerRuntime | null;
- historyStorage?: HistoryStorage;
- emitShellPluginOpened?(): void;
+ initialHistory: string[] | null;
+ onHistoryChange: (history: string[]) => void;
+ initialEvaluate?: string | string[];
+ initialInput?: string;
};
+function useInitialEval(initialEvaluate?: string | string[]) {
+ const [initialEvalApplied, setInitialEvalApplied] = useTabState(
+ 'initialEvalApplied',
+ false
+ );
+ useEffect(() => {
+ setInitialEvalApplied(true);
+ }, [setInitialEvalApplied]);
+ return initialEvalApplied ? undefined : initialEvaluate;
+}
+
+const Shell = React.forwardRef(function Shell(
+ { initialEvaluate: _initialEvaluate, ...props },
+ ref
+) {
+ const shellRef = useRef(null);
+ const initialEvaluate = useInitialEval(_initialEvaluate);
+ const mergeRef = useCallback(
+ (shell: ShellType | null) => {
+ shellRef.current = shell;
+ if (typeof ref === 'function') {
+ ref(shell);
+ } else if (ref) {
+ ref.current = shell;
+ }
+ },
+ [ref]
+ );
+ useEffect(() => {
+ return rafraf(() => {
+ shellRef.current?.focusEditor();
+ });
+ }, []);
+ return (
+ <_Shell
+ ref={mergeRef}
+ initialEvaluate={initialEvaluate}
+ {...props}
+ >
+ );
+});
+
const CompassShell: React.FC = ({
runtime,
- historyStorage,
- emitShellPluginOpened,
+ initialHistory,
+ onHistoryChange,
+ initialEvaluate,
+ initialInput,
}) => {
const enableShell = usePreference('enableShell');
- const shellRef = useRef(null);
- const emitShellPluginOpenedRef = useRef(emitShellPluginOpened);
- emitShellPluginOpenedRef.current =
- emitShellPluginOpened ??
- (() => {
- // noop
- });
- const historyStorageRef = useRef(historyStorage);
- historyStorageRef.current = historyStorage;
-
+ const shellRef: ShellRef = useRef(null);
const [infoModalVisible, setInfoModalVisible] = useState(false);
const [isOperationInProgress, setIsOperationInProgress] = useState(false);
- const [initialHistory, setInitialHistory] = useState(null);
const [shellOutput, setShellOutput] = useTabState<
readonly ShellOutputEntry[]
>('shellOutput', []);
- useEffect(() => {
- async function loadHistory(historyStorage: HistoryStorage) {
- try {
- const history = await historyStorage.load();
- setInitialHistory(history);
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
- setInitialHistory([]);
- }
- }
-
- emitShellPluginOpenedRef.current?.();
+ const [shellInput, setShellInput] = useTabState(
+ 'shellInput',
+ initialInput ?? ''
+ );
- if (historyStorageRef.current) {
- void loadHistory(historyStorageRef.current);
- }
- }, []);
+ useOnTabReplace(() => {
+ // Never allow to replace the shell tab to avoid destroying the runtime
+ // unnecessarily
+ return false;
+ });
const showInfoModal = useCallback(() => {
setInfoModalVisible(true);
@@ -106,23 +137,8 @@ const CompassShell: React.FC = ({
const focusEditor = useCallback(() => {
if (shellRef.current && window.getSelection()?.type !== 'Range') {
- shellRef.current['focusEditor']();
+ shellRef.current.focusEditor();
}
- }, [shellRef]);
-
- const saveHistory = useCallback((history: readonly string[]) => {
- void (async (historyStorage: HistoryStorage | undefined) => {
- if (!historyStorage) {
- return;
- }
-
- try {
- await historyStorage.save([...history]);
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
- }
- })(historyStorageRef.current);
}, []);
const updateShellOutput = useCallback(
@@ -140,6 +156,8 @@ const CompassShell: React.FC = ({
setIsOperationInProgress(false);
}, []);
+ const canRenderShell = enableShell && initialHistory && runtime;
+
if (!enableShell) {
return (
@@ -155,7 +173,7 @@ const CompassShell: React.FC
= ({
);
}
- if (!runtime || !initialHistory) {
+ if (!canRenderShell) {
return ;
}
@@ -185,12 +203,19 @@ const CompassShell: React.FC = ({
{
+ onHistoryChange([...history]);
+ }}
onOperationStarted={notifyOperationStarted}
onOperationEnd={notifyOperationEnd}
+ maxOutputLength={1000}
+ maxHistoryLength={1000}
/>
-
void;
onCreateDatabaseClick?: () => void;
onRefreshClick?: () => void;
+ renderLoadSampleDataBanner?: () => React.ReactNode;
}> = ({
databases,
onDatabaseClick,
onCreateDatabaseClick,
onDeleteDatabaseClick,
onRefreshClick,
+ renderLoadSampleDataBanner,
}) => {
return (
);
}}
+ renderLoadSampleDataBanner={renderLoadSampleDataBanner}
>
);
};
diff --git a/packages/databases-collections-list/src/index.spec.tsx b/packages/databases-collections-list/src/index.spec.tsx
index fb61b66d3ee..7d6cccfb37e 100644
--- a/packages/databases-collections-list/src/index.spec.tsx
+++ b/packages/databases-collections-list/src/index.spec.tsx
@@ -101,11 +101,9 @@ describe('databases and collections list', function () {
render(
{}}
>
);
@@ -122,32 +120,11 @@ describe('databases and collections list', function () {
expect(clickSpy).to.be.calledWith('bar.bar');
});
- it('should notify when the connection name is clicked', function () {
- const clickSpy = Sinon.spy();
- const connectionClickSpy = Sinon.spy();
-
- render(
-
- );
-
- userEvent.click(screen.getByText('My Connection'));
-
- expect(connectionClickSpy).to.be.called;
- });
-
it('should not display statistics (except storage size) on timeseries collection card', function () {
render(
{}}
onCollectionClick={() => {}}
>
);
diff --git a/packages/databases-collections-list/src/items-grid.tsx b/packages/databases-collections-list/src/items-grid.tsx
index 6cbb0a39597..c2bb0e2dc0c 100644
--- a/packages/databases-collections-list/src/items-grid.tsx
+++ b/packages/databases-collections-list/src/items-grid.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable react/prop-types */
-import React, { useContext, useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
import {
css,
cx,
@@ -7,26 +6,34 @@ import {
VirtualGrid,
useSortControls,
useSortedItems,
+ WorkspaceContainer,
+ Button,
+ Icon,
+ Breadcrumbs,
} from '@mongodb-js/compass-components';
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
import type { NamespaceItemCardProps } from './namespace-card';
import { useViewTypeControls } from './use-view-type';
import type { ViewType } from './use-view-type';
-import { useCreateControls } from './use-create';
-import { useRefreshControls } from './use-refresh';
+import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import toNS from 'mongodb-ns';
+import { getConnectionTitle } from '@mongodb-js/connection-info';
+import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
+import { useConnectionInfoAccess } from '@mongodb-js/compass-connections/provider';
+import { usePreferences } from 'compass-preferences-model/provider';
type Item = { _id: string } & Record;
-const row = css({
+const rowStyles = css({
paddingLeft: spacing[3],
paddingRight: spacing[3],
paddingBottom: spacing[2],
columnGap: spacing[2],
});
-const container = css({
+const containerStyles = css({
width: '100%',
- flex: 1,
+ height: '100%',
overflow: 'hidden',
display: 'grid',
gridTemplateRows: 'auto 1fr',
@@ -37,21 +44,10 @@ const container = css({
outline: 'none',
});
-const controls = css({
- display: 'flex',
- padding: spacing[3],
- gap: spacing[2],
- flex: 'none',
-});
-
-export const createButton = css({
+export const createButtonStyles = css({
whiteSpace: 'nowrap',
});
-const control = css({
- flex: 'none',
-});
-
type CallbackProps = {
onItemClick(id: string): void;
onCreateItemClick?: () => void;
@@ -72,6 +68,7 @@ interface RenderItem {
}
type ItemsGridProps = {
+ namespace?: string;
itemType: 'collection' | 'database';
itemGridWidth: number;
itemGridHeight: number;
@@ -84,54 +81,212 @@ type ItemsGridProps = {
onCreateItemClick?: () => void;
onRefreshClick?: () => void;
renderItem: RenderItem;
+ renderLoadSampleDataBanner?: () => React.ReactNode;
};
-const CONTROLS_HEIGHT = (spacing[5] as number) + 36;
+const controlsContainerStyles = css({
+ paddingTop: spacing[200],
+ paddingRight: spacing[400],
+ paddingBottom: spacing[400],
+ paddingLeft: spacing[400],
+
+ display: 'grid',
+ gridTemplate: '1fr / 100%',
+ gap: spacing[200],
+});
+
+const controlRowStyles = css({
+ display: 'flex',
+ alignItems: 'center',
+ gap: spacing[200],
+});
+
+const controlStyles = css({
+ flex: 'none',
+});
-const pushRight = css({
+const breadcrumbContainerStyles = css({
+ display: 'flex',
+ minWidth: 0,
+ paddingTop: spacing[200],
+ paddingBottom: spacing[200],
+});
+
+const pushRightStyles = css({
marginLeft: 'auto',
});
-// We use this context to pass components that are aware of outer state of the
-// v-list to the list header. This is needed so that we can define this outer
-// component outside of the list component scope and avoid constant re-mounts
-// when component constructor is re-created. We do this so that controls can be
-// part of the list header and scroll up when the list is scrolled
-const ControlsContext = React.createContext<{
- createControls: React.ReactElement | null;
- refreshControls: React.ReactElement | null;
- viewTypeControls: React.ReactElement | null;
- sortControls: React.ReactElement | null;
-}>({
- createControls: null,
- refreshControls: null,
- viewTypeControls: null,
- sortControls: null,
+const bannerRowStyles = css({
+ paddingTop: spacing[200],
});
-const GridControls = () => {
- const { createControls, refreshControls, viewTypeControls, sortControls } =
- useContext(ControlsContext);
+function buildChartsUrl(
+ groupId: string,
+ clusterName: string,
+ namespace?: string
+) {
+ const { database } = toNS(namespace ?? '');
+ const url = new URL(`/charts/${groupId}`, window.location.origin);
+ url.searchParams.set('sourceType', 'cluster');
+ url.searchParams.set('instanceName', clusterName);
+ if (database) {
+ url.searchParams.set('database', database);
+ }
+ return url.toString();
+}
+
+const GridControls: React.FunctionComponent<{
+ namespace?: string;
+ itemType: string;
+ sortControls?: React.ReactNode;
+ viewTypeControls?: React.ReactNode;
+ onCreateItemClick?: () => void;
+ onRefreshClick?: () => void;
+ renderLoadSampleDataBanner?: () => React.ReactNode;
+}> = ({
+ namespace,
+ itemType,
+ sortControls,
+ viewTypeControls,
+ onCreateItemClick,
+ onRefreshClick,
+ renderLoadSampleDataBanner,
+}) => {
+ const connectionInfo = useConnectionInfo();
+ const connectionTitle = getConnectionTitle(connectionInfo);
+ const {
+ openDatabasesWorkspace,
+ openCollectionsWorkspace,
+ openShellWorkspace,
+ } = useOpenWorkspace();
+ const { enableShell, enableNewMultipleConnectionSystem } = usePreferences([
+ 'enableShell',
+ 'enableNewMultipleConnectionSystem',
+ ]);
+
+ const showOpenShellButton = enableShell && enableNewMultipleConnectionSystem;
+
+ const breadcrumbs = useMemo(() => {
+ const { database } = toNS(namespace ?? '');
+ const items = [
+ {
+ name: connectionTitle,
+ onClick: () => {
+ openDatabasesWorkspace(connectionInfo.id);
+ },
+ },
+ ];
+
+ if (database) {
+ items.push({
+ name: database,
+ onClick: () => {
+ openCollectionsWorkspace(connectionInfo.id, database);
+ },
+ });
+ }
+
+ return items;
+ }, [
+ connectionInfo.id,
+ connectionTitle,
+ namespace,
+ openCollectionsWorkspace,
+ openDatabasesWorkspace,
+ ]);
+
+ const banner = renderLoadSampleDataBanner?.();
return (
- <>
- {createControls && (
-
- {createControls}
+
+
+
+
- )}
- {refreshControls && (
-
- {refreshControls}
+
+
+ {showOpenShellButton && (
+
+ )}
+
+ {connectionInfo.atlasMetadata && (
+
}
+ >
+ Visualize your data
+
+ )}
+
+ {onCreateItemClick && (
+
+ }
+ onClick={onCreateItemClick}
+ className={createButtonStyles}
+ size="small"
+ >
+ Create {itemType}
+
+
+ )}
+
+ {onRefreshClick && (
+
+ }
+ onClick={onRefreshClick}
+ size="small"
+ >
+ Refresh
+
+
+ )}
+
+
+ {sortControls && viewTypeControls && (
+
+
{sortControls}
+
+ {viewTypeControls}
+
)}
-
{viewTypeControls}
-
{sortControls}
-
+ {banner &&
{banner}
}
+
);
};
+const itemsGridContainerStyles = css({
+ width: '100%',
+ height: '100%',
+});
+
export const ItemsGrid =
({
+ namespace,
itemType,
itemGridWidth,
itemGridHeight,
@@ -144,16 +299,21 @@ export const ItemsGrid = ({
onCreateItemClick,
onRefreshClick,
renderItem: _renderItem,
+ renderLoadSampleDataBanner,
}: ItemsGridProps): React.ReactElement => {
const track = useTelemetry();
+ const connectionInfoAccess = useConnectionInfoAccess();
const onViewTypeChange = useCallback(
(newType) => {
- track('Switch View Type', { view_type: newType, item_type: itemType });
+ track(
+ 'Switch View Type',
+ { view_type: newType, item_type: itemType },
+ connectionInfoAccess.getCurrentConnectionInfo()
+ );
},
- [itemType, track]
+ [itemType, track, connectionInfoAccess]
);
- const createControls = useCreateControls(itemType, onCreateItemClick);
- const refreshControls = useRefreshControls(onRefreshClick);
+
const [sortControls, sortState] = useSortControls(sortBy);
const [viewTypeControls, viewType] = useViewTypeControls({
onChange: onViewTypeChange,
@@ -181,31 +341,40 @@ export const ItemsGrid = ({
);
return (
-
- sortedItems[index]._id}
- headerHeight={CONTROLS_HEIGHT}
- renderHeader={GridControls}
- classNames={{
- container,
- header: controls,
- row: row,
+
+
+ }
+ >
+ {(scrollTriggerRef) => {
+ return (
+ {
+ return ;
+ }}
+ headerHeight={0}
+ itemKey={(index: number) => sortedItems[index]._id}
+ classNames={{ container: containerStyles, row: rowStyles }}
+ resetActiveItemOnBlur={false}
+ data-testid={`${itemType}-grid`}
+ >
+ );
}}
- resetActiveItemOnBlur={false}
- data-testid={`${itemType}-grid`}
- >
-
+
+
@@ -101,10 +96,7 @@ const Collections: React.FunctionComponent
= ({
}
const actions = Object.assign(
- {
- onCollectionClick,
- onRefreshClick,
- },
+ { onCollectionClick, onRefreshClick },
isEditable
? {
onCreateCollectionClick,
@@ -115,10 +107,8 @@ const Collections: React.FunctionComponent = ({
return (
);
diff --git a/packages/databases-collections/src/components/databases.tsx b/packages/databases-collections/src/components/databases.tsx
index 3372e77e8ad..cc64f157588 100644
--- a/packages/databases-collections/src/components/databases.tsx
+++ b/packages/databases-collections/src/components/databases.tsx
@@ -23,9 +23,14 @@ import {
useTrackOnChange,
type TrackFunction,
} from '@mongodb-js/compass-telemetry/provider';
+import toNS from 'mongodb-ns';
+import {
+ LoadSampleDataZeroBanner,
+ LoadSampleDataZeroState,
+} from './load-sample-data';
const errorContainerStyles = css({
- padding: spacing[3],
+ padding: spacing[400],
});
const nonGenuineErrorContainerStyles = css({
@@ -70,7 +75,7 @@ type DatabasesProps = {
isDataLake: boolean;
onDeleteDatabaseClick(connectionId: string, ns: string): void;
onCreateDatabaseClick(connectionId: string): void;
- onRefreshClick(): void;
+ onRefreshClick(connectionId: string): void;
};
const Databases: React.FunctionComponent = ({
@@ -82,9 +87,10 @@ const Databases: React.FunctionComponent = ({
isGenuineMongoDB,
onDeleteDatabaseClick: _onDeleteDatabaseClick,
onCreateDatabaseClick: _onCreateDatabaseClick,
- onRefreshClick,
+ onRefreshClick: _onRefreshClick,
}) => {
- const { id: connectionId } = useConnectionInfo();
+ const connectionInfo = useConnectionInfo();
+ const { id: connectionId, atlasMetadata } = connectionInfo;
const isPreferencesReadOnly = usePreference('readOnly');
const { openCollectionsWorkspace } = useOpenWorkspace();
@@ -106,9 +112,40 @@ const Databases: React.FunctionComponent = ({
_onCreateDatabaseClick(connectionId);
}, [connectionId, _onCreateDatabaseClick]);
- useTrackOnChange((track: TrackFunction) => {
- track('Screen', { name: 'databases' });
- }, []);
+ const onRefreshClick = useCallback(() => {
+ _onRefreshClick(connectionId);
+ }, [connectionId, _onRefreshClick]);
+
+ useTrackOnChange(
+ (track: TrackFunction) => {
+ track('Screen', { name: 'databases' }, connectionInfo);
+ },
+ [connectionInfo]
+ );
+
+ const renderLoadSampleDataBanner = useCallback(() => {
+ if (
+ !atlasMetadata ||
+ databases.some((db) => {
+ return !toNS(db.name).specialish;
+ })
+ ) {
+ return null;
+ }
+
+ return (
+
+ );
+ }, [databases, atlasMetadata]);
+
+ const editable = isWritable && !isPreferencesReadOnly;
+
+ if (databasesLoadingStatus === 'fetching') {
+ return null;
+ }
if (databasesLoadingStatus === 'error') {
return (
@@ -126,7 +163,17 @@ const Databases: React.FunctionComponent = ({
return ;
}
- const editable = isWritable && !isPreferencesReadOnly;
+ if (atlasMetadata && databases.length === 0) {
+ return (
+
+ );
+ }
+
const actions = Object.assign(
{
onDatabaseClick,
@@ -140,7 +187,13 @@ const Databases: React.FunctionComponent = ({
: {}
);
- return ;
+ return (
+
+ );
};
const mapStateToProps = (state: DatabasesState) => {
diff --git a/packages/databases-collections/src/components/load-sample-data.tsx b/packages/databases-collections/src/components/load-sample-data.tsx
new file mode 100644
index 00000000000..12b48eb8433
--- /dev/null
+++ b/packages/databases-collections/src/components/load-sample-data.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import {
+ Banner,
+ Button,
+ EmptyContent,
+ css,
+ spacing,
+ Icon,
+} from '@mongodb-js/compass-components';
+import { LoadSampleDataZeroGraphic } from './zero-graphic';
+
+function buildAddDataUrl(projectId: string, clusterName: string) {
+ const url = new URL(
+ `/v2/${projectId}#/addData/${encodeURIComponent(clusterName)}/load`,
+ window.location.origin
+ );
+ return url.toString();
+}
+
+const addDataContainerStyles = css({
+ width: '100%',
+ padding: spacing[400],
+});
+
+const loadSampleDataActionsStyles = css({
+ display: 'flex',
+ gap: spacing[300],
+});
+
+export function LoadSampleDataZeroState({
+ projectId,
+ clusterName,
+ canCreateDatabase,
+ onCreateDatabase,
+}: {
+ projectId: string;
+ clusterName: string;
+ canCreateDatabase: boolean;
+ onCreateDatabase: () => void;
+}) {
+ return (
+
+
+ Create database or load sample data to your cluster to quickly get
+ started experimenting with data in MongoDB.
+
+ ) : (
+ <>
+ You can load sample data to quickly get started experimenting with
+ data in MongoDB.
+
+ )
+ }
+ callToActionLink={
+
+ {canCreateDatabase && (
+
+ )}
+
+
+ }
+ />
+
+
+ Working with MongoDB is easy, but first you’ll need some data to get
+ started. Sample data is available for loading.
+
+
+
+
+