Remove banner that suggests WedIDE gitlab-ci.yml

As we have chosen a simple editor approach for editing of the GitLab CI
yml file, we want to remove the benner that suggests it to our users.

This commit largely reverts 52ad6ade

app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue

-<script>
-import { GlAlert, GlButton } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
-
-export default {
-  components: {
-    GlAlert,
-    GlButton,
-  },
-  props: {
-    dismissEndpoint: {
-      type: String,
-      required: true,
-    },
-    featureId: {
-      type: String,
-      required: true,
-    },
-    editPath: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      showAlert: true,
-    };
-  },
-  methods: {
-    dismissAlert() {
-      this.showAlert = false;
-
-      return axios.post(this.dismissEndpoint, {
-        feature_name: this.featureId,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissAlert">
-    {{ __('The Web IDE offers advanced syntax highlighting capabilities and more.') }}
-    <div class="gl-mt-5">
-      <gl-button :href="editPath" category="primary" variant="info">{{
-        __('Open Web IDE')
-      }}</gl-button>
-    </div>
-  </gl-alert>
-</template>

app/assets/javascripts/blob/suggest_web_ide_ci/index.js

-import Vue from 'vue';
-import WebIdeAlert from './components/web_ide_alert.vue';
-
-export default el => {
-  const { dismissEndpoint, featureId, editPath } = el.dataset;
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    render(createElement) {
-      return createElement(WebIdeAlert, {
-        props: {
-          dismissEndpoint,
-          featureId,
-          editPath,
-        },
-      });
-    },
-  });
-};

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -7,14 +7,12 @@ import BlobFileDropzone from '../blob/blob_file_dropzone';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import { disableButtonIfEmptyField, setCookie } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
-import initWebIdeAlert from '~/blob/suggest_web_ide_ci';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
   const deleteBlobForm = $('.js-delete-blob-form');
   const suggestEl = document.querySelector('.js-suggest-gitlab-ci-yml');
-  const alertEl = document.getElementById('js-suggest-web-ide-ci');
 
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
@@ -85,8 +83,4 @@ export default () => {
       });
     }
   }
-
-  if (alertEl) {
-    initWebIdeAlert(alertEl);
-  }
 };

app/helpers/user_callouts_helper.rb

@@ -9,7 +9,6 @@ module UserCalloutsHelper
   TABS_POSITION_HIGHLIGHT = 'tabs_position_highlight'
   WEBHOOKS_MOVED = 'webhooks_moved'
   CUSTOMIZE_HOMEPAGE = 'customize_homepage'
-  WEB_IDE_ALERT_DISMISSED = 'web_ide_alert_dismissed'
 
   def show_admin_integrations_moved?
     !user_dismissed?(ADMIN_INTEGRATIONS_MOVED)
@@ -51,10 +50,6 @@ module UserCalloutsHelper
     customize_homepage && !user_dismissed?(CUSTOMIZE_HOMEPAGE)
   end
 
-  def show_web_ide_alert?
-    !user_dismissed?(WEB_IDE_ALERT_DISMISSED)
-  end
-
   private
 
   def user_dismissed?(feature_name, ignore_dismissal_earlier_than = nil)

app/models/user_callout.rb

@@ -19,7 +19,7 @@ class UserCallout < ApplicationRecord
     webhooks_moved: 13,
     service_templates_deprecated: 14,
     admin_integrations_moved: 15,
-    web_ide_alert_dismissed: 16,
+    web_ide_alert_dismissed: 16, # no longer in use
     active_user_count_threshold: 18,           # EE-only
     buy_pipeline_minutes_notification_dot: 19, # EE-only
     personal_access_token_expiry: 21,          # EE-only

app/presenters/project_presenter.rb

@@ -118,10 +118,6 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
     add_special_file_path(file_name: ci_config_path_or_default)
   end
 
-  def add_ci_yml_ide_path
-    ide_edit_path(project, default_branch_or_master, ci_config_path_or_default)
-  end
-
   def add_readme_path
     add_special_file_path(file_name: 'README.md')
   end
@@ -330,7 +326,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
     if cicd_missing?
       AnchorData.new(false,
                      statistic_icon + _('Set up CI/CD'),
-                     add_ci_yml_ide_path)
+                     add_ci_yml_path)
     elsif repository.gitlab_ci_yml.present?
       AnchorData.new(false,
                      statistic_icon('doc-text') + _('CI/CD configuration'),

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

@@ -9,9 +9,6 @@
       = link_to "the file", project_blob_path(@project, tree_join(@branch_name, @file_path)), target: "_blank", rel: 'noopener noreferrer', class: 'gl-link'
       and make sure your changes will not unintentionally remove theirs.
 
-- if editing_ci_config? && show_web_ide_alert?
-  #js-suggest-web-ide-ci{ data: { dismiss_endpoint: user_callouts_path, feature_id: UserCalloutsHelper::WEB_IDE_ALERT_DISMISSED, edit_path: ide_edit_path } }
-
 .editor-title-row
   %h3.page-title.blob-edit-page-title
     Edit file

changelogs/unreleased/248564-remove-web-ide-suggestion-banner-on-blob-edit.yml

+---
+title: Remove banner that suggests Web IDE for editing gitlab-ci.yml
+merge_request: 42815
+author:
+type: changed

locale/gitlab.pot

@@ -17820,9 +17820,6 @@ msgstr ""
 msgid "Open Selection"
 msgstr ""
 
-msgid "Open Web IDE"
-msgstr ""
-
 msgid "Open comment type dropdown"
 msgstr ""
 
@@ -25217,9 +25214,6 @@ msgstr ""
 msgid "The URL to use for connecting to Elasticsearch. Use a comma-separated list to support clustering (e.g., \"http://localhost:9200, http://localhost:9201\")."
 msgstr ""
 
-msgid "The Web IDE offers advanced syntax highlighting capabilities and more."
-msgstr ""
-
 msgid "The X509 Certificate to use when mutual TLS is required to communicate with the external authorization service. If left blank, the server certificate is still validated when accessing over HTTPS."
 msgstr ""
 

spec/features/projects/show/user_sees_setup_shortcut_buttons_spec.rb

@@ -226,7 +226,7 @@ RSpec.describe 'Projects > Show > User sees setup shortcut buttons' do
             expect(project.repository.gitlab_ci_yml).to be_nil
 
             page.within('.project-buttons') do
-              expect(page).to have_link('Set up CI/CD', href: presenter.add_ci_yml_ide_path)
+              expect(page).to have_link('Set up CI/CD', href: presenter.add_ci_yml_path)
             end
           end
 

spec/frontend/blob/suggest_web_ide_ci/web_ide_alert_spec.js

-import MockAdapter from 'axios-mock-adapter';
-import waitForPromises from 'helpers/wait_for_promises';
-import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlAlert } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
-import WebIdeAlert from '~/blob/suggest_web_ide_ci/components/web_ide_alert.vue';
-
-const dismissEndpoint = '/-/user_callouts';
-const featureId = 'web_ide_alert_dismissed';
-const editPath = 'edit/master/-/.gitlab-ci.yml';
-
-describe('WebIdeAlert', () => {
-  let wrapper;
-  let mock;
-
-  const findButton = () => wrapper.find(GlButton);
-  const findAlert = () => wrapper.find(GlAlert);
-  const dismissAlert = alertWrapper => alertWrapper.vm.$emit('dismiss');
-  const getPostPayload = () => JSON.parse(mock.history.post[0].data);
-
-  const createComponent = () => {
-    wrapper = shallowMount(WebIdeAlert, {
-      propsData: {
-        dismissEndpoint,
-        featureId,
-        editPath,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-
-    mock.onPost(dismissEndpoint).reply(200);
-
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
-    mock.restore();
-  });
-
-  describe('with defaults', () => {
-    it('displays alert correctly', () => {
-      expect(findAlert().exists()).toBe(true);
-    });
-
-    it('web ide button link has correct path', () => {
-      expect(findButton().attributes('href')).toBe(editPath);
-    });
-
-    it('dismisses alert correctly', async () => {
-      const alertWrapper = findAlert();
-
-      dismissAlert(alertWrapper);
-
-      await waitForPromises();
-
-      expect(alertWrapper.exists()).toBe(false);
-      expect(mock.history.post).toHaveLength(1);
-      expect(getPostPayload()).toEqual({ feature_name: featureId });
-    });
-  });
-});