1 files changed, 24 insertions, 8 deletions

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 78aa3941bfe..3ac1e881658 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
@@ -4,7 +4,7 @@ import { isEmpty } from 'lodash';
 import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue';
 import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
 import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store';
-import stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
+import { stateToComponentMap as classState } from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
 import createFlash from '~/flash';
 import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import notify from '~/lib/utils/notify';
@@ -38,7 +38,8 @@ import ReadyToMergeState from './components/states/ready_to_merge.vue';
 import ShaMismatch from './components/states/sha_mismatch.vue';
 import UnresolvedDiscussionsState from './components/states/unresolved_discussions.vue';
 import WorkInProgressState from './components/states/work_in_progress.vue';
-// import ExtensionsContainer from './components/extensions/container';
+import ExtensionsContainer from './components/extensions/container';
+import { STATE_MACHINE, stateToComponentMap } from './constants';
 import eventHub from './event_hub';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import getStateQuery from './queries/get_state.query.graphql';
@@ -52,7 +53,7 @@ export default {
   },
   components: {
     Loading,
-    // ExtensionsContainer,
+    ExtensionsContainer,
     'mr-widget-header': WidgetHeader,
     'mr-widget-suggest-pipeline': WidgetSuggestPipeline,
     MrWidgetPipelineContainer,
@@ -124,7 +125,9 @@ export default {
       mr: store,
       state: store && store.state,
       service: store && this.createService(store),
+      machineState: store?.machineValue || STATE_MACHINE.definition.initial,
       loading: true,
+      recomputeComponentName: 0,
     };
   },
   computed: {
@@ -139,7 +142,7 @@ export default {
       return this.mr.state !== 'nothingToMerge';
     },
     componentName() {
-      return stateMaps.stateToComponentMap[this.mr.state];
+      return stateToComponentMap[this.machineState] || classState[this.mr.state];
     },
     hasPipelineMustSucceedConflict() {
       return !this.mr.hasCI && this.mr.onlyAllowMergeIfPipelineSucceeds;
@@ -148,9 +151,9 @@ export default {
       return this.mr.hasCI || this.hasPipelineMustSucceedConflict;
     },
     shouldSuggestPipelines() {
-      return (
-        !this.mr.hasCI && this.mr.mergeRequestAddCiConfigPath && !this.mr.isDismissedSuggestPipeline
-      );
+      const { hasCI, mergeRequestAddCiConfigPath, isDismissedSuggestPipeline } = this.mr;
+
+      return !hasCI && mergeRequestAddCiConfigPath && !isDismissedSuggestPipeline;
     },
     shouldRenderCodeQuality() {
       return this.mr?.codequalityReportsPath;
@@ -204,8 +207,19 @@ export default {
     hasAlerts() {
       return this.mr.mergeError || this.showMergePipelineForkWarning;
     },
+    shouldShowExtension() {
+      return (
+        window.gon?.features?.refactorMrWidgetsExtensions ||
+        window.gon?.features?.refactorMrWidgetsExtensionsUser
+      );
+    },
   },
   watch: {
+    'mr.machineValue': {
+      handler(newValue) {
+        this.machineState = newValue;
+      },
+    },
     state(newVal, oldVal) {
       if (newVal !== oldVal && this.shouldRenderMergedPipeline) {
         // init polling
@@ -247,6 +261,8 @@ export default {
         this.mr = new MRWidgetStore({ ...window.gl.mrWidgetData, ...data });
       }
 
+      this.machineState = this.mr.machineValue;
+
       if (!this.state) {
         this.state = this.mr.state;
       }
@@ -496,7 +512,7 @@ export default {
           </template>
         </mr-widget-alert-message>
       </div>
-      <!-- <extensions-container :mr="mr" /> -->
+      <extensions-container :mr="mr" />
       <grouped-codequality-reports-app
         v-if="shouldRenderCodeQuality"
         :head-blob-path="mr.headBlobPath"