Use Epic vuex app by default in place of older app

Use refactored Vuex Epic app in place of older Epic app.

ee/app/assets/javascripts/epic/epic_bundle.js

@@ -11,6 +11,11 @@ import EpicCreateApp from './components/epic_create.vue';
 
 export default (epicCreate = false) => {
   const el = document.getElementById(epicCreate ? 'epic-create-root' : 'epic-app-root');
+
+  if (!el) {
+    return false;
+  }
+
   const store = createStore();
 
   if (epicCreate) {

ee/app/assets/javascripts/pages/groups/epics/index/index.js

-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
-import initNewEpic from 'ee/epics/new_epic/new_epic_bundle';
 import initEpicCreateApp from 'ee/epic/epic_bundle';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -14,9 +11,5 @@ document.addEventListener('DOMContentLoaded', () => {
     stateFiltersSelector: '.epics-state-filters',
   });
 
-  if (parseBoolean(Cookies.get('load_new_epic_app'))) {
-    initEpicCreateApp(true);
-  } else {
-    initNewEpic();
-  }
+  initEpicCreateApp(true);
 });

ee/app/assets/javascripts/pages/groups/epics/show/index.js

 import ZenMode from '~/zen_mode';
-import Cookies from 'js-cookie';
-import initEpicShow from 'ee/epics/epic_show/epic_show_bundle';
 import ShortcutsEpic from 'ee/behaviors/shortcuts/shortcuts_epic';
 import initEpicApp from 'ee/epic/epic_bundle';
 import '~/notes/index';
-import { parseBoolean } from '~/lib/utils/common_utils';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
-  if (parseBoolean(Cookies.get('load_new_epic_app'))) {
-    initEpicApp();
-  } else {
-    initEpicShow();
-    new ShortcutsEpic(); // eslint-disable-line no-new
-  }
+  initEpicApp();
+  new ShortcutsEpic(); // eslint-disable-line no-new
 });

ee/app/assets/javascripts/pages/groups/roadmap/show/index.js

 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
-import initNewEpic from 'ee/epics/new_epic/new_epic_bundle';
+import initEpicCreateApp from 'ee/epic/epic_bundle';
 import initRoadmap from 'ee/roadmap/index';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -11,6 +11,6 @@ document.addEventListener('DOMContentLoaded', () => {
     filteredSearchTokenKeys: FilteredSearchTokenKeysEpics,
     stateFiltersSelector: '.epics-state-filters',
   });
-  initNewEpic();
+  initEpicCreateApp(true);
   initRoadmap();
 });

ee/app/assets/javascripts/roadmap/components/epics_list_empty.vue

@@ -4,12 +4,9 @@ import { dateInWords } from '~/lib/utils/datetime_utility';
 
 import { PRESET_TYPES, emptyStateDefault, emptyStateWithFilters } from '../constants';
 
-import NewEpic from '../../epics/new_epic/components/new_epic.vue';
+import initEpicCreate from '../../epic/epic_bundle';
 
 export default {
-  components: {
-    NewEpic,
-  },
   props: {
     presetType: {
       type: String,
@@ -93,6 +90,15 @@ export default {
       });
     },
   },
+  mounted() {
+    // If filters are not applied and yet user
+    // is seeing empty state, we need to show
+    // `New epic` button, so boot-up Epic app
+    // in create mode.
+    if (!this.hasFiltersApplied) {
+      initEpicCreate(true);
+    }
+  },
 };
 </script>
 
@@ -106,7 +112,11 @@ export default {
         <h4>{{ message }}</h4>
         <p v-html="subMessage"></p>
         <div class="text-center">
-          <new-epic v-if="!hasFiltersApplied" :endpoint="newEpicEndpoint" />
+          <div
+            v-if="!hasFiltersApplied"
+            id="epic-create-root"
+            :data-endpoint="newEpicEndpoint"
+          ></div>
           <a :title="__('List')" :href="newEpicEndpoint" class="btn btn-default">
             <span>{{ s__('View epics list') }}</span>
           </a>

ee/app/assets/stylesheets/framework/dropdowns.scss

-.new-epic-dropdown,
 .epic-create-dropdown {
   .dropdown-menu {
     padding-left: $gl-padding-top;
@@ -15,12 +14,12 @@
 }
 
 .empty-state {
-  .new-epic-dropdown,
   .epic-create-dropdown {
     display: inline-flex;
 
     .btn-success {
       margin: 0;
+      margin-top: $gl-padding-top;
     }
   }
 }

ee/app/views/groups/epics/index.html.haml

@@ -4,10 +4,7 @@
   = render 'shared/issuable/epic_nav', type: :epics
   .nav-controls
     - if can?(current_user, :create_epic, @group)
-      - if cookies[:load_new_epic_app] == 'true'
-        #epic-create-root{ data: { endpoint: request.url, 'align-right' => true } }
-      - else
-        #new-epic-app{ data: { endpoint: request.url, 'align-right' => true } }
+      #epic-create-root{ data: { endpoint: request.url, 'align-right' => true } }
 
 = render 'shared/epic/search_bar', type: :epics
 

ee/app/views/groups/epics/show.html.haml

@@ -11,10 +11,7 @@
 
 - page_card_attributes @epic.card_attributes
 
-- if cookies[:load_new_epic_app] == 'true'
-  #epic-app-root{ data: epic_show_app_data(@epic, author_icon: avatar_icon_for_user(@epic.author), initial: issuable_initial_data(@epic)) }
-- else
-  #epic-show-app{ data: epic_show_app_data(@epic, author_icon: avatar_icon_for_user(@epic.author), initial: issuable_initial_data(@epic)) }
+#epic-app-root{ data: epic_show_app_data(@epic, author_icon: avatar_icon_for_user(@epic.author), initial: issuable_initial_data(@epic)) }
 
 .content-block.emoji-block
   .row

ee/app/views/shared/empty_states/_roadmap.html.haml

@@ -10,6 +10,6 @@
         = _('To view the roadmap, add a start or due date to one of your epics in this group or its subgroups. In the months view, only epics in the past month, current month, and next 5 months are shown.')
       .text-center
         - if can?(current_user, :create_epic, @group)
-          #new-epic-app{ data: { endpoint: request.url } }
+          #epic-create-root{ data: { endpoint: request.url } }
         = link_to group_epics_path(@group), title: 'List', class: 'btn' do
           %span= _('View epics list')

ee/spec/features/epics/new_epic_spec.rb

@@ -15,7 +15,7 @@ describe 'New Epic', :js do
       it 'does not show the create button' do
         visit group_epics_path(group)
 
-        expect(page).not_to have_selector('.new-epic-dropdown  .btn-success')
+        expect(page).not_to have_selector('.epic-create-dropdown  .btn-success')
       end
     end
 
@@ -26,7 +26,7 @@ describe 'New Epic', :js do
       end
 
       it 'does show the create button' do
-        expect(page).to have_selector('.new-epic-dropdown .btn-success')
+        expect(page).to have_selector('.epic-create-dropdown .btn-success')
       end
     end
   end
@@ -40,7 +40,7 @@ describe 'New Epic', :js do
       end
 
       it 'does not show the create button' do
-        expect(page).not_to have_selector('.new-epic-dropdown .btn-success')
+        expect(page).not_to have_selector('.epic-create-dropdown .btn-success')
       end
     end
 
@@ -51,13 +51,13 @@ describe 'New Epic', :js do
       end
 
       it 'does show the create button' do
-        expect(page).to have_selector('.new-epic-dropdown .btn-success')
+        expect(page).to have_selector('.epic-create-dropdown .btn-success')
       end
 
       it 'can create epic' do
-        find('.new-epic-dropdown .btn-success').click
-        find('.new-epic-dropdown .dropdown-menu input').set('test epic title')
-        find('.new-epic-dropdown .dropdown-menu .btn-success').click
+        find('.epic-create-dropdown .btn-success').click
+        find('.epic-create-dropdown .dropdown-menu input').set('test epic title')
+        find('.epic-create-dropdown .dropdown-menu .btn-success').click
 
         wait_for_requests
 

ee/spec/javascripts/roadmap/components/epics_list_empty_spec.js

@@ -174,18 +174,15 @@ describe('EpicsListEmptyComponent', () => {
       );
     });
 
-    it('renders new epic button element', () => {
-      const newEpicBtnEl = vm.$el.querySelector('.new-epic-dropdown');
-
-      expect(newEpicBtnEl).not.toBeNull();
-      expect(newEpicBtnEl.querySelector('button.btn-success').innerText.trim()).toBe('New epic');
+    it('renders mount point for new epic button to boot via Epic app', () => {
+      expect(vm.$el.querySelector('#epic-create-root')).not.toBeNull();
     });
 
     it('does not render new epic button element when `hasFiltersApplied` prop is true', done => {
       vm.hasFiltersApplied = true;
       Vue.nextTick()
         .then(() => {
-          expect(vm.$el.querySelector('.new-epic-dropdown')).toBeNull();
+          expect(vm.$el.querySelector('.epic-create-dropdown')).toBeNull();
         })
         .then(done)
         .catch(done.fail);

qa/qa/ee/page/group/epic/index.rb

@@ -6,7 +6,7 @@ module QA
       module Group
         module Epic
           class Index < QA::Page::Base
-            view 'ee/app/assets/javascripts/epics/new_epic/components/new_epic.vue' do
+            view 'ee/app/assets/javascripts/epic/components/epic_create.vue' do
               element :new_epic_button
               element :epic_title
               element :create_epic_button

qa/qa/ee/page/group/epic/show.rb

@@ -21,7 +21,7 @@ module QA
               element :remove_issue_button
             end
 
-            view 'ee/app/assets/javascripts/epics/epic_show/components/epic_header.vue' do
+            view 'ee/app/assets/javascripts/epic/components/epic_header.vue' do
               element :close_reopen_epic_button
             end