1 files changed, 17 insertions, 8 deletions
diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
index b13b0ede9f0..72d1ce9768a 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlFormGroup, GlFormInput, GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import { isValidCron } from 'cron-validator';
+// eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue';
@@ -24,10 +25,10 @@ export default {
     static: true,
     lazy: true,
   },
-  translations: {
+  i18n: {
     cronPlaceholder: '* * * * *',
     cronSyntaxInstructions: __(
-      'Define a custom deploy freeze pattern with %{cronSyntaxStart}cron syntax%{cronSyntaxEnd}',
+      'Define a custom deploy freeze pattern with %{cronSyntaxStart}cron syntax%{cronSyntaxEnd}.',
     ),
     addTitle: __('Add deploy freeze'),
     editTitle: __('Edit deploy freeze'),
@@ -81,9 +82,7 @@ export default {
       return Boolean(this.selectedId);
     },
     modalTitle() {
-      return this.isEditing
-        ? this.$options.translations.editTitle
-        : this.$options.translations.addTitle;
+      return this.isEditing ? this.$options.i18n.editTitle : this.$options.i18n.addTitle;
     },
   },
   methods: {
@@ -104,6 +103,13 @@ export default {
         this.addFreezePeriod();
       }
     },
+    focusFirstInput() {
+      if (this.$refs.freezeStartCron) {
+        setTimeout(() => {
+          this.$refs.freezeStartCron?.$el?.focus();
+        }, 250);
+      }
+    },
   },
 };
 </script>
@@ -115,9 +121,10 @@ export default {
     :action-primary="addDeployFreezeButton"
     @primary="submit"
     @canceled="resetModalHandler"
+    @change="focusFirstInput"
   >
     <p>
-      <gl-sprintf :message="$options.translations.cronSyntaxInstructions">
+      <gl-sprintf :message="$options.i18n.cronSyntaxInstructions">
         <template #cronSyntax="{ content }">
           <gl-link href="https://crontab.guru/" target="_blank">{{ content }}</gl-link>
         </template>
@@ -132,11 +139,13 @@ export default {
     >
       <gl-form-input
         id="deploy-freeze-start"
+        ref="freezeStartCron"
         v-model="freezeStartCron"
         class="gl-font-monospace!"
         data-qa-selector="deploy_freeze_start_field"
-        :placeholder="$options.translations.cronPlaceholder"
+        :placeholder="$options.i18n.cronPlaceholder"
         :state="freezeStartCronState"
+        autofocus
         trim
       />
     </gl-form-group>
@@ -152,7 +161,7 @@ export default {
         v-model="freezeEndCron"
         class="gl-font-monospace!"
         data-qa-selector="deploy_freeze_end_field"
-        :placeholder="$options.translations.cronPlaceholder"
+        :placeholder="$options.i18n.cronPlaceholder"
         :state="freezeEndCronState"
         trim
       />