Fleet UI: Autofocus forms (#9180)

changes/9179-autofocus-forms

@@ -0,0 +1 @@
+- Autofocus first entry of all forms for better UX

frontend/components/FleetAce/FleetAce.tsx

@@ -12,6 +12,7 @@ import "./mode";
 import "./theme";
 
 export interface IFleetAceProps {
+  focus?: boolean;
   error?: string | null;
   fontSize?: number;
   label?: string;
@@ -33,6 +34,7 @@ export interface IFleetAceProps {
 const baseClass = "fleet-ace";
 
 const FleetAce = ({
+  focus,
   error,
   fontSize = 14,
   label,
@@ -131,6 +133,7 @@ const FleetAce = ({
         width="100%"
         wrapEnabled={wrapEnabled}
         style={style}
+        focus={focus}
         commands={[
           {
             name: "commandName",

frontend/components/forms/fields/Dropdown/Dropdown.jsx

@@ -33,6 +33,7 @@ class Dropdown extends Component {
     wrapperClassName: PropTypes.string,
     parseTarget: PropTypes.bool,
     tooltip: PropTypes.string,
+    autoFocus: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -47,6 +48,7 @@ class Dropdown extends Component {
     placeholder: "Select one...", // if value undefined
     parseTarget: false,
     tooltip: "",
+    autoFocus: false,
   };
 
   onMenuOpen = () => {
@@ -122,6 +124,7 @@ class Dropdown extends Component {
       value,
       wrapperClassName,
       searchable,
+      autoFocus,
     } = this.props;
 
     const formFieldProps = pick(this.props, [
@@ -155,6 +158,7 @@ class Dropdown extends Component {
           value={value}
           onOpen={onMenuOpen}
           onClose={onMenuClose}
+          autoFocus={autoFocus}
         />
       </FormField>
     );

frontend/components/forms/packs/PackForm/PackForm.tsx

@@ -91,6 +91,7 @@ const EditPackForm = ({
           name="name"
           error={errors.name}
           inputWrapperClass={`${baseClass}__pack-title`}
+          autofocus
         />
         <InputField
           onChange={onChangePackDescription}

frontend/pages/LabelPage/LabelForm/LabelForm.tsx

@@ -217,6 +217,7 @@ const LabelForm = ({
           hint={aceHintText}
           handleSubmit={noop}
           wrapEnabled
+          focus
         />
       )}
 

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx

@@ -52,6 +52,7 @@ const AddMemberModal = ({
           placeholder={"Search users by name"}
           disabledOptions={disabledMembers}
           value={selectedMembers}
+          autoFocus
         />
         <p>
           User not here?&nbsp;

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx

@@ -26,6 +26,7 @@ interface IAutocompleteDropdownProps {
   disabledOptions: number[];
   disabled?: boolean;
   className?: string;
+  autoFocus?: boolean;
 }
 
 const debounceOptions = {
@@ -57,6 +58,7 @@ const AutocompleteDropdown = ({
   className,
   disabled,
   disabledOptions,
+  autoFocus,
   placeholder,
   onChange,
   id,
@@ -125,6 +127,7 @@ const AutocompleteDropdown = ({
         filterOptions={filterOptions}
         multi
         searchable
+        autoFocus={autoFocus}
       />
     </div>
   );

frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx

@@ -76,6 +76,7 @@ const TransferHostModal = ({
           onChange={onChangeSelectTeam}
           placeholder={"Select a team"}
           searchable={false}
+          autoFocus
         />
         {isGlobalAdmin ? (
           <p>

frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx

@@ -197,6 +197,7 @@ const PackQueryEditorModal = ({
             placeholder={"Select query"}
             value={selectedQuery?.id}
             wrapperClassName={`${baseClass}__select-query-dropdown-wrapper`}
+            autoFocus
           />
         )}
         <InputField

frontend/pages/policies/PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx

@@ -117,6 +117,7 @@ const NewPolicyModal = ({
             inputClassName={`${baseClass}__policy-save-modal-name`}
             label="Name"
             placeholder="What yes or no question does your policy ask about your devices?"
+            autofocus
           />
           <InputField
             name="description"

frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx

@@ -484,7 +484,7 @@ const PolicyForm = ({
         <FleetAce
           value={lastEditedQueryBody}
           error={errors.query}
-          label="Query:"
+          label="Query"
           labelActionComponent={renderLabelComponent()}
           name="query editor"
           onLoad={onLoad}
@@ -492,6 +492,7 @@ const PolicyForm = ({
           onChange={onChangePolicy}
           handleSubmit={promptSavePolicy}
           wrapEnabled
+          focus={!isEditMode}
         />
         <span className={`${baseClass}__platform-compatibility`}>
           {renderPlatformCompatibility()}

frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx

@@ -90,6 +90,7 @@ const NewQueryModal = ({
             inputClassName={`${baseClass}__query-save-modal-name`}
             label="Name"
             placeholder="What is your query called?"
+            autofocus
           />
           <InputField
             name="description"

frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx

@@ -451,7 +451,7 @@ const QueryForm = ({
         <FleetAce
           value={lastEditedQueryBody}
           error={errors.query}
-          label="Query:"
+          label="Query"
           labelActionComponent={renderLabelComponent()}
           name="query editor"
           onLoad={onLoad}
@@ -459,6 +459,7 @@ const QueryForm = ({
           onChange={onChangeQuery}
           handleSubmit={promptSaveQuery}
           wrapEnabled
+          focus={!isEditMode}
         />
         <span className={`${baseClass}__platform-compatibility`}>
           {renderPlatformCompatibility()}

frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx

@@ -240,6 +240,7 @@ const ScheduleEditorModal = ({
             placeholder={"Select query"}
             value={selectedQuery?.id}
             wrapperClassName={`${baseClass}__select-query-dropdown-wrapper`}
+            autoFocus
           />
         )}
         <Dropdown