Dqt improvements

jsx/Form.d.ts

@@ -162,6 +162,7 @@ type checkboxProps = {
     required?: boolean
     errorMessage?: string
     elementClass?: string
+    style?: object
     onUserInput?: (name: string, value: any) => void
 }
 /**

jsx/Form.js

@@ -2178,7 +2178,9 @@ export class CheckboxElement extends React.Component {
     let elementClass = this.props.class + ' ' + this.props.offset;
     const divStyle = this.props.class === 'checkbox-inline'
       ? {paddingRight: '5px'}
-      : {paddingRight: '5px', display: 'inline-block'};
+      : this.props.class === 'checkbox-flex' ?
+        {paddingRight: '5px', display: 'flex'}
+        : {paddingRight: '5px', display: 'inline-block'};
 
     // Add required asterix
     if (this.props.required) {
@@ -2192,9 +2194,12 @@ export class CheckboxElement extends React.Component {
     }
 
     return (
-      <div className={elementClass}>
+      <div className={elementClass} style={this.props.style}>
         <div className="col-sm-12">
-          <label htmlFor={this.props.id}>
+          <label htmlFor={this.props.id}
+            style={
+              this.props.class === 'checkbox-flex'
+                ? {display: 'flex'} : {}}>
             <div style={divStyle}>
               <input
                 type="checkbox"
@@ -2204,6 +2209,9 @@ export class CheckboxElement extends React.Component {
                 required={this.props.required}
                 disabled={this.props.disabled}
                 onChange={this.handleChange}
+                style={
+                  this.props.class === 'checkbox-flex' ? {marginTop: '0'} : {}
+                }
               />
             </div>
             {errorMessage}
@@ -2228,6 +2236,7 @@ CheckboxElement.propTypes = {
   errorMessage: PropTypes.string,
   elementClass: PropTypes.string,
   onUserInput: PropTypes.func,
+  style: PropTypes.object,
 };
 
 CheckboxElement.defaultProps = {
@@ -2238,6 +2247,7 @@ CheckboxElement.defaultProps = {
   offset: 'col-sm-offset-3',
   class: 'checkbox-inline',
   elementClass: 'checkbox-inline col-sm-offset-3',
+  style: {},
   onUserInput: function() {
     console.warn('onUserInput() callback is not set');
   },

modules/dataquery/jsx/components/filterableselectgroup.tsx

@@ -19,13 +19,15 @@ type SelectGroup = {
  * @param {string?} props.placeholder - An optional placeholder value when no elements are selected
  * @param {object} props.groups - Groups to select the dropdown into
  * @param {function} props.mapGroupName - A mapper from backend to frontend name for groups
+ * @param {string?} props.label - Select input label
  * @returns {React.ReactElement} - The element
  */
 function FilterableSelectGroup(props: {
     onChange: (module: string, value: string) => void,
     placeholder?: string,
     groups: object,
     mapGroupName?: (module: string) => string,
+    label?: string,
 }) {
   const groups: SelectGroup[] = [];
   const placeholder = props.placeholder || 'Select a category';
@@ -70,19 +72,50 @@ function FilterableSelectGroup(props: {
   };
   return (
     <div>
-      <Select options={groups} onChange={selected}
-        menuPortalTarget={document.body}
-        styles={{menuPortal:
-                    /**
-                     * Add a z-index to ensure the element stays visible
-                     *
-                     * @param {object} base - the base CSS
-                     * @returns {object} - the new CSS with z-index added
-                     */
-                    (base) => ({...base, zIndex: 9999})}
-        }
-        placeholder={placeholder}
-      />
+      {props.label ?
+        <label style={{width: '100%', fontSize: '24px'}}>
+          {props.label}
+          <Select options={groups} onChange={selected}
+            menuPortalTarget={document.body}
+            styles={{menuPortal:
+                        /**
+                         * Add a z-index to ensure the element stays visible
+                         *
+                         * @param {object} base - the base CSS
+                         * @returns {object} - the new CSS with z-index added
+                         */
+                        (base) => ({...base, zIndex: 9999}),
+            valueContainer:
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({
+                              ...base,
+                              fontSize: '14px',
+                              fontWeight: 400,
+                            }),
+            }}
+            placeholder={placeholder}
+          />
+        </label>
+        :
+        <Select options={groups} onChange={selected}
+          menuPortalTarget={document.body}
+          styles={{menuPortal:
+                      /**
+                       * Add a z-index to ensure the element stays visible
+                       *
+                       * @param {object} base - the base CSS
+                       * @returns {object} - the new CSS with z-index added
+                       */
+                      (base) => ({...base, zIndex: 9999})}
+          }
+          placeholder={placeholder}
+        />
+      }
     </div>
   );
 }