feat(@mongodb-js/compass-query-bar): Add props to toggle visibility of "query history" and "export to language" buttons CLOUDP-96456

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

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
           </button>
-          <button
-            id="query_history_button"
-            key="query-history-button"
-            className={_queryHistoryClassName}
-            data-test-id="query-history-button"
-            type="button"
-            onClick={this.props.actions.toggleQueryHistory}
-            title="Toggle Query History"
-          >
-            <FontAwesome
-              data-test-id="query-history-button-icon"
-              name="history"
-            />
-          </button>
+          {showQueryHistoryButton &&
+              <button
+                id="query_history_button"
+                key="query-history-button"
+                className={_queryHistoryClassName}
+                data-test-id="query-history-button"
+                type="button"
+                onClick={this.props.actions.toggleQueryHistory}
+                title="Toggle Query History"
+              >
+                <FontAwesome
+                  data-test-id="query-history-button-icon"
+                  name="history"
+                />
+              </button>
+          }
         </div>
-        <Dropdown pullRight id="query-bar-menu-actions">
-          <Dropdown.Toggle noCaret>
-            <i className="mms-icon-ellipsis" aria-hidden />
-          </Dropdown.Toggle>
-          <Dropdown.Menu>
-            <MenuItem onClick={this.props.actions.exportToLanguage}>Export To Language</MenuItem>
-          </Dropdown.Menu>
-        </Dropdown>
+
+        {showExportToLanguageButton &&
+          <Dropdown pullRight id="query-bar-menu-actions">
+            <Dropdown.Toggle noCaret>
+              <i className="mms-icon-ellipsis" aria-hidden />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <MenuItem onClick={this.props.actions.exportToLanguage}>Export To Language</MenuItem>
+            </Dropdown.Menu>
+          </Dropdown>
+        }
       </div>
     );
   }

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(
+          <QueryBar
+            store={store}
+            actions={actions}
+            layout={layout}
+            expanded
+            serverVersion="3.4.0" />
+        );
+        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(
+          <QueryBar
+            store={store}
+            actions={actions}
+            layout={layout}
+            showQueryHistoryButton
+            expanded
+            serverVersion="3.4.0" />
+        );
+        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(
+          <QueryBar
+            store={store}
+            actions={actions}
+            layout={layout}
+            showQueryHistoryButton={false}
+            expanded
+            serverVersion="3.4.0" />
+        );
+        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(
+          <QueryBar
+            store={store}
+            actions={actions}
+            layout={layout}
+            showExportToLanguageButton
+            expanded
+            serverVersion="3.4.0" />
+        );
+        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(
+          <QueryBar
+            store={store}
+            actions={actions}
+            layout={layout}
+            showExportToLanguageButton
+            expanded
+            serverVersion="3.4.0" />
+        );
+        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(
+          <QueryBar
+            store={store}
+            actions={actions}
+            layout={layout}
+            showExportToLanguageButton={false}
+            expanded
+            serverVersion="3.4.0" />
+        );
+        expect(component.find('#query-bar-menu-actions')).to.not.exist;
+      });
+    });
   });
 });

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 <StoreConnector /> with a store prop', function() {
-    const component = shallow(<QueryBarPlugin store={store} actions={actions} />);
+    component = shallow(<QueryBarPlugin store={store} actions={actions} />);
     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(
         <QueryBarPlugin
           store={store}
           actions={actions}
@@ -58,7 +60,6 @@ describe('QueryBar [Plugin]', () => {
 
   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(
+        <QueryBarPlugin
+          store={store}
+          actions={actions}
+          layout={layout}
+          expanded
+          serverVersion="3.4.0" />
+      );
+      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(
+        <QueryBarPlugin
+          store={store}
+          actions={actions}
+          layout={layout}
+          showQueryHistoryButton
+          expanded
+          serverVersion="3.4.0" />
+      );
+      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(
+        <QueryBarPlugin
+          store={store}
+          actions={actions}
+          layout={layout}
+          showQueryHistoryButton={false}
+          expanded
+          serverVersion="3.4.0" />
+      );
+      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(
+        <QueryBarPlugin
+          store={store}
+          actions={actions}
+          layout={layout}
+          showExportToLanguageButton
+          expanded
+          serverVersion="3.4.0" />
+      );
+      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(
+        <QueryBarPlugin
+          store={store}
+          actions={actions}
+          layout={layout}
+          showExportToLanguageButton
+          expanded
+          serverVersion="3.4.0" />
+      );
+      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(
+        <QueryBarPlugin
+          store={store}
+          actions={actions}
+          layout={layout}
+          showExportToLanguageButton={false}
+          expanded
+          serverVersion="3.4.0" />
+      );
+      expect(component.find('#query-bar-menu-actions')).to.not.exist;
+    });
+  });
 });