Fix graph not rendering links when updating Ci config

We need to revert back to using the gl-tab for now and avoid
the wrapper that handles keeping the component alive since it
breaks the graph. This also means that for now, the viz component
is mounted every time we click on the tab.

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', () => {