Merge branch 'nfriend-release-edit-new-component' into 'master'

Make the Edit Release and New Release pages use the same Vue component

See merge request gitlab-org/gitlab!37460

app/assets/javascripts/releases/components/app_edit.vue → app/assets/javascripts/releases/components/app_edit_new.vue

@@ -12,7 +12,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MilestoneCombobox from '~/milestones/project_milestone_combobox.vue';
 export default {
-  name: 'ReleaseEditApp',
+  name: 'ReleaseEditNewApp',
   components: {
     GlFormInput,
     GlFormGroup,

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

-<script>
-export default {
-  name: 'ReleaseNewApp',
-  components: {},
-};
-</script>
-<template>
-  <div></div>
-</template>

app/assets/javascripts/releases/mount_edit.js

 import Vue from 'vue';
-import ReleaseEditApp from './components/app_edit.vue';
+import ReleaseEditNewApp from './components/app_edit_new.vue';
 import createStore from './stores';
 import createDetailModule from './stores/modules/detail';
@@ -18,6 +18,6 @@ export default () => {
   return new Vue({
     el,
     store,
-    render: h => h(ReleaseEditApp),
+    render: h => h(ReleaseEditNewApp),
   });
 };

app/assets/javascripts/releases/mount_new.js

 import Vue from 'vue';
-import ReleaseNewApp from './components/app_new.vue';
+import ReleaseEditNewApp from './components/app_edit_new.vue';
 import createStore from './stores';
 import createDetailModule from './stores/modules/detail';
@@ -10,11 +10,14 @@ export default () => {
     modules: {
       detail: createDetailModule(el.dataset),
     },
+    featureFlags: {
+      releaseShowPage: Boolean(gon.features?.releaseShowPage),
+    },
   });
   return new Vue({
     el,
     store,
-    render: h => h(ReleaseNewApp),
+    render: h => h(ReleaseEditNewApp),
   });
 };

spec/frontend/releases/components/app_edit_spec.js → spec/frontend/releases/components/app_edit_new_spec.js

 import Vuex from 'vuex';
 import { mount } from '@vue/test-utils';
-import ReleaseEditApp from '~/releases/components/app_edit.vue';
+import ReleaseEditNewApp from '~/releases/components/app_edit_new.vue';
 import { release as originalRelease, milestones as originalMilestones } from '../mock_data';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { BACK_URL_PARAM } from '~/releases/constants';
@@ -9,7 +9,7 @@ import { merge } from 'lodash';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-describe('Release edit component', () => {
+describe('Release edit/new component', () => {
   let wrapper;
   let release;
   let actions;
@@ -57,7 +57,7 @@ describe('Release edit component', () => {
       ),
     );
-    wrapper = mount(ReleaseEditApp, {
+    wrapper = mount(ReleaseEditNewApp, {
       store,
       provide: {
         glFeatures: featureFlags,

spec/frontend/releases/components/app_new_spec.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import { mount } from '@vue/test-utils';
-import ReleaseNewApp from '~/releases/components/app_new.vue';
-
-Vue.use(Vuex);
-
-describe('Release new component', () => {
-  let wrapper;
-
-  const factory = () => {
-    const store = new Vuex.Store();
-    wrapper = mount(ReleaseNewApp, { store });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('renders the app', () => {
-    factory();
-
-    expect(wrapper.exists()).toBe(true);
-  });
-});