Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(connections): replace connections registry and manager with a single interface COMPASS-8469 COMPASS-8470 #6525

Merged
merged 1 commit into from
Nov 25, 2024
Merged

chore(connections): replace connections registry and manager with a single interface COMPASS-8469 COMPASS-8470 #6525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 60 additions & 92 deletions packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx
View file
Open in desktop
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drive-by to remove usage of a class component

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { PureComponent } from 'react';
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import {
Banner,
Expand All @@ -11,13 +11,9 @@ import {
} from '@mongodb-js/compass-components';
import { createView, changeViewName, close } from '../../modules/create-view';
import type { CreateViewRootState } from '../../stores/create-view';
import { withTelemetry } from '@mongodb-js/compass-telemetry/provider';
import type { TrackFunction } from '@mongodb-js/compass-telemetry';
import {
type ConnectionRepository,
withConnectionRepository,
type ConnectionInfo,
} from '@mongodb-js/compass-connections/provider';
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider';

const progressContainerStyles = css({
display: 'flex',
Expand All @@ -32,108 +28,80 @@ type CreateViewModalProps = {
name?: string;
changeViewName: (name: string) => void;
isDuplicating?: boolean;
source?: string;
pipeline?: unknown[];
connectionId: ConnectionInfo['id'];
isRunning?: boolean;
error: Error | null;
track: TrackFunction;
connectionRepository: ConnectionRepository;
error: string | null;
};

class CreateViewModal extends PureComponent<CreateViewModalProps> {
static defaultProps = {
name: '',
source: '',
pipeline: [],
isRunning: false,
isVisible: false,
isDuplicating: false,
};
const CreateViewModal: React.FunctionComponent<CreateViewModalProps> = ({
createView,
isVisible,
closeModal,
name,
changeViewName,
isDuplicating,
connectionId,
isRunning,
error,
}) => {
const track = useTelemetry();
const { getConnectionById } = useConnectionsListRef();

componentDidUpdate(prevProps: CreateViewModalProps) {
if (prevProps.isVisible !== this.props.isVisible && this.props.isVisible) {
const connectionInfo =
this.props.connectionRepository.getConnectionInfoById(
this.props.connectionId
);
this.props.track('Screen', { name: 'create_view_modal' }, connectionInfo);
useEffect(() => {
if (isVisible && connectionId) {
track(
'Screen',
{ name: 'create_view_modal' },
getConnectionById(connectionId)?.info
);
}
}

onNameChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
this.props.changeViewName(evt.currentTarget.value);
};

onFormSubmit = () => {
this.props.createView();
};
}, [isVisible, connectionId, getConnectionById, track]);

onCancel = () => {
this.props.closeModal();
};

/**
* Render the save pipeline component.
*/
render() {
return (
<FormModal
title={this.props.isDuplicating ? 'Duplicate View' : 'Create a View'}
open={this.props.isVisible}
onSubmit={this.onFormSubmit}
onCancel={this.onCancel}
submitButtonText="Create"
data-testid="create-view-modal"
>
<TextInput
data-testid="create-view-name"
value={this.props.name || ''}
onChange={this.onNameChange}
label="Name"
name="name"
/>
{this.props.error ? (
<Banner variant="danger">{this.props.error.message}</Banner>
) : null}
{this.props.isRunning ? (
<Body className={progressContainerStyles}>
<SpinLoader />
<span>Creating view&hellip;</span>
</Body>
) : null}
</FormModal>
);
}
}
return (
<FormModal
title={isDuplicating ? 'Duplicate View' : 'Create a View'}
open={isVisible}
onSubmit={createView}
onCancel={closeModal}
submitButtonText="Create"
data-testid="create-view-modal"
>
<TextInput
data-testid="create-view-name"
value={name || ''}
onChange={(evt) => {
changeViewName(evt.currentTarget.value);
}}
label="Name"
name="name"
/>
{error ? <Banner variant="danger">{error}</Banner> : null}
{isRunning ? (
<Body className={progressContainerStyles}>
<SpinLoader />
<span>Creating view&hellip;</span>
</Body>
) : null}
</FormModal>
);
};

/**
* Map the store state to properties to pass to the components.
*/
const mapStateToProps = (state: CreateViewRootState) => ({
isRunning: state.isRunning,
isVisible: state.isVisible,
isDuplicating: state.isDuplicating,
name: state.name,
error: state.error,
error: state.error?.message ?? null,
source: state.source,
pipeline: state.pipeline,
connectionId: state.connectionId,
});

/**
* Connect the redux store to the component.
* (dispatch)
*/
const MappedCreateViewModal = withTelemetry(
withConnectionRepository(
connect(mapStateToProps, {
createView,
changeViewName,
closeModal: close,
})(CreateViewModal)
)
);
const MappedCreateViewModal = connect(mapStateToProps, {
createView,
changeViewName,
closeModal: close,
})(CreateViewModal);

export default MappedCreateViewModal;
export { CreateViewModal };
6 changes: 2 additions & 4 deletions packages/compass-aggregations/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import CreateViewModal from './components/create-view-modal';
import {
connectionInfoRefLocator,
connectionScopedAppRegistryLocator,
connectionsManagerLocator,
connectionsLocator,
dataServiceLocator,
type DataServiceLocator,
} from '@mongodb-js/compass-connections/provider';
Expand All @@ -27,7 +27,6 @@ import { workspacesServiceLocator } from '@mongodb-js/compass-workspaces/provide
import { preferencesLocator } from 'compass-preferences-model/provider';
import { atlasAiServiceLocator } from '@mongodb-js/compass-generative-ai/provider';
import { pipelineStorageLocator } from '@mongodb-js/my-queries-storage/provider';
import { connectionRepositoryAccessLocator } from '@mongodb-js/compass-connections/provider';
import { AggregationsTabTitle } from './plugin-title';

const CompassAggregationsHadronPlugin = registerHadronPlugin(
Expand Down Expand Up @@ -71,8 +70,7 @@ export const CreateViewPlugin = registerHadronPlugin(
activate: activateCreateViewPlugin,
},
{
connectionsManager: connectionsManagerLocator,
connectionRepository: connectionRepositoryAccessLocator,
connections: connectionsLocator,
logger: createLoggerLocator('COMPASS-CREATE-VIEW-UI'),
track: telemetryLocator,
workspaces: workspacesServiceLocator,
Expand Down
13 changes: 3 additions & 10 deletions packages/compass-aggregations/src/modules/create-view/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,13 +202,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
return async (
dispatch,
getState,
{
globalAppRegistry,
connectionsManager,
connectionRepository,
track,
workspaces,
}
{ globalAppRegistry, connections, track, workspaces }
) => {
const {
name: viewName,
Expand All @@ -222,8 +216,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
dispatch(clearError());

try {
const dataService =
connectionsManager.getDataServiceForConnection(connectionId);
const dataService = connections.getDataServiceForConnection(connectionId);

dispatch(toggleIsRunning(true));
await dataService.createView(
Expand All @@ -236,7 +229,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
track(
'Aggregation Saved As View',
{ num_stages: viewPipeline.length },
connectionRepository.getConnectionInfoById(connectionId)
connections.getConnectionById(connectionId)?.info
);
globalAppRegistry.emit('view-created', ns, {
connectionId,
Expand Down
14 changes: 4 additions & 10 deletions packages/compass-aggregations/src/stores/create-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,13 @@ import reducer, { open } from '../modules/create-view';
import type AppRegistry from 'hadron-app-registry';
import type { Logger } from '@mongodb-js/compass-logging/provider';
import type { WorkspacesService } from '@mongodb-js/compass-workspaces/provider';
import type {
ConnectionRepositoryAccess,
ConnectionsManager,
} from '@mongodb-js/compass-connections/provider';
import type { ConnectionsService } from '@mongodb-js/compass-connections/provider';
import type { ActivateHelpers } from 'hadron-app-registry';
import type { TrackFunction } from '@mongodb-js/compass-telemetry';

type CreateViewServices = {
globalAppRegistry: AppRegistry;
connectionsManager: ConnectionsManager;
connectionRepository: ConnectionRepositoryAccess;
connections: ConnectionsService;
logger: Logger;
track: TrackFunction;
workspaces: WorkspacesService;
Expand Down Expand Up @@ -53,8 +49,7 @@ export function activateCreateViewPlugin(
_: unknown,
{
globalAppRegistry,
connectionsManager,
connectionRepository,
connections,
logger,
track,
workspaces,
Expand All @@ -63,8 +58,7 @@ export function activateCreateViewPlugin(
) {
const store = configureStore({
globalAppRegistry,
connectionsManager,
connectionRepository,
connections,
logger,
track,
workspaces,
Expand Down
14 changes: 6 additions & 8 deletions packages/compass-app-stores/src/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ import type { ActivateHelpers } from 'hadron-app-registry';
import { registerHadronPlugin } from 'hadron-app-registry';
import { MongoDBInstancesManagerContext } from './provider';
import { createInstancesStore } from './stores';
import {
connectionsManagerLocator,
type ConnectionsManager,
} from '@mongodb-js/compass-connections/provider';
import type { ConnectionsService } from '@mongodb-js/compass-connections/provider';
import { connectionsLocator } from '@mongodb-js/compass-connections/provider';
import { type MongoDBInstancesManager } from './instances-manager';

interface MongoDBInstancesProviderProps {
Expand Down Expand Up @@ -37,19 +35,19 @@ export const CompassInstanceStorePlugin = registerHadronPlugin(
activate(
_: unknown,
{
connectionsManager,
connections,
logger,
globalAppRegistry,
}: {
connectionsManager: ConnectionsManager;
connections: ConnectionsService;
logger: Logger;
globalAppRegistry: AppRegistry;
},
helpers: ActivateHelpers
) {
const store = createInstancesStore(
{
connectionsManager,
connections,
logger,
globalAppRegistry,
},
Expand All @@ -65,6 +63,6 @@ export const CompassInstanceStorePlugin = registerHadronPlugin(
},
{
logger: createLoggerLocator('COMPASS-INSTANCE-STORE'),
connectionsManager: connectionsManagerLocator,
connections: connectionsLocator,
}
);
Loading
Loading