Merge branch 'thutterer/rm-feature-highlight-popover' into 'master'

Remove unused feature-highlight code

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/139350



Merged-by: Phil Hughes <me@iamphill.com>
Approved-by: Alex Pennells <apennells@gitlab.com>
Approved-by: Phil Hughes <me@iamphill.com>
Co-authored-by: Thomas Hutterer <thutterer@gitlab.com>

app/assets/javascripts/feature_highlight/constants.js

-export const POPOVER_TARGET_ID = 'feature-highlight-trigger';

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

-import { createAlert } from '~/alert';
-import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
-
-export const getSelector = (highlightId) => `.js-feature-highlight[data-highlight=${highlightId}]`;
-
-export function dismiss(endpoint, highlightId) {
-  return axios
-    .post(endpoint, {
-      feature_name: highlightId,
-    })
-    .catch(() =>
-      createAlert({
-        message: __(
-          'An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.',
-        ),
-      }),
-    );
-}

app/assets/javascripts/feature_highlight/feature_highlight_popover.vue

-<script>
-import clusterPopover from '@gitlab/svgs/dist/illustrations/cluster_popover.svg?raw';
-import { GlPopover, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
-import SafeHtml from '~/vue_shared/directives/safe_html';
-import { __ } from '~/locale';
-import { POPOVER_TARGET_ID } from './constants';
-import { dismiss } from './feature_highlight_helper';
-
-export default {
-  components: {
-    GlPopover,
-    GlSprintf,
-    GlLink,
-    GlButton,
-  },
-  directives: {
-    SafeHtml,
-  },
-  props: {
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
-    highlightId: {
-      type: String,
-      required: true,
-    },
-    dismissEndpoint: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      dismissed: false,
-      triggerHidden: false,
-    };
-  },
-  methods: {
-    dismiss() {
-      dismiss(this.dismissEndpoint, this.highlightId);
-      this.$refs.popover.$emit('close');
-      this.dismissed = true;
-    },
-    hideTrigger() {
-      if (this.dismissed) {
-        this.triggerHidden = true;
-      }
-    },
-  },
-  clusterPopover,
-  targetId: POPOVER_TARGET_ID,
-  i18n: {
-    highlightMessage: __('Allows you to add and manage Kubernetes clusters.'),
-    autoDevopsProTipMessage: __(
-      'Protip: %{linkStart}Auto DevOps%{linkEnd} uses Kubernetes clusters to deploy your code!',
-    ),
-    dismissButtonLabel: __('Got it!'),
-  },
-};
-</script>
-<template>
-  <div class="gl-ml-3">
-    <span v-if="!triggerHidden" :id="$options.targetId" class="feature-highlight"></span>
-    <gl-popover
-      ref="popover"
-      :target="$options.targetId"
-      :css-classes="['feature-highlight-popover']"
-      container="body"
-      placement="right"
-      boundary="viewport"
-      @hidden="hideTrigger"
-    >
-      <span
-        v-safe-html="$options.clusterPopover"
-        class="feature-highlight-illustration gl-display-flex gl-justify-content-center gl-py-4 gl-w-full"
-      ></span>
-      <div class="gl-px-4 gl-py-5">
-        <p>
-          {{ $options.i18n.highlightMessage }}
-        </p>
-        <p>
-          <gl-sprintf :message="$options.i18n.autoDevopsProTipMessage">
-            <template #link="{ content }">
-              <gl-link class="gl-font-sm" :href="autoDevopsHelpPath">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </p>
-        <gl-button size="small" icon="thumb-up" variant="confirm" @click="dismiss">
-          {{ $options.i18n.dismissButtonLabel }}
-        </gl-button>
-      </div>
-    </gl-popover>
-  </div>
-</template>

app/assets/javascripts/feature_highlight/index.js

-import Vue from 'vue';
-
-const init = async () => {
-  const el = document.querySelector('.js-feature-highlight');
-
-  if (!el) {
-    return null;
-  }
-
-  const { autoDevopsHelpPath, highlight: highlightId, dismissEndpoint } = el.dataset;
-  const { default: FeatureHighlight } = await import(
-    /* webpackChunkName: 'feature_highlight' */ './feature_highlight_popover.vue'
-  );
-
-  return new Vue({
-    el,
-    render: (h) =>
-      h(FeatureHighlight, {
-        props: {
-          autoDevopsHelpPath,
-          highlightId,
-          dismissEndpoint,
-        },
-      }),
-  });
-};
-
-export default init;

app/assets/javascripts/main.js

@@ -21,7 +21,6 @@ import { localTimeAgo } from './lib/utils/datetime/timeago_utility';
 import { getLocationHash, visitUrl, mergeUrlParams } from './lib/utils/url_utility';
 
 // everything else
-import initFeatureHighlight from './feature_highlight';
 import LazyLoader from './lazy_loader';
 import initLogoAnimation from './logo';
 import initBreadcrumbs from './breadcrumb';
@@ -88,7 +87,6 @@ function deferredInitialisation() {
   initBroadcastNotifications();
   initPersistentUserCallouts();
   initDefaultTrackers();
-  initFeatureHighlight();
   initCopyCodeButton();
   initGitlabVersionCheck();
 

app/assets/stylesheets/framework.scss

@@ -57,7 +57,6 @@
 @import 'framework/responsive_tables';
 @import 'framework/stacked_progress_bar';
 @import 'framework/sortable';
-@import 'framework/feature_highlight';
 @import 'framework/read_more';
 @import 'framework/system_messages';
 @import 'framework/spinner';

app/assets/stylesheets/framework/feature_highlight.scss

-.feature-highlight {
-  &::before {
-    content: '';
-    display: block;
-    top: 6px;
-    left: 6px;
-    width: 8px;
-    height: 8px;
-    background-color: $blue-500;
-    border-radius: 50%;
-    box-shadow: 0 0 0 rgba($blue-500, 0.4);
-    animation: pulse-highlight 2s infinite;
-  }
-
-  &:hover::before,
-  &.disable-animation::before {
-    animation: none;
-  }
-
-  &[disabled]::before {
-    display: none;
-  }
-}
-
-
-.feature-highlight-illustration {
-  background-color: $theme-indigo-50;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  border-bottom: 1px solid darken($gray-normal, 8%);
-}
-
-.feature-highlight-popover {
-  width: 240px;
-
-  .popover-body {
-    padding: 0;
-  }
-}
-
-@include keyframes(pulse-highlight) {
-  0% {
-    box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
-  }
-
-  70% {
-    box-shadow: 0 0 0 10px transparent;
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}

locale/gitlab.pot

@@ -4953,9 +4953,6 @@ msgstr ""
 msgid "Allows projects to track errors using an Opstrace integration."
 msgstr ""
-msgid "Allows you to add and manage Kubernetes clusters."
-msgstr ""
-
 msgid "Almost there"
 msgstr ""
@@ -5106,9 +5103,6 @@ msgstr ""
 msgid "An error occurred while dismissing the alert. Refresh the page and try again."
 msgstr ""
-msgid "An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again."
-msgstr ""
-
 msgid "An error occurred while drawing job relationship links."
 msgstr ""
@@ -22841,9 +22835,6 @@ msgstr ""
 msgid "Got it"
 msgstr ""
-msgid "Got it!"
-msgstr ""
-
 msgid "Grafana URL"
 msgstr ""
@@ -39254,9 +39245,6 @@ msgstr ""
 msgid "ProtectedTag|default"
 msgstr ""
-msgid "Protip: %{linkStart}Auto DevOps%{linkEnd} uses Kubernetes clusters to deploy your code!"
-msgstr ""
-
 msgid "Provide Feedback"
 msgstr ""

spec/frontend/feature_highlight/feature_highlight_helper_spec.js

-import MockAdapter from 'axios-mock-adapter';
-import { dismiss } from '~/feature_highlight/feature_highlight_helper';
-import { createAlert } from '~/alert';
-import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_CREATED, HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
-
-jest.mock('~/alert');
-
-describe('feature highlight helper', () => {
-  describe('dismiss', () => {
-    let mockAxios;
-    const endpoint = '/-/callouts/dismiss';
-    const highlightId = '123';
-
-    beforeEach(() => {
-      mockAxios = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mockAxios.reset();
-    });
-
-    it('calls persistent dismissal endpoint with highlightId', async () => {
-      mockAxios.onPost(endpoint, { feature_name: highlightId }).replyOnce(HTTP_STATUS_CREATED);
-
-      await expect(dismiss(endpoint, highlightId)).resolves.toEqual(expect.anything());
-    });
-
-    it('triggers an alert when dismiss request fails', async () => {
-      mockAxios
-        .onPost(endpoint, { feature_name: highlightId })
-        .replyOnce(HTTP_STATUS_INTERNAL_SERVER_ERROR);
-
-      await dismiss(endpoint, highlightId);
-
-      expect(createAlert).toHaveBeenCalledWith({
-        message:
-          'An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.',
-      });
-    });
-  });
-});

spec/frontend/feature_highlight/feature_highlight_popover_spec.js

-import { GlPopover, GlLink, GlButton } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { POPOVER_TARGET_ID } from '~/feature_highlight/constants';
-import { dismiss } from '~/feature_highlight/feature_highlight_helper';
-import FeatureHighlightPopover from '~/feature_highlight/feature_highlight_popover.vue';
-
-jest.mock('~/feature_highlight/feature_highlight_helper');
-
-describe('feature_highlight/feature_highlight_popover', () => {
-  let wrapper;
-  const props = {
-    autoDevopsHelpPath: '/help/autodevops',
-    highlightId: '123',
-    dismissEndpoint: '/api/dismiss',
-  };
-
-  const buildWrapper = (propsData = props) => {
-    wrapper = mount(FeatureHighlightPopover, {
-      propsData,
-    });
-  };
-  const findPopoverTarget = () => wrapper.find(`#${POPOVER_TARGET_ID}`);
-  const findPopover = () => wrapper.findComponent(GlPopover);
-  const findAutoDevopsHelpLink = () => wrapper.findComponent(GlLink);
-  const findDismissButton = () => wrapper.findComponent(GlButton);
-
-  beforeEach(() => {
-    buildWrapper();
-  });
-
-  it('renders popover target', () => {
-    expect(findPopoverTarget().exists()).toBe(true);
-  });
-
-  it('renders popover', () => {
-    expect(findPopover().props()).toMatchObject({
-      target: POPOVER_TARGET_ID,
-      cssClasses: ['feature-highlight-popover'],
-      container: 'body',
-      placement: 'right',
-      boundary: 'viewport',
-    });
-  });
-
-  it('renders link that points to the autodevops help page', () => {
-    expect(findAutoDevopsHelpLink().attributes().href).toBe(props.autoDevopsHelpPath);
-    expect(findAutoDevopsHelpLink().text()).toBe('Auto DevOps');
-  });
-
-  it('renders dismiss button', () => {
-    expect(findDismissButton().props()).toMatchObject({
-      size: 'small',
-      icon: 'thumb-up',
-      variant: 'confirm',
-    });
-  });
-
-  it('dismisses popover when dismiss button is clicked', async () => {
-    await findDismissButton().trigger('click');
-
-    expect(findPopover().emitted('close')).toHaveLength(1);
-    expect(dismiss).toHaveBeenCalledWith(props.dismissEndpoint, props.highlightId);
-  });
-
-  describe('when popover is dismissed and hidden', () => {
-    it('hides the popover target', async () => {
-      await findDismissButton().trigger('click');
-      findPopover().vm.$emit('hidden');
-      await nextTick();
-
-      expect(findPopoverTarget().exists()).toBe(false);
-    });
-  });
-});