diff --git a/README.md b/README.md index 6ffe1ad2759..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 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. 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` +- `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 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; + }); + }); });