Merge branch 'vis-fix-for-reload' into 'master'

Fix graph not rendering links when updating Ci config

See merge request gitlab-org/gitlab!51346

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
-import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -28,12 +28,13 @@ const LOAD_FAILURE_UNKNOWN = 'LOAD_FAILURE_UNKNOWN';
 
 export default {
   components: {
-    CommitForm,
     CiLint,
+    CommitForm,
     EditorTab,
     GlAlert,
     GlLoadingIcon,
     GlTabs,
+    GlTab,
     PipelineGraph,
     TextEditor,
     ValidationSegment,
@@ -317,16 +318,15 @@ export default {
               :commit-sha="lastCommitSha"
             />
           </editor-tab>
-          <editor-tab
+          <gl-tab
             v-if="glFeatures.ciConfigVisualizationTab"
             :lazy="true"
             :title="$options.i18n.tabGraph"
-            :title-link-attributes="{ 'data-testid': 'visualization-tab-btn' }"
             data-testid="visualization-tab"
           >
             <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
             <pipeline-graph v-else :pipeline-data="ciConfigData" />
-          </editor-tab>
+          </gl-tab>
 
           <editor-tab :title="$options.i18n.tabLint">
             <gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -198,21 +198,6 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
           expect(findLoadingIcon().exists()).toBe(true);
           expect(findPipelineGraph().exists()).toBe(false);
         });
-
-        it('displays the graph only after the tab is mounted and selected', async () => {
-          createComponent({ mountFn: mount });
-
-          expect(findTabAt(1).find(PipelineGraph).exists()).toBe(false);
-
-          await nextTick();
-
-          // Select visualization tab
-          wrapper.find('[data-testid="visualization-tab-btn"]').trigger('click');
-
-          await nextTick();
-
-          expect(findTabAt(1).find(PipelineGraph).exists()).toBe(true);
-        });
       });
 
       describe('with feature flag off', () => {