{}}
- connectionModel={connectionModel}
- isSidebarCollapsed={isSidebarCollapsed} />
- );
- });
-
- afterEach(() => {
- component = null;
- });
-
- it('displays the the filled with no color pill', () => {
- expect(component.find(`.${styles['is-favorite-pill']}`)).to.be.present();
- expect(component.find(`.${styles['is-favorite-pill-text']}`)).to.be.present();
- expect(component.find('FontAwesome[name="star"]')).to.be.present();
- });
- });
-});
diff --git a/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx b/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
index 1094322862b..3cddde87037 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
@@ -1,94 +1,79 @@
-import React, { PureComponent } from 'react';
+import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
+import { SaveConnectionModal } from '@mongodb-js/connect-form';
+
import SidebarInstanceStats from '../sidebar-instance-stats';
import SidebarInstanceDetails from '../sidebar-instance-details';
import NonGenuineWarningPill from '../non-genuine-warning-pill';
-import IsFavoritePill from '../is-favorite-pill';
-import { FavoriteModal } from '@mongodb-js/compass-connect';
+import FavoriteButton from '../favorite-button';
import styles from './sidebar-instance.module.less';
-class SidebarInstance extends PureComponent {
- static displayName = 'SidebarInstance';
- static propTypes = {
- instance: PropTypes.object,
- databases: PropTypes.array,
- isExpanded: PropTypes.bool.isRequired,
- isGenuineMongoDB: PropTypes.bool.isRequired,
- toggleIsDetailsExpanded: PropTypes.func.isRequired,
- globalAppRegistryEmit: PropTypes.func.isRequired,
- detailsPlugins: PropTypes.array.isRequired,
- connectionModel: PropTypes.object,
- toggleIsModalVisible: PropTypes.func.isRequired,
- isModalVisible: PropTypes.bool.isRequired,
- saveFavorite: PropTypes.func.isRequired
- };
+export const SidebarInstance = ({
+ instance,
+ databases,
+ isExpanded,
+ isGenuineMongoDB,
+ toggleIsDetailsExpanded,
+ globalAppRegistryEmit,
+ detailsPlugins,
+ connectionInfo,
+ updateConnectionInfo
+}) => {
+ const [ isFavoriteModalVisible, setIsFavoriteModalVisible ] = useState(false);
- /**
- * Closes the favorite modal.
- */
- closeFavoriteModal() {
- this.props.toggleIsModalVisible(false);
- }
+ const onClickSaveFavorite = useCallback((newFavoriteInfo) => {
+ updateConnectionInfo({
+ ...connectionInfo,
+ favorite: newFavoriteInfo
+ });
- /**
- * Saves the current connection to favorites.
- *
- * @param {String} name - The favorite name.
- * @param {String} color - The favorite color.
- */
- saveFavorite(name, color) {
- this.props.saveFavorite(this.props.connectionModel.connection, name, color);
- this.props.toggleIsModalVisible(false);
- }
+ setIsFavoriteModalVisible(false);
+ }, [connectionInfo, updateConnectionInfo, setIsFavoriteModalVisible]);
- /**
- * Renders the favorite modal.
- *
- * @returns {React.Component}
- */
- renderFavoriteModal() {
- if (this.props.isModalVisible) {
- return (
-
- );
- }
- }
+ return (
+
+
+ setIsFavoriteModalVisible(
+ !isFavoriteModalVisible
+ )}
+ />
+ setIsFavoriteModalVisible(false)}
+ onSaveClicked={(favoriteInfo) => onClickSaveFavorite(favoriteInfo)}
+ />
+
+
+
+ );
+};
- /**
- * Renders the SidebarInstance component.
- *
- * @returns {React.Component}
- */
- render() {
- return (
-
-
-
- {this.renderFavoriteModal()}
-
-
-
- );
- }
-}
+SidebarInstance.displayName = 'SidebarInstance';
+SidebarInstance.propTypes = {
+ instance: PropTypes.object,
+ databases: PropTypes.array,
+ isExpanded: PropTypes.bool.isRequired,
+ isGenuineMongoDB: PropTypes.bool.isRequired,
+ toggleIsDetailsExpanded: PropTypes.func.isRequired,
+ globalAppRegistryEmit: PropTypes.func.isRequired,
+ detailsPlugins: PropTypes.array.isRequired,
+ connectionInfo: PropTypes.object.isRequired,
+ updateConnectionInfo: PropTypes.func.isRequired
+};
export default SidebarInstance;
diff --git a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
index 6faa392dab7..d772f592fda 100644
--- a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
@@ -1,71 +1,88 @@
-import React, { PureComponent } from 'react';
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { connect } from 'react-redux';
import {
MongoDBLogoMark
} from '@mongodb-js/compass-components';
+import {
+ getConnectionTitle,
+} from 'mongodb-data-service';
import { NO_ACTIVE_NAMESPACE } from '../../modules/databases';
import styles from './sidebar-title.module.less';
-/**
- * The title row in the sidebar.
- */
-class SidebarTitle extends PureComponent {
- static displayName = 'SidebarTitleComponent';
+const CollapsedTitle = ({
+ connectionInfo
+}) => {
+ const isFavorite = !!connectionInfo.favorite;
+
+ return (
+
+
+
+ );
+};
- static propTypes = {
- activeNamespace: PropTypes.string.isRequired,
- connectionModel: PropTypes.object.isRequired,
- isSidebarExpanded: PropTypes.bool.isRequired,
- onClick: PropTypes.func.isRequired,
- };
+CollapsedTitle.propTypes = {
+ connectionInfo: PropTypes.object.isRequired
+};
- renderTitle() {
- if (this.props.isSidebarExpanded) {
- return (
-
- {this.props.connectionModel.connection.name}
-
- );
- }
+const ExpandedTitle = ({
+ connectionInfo
+}) => {
+ return (
+
+ {getConnectionTitle(connectionInfo)}
+
+ );
+};
- const isFavorite = this.props.connectionModel.connection.isFavorite;
+ExpandedTitle.propTypes = {
+ connectionInfo: PropTypes.object.isRequired
+};
- return (
-
-
{
+ return (
+
+ {isSidebarExpanded
+ ?
+ :
-
- );
- }
+ }
+
- {this.renderTitle()}
-
- );
- }
-}
+SidebarTitle.displayName = 'SidebarTitleComponent';
+SidebarTitle.propTypes = {
+ activeNamespace: PropTypes.string.isRequired,
+ connectionInfo: PropTypes.object.isRequired,
+ isSidebarExpanded: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+};
const mapStateToProps = (state) => ({
activeNamespace: state.databases.activeNamespace
diff --git a/packages/compass-sidebar/src/components/sidebar/sidebar.jsx b/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
index 648125673e7..ed3face3bcf 100644
--- a/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
+++ b/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
@@ -15,9 +15,8 @@ import SidebarDatabasesNavigation from '../sidebar-databases-navigation';
import { toggleIsDetailsExpanded } from '../../modules/is-details-expanded';
import { toggleIsGenuineMongoDBVisible } from '../../modules/is-genuine-mongodb-visible';
import { changeFilterRegex } from '../../modules/databases';
+import { updateAndSaveConnectionInfo } from '../../modules/connection-info';
import { openLink } from '../../modules/link';
-import { toggleIsModalVisible } from '../../modules/is-modal-visible';
-import { saveFavorite } from '../../modules/connection-model';
import { NavigationItems } from './navigation-items';
// In pixels. (px)
@@ -53,10 +52,8 @@ class Sidebar extends PureComponent {
isGenuineMongoDBVisible: PropTypes.bool.isRequired,
toggleIsGenuineMongoDBVisible: PropTypes.func.isRequired,
globalAppRegistryEmit: PropTypes.func.isRequired,
- connectionModel: PropTypes.object.isRequired,
- toggleIsModalVisible: PropTypes.func.isRequired,
- isModalVisible: PropTypes.bool.isRequired,
- saveFavorite: PropTypes.func.isRequired
+ connectionInfo: PropTypes.object.isRequired,
+ updateAndSaveConnectionInfo: PropTypes.func.isRequired
};
state = {
@@ -172,7 +169,7 @@ class Sidebar extends PureComponent {
this.onNavigationItemClick()}
/>
@@ -185,10 +182,8 @@ class Sidebar extends PureComponent {
isGenuineMongoDB={this.props.isGenuineMongoDB}
toggleIsDetailsExpanded={this.props.toggleIsDetailsExpanded}
globalAppRegistryEmit={this.props.globalAppRegistryEmit}
- connectionModel={this.props.connectionModel}
- toggleIsModalVisible={this.props.toggleIsModalVisible}
- isModalVisible={this.props.isModalVisible}
- saveFavorite={this.props.saveFavorite}
+ connectionInfo={this.props.connectionInfo}
+ updateConnectionInfo={this.props.updateAndSaveConnectionInfo}
/>
)}
{process.env.COMPASS_SHOW_YOUR_QUERIES_TAB === 'true' && (
@@ -232,6 +227,7 @@ class Sidebar extends PureComponent {
* @returns {Object} The mapped properties.
*/
const mapStateToProps = (state) => ({
+ connectionInfo: state.connectionInfo.connectionInfo,
instance: state.instance,
databases: state.databases.databases,
isDetailsExpanded: state.isDetailsExpanded,
@@ -239,9 +235,7 @@ const mapStateToProps = (state) => ({
detailsPlugins: state.detailsPlugins,
isDataLake: state.isDataLake,
isGenuineMongoDB: state.isGenuineMongoDB,
- isGenuineMongoDBVisible: state.isGenuineMongoDBVisible,
- connectionModel: state.connectionModel,
- isModalVisible: state.isModalVisible,
+ isGenuineMongoDBVisible: state.isGenuineMongoDBVisible
});
/**
@@ -256,8 +250,7 @@ const MappedSidebar = connect(
changeFilterRegex,
openLink,
globalAppRegistryEmit,
- toggleIsModalVisible,
- saveFavorite
+ updateAndSaveConnectionInfo
},
)(Sidebar);
diff --git a/packages/compass-sidebar/src/modules/connection-info.js b/packages/compass-sidebar/src/modules/connection-info.js
new file mode 100644
index 00000000000..1b3324cf958
--- /dev/null
+++ b/packages/compass-sidebar/src/modules/connection-info.js
@@ -0,0 +1,114 @@
+import {
+ ConnectionStorage
+} from 'mongodb-data-service';
+import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+
+const { debug } = createLoggerAndTelemetry('COMPASS-SIDEBAR');
+
+/**
+ * Change connection action name.
+ */
+const CHANGE_CONNECTION_INFO = 'sidebar/connection/CHANGE_CONNECTION_INFO';
+
+/**
+* Save favorite connection action name.
+*/
+const SAVE_CONNECTION_INFO = 'sidebar/connection/SAVE_CONNECTION_INFO';
+
+/**
+* The initial state of the connection.
+*/
+export const INITIAL_STATE = {
+ connectionInfo: {
+ connectionOptions: {
+ connectionString: 'mongodb://localhost:27017'
+ }
+ },
+ connectionStorage: new ConnectionStorage()
+};
+
+async function saveConnectionInfo(connectionInfo, connectionStorage) {
+ try {
+ await connectionStorage.save(connectionInfo);
+ debug(`saved connection with id ${connectionInfo.id || ''}`);
+ } catch (err) {
+ // Currently we silently fail if saving the favorite fails.
+ debug(
+ `error saving connection with id ${connectionInfo.id || ''}: ${
+ err.message
+ }`
+ );
+ }
+}
+
+/**
+* Changes the connection.
+*
+* @param {Object} state - The state.
+* @param {Object} action - The action.
+*
+* @returns {Object} The new state.
+*/
+const doChangeConnectionInfo = (state, action) => {
+ return { ...state, connectionInfo: action.connectionInfo };
+};
+
+/**
+* Saves the new favorite connection info.
+*
+* @param {Object} state - The state.
+* @param {Object} action - The action.
+*
+* @returns {Object} The new state.
+*/
+const doSaveConnectionInfo = (state, action) => {
+ saveConnectionInfo(action.connectionInfo, state.connectionStorage);
+
+ return { ...state, connectionInfo: action.connectionInfo };
+};
+
+/**
+* To not have a huge switch statement in the reducer.
+*/
+const MAPPINGS = {
+ [CHANGE_CONNECTION_INFO]: doChangeConnectionInfo,
+ [SAVE_CONNECTION_INFO]: doSaveConnectionInfo
+};
+
+/**
+* Reducer function for handle state changes.
+*
+* @param {String} state - The status state.
+* @param {Object} action - The action.
+*
+* @returns {String} The new state.
+*/
+export default function reducer(state = INITIAL_STATE, action) {
+ const fn = MAPPINGS[action.type];
+
+ return fn ? fn(state, action) : state;
+}
+
+/**
+* Change connection action creator.
+*
+* @param {Object} connectionInfo - The connection info object.
+*
+* @returns {Object} The action.
+*/
+export const changeConnectionInfo = (connectionInfo) => ({
+ type: CHANGE_CONNECTION_INFO,
+ connectionInfo
+});
+
+/**
+* Save connection info action creator.
+*
+* @param {Object} connectionInfo - The connection info object.
+*
+* @returns {Object} The action.
+*/
+export const updateAndSaveConnectionInfo = (connectionInfo) => ({
+ type: SAVE_CONNECTION_INFO,
+ connectionInfo
+});
diff --git a/packages/compass-sidebar/src/modules/connection-info.spec.js b/packages/compass-sidebar/src/modules/connection-info.spec.js
new file mode 100644
index 00000000000..6feca986802
--- /dev/null
+++ b/packages/compass-sidebar/src/modules/connection-info.spec.js
@@ -0,0 +1,95 @@
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import reducer, {
+ INITIAL_STATE,
+ changeConnectionInfo,
+ updateAndSaveConnectionInfo
+} from './connection-info';
+
+describe('connection info module', () => {
+ const connectionInfoNotFavorite = {
+ connectionOptions: {
+ connectionString: 'mongodb://outerspace:27000'
+ },
+ id: '123'
+ };
+
+ describe('reducer', () => {
+ context('when the action is changeConnectionInfo', () => {
+ it('returns the new state', () => {
+ expect(reducer(undefined, changeConnectionInfo(connectionInfoNotFavorite))).to.deep.equal({
+ connectionInfo: connectionInfoNotFavorite,
+ connectionStorage: {}
+ });
+ });
+
+ it('does not call the connection storage to save', () => {
+ const saveSpy = sinon.spy();
+ reducer({
+ connectionStorage: {
+ save: saveSpy
+ }
+ }, changeConnectionInfo(connectionInfoNotFavorite));
+
+ expect(saveSpy.callCount).to.equal(0);
+ });
+ });
+
+ context('when the action is updateAndSaveConnectionInfo', () => {
+ it('returns the new state', () => {
+ const newConnection = updateAndSaveConnectionInfo({
+ ...connectionInfoNotFavorite,
+ favorite: {
+ name: 'My Favorite',
+ color: '#d4366e'
+ }
+ });
+ const state = reducer({
+ connectionStorage: {
+ save: () => {}
+ }
+ }, newConnection);
+
+ expect(state.connectionInfo.favorite.name).to.equal('My Favorite');
+ expect(state.connectionInfo.favorite.color).to.equal('#d4366e');
+ });
+
+ it('calls to save the connection info in the connection storage', () => {
+ const newConnection = updateAndSaveConnectionInfo(
+ {
+ ...connectionInfoNotFavorite,
+ favorite: {
+ name: 'My Favorite',
+ color: '#d4366e'
+ }
+ }
+ );
+ const saveSpy = sinon.spy();
+ reducer({
+ connectionStorage: {
+ save: saveSpy
+ }
+ }, newConnection);
+
+ expect(saveSpy.callCount).to.equal(1);
+ expect(saveSpy.firstCall.args[0]).to.deep.equal({
+ connectionOptions: {
+ connectionString: 'mongodb://outerspace:27000'
+ },
+ id: '123',
+ favorite: {
+ name: 'My Favorite',
+ color: '#d4366e'
+ }
+ });
+ });
+ });
+
+ context('when an action is not provided', () => {
+ it('returns the default state', () => {
+ expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
+ });
+ });
+ });
+});
diff --git a/packages/compass-sidebar/src/modules/connection-model.js b/packages/compass-sidebar/src/modules/connection-model.js
deleted file mode 100644
index f2c1a63ce16..00000000000
--- a/packages/compass-sidebar/src/modules/connection-model.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Change connection action name.
- */
-export const CHANGE_CONNECTION = 'sidebar/connection/CHANGE_CONNECTION';
-
-/**
- * Save favorite action name.
- */
-export const SAVE_FAVORITE = 'sidebar/connection/SAVE_FAVORITE';
-
-/**
- * The initial state of the connection.
- */
-export const INITIAL_STATE = { connection: {} };
-
-/**
- * Changes the connection.
- *
- * @param {Object} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
- */
-const doChangeConnection = (state, action) => {
- return { ...state, connection: action.connection };
-};
-
-/**
- * Saves the favorite.
- *
- * @param {Object} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
- */
-const doSaveFavorite = (state, action) => {
- action.connection.set({ isFavorite: true, name: action.name, color: action.color });
- action.connection.save();
-
- return { ...state, connection: action.connection };
-};
-
-/**
- * To not have a huge switch statement in the reducer.
- */
-const MAPPINGS = {
- [CHANGE_CONNECTION]: doChangeConnection,
- [SAVE_FAVORITE]: doSaveFavorite
-};
-
-/**
- * Reducer function for handle state changes.
- *
- * @param {String} state - The status state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
- */
-export default function reducer(state = INITIAL_STATE, action) {
- const fn = MAPPINGS[action.type];
-
- return fn ? fn(state, action) : state;
-}
-
-/**
- * Change connection action creator.
- *
- * @param {Connection} connection - The connection.
- *
- * @returns {Object} The action.
- */
-export const changeConnection = (connection) => ({
- type: CHANGE_CONNECTION,
- connection
-});
-
-/**
- * Save favorite action creator.
- *
- * @param {Object} connection - The connection.
- * @param {String} name - The connection name.
- * @param {String} color - The connection color.
- *
- * @returns {Object} The action.
- */
-export const saveFavorite = (connection, name, color) => ({
- type: SAVE_FAVORITE,
- connection,
- name,
- color
-});
-
diff --git a/packages/compass-sidebar/src/modules/connection-model.spec.js b/packages/compass-sidebar/src/modules/connection-model.spec.js
deleted file mode 100644
index cf561836bfb..00000000000
--- a/packages/compass-sidebar/src/modules/connection-model.spec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import reducer, {
- INITIAL_STATE,
- CHANGE_CONNECTION,
- SAVE_FAVORITE,
- changeConnection,
- saveFavorite
-} from './connection-model';
-
-describe('connection module', () => {
- const connection = {
- hostname: '127.0.0.1',
- port: 27017,
- isFavorite: false,
- name: 'Local',
- save: () => {},
- destroy: () => {},
- set(favorite) {
- this.name = favorite.name;
- this.color = favorite.color;
- this.isFavorite = favorite.isFavorite;
- }
- };
-
- describe('reducer', () => {
- context('when the action is changeConnection', () => {
- it('returns the new state', () => {
- expect(reducer(undefined, changeConnection(connection))).to.deep.equal({
- connection
- });
- });
- });
-
- context('when the action is saveFavorite', () => {
- it('returns the new state', () => {
- const newConnection = saveFavorite(connection, 'My Favorite', '#d4366e');
- const state = reducer(undefined, newConnection);
-
- expect(state.connection.name).to.equal('My Favorite');
- expect(state.connection.color).to.equal('#d4366e');
- expect(state.connection.isFavorite).to.equal(true);
- });
- });
-
- context('when an action is not provided', () => {
- it('returns the default state', () => {
- expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
- });
- });
- });
-
- describe('#changeConnection', () => {
- context('when the connection is a favourite', () => {
- it('sets the favourite name in the action', () => {
- const favourite = { ...connection, isFavorite: true, name: 'New name' };
-
- expect(changeConnection(favourite)).to.deep.equal({
- type: CHANGE_CONNECTION,
- connection: favourite
- });
- });
- });
-
- context('when the favourite connection should be updated', () => {
- it('sets the favourite name, color and isFavorite flag', () => {
- const name = 'Simple connection';
- const color = '#59c1e2';
-
- expect(saveFavorite(connection, name, color)).to.deep.equal({
- type: SAVE_FAVORITE,
- connection,
- name,
- color
- });
- });
- });
- });
-});
diff --git a/packages/compass-sidebar/src/modules/index.js b/packages/compass-sidebar/src/modules/index.js
index a54c76d22c8..19daf15a188 100644
--- a/packages/compass-sidebar/src/modules/index.js
+++ b/packages/compass-sidebar/src/modules/index.js
@@ -27,12 +27,9 @@ import isGenuineMongoDB, {
import isGenuineMongoDBVisible, {
INITIAL_STATE as IS_VISIBLE_IS
} from './is-genuine-mongodb-visible';
-import connectionModel, {
- INITIAL_STATE as CONNECTION_MODEL_IS
-} from './connection-model';
-import isModalVisible, {
- INITIAL_STATE as MODAL_VISIBLE_IS
-} from './is-modal-visible';
+import connectionInfo, {
+ INITIAL_STATE as CONNECTION_INFO_IS
+} from './connection-info';
/**
* The reducer.
@@ -40,6 +37,7 @@ import isModalVisible, {
const reducer = combineReducers({
appRegistry,
databases,
+ connectionInfo,
description,
detailsPlugins,
instance,
@@ -47,9 +45,7 @@ const reducer = combineReducers({
isWritable,
isGenuineMongoDB,
isGenuineMongoDBVisible,
- isDataLake,
- connectionModel,
- isModalVisible
+ isDataLake
});
/**
@@ -64,6 +60,7 @@ const rootReducer = (state, action) => {
if (action.type === RESET) {
return {
...state,
+ connectionInfo: CONNECTION_INFO_IS,
databases: DATABASES_INITIAL_STATE,
description: DESCRIPTION_INITIAL_STATE,
instance: INSTANCE_INITIAL_STATE,
@@ -71,9 +68,7 @@ const rootReducer = (state, action) => {
isWritable: IS_WRITABLE_INITIAL_STATE,
isGenuineMongoDB: GENUINE_IS,
isGenuineMongoDBVisible: IS_VISIBLE_IS,
- isDataLake: DL_INITIAL_STATE,
- connectionModel: CONNECTION_MODEL_IS,
- isModalVisible: MODAL_VISIBLE_IS
+ isDataLake: DL_INITIAL_STATE
};
}
return reducer(state, action);
diff --git a/packages/compass-sidebar/src/modules/is-modal-visible.js b/packages/compass-sidebar/src/modules/is-modal-visible.js
deleted file mode 100644
index b425812be6b..00000000000
--- a/packages/compass-sidebar/src/modules/is-modal-visible.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * The prefix.
- */
-const PREFIX = 'sidebar/is-modal-visible';
-
-/**
- * Toggle is modal visible action.
- */
-export const TOGGLE_IS_MODAL_VISIBLE = `${PREFIX}/TOGGLE_IS_MODAL_VISIBLE`;
-
-/**
- * The initial state of the is modal visible attribute.
- */
-export const INITIAL_STATE = false;
-
-/**
- * Reducer function for handle state change of the is modal visible attribute.
- *
- * @param {String} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
- */
-export default function reducer(state = INITIAL_STATE, action) {
- if (action.type === TOGGLE_IS_MODAL_VISIBLE) {
- return action.isModalVisible;
- }
- return state;
-}
-
-/**
- * Toggle is modal visible action creator.
- *
- * @param {Boolean} isModalVisible - The is modal visible attribute.
- *
- * @returns {Object} The action.
- */
-export const toggleIsModalVisible = (isModalVisible) => ({
- type: TOGGLE_IS_MODAL_VISIBLE,
- isModalVisible
-});
diff --git a/packages/compass-sidebar/src/modules/is-modal-visible.spec.js b/packages/compass-sidebar/src/modules/is-modal-visible.spec.js
deleted file mode 100644
index 0450c92e9c7..00000000000
--- a/packages/compass-sidebar/src/modules/is-modal-visible.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import reducer, {
- INITIAL_STATE,
- TOGGLE_IS_MODAL_VISIBLE,
- toggleIsModalVisible
-} from './is-modal-visible';
-
-describe('is-modal-visible module', () => {
- describe('reducer', () => {
- context('when the action is toggleIsModalVisible', () => {
- it('returns the new state', () => {
- expect(reducer(undefined, toggleIsModalVisible(true))).to.equal(true);
- });
- });
-
- context('when an action is not provided', () => {
- it('returns the default state', () => {
- expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
- });
- });
- });
-
- describe('#toggleIsModalVisible', () => {
- context('when it is a data lake', () => {
- it('sets true in the action', () => {
- expect(toggleIsModalVisible(true)).to.deep.equal({
- type: TOGGLE_IS_MODAL_VISIBLE,
- isModalVisible: true
- });
- });
- });
-
- context('when it is not a data lake', () => {
- it('sets false in the action', () => {
- expect(toggleIsModalVisible(false)).to.deep.equal({
- type: TOGGLE_IS_MODAL_VISIBLE,
- isModalVisible: false
- });
- });
- });
- });
-});
diff --git a/packages/compass-sidebar/src/plugin.js b/packages/compass-sidebar/src/plugin.js
index 85ba456df2e..aa8c1d12936 100644
--- a/packages/compass-sidebar/src/plugin.js
+++ b/packages/compass-sidebar/src/plugin.js
@@ -1,24 +1,23 @@
-import React, { Component } from 'react';
+import React from 'react';
import { Provider } from 'react-redux';
import Sidebar from './components/sidebar';
import store from './stores';
-class Plugin extends Component {
- static displayName = 'SidebarPlugin';
- /**
- * Connect the Plugin to the store and render.
- *
- * @returns {React.Component} The rendered component.
- */
- render() {
- return (
-
-
-
- );
- }
+/**
+ * Connect the Plugin to the store and render.
+ *
+ * @returns {React.Component} The rendered component.
+ */
+function SidebarPlugin() {
+ return (
+
+
+
+ );
}
-export default Plugin;
+SidebarPlugin.displayName = 'SidebarPlugin';
+
+export default SidebarPlugin;
diff --git a/packages/compass-sidebar/src/stores/store.js b/packages/compass-sidebar/src/stores/store.js
index e8d7d3df975..4b4165e02f3 100644
--- a/packages/compass-sidebar/src/stores/store.js
+++ b/packages/compass-sidebar/src/stores/store.js
@@ -13,7 +13,7 @@ import { toggleIsDataLake } from '../modules/is-data-lake';
import { loadDetailsPlugins } from '../modules/details-plugins';
import { toggleIsGenuineMongoDB } from '../modules/is-genuine-mongodb';
import { toggleIsGenuineMongoDBVisible } from '../modules/is-genuine-mongodb-visible';
-import { changeConnection } from '../modules/connection-model';
+import { changeConnectionInfo } from '../modules/connection-info';
const store = createStore(reducer, applyMiddleware(thunk));
@@ -60,8 +60,8 @@ store.onActivated = (appRegistry) => {
store.dispatch(loadDetailsPlugins(appRegistry));
- appRegistry.on('data-service-connected', (_, dataService, connectionInfo, legacyConnectionModel) => {
- store.dispatch(changeConnection(legacyConnectionModel));
+ appRegistry.on('data-service-connected', (_, dataService, connectionInfo) => {
+ store.dispatch(changeConnectionInfo(connectionInfo));
});
appRegistry.on('instance-destroyed', () => {
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.js b/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.js
index a264aa0b923..ea9433a6e47 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.js
+++ b/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.js
@@ -16,10 +16,13 @@ describe('SidebarInstance [Component]', () => {
detailsPlugins={[]}
globalAppRegistryEmit={() => {}}
toggleIsDetailsExpanded={() => {}}
- connectionModel={{ connection: {} }}
- toggleIsModalVisible={() => {}}
- saveFavorite={() => {}}
- isModalVisible={false}
+ connectionInfo={{
+ connectionOptions: {
+ connectionString: 'mongodb://localhost:27017'
+ },
+ id: '123'
+ }}
+ updateConnectionInfo={() => {}}
/>);
});
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.js b/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.js
index e337629681b..149a841aa14 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.js
+++ b/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.js
@@ -8,14 +8,11 @@ import { SidebarTitle as SidebarTitleClass } from '../../../src/components/sideb
import styles from '../../../src/components/sidebar-title/sidebar-title.module.less';
describe('SidebarTitle [Component]', () => {
- const connectionModel = {
- connection: {
- authStrategy: 'MONGODB',
- isSrvRecord: false,
- readPreference: 'primaryPreferred',
- attributes: { hostanme: 'localhost' },
- isFavorite: false
- }
+ const connectionInfo = {
+ connectionOptions: {
+ connectionString: 'mongodb://localhost:27020?readPreference=primaryPreferred'
+ },
+ id: '123'
};
context('when sidebar is collapsed', () => {
@@ -27,7 +24,7 @@ describe('SidebarTitle [Component]', () => {
component = shallow(
);
@@ -55,7 +52,7 @@ describe('SidebarTitle [Component]', () => {
component = shallow(
);
@@ -83,7 +80,7 @@ describe('SidebarTitle [Component]', () => {
);
@@ -112,7 +109,7 @@ describe('SidebarTitle [Component]', () => {
activeNamespace={''}
changeActiveNamespace={changeActiveNamespaceFake}
globalAppRegistryEmit={globalAppRegistryEmit}
- connectionModel={connectionModel}
+ connectionInfo={connectionInfo}
isSidebarExpanded
/>
);
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar.spec.js b/packages/compass-sidebar/test/renderer/components/sidebar.spec.js
index 19027fb5e65..e63a10277e3 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar.spec.js
+++ b/packages/compass-sidebar/test/renderer/components/sidebar.spec.js
@@ -8,6 +8,16 @@ import SidebarInstance from '../../../src/components/sidebar-instance';
import styles from '../../../src/components/sidebar/sidebar.module.less';
describe('Sidebar [Component]', () => {
+ const connectionInfo = {
+ connectionOptions: {
+ connectionString: 'mongodb://localhost:27020?readPreference=primaryPreferred'
+ },
+ id: '123',
+ favorite: {
+ name: 'my favorite'
+ }
+ };
+
describe('when rendered with the store', () => {
let component;
@@ -31,16 +41,6 @@ describe('Sidebar [Component]', () => {
});
describe('when it is open (not collapsed)', () => {
- const connectionModel = {
- connection: {
- authStrategy: 'MONGODB',
- isSrvRecord: false,
- readPreference: 'primaryPreferred',
- attributes: { hostanme: 'localhost' },
- isFavorite: true
- }
- };
-
let component;
let emitSpy;
let saveFavoriteSpy;
@@ -52,7 +52,7 @@ describe('Sidebar [Component]', () => {
{
isGenuineMongoDB
isGenuineMongoDBVisible={false}
toggleIsGenuineMongoDBVisible={()=>{}}
- isModalVisible={false}
openLink={() => {}}
isDetailsExpanded={false}
toggleIsDetailsExpanded={() => {}}
@@ -79,7 +78,7 @@ describe('Sidebar [Component]', () => {
filterDatabases={() => {}}
changeDatabases={() => {}}
changeFilterRegex={() => {}}
- toggleIsModalVisible={()=>{}}
+ updateAndSaveConnectionInfo={()=>{}}
saveFavorite={saveFavoriteSpy}
/>
@@ -115,9 +114,7 @@ describe('Sidebar [Component]', () => {
beforeEach(() => {
component = mount(
-
+
);
component.find('[data-test-id="toggle-sidebar"]').simulate('click');
@@ -147,9 +144,7 @@ describe('Sidebar [Component]', () => {
beforeEach(() => {
component = mount(
-
+
);
component.find('[data-test-id="toggle-sidebar"]').simulate('click');
@@ -181,7 +176,8 @@ describe('Sidebar [Component]', () => {
component = mount(
{}}
+ connectionInfo={connectionInfo}
/>
);
diff --git a/packages/connect-form/src/components/connect-form.tsx b/packages/connect-form/src/components/connect-form.tsx
index 713281c2d71..bf47b01040a 100644
--- a/packages/connect-form/src/components/connect-form.tsx
+++ b/packages/connect-form/src/components/connect-form.tsx
@@ -228,7 +228,7 @@ function ConnectForm({
}
}}
key={initialConnectionInfo.id}
- initialConnectionInfo={initialConnectionInfo}
+ initialFavoriteInfo={initialConnectionInfo.favorite}
/>
)}
diff --git a/packages/connect-form/src/components/save-connection-modal.spec.tsx b/packages/connect-form/src/components/save-connection-modal.spec.tsx
index d4d1cd9b9af..73072df4ec7 100644
--- a/packages/connect-form/src/components/save-connection-modal.spec.tsx
+++ b/packages/connect-form/src/components/save-connection-modal.spec.tsx
@@ -25,12 +25,7 @@ describe('SaveConnectionModal Component', function () {
onSaveClicked={onSaveSpy}
onCancelClicked={onCancelSpy}
open
- initialConnectionInfo={{
- id: 'test',
- connectionOptions: {
- connectionString: 'pineapples',
- },
- }}
+ initialFavoriteInfo={undefined}
/>
);
});
@@ -95,15 +90,9 @@ describe('SaveConnectionModal Component', function () {
onSaveClicked={onSaveSpy}
onCancelClicked={onCancelSpy}
open
- initialConnectionInfo={{
- id: 'test',
- connectionOptions: {
- connectionString: 'pineapples',
- },
- favorite: {
- name: 'pineapples',
- color: '#326fde',
- },
+ initialFavoriteInfo={{
+ name: 'pineapples',
+ color: '#326fde',
}}
/>
);
diff --git a/packages/connect-form/src/components/save-connection-modal.tsx b/packages/connect-form/src/components/save-connection-modal.tsx
index afebc802aec..568d338c1c0 100644
--- a/packages/connect-form/src/components/save-connection-modal.tsx
+++ b/packages/connect-form/src/components/save-connection-modal.tsx
@@ -5,10 +5,7 @@ import {
css,
spacing,
} from '@mongodb-js/compass-components';
-import {
- ConnectionInfo,
- ConnectionFavoriteOptions,
-} from 'mongodb-data-service';
+import { ConnectionFavoriteOptions } from 'mongodb-data-service';
import FormFieldContainer from './form-field-container';
import SavedConnectionColorPicker from './saved-connection-color-picker';
@@ -18,32 +15,29 @@ const connectionNameInputStyles = css({
});
function SaveConnectionModal({
- initialConnectionInfo,
+ initialFavoriteInfo,
onCancelClicked,
onSaveClicked,
open,
}: {
- initialConnectionInfo: ConnectionInfo;
+ initialFavoriteInfo?: ConnectionFavoriteOptions;
onCancelClicked: () => void;
onSaveClicked: (favoriteInfo: ConnectionFavoriteOptions) => Promise;
open: boolean;
}): React.ReactElement {
const [editingFavorite, setEditingFavorite] = useState({
name: '',
- ...initialConnectionInfo.favorite,
+ ...initialFavoriteInfo,
});
return (
{
void onSaveClicked({
- ...initialConnectionInfo.favorite,
...editingFavorite,
});
}}
diff --git a/packages/connect-form/src/hooks/use-connect-form.spec.ts b/packages/connect-form/src/hooks/use-connect-form.spec.ts
index c8f7d0c3d2e..371b0347a45 100644
--- a/packages/connect-form/src/hooks/use-connect-form.spec.ts
+++ b/packages/connect-form/src/hooks/use-connect-form.spec.ts
@@ -612,7 +612,6 @@ describe('use-connect-form hook', function () {
} = handleConnectionFormFieldUpdate(
{
type: 'update-ssh-options',
- currentTab: 'password',
key: 'host',
value: 'localhost',
},
diff --git a/packages/connections/src/components/connections.tsx b/packages/connections/src/components/connections.tsx
index d7109159eaf..03edf80c22e 100644
--- a/packages/connections/src/components/connections.tsx
+++ b/packages/connections/src/components/connections.tsx
@@ -56,7 +56,7 @@ function Connections({
onConnected: (
connectionInfo: ConnectionInfo,
dataService: DataService
- ) => Promise;
+ ) => void;
connectionStorage?: ConnectionStore;
connectFn?: (connectionOptions: ConnectionOptions) => Promise;
}): React.ReactElement {
diff --git a/packages/connections/src/stores/connections-store.ts b/packages/connections/src/stores/connections-store.ts
index 455dc8e6085..c418c5f2c25 100644
--- a/packages/connections/src/stores/connections-store.ts
+++ b/packages/connections/src/stores/connections-store.ts
@@ -190,7 +190,7 @@ export function useConnections(
onConnected: (
connectionInfo: ConnectionInfo,
dataService: DataService
- ) => Promise,
+ ) => void,
connectionStorage: ConnectionStore,
connectFn: (connectionOptions: ConnectionOptions) => Promise
): {
@@ -242,7 +242,7 @@ export function useConnections(
) {
// After connecting and the UI is updated we notify the rest of Compass.
try {
- await onConnected(connectionInfo, dataService);
+ onConnected(connectionInfo, dataService);
// Update lastUsed date as now and save the connection.
connectionInfo.lastUsed = new Date();