Frontend review fixes

ee/app/assets/javascripts/related_items_tree/components/related_items_roadmap_app.vue

 <script>
 import { mapState } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
+  components: {
+    GlAlert,
+  },
   inject: ['roadmapAppData'],
+  data() {
+    return {
+      loadingError: false,
+      roadmapLoaded: false,
+    };
+  },
   computed: {
     ...mapState(['allowSubEpics']),
     roadmapAttrs() {
@@ -22,11 +33,7 @@ export default {
   },
   mounted() {
     if (this.shouldLoadRoadmap) {
-      this.initRoadmap()
-        .then(() => {
-          this.roadmapLoaded = true;
-        })
-        .catch(() => {});
+      this.initRoadmap();
     }
   },
   methods: {
@@ -34,15 +41,22 @@ export default {
       return import('ee/roadmap/roadmap_bundle')
         .then((roadmapBundle) => {
           roadmapBundle.default();
+          this.roadmapLoaded = true;
         })
-        .catch(() => {});
+        .catch(() => {
+          this.loadingError = true;
+        });
     },
   },
+  loadingFailedText: __('Failed to load Roadmap'),
 };
 </script>
 
 <template>
   <div class="gl-px-3 gl-py-3 gl-bg-gray-10">
+    <gl-alert v-if="loadingError" variant="danger" :dismissible="false">
+      {{ $options.loadingFailedText }}
+    </gl-alert>
     <div id="roadmap" class="roadmap-app border gl-rounded-base gl-bg-white">
       <div id="js-roadmap" v-bind="roadmapAttrs"></div>
     </div>

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_actions.vue

@@ -21,14 +21,6 @@ export default {
   computed: {
     ...mapState(['allowSubEpics']),
   },
-  methods: {
-    onTreeTabClick() {
-      this.$emit('tab-change', this.$options.ITEM_TABS.TREE);
-    },
-    onRoadmapTabClick() {
-      this.$emit('tab-change', this.$options.ITEM_TABS.ROADMAP);
-    },
-  },
 };
 </script>
 
@@ -40,7 +32,7 @@ export default {
           class="js-epic-tree-tab"
           data-testid="tree-view-button"
           :selected="activeTab === $options.ITEM_TABS.TREE"
-          @click="onTreeTabClick"
+          @click="() => $emit('tab-change', this.$options.ITEM_TABS.TREE)"
         >
           {{ __('Tree view') }}
         </gl-button>
@@ -49,7 +41,7 @@ export default {
           class="js-epic-roadmap-tab"
           data-testid="roadmap-view-button"
           :selected="activeTab === $options.ITEM_TABS.ROADMAP"
-          @click="onRoadmapTabClick"
+          @click="() => $emit('tab-change', this.$options.ITEM_TABS.ROADMAP)"
         >
           {{ __('Roadmap view') }}
         </gl-button>

ee/spec/features/epics/epic_issues_spec.rb

@@ -198,10 +198,6 @@ RSpec.describe 'Epic Issues', :js do
             visit group_epic_path(group, last_child)
 
             wait_for_requests
-
-            find('.js-epic-tree-tab').click
-
-            wait_for_requests
           end
 
           it 'user cannot add new epic when hierarchy level limit has been reached' do

ee/spec/features/epics/epic_related_epics_spec.rb

@@ -18,14 +18,10 @@ RSpec.describe 'Related Epics', :js do
     visit group_epic_path(group, epic1)
 
     wait_for_requests
-
-    find('.js-epic-tree-tab').click
-
-    wait_for_requests
   end
 
   def open_add_epic_form
-    page.within('.js-epic-container .card-title') do
+    page.within('.related-issues-block .card-title') do
       page.find('button').click
     end
   end
@@ -50,9 +46,7 @@ RSpec.describe 'Related Epics', :js do
 
   describe 'epic body section' do
     it 'user can view related epics section under epic description', :aggregate_failures do
-      page.within('.js-epic-container') do
-        expect(page).to have_selector('#related-issues')
-
+      page.within('#related-issues') do
         card_title = page.find('.card-title')
         expect(card_title).to have_content('Linked epics')
         expect(card_title).to have_link('', href: '/help/user/group/epics/linked_epics')

ee/spec/frontend/related_items_tree/components/__snapshots__/related_items_roadmap_app_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RelatedItemsTree RelatedItemsRoadmapApp template renders html 1`] = `
+<div
+  class="gl-px-3 gl-py-3 gl-bg-gray-10"
+>
+  <!---->
+   
+  <div
+    class="roadmap-app border gl-rounded-base gl-bg-white"
+    id="roadmap"
+  >
+    <div
+      data-child-epics="true"
+      data-empty-state-illustration=""
+      data-epics-docs-path="/help/user/group/epics/index"
+      data-epics-path="/groups/group1/-/epics.json?parent_id=1"
+      data-epics-state="all"
+      data-full-path="group1"
+      data-group-id="2"
+      data-iid="1"
+      data-inner-height="600"
+      data-list-epics-path="/groups/group1/-/epics"
+      data-new-epic-path="/groups/group1/-/epics/new"
+      data-preset-type="MONTHS"
+      data-sorted-by="start_date_asc"
+      id="js-roadmap"
+    />
+  </div>
+</div>
+`;

ee/spec/frontend/related_items_tree/components/__snapshots__/related_items_tree_actions_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RelatedItemsTree RelatedItemsTreeActions template renders button group, tree view and roadmap view buttons 1`] = `
+<div
+  class="card-header d-flex gl-px-5 gl-pt-4 gl-pt-3 flex-column flex-sm-row border-bottom-0"
+>
+  <div>
+    <gl-button-group-stub
+      class="gl-flex-grow-1 gl-display-flex"
+      data-testid="buttons"
+    >
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-epic-tree-tab"
+        data-testid="tree-view-button"
+        icon=""
+        selected="true"
+        size="medium"
+        variant="default"
+      >
+        
+        Tree view
+      
+      </gl-button-stub>
+       
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-epic-roadmap-tab"
+        data-testid="roadmap-view-button"
+        icon=""
+        size="medium"
+        variant="default"
+      >
+        
+        Roadmap view
+      
+      </gl-button-stub>
+    </gl-button-group-stub>
+  </div>
+   
+  <div
+    class="ml-auto gl-display-none gl-sm-display-flex"
+  />
+   
+  <div
+    class="gl-sm-display-inline-flex gl-display-flex gl-mt-3 gl-sm-mt-0"
+  >
+    <toggle-labels-stub
+      class="gl-sm-ml-3! gl-ml-0!"
+    />
+  </div>
+</div>
+`;

ee/spec/frontend/related_items_tree/components/related_items_roadmap_app_spec.js

@@ -34,8 +34,7 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders html', () => {
-        expect(wrapper.find('#roadmap').exists()).toBe(true);
-        expect(wrapper.find('#js-roadmap').exists()).toBe(true);
+        expect(wrapper.element).toMatchSnapshot();
       });
 
       it('renders data-* attrs', () => {

ee/spec/frontend/related_items_tree/components/related_items_tree_actions_spec.js

@@ -37,13 +37,7 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders button group, tree view and roadmap view buttons', () => {
-        const buttonGroupEl = wrapper.findByTestId('buttons');
-        const treeViewEl = wrapper.findByTestId('tree-view-button');
-        const roadmapViewEl = wrapper.findByTestId('roadmap-view-button');
-
-        expect(buttonGroupEl.isVisible()).toBe(true);
-        expect(treeViewEl.isVisible()).toBe(true);
-        expect(roadmapViewEl.isVisible()).toBe(true);
+        expect(wrapper.element).toMatchSnapshot();
       });
 
       it('does not render roadmap view button when subEpics are not present', async () => {

locale/gitlab.pot

@@ -15413,6 +15413,9 @@ msgstr ""
 msgid "Failed to load"
 msgstr ""
 
+msgid "Failed to load Roadmap"
+msgstr ""
+
 msgid "Failed to load assignees."
 msgstr ""