Add unbind hook to SafeHtml directive

Related issue: gitlab-ui#1953 (closed)

What does this MR do and why?

This adds unbind hook to SafeHtml directive to fix potential memory leaks when used with other components like GlModal.

Screenshots or screen recordings

No visual changes

How to set up and validate locally

1. Create a modal and add content with a div and a GlSafeHtml directive on it:

Sample Patch

diff --git a/ee/app/assets/javascripts/on_demand_scans/components/empty_state.vue b/ee/app/assets/javascripts/on_demand_scans/components/empty_state.vue
index a1d925341ff2..7c6aaef0a811 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/empty_state.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/empty_state.vue
@@ -1,5 +1,14 @@
 <script>
-import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlSprintf,
+  GlLink,
+  GlModal,
+  GlButton,
+  GlModalDirective,
+
+} from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
 import { HELP_PAGE_PATH } from '../constants';
 
@@ -9,6 +18,12 @@ export default {
     GlEmptyState,
     GlSprintf,
     GlLink,
+    GlModal,
+    GlButton,
+  },
+  directives: {
+    SafeHtml,
+    GlModal: GlModalDirective,
   },
   inject: ['newDastScanPath', 'emptyStateSvgPath'],
   props: {
@@ -30,6 +45,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      modalId: 'testmodal',
+    };
+  },
   computed: {
     emptyStateProps() {
       const props = {
@@ -44,21 +64,32 @@ export default {
 
       return props;
     },
+    html() {
+      return '<a class="qwerty" href="https://google.com">hello</a>';
+    },
   },
   i18n: {
     primaryButtonText: s__('OnDemandScans|New scan'),
   },
+  methods: {
+    openModal() {
+      this.$refs.modal.show();
+    },
+    onCancel() {
+      this.$refs.modal.hide();
+    },
+  },
 };
 </script>
 
 <template>
-  <gl-empty-state v-bind="emptyStateProps" :svg-height="144">
-    <template #description>
-      <gl-sprintf :message="text">
-        <template #learnMoreLink="{ content }">
-          <gl-link :href="$options.HELP_PAGE_PATH">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </template>
-  </gl-empty-state>
+  <div>
+    <gl-button v-gl-modal="modalId" category="secondary"> Open </gl-button>
+    <gl-modal ref="modal" :modal-id="modalId">
+      <div v-safe-html="html"></div>
+      <template #modal-footer>
+        <gl-button category="secondary" @click="onCancel">{{ __('Cancel') }}</gl-button>
+      </template>
+    </gl-modal>
+  </div>
 </template>

2. Open and close modal several times then open developer tools, go to Memory tab and search for detached elements.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.