Add required label to tag name in release form

As the tag name is the only required attribute, it makes more sense to
call it out as being required instead of labelling the rest of the form
as optional.

Changelog: added

app/assets/javascripts/releases/components/tag_field_new.vue

@@ -95,6 +95,8 @@ export default {
       noRefSelected: __('No tag selected'),
       dropdownHeader: __('Tag name'),
       searchPlaceholder: __('Search or create tag'),
+      label: __('Tag name'),
+      labelDescription: __('*Required'),
     },
     createFrom: {
       noRefSelected: __('No source selected'),
@@ -108,11 +110,12 @@ export default {
 <template>
   <div>
     <gl-form-group
-      :label="__('Tag name')"
-      :label-for="tagNameInputId"
       data-testid="tag-name-field"
       :state="!showTagNameValidationError"
       :invalid-feedback="__('Tag name is required')"
+      :label="$options.translations.tagName.label"
+      :label-for="tagNameInputId"
+      :label-description="$options.translations.tagName.labelDescription"
     >
       <form-field-container>
         <ref-selector

locale/gitlab.pot

@@ -1140,6 +1140,9 @@ msgstr ""
 msgid "* All times are in UTC unless specified"
 msgstr ""
 
+msgid "*Required"
+msgstr ""
+
 msgid "+ %{amount} more"
 msgstr ""
 

spec/frontend/releases/components/tag_field_new_spec.js

 import { GlDropdownItem } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
+import { __ } from '~/locale';
 import TagFieldNew from '~/releases/components/tag_field_new.vue';
 import createStore from '~/releases/stores';
 import createEditNewModule from '~/releases/stores/modules/edit_new';
@@ -84,7 +85,8 @@ describe('releases/components/tag_field_new', () => {
       beforeEach(() => createComponent());
 
       it('renders a label', () => {
-        expect(findTagNameFormGroup().attributes().label).toBe('Tag name');
+        expect(findTagNameFormGroup().attributes().label).toBe(__('Tag name'));
+        expect(findTagNameFormGroup().props().labelDescription).toBe(__('*Required'));
       });
 
       describe('when the user selects a new tag name', () => {