From 4c497edc4585e2866efc5ef62cba2defda14440d Mon Sep 17 00:00:00 2001 From: Chrispine Lwekaza Date: Mon, 2 Aug 2021 08:51:57 -0400 Subject: [PATCH 1/4] Modify the compass query bar component to include showQueryHistoryButton and showExportToLanguageButton props so that the user of the component can choose to show or hide these buttons. Update the tests to make sure these props work --- .../src/components/query-bar/query-bar.jsx | 59 +++++++----- .../components/query-bar/query-bar.spec.js | 86 +++++++++++++++++ packages/compass-query-bar/src/plugin.spec.js | 93 ++++++++++++++++++- 3 files changed, 209 insertions(+), 29 deletions(-) diff --git a/packages/compass-query-bar/src/components/query-bar/query-bar.jsx b/packages/compass-query-bar/src/components/query-bar/query-bar.jsx index 778f93fcdf9..a315c81d701 100644 --- a/packages/compass-query-bar/src/components/query-bar/query-bar.jsx +++ b/packages/compass-query-bar/src/components/query-bar/query-bar.jsx @@ -107,14 +107,18 @@ class QueryBar extends Component { lastExecutedQuery: PropTypes.object, onReset: PropTypes.func, onApply: PropTypes.func, - schemaFields: PropTypes.array + schemaFields: PropTypes.array, + showQueryHistoryButton: PropTypes.bool, + showExportToLanguageButton: PropTypes.bool, }; static defaultProps = { expanded: false, buttonLabel: 'Apply', layout: ['filter', 'project', ['sort', 'maxTimeMS'], ['collation', 'skip', 'limit']], - schemaFields: [] + schemaFields: [], + showQueryHistoryButton: true, + showExportToLanguageButton: true, }; state = { @@ -298,7 +302,7 @@ class QueryBar extends Component { * @returns {React.Component} The Query Bar view. */ renderForm = () => { - const { valid, featureFlag, queryState, buttonLabel } = this.props; + const { valid, featureFlag, queryState, buttonLabel, showQueryHistoryButton, showExportToLanguageButton } = this.props; const { hasFocus } = this.state; const _inputGroupClassName = classnames( @@ -363,29 +367,34 @@ class QueryBar extends Component { onClick={this.onResetButtonClicked}> Reset - + {showQueryHistoryButton && + + } - - - - - - Export To Language - - + + {showExportToLanguageButton && + + + + + + Export To Language + + + } ); } diff --git a/packages/compass-query-bar/src/components/query-bar/query-bar.spec.js b/packages/compass-query-bar/src/components/query-bar/query-bar.spec.js index 255cf6702cd..c82206fb56b 100644 --- a/packages/compass-query-bar/src/components/query-bar/query-bar.spec.js +++ b/packages/compass-query-bar/src/components/query-bar/query-bar.spec.js @@ -242,5 +242,91 @@ describe('QueryBar [Component]', function() { }); }); }); + + describe('when rendered with or without a query history button', function() { + const layout = ['filter']; + + it('query history button renderes by default', function() { + const component = shallow( + + ); + expect(component.find('button[data-test-id="query-history-button"]')).to.exist; + }); + + + it('query history button renderes when showQueryHistoryButton prop is passed and set to true', function() { + const component = shallow( + + ); + expect(component.find('button[data-test-id="query-history-button"]')).to.exist; + }); + + it('query history button does not render when showQueryHistoryButton prop is passed and set to false', function() { + const component = shallow( + + ); + expect(component.find('button[data-test-id="query-history-button"]')).to.not.exist; + }); + }); + + describe('when rendered with or without an export to language button', function() { + const layout = ['filter']; + + it('export to language button renderes by default', function() { + const component = shallow( + + ); + expect(component.find('#query-bar-menu-actions')).to.exist; + }); + + it('export to language button renderes when showExportToLanguageButton prop is passed and set to true', function() { + const component = shallow( + + ); + expect(component.find('#query-bar-menu-actions')).to.exist; + }); + + it('export to language button does not render when showExportToLanguageButton prop is passed and set to false', function() { + const component = shallow( + + ); + expect(component.find('#query-bar-menu-actions')).to.not.exist; + }); + }); }); }); diff --git a/packages/compass-query-bar/src/plugin.spec.js b/packages/compass-query-bar/src/plugin.spec.js index 46ff2423032..f8eafbd4513 100644 --- a/packages/compass-query-bar/src/plugin.spec.js +++ b/packages/compass-query-bar/src/plugin.spec.js @@ -10,6 +10,7 @@ import OptionEditor from './components/option-editor'; describe('QueryBar [Plugin]', () => { let store; let actions; + let component; beforeEach(function() { actions = configureActions(); @@ -21,10 +22,11 @@ describe('QueryBar [Plugin]', () => { afterEach(function() { actions = null; store = null; + component = null; }); it('should contain a with a store prop', function() { - const component = shallow(); + component = shallow(); expect(component.find(StoreConnector).first().props('store')).to.be.an('object'); }); @@ -36,7 +38,7 @@ describe('QueryBar [Plugin]', () => { filterValid: false }); - const component = mount( + component = mount( { describe('when find is clicked', function() { let calledApply = false; - let component; beforeEach(() => { component = mount( @@ -80,11 +81,95 @@ describe('QueryBar [Plugin]', () => { afterEach(() => { calledApply = false; - component = null; }); it('it calls the onApply prop', async function() { expect(calledApply).to.equal(true); }); }); + + describe('when the plugin is rendered with or without a query history button', function() { + const layout = ['filter']; + + it('query history button renderes by default', function() { + component = mount( + + ); + expect(component.find('button[data-test-id="query-history-button"]')).to.exist; + }); + + it('query history button renderes when showQueryHistoryButton prop is passed and set to true', function() { + component = mount( + + ); + expect(component.find('button[data-test-id="query-history-button"]')).to.exist; + }); + + it('query history button does not render when showQueryHistoryButton prop is passed and set to false', function() { + component = mount( + + ); + expect(component.find('button[data-test-id="query-history-button"]')).to.not.exist; + }); + }); + + describe('when rendered with or without an export to language button', function() { + const layout = ['filter']; + + it('export to language button renderes by default', function() { + component = mount( + + ); + expect(component.find('#query-bar-menu-actions')).to.exist; + }); + + it('export to language button renderes when showExportToLanguageButton prop is passed and set to true', function() { + component = mount( + + ); + expect(component.find('#query-bar-menu-actions')).to.exist; + }); + + it('export to language button does not render when showExportToLanguageButton prop is passed and set to false', function() { + component = mount( + + ); + expect(component.find('#query-bar-menu-actions')).to.not.exist; + }); + }); }); From 5d0388953f4ed251cc1fd4db59048f4e51386f2d Mon Sep 17 00:00:00 2001 From: Chrispine Lwekaza Date: Mon, 2 Aug 2021 12:11:13 -0400 Subject: [PATCH 2/4] Update README.md to include a more clear instruction on running compass plugins locally --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6ffe1ad2759..71c62575663 100644 --- a/README.md +++ b/README.md @@ -92,14 +92,14 @@ This monorepo is powered by [`npm workspaces`](https://docs.npmjs.com/cli/v7/usi ### Working on Plugins -Most of the plugins have their own development environment so you can work on them in isolation. If you want to work on plugin without running the whole Compass application, you can run `npm run start` in the plugin directory, either with the help of `lerna` or `npm workspaces`. For example to start compass-connect plugin locally you can run `npm run start --workspace @mongodb-js/compass-connect` or `npx lerna run start --scope @mongodb-js/compass-connect --stream`. +Most of the plugins have their own development environment so you can work on them in isolation. If you want to work on a plugin without running the whole Compass application, you can run `npm run start` in the plugin directory (such as at the top of the `compass/packages/compass-connect` directory), either with the help of `lerna` or `npm workspaces`. For example, to start `compass-connect` plugin locally, you can either run `npm run start --workspace @mongodb-js/compass-connect` from the top of `compass` directory, run `npx lerna run start --scope @mongodb-js/compass-connect --stream` from anywhere in the `compass` directory, or run `npm run start` from the top of the `compass/packages/compass-connect` directory. If you want to see your changes applied in Compass, you might need to rebuild plugins that you changed with the `compile` command. Instead of manually writing out the `scope` you might want to use `lerna --since` filter to rebuild everything since your local or origin `HEAD` of the git history: `npx lerna run compile --stream --since origin/HEAD`. Restarting or hard-reloading (Shift+CMD+R) Compass after compilation is finished should apply your changes. In addition to running lerna commands directly, there are a few convenient npm scripts for working with packages: - `npm run compile-changed` will compile all plugins and their dependants changed since `origin/HEAD` -- `npm run test-changed` will run tests in all packages and their dependants changed since `origin/HEAD` +- `npm run test-changed` will run tests in all packages and their dependants changed since `origin/HEAD`. To run all tests in one plugin that you are working on such as the `compass-connect` plugin, you can run `npm run test` from the top of the `compass/packages/compass-connect` directory. - `npm run check-changed` will run `eslint` and `depcheck` validation in all packages (ignoring dependants) changed since `origin/HEAD` ### Caveats From 0c6ec97bd26638931fe40b65273f9df7ea42a95c Mon Sep 17 00:00:00 2001 From: chrisrichie25 <36181129+chrisrichie25@users.noreply.github.com> Date: Tue, 3 Aug 2021 09:20:58 -0400 Subject: [PATCH 3/4] Update README.md Update README.md to have more concise directions for running compass locally Co-authored-by: Sergey --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 71c62575663..32451418fcc 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ This monorepo is powered by [`npm workspaces`](https://docs.npmjs.com/cli/v7/usi ### Working on Plugins -Most of the plugins have their own development environment so you can work on them in isolation. If you want to work on a plugin without running the whole Compass application, you can run `npm run start` in the plugin directory (such as at the top of the `compass/packages/compass-connect` directory), either with the help of `lerna` or `npm workspaces`. For example, to start `compass-connect` plugin locally, you can either run `npm run start --workspace @mongodb-js/compass-connect` from the top of `compass` directory, run `npx lerna run start --scope @mongodb-js/compass-connect --stream` from anywhere in the `compass` directory, or run `npm run start` from the top of the `compass/packages/compass-connect` directory. +Most of the plugins have their own development environment so you can work on them in isolation. If you want to work on a plugin without running the whole Compass application, you can run `npm run start` in the plugin directory (such as at the top of the `compass/packages/compass-connect` directory), either with the help of `lerna` or `npm workspaces`. For example, to start `compass-connect` plugin locally, you can either run `npm run start --workspace @mongodb-js/compass-connect` from the top of `compass` directory, run `npx lerna run start --scope @mongodb-js/compass-connect --stream` from anywhere in the `compass` directory, or run `npm run start` from the top of the `compass/packages/compass-connect` directory. Same approaches will work for any other workspace-specific script. If you want to run commands like `test` or `check` only for one specific workspace in the repository, you can use any of the methods described above. If you want to see your changes applied in Compass, you might need to rebuild plugins that you changed with the `compile` command. Instead of manually writing out the `scope` you might want to use `lerna --since` filter to rebuild everything since your local or origin `HEAD` of the git history: `npx lerna run compile --stream --since origin/HEAD`. Restarting or hard-reloading (Shift+CMD+R) Compass after compilation is finished should apply your changes. From 0f93613f7f0051b1a947d8b8ae8dba157dc39677 Mon Sep 17 00:00:00 2001 From: chrisrichie25 <36181129+chrisrichie25@users.noreply.github.com> Date: Tue, 3 Aug 2021 09:37:10 -0400 Subject: [PATCH 4/4] Update README.md Rework a paragraph to create a better organization of the documentation as the comment suggested. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 32451418fcc..b79d0d326b0 100644 --- a/README.md +++ b/README.md @@ -92,14 +92,14 @@ This monorepo is powered by [`npm workspaces`](https://docs.npmjs.com/cli/v7/usi ### Working on Plugins -Most of the plugins have their own development environment so you can work on them in isolation. If you want to work on a plugin without running the whole Compass application, you can run `npm run start` in the plugin directory (such as at the top of the `compass/packages/compass-connect` directory), either with the help of `lerna` or `npm workspaces`. For example, to start `compass-connect` plugin locally, you can either run `npm run start --workspace @mongodb-js/compass-connect` from the top of `compass` directory, run `npx lerna run start --scope @mongodb-js/compass-connect --stream` from anywhere in the `compass` directory, or run `npm run start` from the top of the `compass/packages/compass-connect` directory. Same approaches will work for any other workspace-specific script. If you want to run commands like `test` or `check` only for one specific workspace in the repository, you can use any of the methods described above. +Most of the plugins have their own development environment so you can work on them in isolation. If you want to work on a plugin without running the whole Compass application, you can run `npm run start` in the plugin directory (such as at the top of the `compass/packages/compass-connect` directory), either with the help of `lerna` or `npm workspaces`. For example, to start `compass-connect` plugin locally, you can either run `npm run start --workspace @mongodb-js/compass-connect` from the top of `compass` directory, run `npx lerna run start --scope @mongodb-js/compass-connect --stream` from anywhere in the `compass` directory, or run `npm run start` from the top of the `compass/packages/compass-connect` directory. Same approaches will work for any other workspace-specific script. If you want to run commands like `test` or `check` only for one specific workspace in the repository, you can use any of the methods described above. As an example, to run all tests in one plugin that you are working on such as the `compass-connect` plugin, you can run `npm run test` from the top of the `compass/packages/compass-connect` directory. If you want to see your changes applied in Compass, you might need to rebuild plugins that you changed with the `compile` command. Instead of manually writing out the `scope` you might want to use `lerna --since` filter to rebuild everything since your local or origin `HEAD` of the git history: `npx lerna run compile --stream --since origin/HEAD`. Restarting or hard-reloading (Shift+CMD+R) Compass after compilation is finished should apply your changes. In addition to running lerna commands directly, there are a few convenient npm scripts for working with packages: - `npm run compile-changed` will compile all plugins and their dependants changed since `origin/HEAD` -- `npm run test-changed` will run tests in all packages and their dependants changed since `origin/HEAD`. To run all tests in one plugin that you are working on such as the `compass-connect` plugin, you can run `npm run test` from the top of the `compass/packages/compass-connect` directory. +- `npm run test-changed` will run tests in all packages and their dependants changed since `origin/HEAD`. - `npm run check-changed` will run `eslint` and `depcheck` validation in all packages (ignoring dependants) changed since `origin/HEAD` ### Caveats