From 190961df28dc7a8e33cc895ec7cace47178cef58 Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Thu, 19 Dec 2024 13:54:02 +0100
Subject: [PATCH] Auto-focus first input element in creation forms
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
Committed-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
---
 gradle/changelog/auto-focus.yaml                      |  2 ++
 .../src/admin/roles/containers/RepositoryRoleForm.tsx |  7 ++++---
 scm-ui/ui-webapp/src/groups/components/GroupForm.tsx  |  1 +
 .../src/repos/branches/components/BranchForm.tsx      | 11 +++++++----
 .../src/repos/components/NamespaceAndNameFields.tsx   |  1 +
 .../ui-webapp/src/repos/components/NamespaceInput.tsx |  1 +
 scm-ui/ui-webapp/src/users/containers/CreateUser.tsx  |  1 +
 7 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 gradle/changelog/auto-focus.yaml

diff --git a/gradle/changelog/auto-focus.yaml b/gradle/changelog/auto-focus.yaml
new file mode 100644
index 0000000000..a82c309cb8
--- /dev/null
+++ b/gradle/changelog/auto-focus.yaml
@@ -0,0 +1,2 @@
+- type: changed
+  description: Set focus to first input element in repository, user, group, branch and repository role creation forms
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx
index edcd839ad1..63ee6bb3e6 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx
@@ -35,8 +35,8 @@ const RepositoryRoleForm: FC<Props> = ({ role: initialRole, submitForm }) => {
       name: "",
       verbs: [],
       _links: {
-        create: { href: createLink }
-      }
+        create: { href: createLink },
+      },
     }
   );
   const availableVerbs = data?.verbs;
@@ -51,7 +51,7 @@ const RepositoryRoleForm: FC<Props> = ({ role: initialRole, submitForm }) => {
   const handleVerbChange = (value: boolean, name: string) =>
     setRole({
       ...role,
-      verbs: value ? [...role.verbs, name] : role.verbs.filter(v => v !== name)
+      verbs: value ? [...role.verbs, name] : role.verbs.filter((v) => v !== name),
     });
 
   const submit = (event: FormEvent<HTMLFormElement>) => {
@@ -72,6 +72,7 @@ const RepositoryRoleForm: FC<Props> = ({ role: initialRole, submitForm }) => {
         onChange={handleNameChange}
         value={role.name || ""}
         disabled={!!initialRole}
+        autofocus
       />
       <div className="field">
         <label className="label">{t("repositoryRole.form.permissions")}</label>
diff --git a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
index 4c28c35804..db8f189983 100644
--- a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
@@ -118,6 +118,7 @@ const GroupForm: FC<Props> = ({ submitForm, loading, group, transmittedName = ""
         value={groupState.name}
         validationError={nameValidationError}
         helpText={t("groupForm.help.nameHelpText")}
+        autofocus
       />
     );
   } else if (group.external) {
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx
index 9556ce4516..59976867e7 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx
@@ -28,6 +28,8 @@ type Props = {
   disabled?: boolean;
 };
 
+const autoFocus = (el) => el?.focus();
+
 const BranchForm: FC<Props> = ({ submitForm, branches, disabled, transmittedName, loading }) => {
   const [t] = useTranslation("repos");
   const [name, setName] = useState(transmittedName || "");
@@ -45,15 +47,15 @@ const BranchForm: FC<Props> = ({ submitForm, branches, disabled, transmittedName
     if (isValid()) {
       submitForm({
         name,
-        parent: source
+        parent: source,
       });
     }
   };
 
   orderBranches(branches);
-  const options = branches.map(branch => ({
+  const options = branches.map((branch) => ({
     label: branch.name,
-    value: branch.name
+    value: branch.name,
   }));
 
   return (
@@ -65,9 +67,10 @@ const BranchForm: FC<Props> = ({ submitForm, branches, disabled, transmittedName
               name="source"
               label={t("branches.create.source")}
               options={options}
-              onChange={setSource}
+              onChange={(e) => setSource(e.target.value)}
               loading={loading}
               disabled={disabled}
+              ref={autoFocus}
             />
             <InputField
               name="name"
diff --git a/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx b/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
index 5391fbe24f..2995b0b8a5 100644
--- a/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/NamespaceAndNameFields.tsx
@@ -97,6 +97,7 @@ const NamespaceAndNameFields: FC<Props> = ({ repository, onChange, setValid, dis
         helpText={t("help.nameHelpText")}
         disabled={disabled}
         required={true}
+        autofocus={namespaceStrategy !== CUSTOM_NAMESPACE_STRATEGY}
       />
     </>
   );
diff --git a/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx b/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx
index 722584e636..5f2ca08431 100644
--- a/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx
@@ -72,6 +72,7 @@ const NamespaceInput: FC<Props> = ({
         required={true}
         aria-required={true}
         nullable
+        ref={(el) => el?.focus()}
       />
     );
   }
diff --git a/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx b/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx
index e2b1ffdd8e..ad07e3fb57 100644
--- a/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx
@@ -68,6 +68,7 @@ const CreateUserForm: FC<{ users: UserCollection }> = ({ users }) => {
                   validate: userValidator.isNameValid,
                 }}
                 testId="input-username"
+                autoFocus
               />
               <Form.Input
                 name="displayName"