From 05bf72fa89d1186ff8bf7363bea73eec4f3053bb Mon Sep 17 00:00:00 2001 From: Frederic Caplette Date: Thu, 17 Sep 2020 15:08:15 -0400 Subject: [PATCH 1/4] 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. --- .../pages/projects/blob/show/index.js | 39 +++++++++---------- app/views/projects/blob/_content.html.haml | 3 +- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index 46e59cd657208c..0372470e1b4d33 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/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 (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', () => { diff --git a/app/views/projects/blob/_content.html.haml b/app/views/projects/blob/_content.html.haml index 11946f22811249..a6a9eac4761603 100644 --- a/app/views/projects/blob/_content.html.haml +++ b/app/views/projects/blob/_content.html.haml @@ -2,9 +2,8 @@ - rich_viewer = blob.rich_viewer - rich_viewer_active = rich_viewer && params[:viewer] != 'simple' - blob_data = defined?(@blob) ? @blob.data : {} -- filename = defined?(@blob) ? @blob.name : '' -#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: editing_ci_config?.to_s } } = render 'projects/blob/viewer', viewer: simple_viewer, hidden: rich_viewer_active -- GitLab From 280fcf910b2d50322324a7ab42f3345f58b6a320 Mon Sep 17 00:00:00 2001 From: Frederic Caplette Date: Thu, 17 Sep 2020 15:19:50 -0400 Subject: [PATCH 2/4] Add back the check for element Make sure the element is defined before we try to mount the app. --- app/assets/javascripts/pages/projects/blob/show/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index 0372470e1b4d33..988bea5343ab99 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -11,7 +11,7 @@ const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-pre const el = document.querySelector(containerId); const { isCiConfigFile, blobData } = el?.dataset; - if (parseBoolean(isCiConfigFile)) { + if (el && parseBoolean(isCiConfigFile)) { // eslint-disable-next-line no-new new Vue({ el, -- GitLab From f3c3ecfadc9ec1845037e11ebe88c04284dc04fc Mon Sep 17 00:00:00 2001 From: Frederic Caplette Date: Thu, 17 Sep 2020 15:49:27 -0400 Subject: [PATCH 3/4] Add conditional in case method is undefined Make sure the data can be passed down even when the method to check for ci config is undefined. $ to squash --- app/views/projects/blob/_content.html.haml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/projects/blob/_content.html.haml b/app/views/projects/blob/_content.html.haml index a6a9eac4761603..a65b22894ef075 100644 --- a/app/views/projects/blob/_content.html.haml +++ b/app/views/projects/blob/_content.html.haml @@ -2,8 +2,9 @@ - rich_viewer = blob.rich_viewer - rich_viewer_active = rich_viewer && params[:viewer] != 'simple' - blob_data = defined?(@blob) ? @blob.data : {} +- is_ci_config_file = defined?(editing_ci_config?) ? editing_ci_config?.to_s : 'false' -#js-blob-toggle-graph-preview{ data: { blob_data: blob_data, is_ci_config_file: editing_ci_config?.to_s } } +#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 -- GitLab From 6fb1b9421db0d76422b3c02722ba3c9535bc1df9 Mon Sep 17 00:00:00 2001 From: Frederic Caplette Date: Fri, 18 Sep 2020 08:15:52 -0400 Subject: [PATCH 4/4] Verify if blob instance is defined When we check if the blob instance is a ci config file, we first have to make sure that the @blob instance is defined. --- app/views/projects/blob/_content.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/projects/blob/_content.html.haml b/app/views/projects/blob/_content.html.haml index a65b22894ef075..5b77e31eb00382 100644 --- a/app/views/projects/blob/_content.html.haml +++ b/app/views/projects/blob/_content.html.haml @@ -2,7 +2,7 @@ - rich_viewer = blob.rich_viewer - rich_viewer_active = rich_viewer && params[:viewer] != 'simple' - blob_data = defined?(@blob) ? @blob.data : {} -- is_ci_config_file = defined?(editing_ci_config?) ? editing_ci_config?.to_s : 'false' +- is_ci_config_file = defined?(@blob) && defined?(@project) ? editing_ci_config?.to_s : 'false' #js-blob-toggle-graph-preview{ data: { blob_data: blob_data, is_ci_config_file: is_ci_config_file } } -- GitLab