Merge branch '224445-remove-popover-directive' into 'master'

Deprecate popover js and the style file

See merge request gitlab-org/gitlab!49554

app/assets/javascripts/ide/components/commit_sidebar/message_field.vue

 <script>
 import { GlIcon, GlPopover } from '@gitlab/ui';
 import { __, sprintf } from '../../../locale';
-import popover from '../../../vue_shared/directives/popover';
 import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
 
 export default {
-  directives: {
-    popover,
-  },
   components: {
     GlIcon,
     GlPopover,

app/assets/javascripts/vue_shared/directives/popover.js

-import $ from 'jquery';
-
-/**
- * Helper to user bootstrap popover in vue.js.
- * Follow docs for html attributes: https://getbootstrap.com/docs/3.3/javascript/#static-popover
- *
- * @example
- * import popover from 'vue_shared/directives/popover.js';
- * {
- *   directives: [popover]
- * }
- * <a v-popover="{options}">popover</a>
- */
-export default {
-  bind(el, binding) {
-    $(el).popover(binding.value);
-  },
-
-  unbind(el) {
-    $(el).popover('dispose');
-  },
-};

app/assets/stylesheets/components/popover.scss

-.popover {
-  max-width: $popover-max-width;
-  border: 1px solid $gray-100;
-  box-shadow: $popover-box-shadow;
-  font-size: $gl-font-size-small;
-
-  /**
-  * Blue popover variation
-  */
-  &.blue {
-    background-color: $blue-600;
-    border-color: $blue-600;
-
-    .popover-body {
-      color: $white;
-    }
-
-    &.bs-popover-bottom {
-      .arrow::before,
-      .arrow::after {
-        border-bottom-color: $blue-600;
-      }
-    }
-
-    &.bs-popover-top {
-      .arrow::before,
-      .arrow::after {
-        border-top-color: $blue-600;
-      }
-    }
-
-    &.bs-popover-right {
-      .arrow::after,
-      .arrow::before {
-        border-right-color: $blue-600;
-      }
-    }
-
-    &.bs-popover-left {
-      .arrow::before,
-      .arrow::after {
-        border-left-color: $blue-600;
-      }
-    }
-  }
-}
-
-.bs-popover-top {
-  /* When popover position is top, the arrow is translated 1 pixel
-  *  due to the box-shadow include in our custom styles.
-  */
-  > .arrow::before {
-    border-top-color: $gray-100;
-    bottom: 1px;
-  }
-
-  > .arrow::after {
-    bottom: 2px;
-  }
-}
-
-.bs-popover-bottom {
-  > .arrow::before {
-    border-bottom-color: $gray-100;
-  }
-
-  > .popover-header::before {
-    border-color: $white;
-  }
-}
-
-.bs-popover-right > .arrow::before {
-  border-right-color: $gray-100;
-}
-
-.bs-popover-left > .arrow::before {
-  border-left-color: $gray-100;
-}
-
-.popover-header {
-  background-color: $white;
-  font-size: $gl-font-size-small;
-}
-
-.popover-body {
-  padding: $gl-padding $gl-padding-12;
-
-  > .popover-hr {
-    margin: $gl-padding 0;
-  }
-}
-
-/**
-* mr_popover component
-*/
-.mr-popover {
-  .text-secondary {
-    font-size: 12px;
-    line-height: 1.33;
-  }
-}
-
-.suggest-gitlab-ci-yml {
-  margin-top: -1em;
-
-  .popover-header {
-    padding: $gl-padding;
-    display: flex;
-    align-items: center;
-  }
-}

ee/spec/frontend/epic/components/sidebar_items/sidebar_date_picker_spec.js

@@ -7,12 +7,6 @@ import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_cal
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
 import { mockDatePickerProps } from '../../mock_data';
 
-const mockPopoverBind = jest.fn();
-
-jest.mock('~/vue_shared/directives/popover', () => ({
-  bind: (...args) => mockPopoverBind(...args),
-}));
-
 describe('SidebarDatePicker', () => {
   let originalGon;
   beforeAll(() => {