feat(VSCODE-197): Add radio box group to update connect form select options (#202)

Author: Anemy

src/test/suite/views/webview-app/components/connect-form/general-tab/authentication/authentication.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import { Authentication } from '../../../../../../../../views/webview-app/components/connect-form/general-tab/authentication/authentication';
-import FormItemSelect from '../../../../../../../../views/webview-app/components/form/form-item-select';
+import RadioBoxGroup from '../../../../../../../../views/webview-app/components/form/radio-box-group/radio-box-group';
 import MongodbAuthentication from '../../../../../../../../views/webview-app/components/connect-form/general-tab/authentication/mongodb-authentication';
 import AUTH_STRATEGIES from '../../../../../../../../views/webview-app/connection-model/constants/auth-strategies';
 import ScramSha256 from '../../../../../../../../views/webview-app/components/connect-form/general-tab/authentication/scram-sha-256';
@@ -16,7 +16,7 @@ describe('Authentication Component Test Suite', () => {
       kerberosCanonicalizeHostname
       onAuthStrategyChanged={(): void => {}}
     />);
-    assert(wrapper.find(FormItemSelect).exists());
+    assert(wrapper.find(RadioBoxGroup).exists());
     assert(!wrapper.find(MongodbAuthentication).exists());
     assert(!wrapper.find(ScramSha256).exists());
   });

src/test/suite/views/webview-app/components/form/radio-box-group/radio-box-group.test.tsx

@@ -0,0 +1,45 @@
+import assert from 'assert';
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import RadioBoxGroup from '../../../../../../../views/webview-app/components/form/radio-box-group/radio-box-group';
+
+describe('Radio Box Group Component Test Suite', () => {
+  describe('when rendered', () => {
+    let didCallChangeHandler = false;
+    let changeHandlerCalledValue;
+    const changeHandler = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+      didCallChangeHandler = true;
+      changeHandlerCalledValue = evt.target.value;
+    };
+
+    const wrapper = mount(<RadioBoxGroup
+      name=""
+      label="Box form label"
+      options={[{
+        value: 'pineapple',
+        label: 'Pineapple!!'
+      }, {
+        value: 'watermelon',
+        label: 'Watermelon!!'
+      }]}
+      onChange={changeHandler}
+      value={'watermelon'}
+    />);
+
+    test('it shows an input for each option', () => {
+      assert(wrapper.find('input').length === 2);
+    });
+
+    test('it shows the group label', () => {
+      assert(wrapper.find('label').at(0).text() === 'Box form label');
+    });
+
+    test('when an option is clicked it calls the onChange prop with that value', () => {
+      assert(!didCallChangeHandler);
+      wrapper.find('input').at(0).simulate('change');
+      assert(didCallChangeHandler);
+      assert(changeHandlerCalledValue === 'pineapple');
+    });
+  });
+});

src/views/webview-app/components/connect-form/advanced-tab/read-preference-select.tsx

@@ -3,9 +3,37 @@ import { connect } from 'react-redux';
 
 import { AppState } from '../../../store/store';
 import { ActionTypes, ReadPreferenceChangedAction } from '../../../store/actions';
-import FormItemSelect from '../../form/form-item-select';
+import RadioBoxGroup from '../../form/radio-box-group/radio-box-group';
 import READ_PREFERENCES from '../../../connection-model/constants/read-preferences';
 
+type ReadPreferenceOption = {
+  label: string;
+  value: READ_PREFERENCES;
+};
+
+const ReadPreferencesOptions: ReadPreferenceOption[] = [
+  {
+    label: 'Primary',
+    value: READ_PREFERENCES.PRIMARY
+  },
+  {
+    label: 'Primary Preferred',
+    value: READ_PREFERENCES.PRIMARY_PREFERRED
+  },
+  {
+    label: 'Secondary',
+    value: READ_PREFERENCES.SECONDARY
+  },
+  {
+    label: 'Secondary Preferred',
+    value: READ_PREFERENCES.SECONDARY_PREFERRED
+  },
+  {
+    label: 'Nearest',
+    value: READ_PREFERENCES.NEAREST
+  }
+];
+
 type StateProps = {
   readPreference: READ_PREFERENCES;
 };
@@ -20,25 +48,19 @@ class ReadPreferenceSelect extends React.PureComponent<StateProps & DispatchProp
    *
    * @param {Object} evt - evt.
    */
-  onReadPreferenceChanged(evt): void {
+  onReadPreferenceChanged = (evt): void => {
     this.props.onReadPreferenceChanged(evt.target.value);
-  }
+  };
 
   render(): React.ReactNode {
     const { readPreference } = this.props;
 
     return (
-      <FormItemSelect
+      <RadioBoxGroup
         label="Read Preference"
         name="readPreference"
-        options={[
-          { [READ_PREFERENCES.PRIMARY]: 'Primary' },
-          { [READ_PREFERENCES.PRIMARY_PREFERRED]: 'Primary Preferred' },
-          { [READ_PREFERENCES.SECONDARY]: 'Secondary' },
-          { [READ_PREFERENCES.SECONDARY_PREFERRED]: 'Secondary Preferred' },
-          { [READ_PREFERENCES.NEAREST]: 'Nearest' }
-        ]}
-        changeHandler={this.onReadPreferenceChanged.bind(this)}
+        options={ReadPreferencesOptions}
+        onChange={this.onReadPreferenceChanged}
         value={readPreference}
       />
     );

src/views/webview-app/components/connect-form/general-tab/authentication/authentication.tsx

@@ -6,13 +6,13 @@ import AUTH_STRATEGIES, {
   AuthStrategies
 } from '../../../../connection-model/constants/auth-strategies';
 import FormGroup from '../../../form/form-group';
-import FormItemSelect from '../../../form/form-item-select';
 import Kerberos from './kerberos';
 import LDAP from './ldap';
 import MongoDBAuth from './mongodb-authentication';
 import ScramSha256 from './scram-sha-256';
 import X509 from './x509';
 import { AppState } from '../../../../store/store';
+import RadioBoxGroup from '../../../form/radio-box-group/radio-box-group';
 
 type StateProps = {
   authStrategy: AUTH_STRATEGIES;
@@ -123,13 +123,14 @@ export class Authentication extends React.Component<StateProps & DispatchProps>
 
     return (
       <FormGroup id="authStrategy" separator>
-        <FormItemSelect
+        <RadioBoxGroup
           label="Authentication"
           name="authStrategy"
           options={AuthStrategies.map((authStrat) => ({
-            [`${authStrat.id}`]: authStrat.title
+            label: authStrat.title,
+            value: authStrat.id
           }))}
-          changeHandler={this.onAuthStrategyChanged}
+          onChange={this.onAuthStrategyChanged}
           value={authStrategy}
         />
         {this.renderAuthStrategy()}

src/views/webview-app/components/connect-form/ssh-tab/ssh-tunnel-tab.tsx

@@ -6,7 +6,7 @@ import SSH_TUNNEL_TYPES, {
   SSHTunnelOptions
 } from '../../../connection-model/constants/ssh-tunnel-types';
 import FormGroup from '../../form/form-group';
-import FormItemSelect from '../../form/form-item-select';
+import RadioBoxGroup from '../../form/radio-box-group/radio-box-group';
 import SSHTunnelPasswordValidation from './ssh-tunnel-password-validation';
 import SSHTunnelIdentityFileValidation from './ssh-tunnel-identity-file-validation';
 import { AppState } from '../../../store/store';
@@ -51,13 +51,14 @@ class SSHTunnelTab extends React.Component<StateProps & DispatchProps> {
 
     return (
       <FormGroup id="ssh-tunnel" separator>
-        <FormItemSelect
+        <RadioBoxGroup
           label="SSH Tunnel"
           name="sshTunnel"
           options={SSHTunnelOptions.map((sshTunnelOption) => ({
-            [`${sshTunnelOption.id}`]: sshTunnelOption.title
+            label: sshTunnelOption.title,
+            value: sshTunnelOption.id
           }))}
-          changeHandler={this.onSSHTunnelChanged}
+          onChange={this.onSSHTunnelChanged}
           value={sshTunnel}
         />
         {this.renderSSHTunnel()}

src/views/webview-app/components/form/radio-box-group/radio-box-group.less

@@ -0,0 +1,36 @@
+
+.radio-box-item {
+  display: inline-block;
+  margin: 3px;
+  border: 1px solid var(--vscode-searchEditor-textInputBorder, black);
+  padding: 8px 14px;
+  border-radius: 3px;
+  transition: all 150ms ease-in-out;
+  color: var(--vscode-editor-foreground);
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus-within {
+    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  }
+}
+
+.radio-box-item-selected {
+  background: #C3E7CA;
+  border-color: transparent;
+  color: #1E1E1E;
+}
+
+.radio-box-item-input {
+  // Hidden radio button styles.
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.radio-box-item-label {
+  font-size: 14px;
+  font-weight: normal;
+}

src/views/webview-app/components/form/radio-box-group/radio-box-group.tsx

@@ -0,0 +1,87 @@
+import classnames from 'classnames';
+import * as React from 'react';
+
+const styles = require('./radio-box-group.less');
+const formStyles = require('../form.less');
+
+type props = {
+  label: string;
+  name: string;
+  options: {
+    label: string;
+    value: string;
+  }[];
+  onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+};
+
+class RadioBoxGroup extends React.Component<props> {
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { onChange, value } = this.props;
+
+    // Stopped propagation to prevent event from bubbling with new target, and thus value coming back as undefined
+    e.stopPropagation();
+
+    onChange(e);
+
+    if (!value) {
+      this.setState({ value: e.target.value });
+    }
+  };
+
+  renderOptions(): React.ReactNode {
+    const {
+      options,
+      value
+    } = this.props;
+
+    return options.map((option, i) => {
+      const checked = value === option.value;
+
+      return (
+        <label
+          className={classnames(styles['radio-box-item'], {
+            [styles['radio-box-item-selected']]: checked
+          })}
+          key={i}
+          htmlFor={`radio-box-group-${option.value}`}
+        >
+          <input
+            className={styles['radio-box-item-input']}
+            checked={checked}
+            aria-selected={checked}
+            type="radio"
+            id={`radio-box-group-${option.value}`}
+            name={`radio-box-group-${option.value}`}
+            onChange={this.handleChange}
+            value={option.value}
+          />
+          <div
+            className={styles['radio-box-item-label']}
+          >{option.label}</div>
+        </label>
+      );
+    });
+  }
+
+  render(): React.ReactNode {
+    const { label, name } = this.props;
+
+    return (
+      <div className={formStyles['form-item']}>
+        <label>
+          <span>{label}</span>
+        </label>
+        <div
+          className={styles['radio-box-group']}
+          aria-label={name}
+          role="group"
+        >
+          {this.renderOptions()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RadioBoxGroup;

src/views/webview-app/connection-model/constants/ssh-tunnel-types.ts

@@ -1,5 +1,5 @@
 // Allowed values for the `sshTunnel` field.
-enum SSH_TUNNEL_TYPES {
+export enum SSH_TUNNEL_TYPES {
   /**
    * Do not use SSH tunneling.
    */

src/views/webview-app/connection-model/constants/ssl-methods.ts

@@ -1,5 +1,5 @@
 // Allowed values for the `sslMethod` field.
-enum SSL_METHODS {
+export enum SSL_METHODS {
   /**
    * Do not use SSL for anything.
    */