Use util function to determine file is ci config

Instead of relying on a regexp in the frontend which
is a flakier and also doesn't consider that we can
have custom gitlab-ci names, this is in sync with
the API to determine that we are editing a config
file.

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -5,32 +5,29 @@ import initBlob from '~/pages/projects/init_blob';
 import GpgBadges from '~/gpg_badges';
 import '~/sourcegraph/load';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-preview') => {
   const el = document.querySelector(containerId);
-  const { filename, blobData } = el?.dataset;
+  const { isCiConfigFile, blobData } = el?.dataset;
 
-  const nameRegexp = /\.gitlab-ci.yml/;
-
-  if (!el || !nameRegexp.test(filename)) {
-    return;
+  if (el && parseBoolean(isCiConfigFile)) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      components: {
+        GitlabCiYamlVisualization: () =>
+          import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'),
+      },
+      render(createElement) {
+        return createElement('gitlabCiYamlVisualization', {
+          props: {
+            blobData,
+          },
+        });
+      },
+    });
   }
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      GitlabCiYamlVisualization: () =>
-        import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'),
-    },
-    render(createElement) {
-      return createElement('gitlabCiYamlVisualization', {
-        props: {
-          blobData,
-        },
-      });
-    },
-  });
 };
 
 document.addEventListener('DOMContentLoaded', () => {

app/views/projects/blob/_content.html.haml

@@ -2,9 +2,9 @@
 - rich_viewer = blob.rich_viewer
 - rich_viewer_active = rich_viewer && params[:viewer] != 'simple'
 - blob_data = defined?(@blob) ? @blob.data : {}
-- filename = defined?(@blob) ? @blob.name : ''
+- is_ci_config_file = defined?(@blob) && defined?(@project) ? editing_ci_config?.to_s : 'false'
 
-#js-blob-toggle-graph-preview{ data: { blob_data: blob_data, filename: filename } }
+#js-blob-toggle-graph-preview{ data: { blob_data: blob_data, is_ci_config_file: is_ci_config_file } }
 
 = render 'projects/blob/viewer', viewer: simple_viewer, hidden: rich_viewer_active