From 9a5789459e41cc87cdefe9c8eb599a79df9fc6ce Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 6 Jan 2023 09:25:00 -0500
Subject: [PATCH] Fleet UI: Autofocus forms (#9180)

---
 changes/9179-autofocus-forms                                  | 1 +
 frontend/components/FleetAce/FleetAce.tsx                     | 3 +++
 frontend/components/forms/fields/Dropdown/Dropdown.jsx        | 4 ++++
 frontend/components/forms/packs/PackForm/PackForm.tsx         | 1 +
 frontend/pages/LabelPage/LabelForm/LabelForm.tsx              | 1 +
 .../MembersPage/components/AddMemberModal/AddMemberModal.tsx  | 1 +
 .../components/AutocompleteDropdown/AutocompleteDropdown.tsx  | 3 +++
 .../hosts/components/TransferHostModal/TransferHostModal.tsx  | 1 +
 .../components/PackQueryEditorModal/PackQueryEditorModal.tsx  | 1 +
 .../PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx   | 1 +
 .../policies/PolicyPage/components/PolicyForm/PolicyForm.tsx  | 3 ++-
 .../QueryPage/components/NewQueryModal/NewQueryModal.tsx      | 1 +
 .../queries/QueryPage/components/QueryForm/QueryForm.tsx      | 3 ++-
 .../components/ScheduleEditorModal/ScheduleEditorModal.tsx    | 1 +
 14 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 changes/9179-autofocus-forms

diff --git a/changes/9179-autofocus-forms b/changes/9179-autofocus-forms
new file mode 100644
index 0000000000..170a72c5c7
--- /dev/null
+++ b/changes/9179-autofocus-forms
@@ -0,0 +1 @@
+- Autofocus first entry of all forms for better UX
diff --git a/frontend/components/FleetAce/FleetAce.tsx b/frontend/components/FleetAce/FleetAce.tsx
index c79ac3f979..d85e8d7b41 100644
--- a/frontend/components/FleetAce/FleetAce.tsx
+++ b/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",
diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx
index b554496724..b96572a1ff 100644
--- a/frontend/components/forms/fields/Dropdown/Dropdown.jsx
+++ b/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>
     );
diff --git a/frontend/components/forms/packs/PackForm/PackForm.tsx b/frontend/components/forms/packs/PackForm/PackForm.tsx
index e7a15170b8..1823a9c817 100644
--- a/frontend/components/forms/packs/PackForm/PackForm.tsx
+++ b/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}
diff --git a/frontend/pages/LabelPage/LabelForm/LabelForm.tsx b/frontend/pages/LabelPage/LabelForm/LabelForm.tsx
index b957f13ad6..44617c6e24 100644
--- a/frontend/pages/LabelPage/LabelForm/LabelForm.tsx
+++ b/frontend/pages/LabelPage/LabelForm/LabelForm.tsx
@@ -217,6 +217,7 @@ const LabelForm = ({
           hint={aceHintText}
           handleSubmit={noop}
           wrapEnabled
+          focus
         />
       )}
 
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx
index 0a5fb0e1a4..204c372f2a 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx
+++ b/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;
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx
index c1ba3504b6..45333b105e 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/AutocompleteDropdown.tsx
+++ b/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>
   );
diff --git a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx
index dc0eee7659..a37593478a 100644
--- a/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx
+++ b/frontend/pages/hosts/components/TransferHostModal/TransferHostModal.tsx
@@ -76,6 +76,7 @@ const TransferHostModal = ({
           onChange={onChangeSelectTeam}
           placeholder={"Select a team"}
           searchable={false}
+          autoFocus
         />
         {isGlobalAdmin ? (
           <p>
diff --git a/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx b/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx
index 947721804f..9a2696eabc 100644
--- a/frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx
+++ b/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
diff --git a/frontend/pages/policies/PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx b/frontend/pages/policies/PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx
index f87e6b8cdb..0b2bc2e955 100644
--- a/frontend/pages/policies/PolicyPage/components/NewPolicyModal/NewPolicyModal.tsx
+++ b/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"
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx b/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx
index e03d46c9ba..8c8f48ef45 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx
+++ b/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()}
diff --git a/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx b/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx
index c66c82e25b..cab84979f8 100644
--- a/frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx
+++ b/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"
diff --git a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx b/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
index 2e3e3e625a..3b07c3f4e2 100644
--- a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx
+++ b/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()}
diff --git a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx
index b4ad1e184d..33ed2d1888 100644
--- a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx
+++ b/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