Added example of a wrapper for the whole Vue appdmishunov-experiment-shadowdom

5 files changed, 37 insertions, 1 deletions

diff --git a/app/assets/javascripts/component_wrappers/index.js b/app/assets/javascripts/component_wrappers/index.js
index 826602d6131..d9c8b59f2bd 100644
--- a/app/assets/javascripts/component_wrappers/index.js
+++ b/app/assets/javascripts/component_wrappers/index.js
@@ -1,2 +1,3 @@
 import './project_row_wrapper';
 import './mr_widget_header_wrapper';
+import './mr_widget_options_wrapper';
diff --git a/app/assets/javascripts/component_wrappers/mr_widget_options_wrapper/index.js b/app/assets/javascripts/component_wrappers/mr_widget_options_wrapper/index.js
new file mode 100644
index 00000000000..0bc5b64f6d6
--- /dev/null
+++ b/app/assets/javascripts/component_wrappers/mr_widget_options_wrapper/index.js
@@ -0,0 +1,11 @@
+import Frank from '~/frankenstein_component';
+
+import styles from './styles.scss';
+
+class MRWidgetOptionsWrapper extends Frank {
+  static get styles() {
+    return [styles];
+  }
+}
+// Register the element with the browser
+customElements.define('mr-widget-options-wrapper', MRWidgetOptionsWrapper);
diff --git a/app/assets/javascripts/component_wrappers/mr_widget_options_wrapper/styles.scss b/app/assets/javascripts/component_wrappers/mr_widget_options_wrapper/styles.scss
new file mode 100644
index 00000000000..8d266555f8c
--- /dev/null
+++ b/app/assets/javascripts/component_wrappers/mr_widget_options_wrapper/styles.scss
@@ -0,0 +1,14 @@
+@import "../../../stylesheets/framework";
+@import "../../../stylesheets/pages/merge_requests";
+
+button,
+.btn {
+  background-color: blue;
+  color: White;
+}
+.btn-transparent {
+  background-color: transparent
+}
+a {
+  color: green;
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 9dd0df16960..142bdaa7504 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -131,6 +131,7 @@ export default {
     if (this.shouldRenderMergedPipeline) {
       this.initPostMergeDeploymentsPolling();
     }
+    this.notifyListeners();
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
@@ -142,6 +143,14 @@ export default {
     }
   },
   methods: {
+    notifyListeners() {
+      this.$nextTick(() => {
+        // Dispatch event in the old-fashioned way to support IE
+        const event = document.createEvent('Event');
+        event.initEvent('vueRenderingComplete', true, true);
+        this.$el.dispatchEvent(event);
+      });
+    },
     getServiceEndpoints(store) {
       return {
         mergePath: store.mergePath,
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 5111c9fab8d..a647fcac9a5 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -24,7 +24,8 @@
       window.gl.mrWidgetData.squash_before_merge_help_path = '#{help_page_path("user/project/merge_requests/squash_and_merge")}';
       window.gl.mrWidgetData.troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests/index.md', anchor: 'troubleshooting')}';
 
-    #js-vue-mr-widget.mr-widget
+    %mr-widget-options-wrapper{:app => "true"}
+      #js-vue-mr-widget.mr-widget
 
     .content-block.content-block-small.emoji-list-container.js-noteable-awards
       = render 'award_emoji/awards_block', awardable: @merge_request, inline: true