feat(VSCODE-168): Add resources panel to overview page

package.json

@@ -820,6 +820,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
+    "@iconify-icons/codicon": "^1.0.6",
+    "@iconify/react": "^1.1.3",
     "@leafygreen-ui/toggle": "3.0.1",
     "@mongosh/browser-runtime-electron": "^0.5.0",
     "@mongosh/service-provider-server": "^0.5.0",

src/test/suite/views/webview-app/components/overview-page/overview-page.test.tsx

@@ -5,12 +5,16 @@ import { shallow } from 'enzyme';
 import { OverviewPage } from '../../../../../../views/webview-app/components/overview-page/overview-page';
 import ConnectHelper from '../../../../../../views/webview-app/components/connect-helper/connect-helper';
 import ConnectionStatus from '../../../../../../views/webview-app/components/connection-status/connection-status';
-import OverviewHeader from '../../../../../../views/webview-app/components/overview-page/overview-header';
+import OverviewHeader from '../../../../../../views/webview-app/components/overview-page/overview-header/overview-header';
 import ConnectionFormModal from '../../../../../../views/webview-app/components/connect-form-modal/connect-form-modal';
+import ResourcesPanel from '../../../../../../views/webview-app/components/resources-panel/resources-panel';
 
 describe('Overview Page Component Test Suite', () => {
   describe('when rendered', () => {
-    const wrapper = shallow(<OverviewPage showConnectForm={false} />);
+    const wrapper = shallow(<OverviewPage
+      showConnectForm={false}
+      showResourcesPanel={false}
+    />);
 
     test('it shows an overview header', () => {
       assert(wrapper.find(OverviewHeader).exists());
@@ -27,13 +31,31 @@ describe('Overview Page Component Test Suite', () => {
     test('it does not show the connect form modal', () => {
       assert(!wrapper.find(ConnectionFormModal).exists());
     });
+
+    test('it does not show the resources panel', () => {
+      assert(!wrapper.find(ResourcesPanel).exists());
+    });
   });
 
   describe('when rendered with showConnectForm', () => {
-    const wrapper = shallow(<OverviewPage showConnectForm />);
+    const wrapper = shallow(<OverviewPage
+      showConnectForm
+      showResourcesPanel={false}
+    />);
 
     test('it shows the connect form', () => {
       assert(wrapper.find(ConnectionFormModal).exists());
     });
   });
+
+  describe('when rendered with showResourcesPanel', () => {
+    const wrapper = shallow(<OverviewPage
+      showConnectForm={false}
+      showResourcesPanel
+    />);
+
+    test('it shows the resources panel', () => {
+      assert(wrapper.find(ResourcesPanel).exists());
+    });
+  });
 });

src/test/suite/views/webview-app/components/resources-panel/resources-panel.test.tsx

@@ -0,0 +1,61 @@
+import assert from 'assert';
+import * as React from 'react';
+import { mount } from 'enzyme';
+import * as sinon from 'sinon';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import {
+  AppState,
+  initialState,
+  rootReducer
+} from '../../../../../../views/webview-app/store/store';
+import ResourcesPanel from '../../../../../../views/webview-app/components/resources-panel/resources-panel';
+
+describe('Resources Panel Component Test Suite', () => {
+  describe('when rendered', () => {
+    let fakeVscodeWindowPostMessage;
+    let wrapper;
+    let store;
+
+    beforeEach(() => {
+      fakeVscodeWindowPostMessage = sinon.fake.returns(null);
+
+      sinon.replace(
+        (global as any).vscodeFake,
+        'postMessage',
+        fakeVscodeWindowPostMessage
+      );
+
+      store = createStore(rootReducer, {
+        ...initialState,
+        showResourcesPanel: true
+      } as AppState);
+
+      wrapper = mount(
+        <Provider
+          store={store}
+        >
+          <ResourcesPanel />
+        </Provider>
+      );
+    });
+
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    test('when the x is clicked it closes the panel', () => {
+      assert(store.getState().showResourcesPanel === true);
+      wrapper.find('button').at(0).simulate('click');
+      assert(store.getState().showResourcesPanel === false);
+    });
+
+    test('when a link is clicked it sends a telemetry event to the extension', () => {
+      assert(!fakeVscodeWindowPostMessage.called);
+      wrapper.find('a').at(0).simulate('click');
+      assert(fakeVscodeWindowPostMessage.called);
+      assert(fakeVscodeWindowPostMessage.firstCall.args[0].command === 'EXTENSION_LINK_CLICKED');
+    });
+  });
+});

src/test/suite/views/webview-app/jest-setup.js

@@ -5,6 +5,9 @@ const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 Enzyme.configure({ adapter: new Adapter() });
 
+// eslint-disable-next-line no-undef
+jest.mock('@iconify-icons/codicon/book', () => {});
+
 global.vscodeFake = {
   postMessage: (message) => { }
 };

src/views/webview-app/components/info-sprinkle/info-sprinkle.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
@@ -13,13 +12,13 @@ class InfoSprinkle extends React.Component<props> {
   render(): React.ReactNode {
     return (
       <a
-        className={classnames(styles['info-sprinkle'])}
+        className={styles['info-sprinkle']}
         target="_blank"
         rel="noopener"
         href={this.props.linkTo}
       >
         <FontAwesomeIcon
-          className={classnames(styles['info-sprinkle-icon'])}
+          className={styles['info-sprinkle-icon']}
           icon={faInfoCircle}
         />
       </a>

src/views/webview-app/components/overview-page/overview-header/overview-header.less

@@ -0,0 +1,45 @@
+.overview-header-content-area {
+  margin: 0 auto;
+  width: 90%;
+  min-width: 400px;
+  position: relative;
+  font-size: 14px;
+}
+
+.overview-header-bar {
+  background-color: #3D4F58;
+  margin: 0 auto;
+  margin-top: 24px;
+  height: 1px;
+  width: 90%;
+  min-width: 400px;
+}
+
+.overview-header-description {
+  margin-top: 12px;
+  max-width: 68%;
+  margin: 0 auto;
+  line-height: 20px;
+}
+
+.resources-button {
+  position: absolute;
+  right: 0;
+  top: 50px;
+  background: none;
+  border: none;
+  text-align: center;
+  color: var(--vscode-editor-foreground);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.resources-button-icon {
+  font-size: 24px;
+}
+
+.resources-button-title {
+  font-weight: 500;
+}

src/views/webview-app/components/overview-page/overview-header/overview-header.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Icon } from '@iconify/react';
+import bookIcon from '@iconify-icons/codicon/book';
+
+import MongoDBLogo from '../../mongodb-logo/mongodb-logo';
+import {
+  ActionTypes,
+  ToggleShowResourcesPanelAction
+} from '../../../store/actions';
+
+const styles = require('./overview-header.less');
+
+type DispatchProps = {
+  toggleShowResourcesPanel: () => void;
+};
+
+class OverviewHeader extends React.Component<DispatchProps> {
+  renderResourcesButton(): React.ReactNode {
+    return (
+      <button
+        className={styles['resources-button']}
+        onClick={(): void => this.props.toggleShowResourcesPanel()}
+      >
+        <Icon
+          className={styles['resources-button-icon']}
+          icon={bookIcon}
+        />
+        <div className={styles['resources-button-title']}>
+          Resources
+        </div>
+      </button>
+    );
+  }
+
+  render(): React.ReactNode {
+    return (
+      <div className={styles['overview-header']}>
+        <div
+          className={styles['overview-header-content-area']}
+        >
+          <MongoDBLogo />
+          <div className={styles['overview-header-description']}>
+            Navigate your databases and collections, use playgrounds for exploring and transforming your data
+          </div>
+          {this.renderResourcesButton()}
+        </div>
+        <div className={styles['overview-header-bar']}/>
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps: DispatchProps = {
+  toggleShowResourcesPanel: (): ToggleShowResourcesPanelAction => ({
+    type: ActionTypes.TOGGLE_SHOW_RESOURCES_PANEL
+  })
+};
+
+export default connect(null, mapDispatchToProps)(OverviewHeader);

src/views/webview-app/components/overview-page/overview-page.less

@@ -5,19 +5,6 @@
   font-size: 14px;
 }
 
-.overview-header-bar {
-  background-color: #3D4F58;
-  margin: 0 auto;
-  margin-top: 24px;
-  height: 1px;
-  width: 90%;
-  min-width: 400px;
-}
-
-.overview-header-description {
-  margin-top: 12px;
-}
-
 .overview-help-panel-container {
   margin-top: 69px;
   margin-bottom: 30px;

src/views/webview-app/components/overview-page/overview-page.tsx

@@ -2,25 +2,31 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { AppState } from '../../store/store';
-import OverviewHeader from './overview-header';
+import OverviewHeader from './overview-header/overview-header';
 import ConnectFormModal from '../connect-form-modal/connect-form-modal';
 import ConnectHelper from '../connect-helper/connect-helper';
 import ConnectionStatus from '../connection-status/connection-status';
 import AtlasCTA from '../atlas-cta/atlas-cta';
+import ResourcesPanel from '../resources-panel/resources-panel';
 
 const styles = require('./overview-page.less');
 
 type StateProps = {
   showConnectForm: boolean;
+  showResourcesPanel: boolean;
 };
 
 export class OverviewPage extends React.Component<StateProps> {
   render(): React.ReactNode {
-    const { showConnectForm } = this.props;
+    const {
+      showConnectForm,
+      showResourcesPanel
+    } = this.props;
 
     return (
       <div className={styles.overview}>
         {showConnectForm && <ConnectFormModal />}
+        {showResourcesPanel && <ResourcesPanel />}
         <OverviewHeader />
         <ConnectionStatus />
         <ConnectHelper />
@@ -34,7 +40,8 @@ export class OverviewPage extends React.Component<StateProps> {
 
 const mapStateToProps = (state: AppState): StateProps => {
   return {
-    showConnectForm: state.showConnectForm
+    showConnectForm: state.showConnectForm,
+    showResourcesPanel: state.showResourcesPanel
   };
 };