Minor review feedback

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue

@@ -63,7 +63,9 @@ export default {
       const { name } = this;
       return this.createValueStream({ name }).then(() => {
         this.$refs.modal.hide();
-        this.$toast.show(sprintf(__("'%{name}' Value Stream created"), { name }));
+        this.$toast.show(sprintf(__("'%{name}' Value Stream created"), { name }), {
+          position: 'top-center',
+        });
         this.name = '';
       });
     },
@@ -76,7 +78,7 @@ export default {
 </script>
 <template>
   <gl-form>
-    <gl-button v-gl-modal-directive="'create-value-stream-modal'">{{
+    <gl-button v-gl-modal-directive="'create-value-stream-modal'" @click="onHandleInput">{{
       __('Create new value stream')
     }}</gl-button>
     <gl-modal
@@ -97,12 +99,13 @@ export default {
       @primary.prevent="onSubmit"
     >
       <gl-form-group
-        label="Name"
+        :label="__('Name')"
         label-for="create-value-stream-name"
         :invalid-feedback="invalidFeedback"
         :state="isValid"
       >
         <gl-form-input
+          id="create-value-stream-name"
           v-model.trim="name"
           name="create-value-stream-name"
           :placeholder="__('Example: My value stream')"

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -1010,7 +1010,7 @@ RSpec.describe 'Group Value Stream Analytics', :js do
   end
 
   describe 'Create value stream', :js do
-    custom_value_stream_name = "Test value stream"
+    let(:custom_value_stream_name) { "Test value stream" }
 
     before do
       visit analytics_cycle_analytics_path
@@ -1019,15 +1019,12 @@ RSpec.describe 'Group Value Stream Analytics', :js do
     end
 
     it 'can create a value stream' do
-      expect(page).to have_text('Create new value stream')
-      modal_button = page.find_button('Create new value stream')
-
-      modal_button.click
+      page.find_button(_('Create new value stream')).click
 
       fill_in 'create-value-stream-name', with: custom_value_stream_name
-      page.find_button('Create value stream').click
+      page.find_button(_('Create value stream')).click
 
-      expect(page).to have_text("'#{custom_value_stream_name}' Value Stream created")
+      expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
     end
   end
 end

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js

@@ -55,7 +55,7 @@ describe('ValueStreamSelect', () => {
     describe('with valid fields', () => {
       const streamName = 'Cool stream';
 
-      beforeEach(async () => {
+      beforeEach(() => {
         wrapper = createComponent({ data: { name: streamName } });
         wrapper.vm.$refs.modal.hide = mockModalHide;
       });
@@ -77,7 +77,9 @@ describe('ValueStreamSelect', () => {
         });
 
         it('displays a toast message', () => {
-          expect(mockToastShow).toHaveBeenCalledWith(`'${streamName}' Value Stream created`);
+          expect(mockToastShow).toHaveBeenCalledWith(`'${streamName}' Value Stream created`, {
+            position: 'top-center',
+          });
         });
 
         it('hides the modal', () => {
@@ -88,7 +90,7 @@ describe('ValueStreamSelect', () => {
       describe('form submission fails', () => {
         const createValueStreamMockFail = jest.fn(() => Promise.reject());
 
-        beforeEach(async () => {
+        beforeEach(() => {
           wrapper = createComponent({
             data: { name: streamName },
             methods: {