Move recents to advanced select filters; drop rightmost column in forms

client/src/components/FieldHelper.js

@@ -1,11 +1,9 @@
 import { CompactRow } from "components/Compact"
-import LinkTo from "components/LinkTo"
 import _cloneDeep from "lodash/cloneDeep"
 import _get from "lodash/get"
 import PropTypes from "prop-types"
 import React, { useCallback, useMemo } from "react"
 import {
-  Button,
   Col,
   ControlLabel,
   FormControl,
@@ -69,8 +67,7 @@ const Field = ({
   extraColElem,
   addon,
   vertical,
-  isCompact,
-  extraAddon
+  isCompact
 }) => {
   const id = getFieldId(field)
   const widget = useMemo(
@@ -80,20 +77,20 @@ const Field = ({
       ) : (
         <InputGroup>
           {widgetElem}
-          {extraAddon && <InputGroup.Addon>{extraAddon}</InputGroup.Addon>}
           <FieldAddon id={id} addon={addon} />
         </InputGroup>
       ),
-    [addon, extraAddon, id, widgetElem]
+    [addon, id, widgetElem]
   )
   const validationState = getFormGroupValidationState(field, form)
   if (label === undefined) {
     label = utils.sentenceCase(field.name) // name is a required prop of field
   }
-  // setting label or extraColElem explicitly to null will completely remove these columns!
-  const widgetWidth =
-    12 - (label === null ? 0 : 2) - (extraColElem === null ? 0 : 3)
-  // controlId prop of the FormGroup sets the id of the control element
+
+  // backwards-compatible with main form width before; could be 12 to take up all space
+  const maxWidth = 9
+  // setting label explicitly to null will completely remove the label column!
+  const widgetWidth = maxWidth - (label === null ? 0 : 2)
 
   if (isCompact) {
     return (
@@ -110,6 +107,7 @@ const Field = ({
     )
   }
 
+  // controlId prop of the FormGroup sets the id of the control element
   return (
     <FormGroup id={`fg-${id}`} controlId={id} validationState={validationState}>
       {vertical ? (
@@ -132,10 +130,10 @@ const Field = ({
               {getHelpBlock(field, form)}
               {children}
             </div>
+            {extraColElem}
           </Col>
         </>
       )}
-      {extraColElem && <Col sm={3} {...extraColElem.props} />}
     </FormGroup>
   )
 }
@@ -148,7 +146,6 @@ Field.propTypes = {
   extraColElem: PropTypes.object,
   addon: PropTypes.object,
   vertical: PropTypes.bool,
-  extraAddon: PropTypes.object,
   isCompact: PropTypes.bool
 }
 Field.defaultProps = {
@@ -164,7 +161,6 @@ export const InputField = ({
   extraColElem,
   addon,
   vertical,
-  extraAddon,
   ...otherProps
 }) => {
   const widgetElem = useMemo(
@@ -188,7 +184,6 @@ export const InputField = ({
       extraColElem={extraColElem}
       addon={addon}
       vertical={vertical}
-      extraAddon={extraAddon}
     />
   )
 }
@@ -200,8 +195,7 @@ InputField.propTypes = {
   children: PropTypes.any,
   extraColElem: PropTypes.object,
   addon: PropTypes.object,
-  vertical: PropTypes.bool,
-  extraAddon: PropTypes.object
+  vertical: PropTypes.bool
 }
 
 export const InputFieldNoLabel = ({
@@ -498,44 +492,3 @@ export function handleSingleSelectAddItem(newItem, onChange, curValue) {
 export function handleSingleSelectRemoveItem(oldItem, onChange, curValue) {
   onChange(null)
 }
-
-export const FieldShortcuts = ({
-  shortcuts,
-  fieldName,
-  objectType,
-  curValue,
-  onChange,
-  handleAddItem,
-  title
-}) =>
-  shortcuts &&
-  shortcuts.length > 0 && (
-    <div id={`${fieldName}-shortcut-list`} className="shortcut-list">
-      <h5>{title}</h5>
-      {objectType.map(shortcuts, (shortcut, idx) => (
-        <Button
-          key={shortcut.uuid}
-          bsStyle="link"
-          onClick={() => handleAddItem(shortcut, onChange, curValue)}
-        >
-          Add{" "}
-          <LinkTo
-            modelType={objectType.resourceName}
-            model={shortcut}
-            isLink={false}
-            forShortcut
-          />
-        </Button>
-      ))}
-    </div>
-  )
-
-FieldShortcuts.propTypes = {
-  shortcuts: PropTypes.arrayOf(PropTypes.shape({ uuid: PropTypes.string })),
-  fieldName: PropTypes.string.isRequired,
-  objectType: PropTypes.func.isRequired,
-  curValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  onChange: PropTypes.func,
-  handleAddItem: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired
-}

client/src/index.css

@@ -151,16 +151,6 @@ fieldset.danger {
 	width: 10em;
 }
 
-.shortcut-list {
-	margin-top: -4px;
-}
-
-.shortcut-list .btn-link {
-	text-align: left;
-	white-space: initial;
-	padding: 0;
-}
-
 .btn.btn-link {
 	overflow: visible;
 	width: 100%;

client/src/pages/HopscotchTour.js

@@ -164,7 +164,7 @@ const reportTour = (currentUser, history) => {
       },
       {
         title: "Recents",
-        content: `If you've written reports in the past, your recent selections of attendees, ${subLevelTaskShortLabelPlural}, and locations will display to the right in a section called "Recents". You can click on one of the shortcuts to quickly add it to your report.`,
+        content: `If you've written reports in the past, your recent selections of attendees, ${subLevelTaskShortLabelPlural}, locations and authorization groups will show up in the select pop-up. You can select them to quickly add them to your report.`,
         target: "#attendees",
         placement: "bottom"
       },