diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 0b0399ef271549ce454730c04950c4ec7d9c94b2..fc2872ce737608ab63a3c10b2cf3713432fc48fb 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
+import { provideWebIdeLink } from 'ee_else_ce/pages/projects/shared/web_ide_link/provide_web_ide_link';
 import TableOfContents from '~/blob/components/table_contents.vue';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 import { BlobViewer, initAuxiliaryViewer } from '~/blob/viewer/index';
@@ -70,6 +71,7 @@ if (viewBlobEl) {
     resourceId,
     userId,
     explainCodeAvailable,
+    ...dataset
   } = viewBlobEl.dataset;
 
   // eslint-disable-next-line no-new
@@ -85,6 +87,7 @@ if (viewBlobEl) {
       resourceId,
       userId,
       explainCodeAvailable: parseBoolean(explainCodeAvailable),
+      ...provideWebIdeLink(dataset),
     },
     render(createElement) {
       return createElement(BlobContentViewer, {
diff --git a/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js
index ce36ff6a2305dc764b959f42e97f2a8dd6b59400..8ceea37b701030898185e6e11c1f2c19e3eefcef 100644
--- a/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js
+++ b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js
@@ -1,8 +1,9 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { provideWebIdeLink } from 'ee_else_ce/pages/projects/shared/web_ide_link/provide_web_ide_link';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { joinPaths, webIDEUrl } from '~/lib/utils/url_utility';
-import WebIdeButton from '~/vue_shared/components/web_ide_link.vue';
+import WebIdeButton from 'ee_else_ce/vue_shared/components/web_ide_link.vue';
 import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
@@ -26,6 +27,7 @@ export default ({ el, router }) => {
     apolloProvider,
     provide: {
       projectPath,
+      ...provideWebIdeLink(options),
     },
     render(h) {
       return h(WebIdeButton, {
@@ -37,6 +39,7 @@ export default ({ el, router }) => {
             : webIDEUrl(
                 joinPaths('/', projectPath, 'edit', ref, '-', this.$route?.params.path || '', '/'),
               ),
+          projectPath,
           ...options,
         },
       });
diff --git a/app/assets/javascripts/pages/projects/shared/web_ide_link/provide_web_ide_link.js b/app/assets/javascripts/pages/projects/shared/web_ide_link/provide_web_ide_link.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c64bb6572e2c034dc860cd60ffab500f32b91fb
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/shared/web_ide_link/provide_web_ide_link.js
@@ -0,0 +1,9 @@
+/**
+ * Inspects an object and extracts properties
+ * that are relevant to the web_ide_link.vue
+ * component.
+ *
+ * @returns An object with properties that are
+ * relevant to the web_ide_link.vue component. See EE version.
+ */
+export const provideWebIdeLink = () => ({});
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 3d30b42b2aa17e4085b10ab0b47992840c25eb62..969036f84b729d317a0dd6e860ca37b34e5be956 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -7,10 +7,11 @@ import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constant
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import { redirectTo, getLocationHash } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
+import WebIdeLink from 'ee_else_ce/vue_shared/components/web_ide_link.vue';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
 import LineHighlighter from '~/blob/line_highlighter';
 import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql';
@@ -226,6 +227,9 @@ export default {
     isUsingLfs() {
       return this.blobInfo.storedExternally && this.blobInfo.externalStorage === LFS_STORAGE;
     },
+    projectIdAsNumber() {
+      return getIdFromGraphQLId(this.project?.id);
+    },
   },
   watch: {
     // Watch the URL 'plain' query value to know if the viewer needs changing.
@@ -356,6 +360,8 @@ export default {
             :gitpod-url="blobInfo.gitpodBlobUrl"
             :show-gitpod-button="gitpodEnabled"
             :gitpod-enabled="currentUser && currentUser.gitpodEnabled"
+            :project-path="projectPath"
+            :project-id="projectIdAsNumber"
             :user-preferences-gitpod-path="currentUser && currentUser.preferencesGitpodPath"
             :user-profile-enable-gitpod-path="currentUser && currentUser.profileEnableGitpodPath"
             is-blob
diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue
index c3f3226c46e38e8961cb92f79d5d532cccb2c121..1d6dbef799a59b2193d86c8a34912afd1558e81c 100644
--- a/app/assets/javascripts/vue_shared/components/actions_button.vue
+++ b/app/assets/javascripts/vue_shared/components/actions_button.vue
@@ -45,8 +45,12 @@ export default {
     :category="category"
     :toggle-text="toggleText"
     data-qa-selector="action_dropdown"
+    fluid-width
+    block
+    @shown="$emit('shown')"
+    @hidden="$emit('hidden')"
   >
-    <gl-disclosure-dropdown-group>
+    <gl-disclosure-dropdown-group class="edit-dropdown-group-width">
       <gl-disclosure-dropdown-item
         v-for="action in actions"
         :key="action.key"
@@ -65,5 +69,6 @@ export default {
         </template>
       </gl-disclosure-dropdown-item>
     </gl-disclosure-dropdown-group>
+    <slot></slot>
   </gl-disclosure-dropdown>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
index 82f4edcbd5f80cbbdc876db5aec62f4c4bca5dae..9a06c0ecf3083ac35bfa1cffc23259ced17c84d7 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -23,6 +23,7 @@ export const i18n = {
 };
 
 export default {
+  name: 'CEWebIdeLink',
   components: {
     ActionsButton,
     GlModal,
@@ -319,7 +320,11 @@ export default {
       :toggle-text="$options.i18n.toggleText"
       :variant="isBlob ? 'confirm' : 'default'"
       :category="isBlob ? 'primary' : 'secondary'"
-    />
+      @hidden="$emit('hidden')"
+      @shown="$emit('shown')"
+    >
+      <slot></slot>
+    </actions-button>
     <gl-modal
       v-if="computedShowGitpodButton && !gitpodEnabled"
       v-model="showEnableGitpodModal"
diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index a13b870409571b57e41d34347f0bd3a46585da3e..e0ee157187b1fc0c590c32e523c97f1145d65552 100644
--- a/app/assets/stylesheets/page_bundles/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -205,17 +205,6 @@
   margin-top: $gl-padding;
 }
 
-
-.web-ide-promo-popover {
-  box-shadow: 0 0 18px -1.9px rgba(119, 89, 194, 0.16),
-    0 0 12.9px -1.7px rgba(119, 89, 194, 0.16), 0 0 9.2px -1.4px rgba(119, 89, 194, 0.16),
-    0 0 6.4px -1.1px rgba(119, 89, 194, 0.16), 0 0 4.5px -0.8px rgba(119, 89, 194, 0.16),
-    0 0 3px -0.6px rgba(119, 89, 194, 0.16), 0 0 1.8px -0.3px rgba(119, 89, 194, 0.16),
-    0 0 0.6px rgba(119, 89, 194, 0.16);
-  z-index: 999;
-}
-
-.web-ide-promo-popover-illustration {
-  width: calc(100% + 24px);
-  margin: -28px -12px 0;
+.edit-dropdown-group-width {
+  width: 320px;
 }
diff --git a/ee/app/assets/javascripts/pages/projects/shared/web_ide_link/provide_web_ide_link.js b/ee/app/assets/javascripts/pages/projects/shared/web_ide_link/provide_web_ide_link.js
new file mode 100644
index 0000000000000000000000000000000000000000..48f399907da1020d7f84e7f78a083eec9f2e5cc3
--- /dev/null
+++ b/ee/app/assets/javascripts/pages/projects/shared/web_ide_link/provide_web_ide_link.js
@@ -0,0 +1,12 @@
+/**
+ * Inspects an object and extracts properties
+ * that are relevant to the web_ide_link.vue
+ * component. In the case of the EE version,
+ * it looks for the newWorkspacePath property.
+ *
+ * @returns An object with properties that are
+ * relevant to the web_ide_link.vue component.
+ */
+export const provideWebIdeLink = ({ newWorkspacePath } = {}) => ({
+  newWorkspacePath,
+});
diff --git a/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue b/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue
index 832792608749c8a686846e1fd01d35a091e37b4b..ab614577643baa5548f3b388b9c0e7398a3bbc78 100644
--- a/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue
+++ b/ee/app/assets/javascripts/remote_development/components/list/empty_state.vue
@@ -34,7 +34,7 @@ export default {
         <gl-button
           variant="confirm"
           class="gl-mb-3 gl-mx-2"
-          :to="$options.ROUTES.create"
+          :to="$options.ROUTES.new"
           data-qa-selector="empty_new_workspace_button"
           >{{ $options.i18n.primaryButtonText }}</gl-button
         >
diff --git a/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspace_dropdown_item.vue b/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspace_dropdown_item.vue
index d6b68bfc075116b09e9cc2b062af602aadfe793c..b60998ecf1f7c796fad6fc55eaed4c5f482fc4f2 100644
--- a/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspace_dropdown_item.vue
+++ b/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspace_dropdown_item.vue
@@ -26,10 +26,10 @@ export default {
 };
 </script>
 <template>
-  <gl-disclosure-dropdown-item :item="dropdownItem">
+  <gl-disclosure-dropdown-item class="gl-my-0" :item="dropdownItem">
     <template #list-item>
       <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
-        <span>
+        <span class="gl-display-inline-flex gl-align-items-center">
           <workspace-state-indicator class="gl-mr-3" :workspace-state="workspace.actualState" />
           <span class="gl-mr-4 gl-text-truncate">{{ workspace.name }}</span>
         </span>
diff --git a/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.stories.js b/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.stories.js
index 2ea328a814fd7c1ab7fa992a79b0cb46fde5f13a..a145118535f23c0e60f52b907e1b209dfe548952 100644
--- a/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.stories.js
+++ b/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.stories.js
@@ -15,6 +15,12 @@ export const WithAPIAccess = (args, { argTypes, createVueApollo }) => {
   return {
     components: { WorkspacesDropdownGroup, GlDisclosureDropdown },
     apolloProvider: createVueApollo(),
+    provide: {
+      glFeatures: {
+        remoteDevelopment: true,
+        remoteDevelopmentFeatureFlag: true,
+      },
+    },
     props: Object.keys(argTypes),
     template: `<gl-disclosure-dropdown fluid-width toggle-text="Edit">
       <workspaces-dropdown-group :new-workspace-path="newWorkspacePath" :project-id="projectId" :project-full-path="projectFullPath" />
diff --git a/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.vue b/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.vue
index 080ab75ff5b26d463581246c588299d1002bd37a..133ada92df6e4639b306ce7eb261927269fd9e2f 100644
--- a/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.vue
+++ b/ee/app/assets/javascripts/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.vue
@@ -5,6 +5,7 @@ import { logError } from '~/lib/logger';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import userWorkspacesListQuery from '../../graphql/queries/user_workspaces_list.query.graphql';
 import {
   WORKSPACES_LIST_POLL_INTERVAL,
@@ -37,6 +38,7 @@ export default {
     UpdateWorkspaceMutation,
     GetProjectDetailsQuery,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     projectId: {
       type: Number,
@@ -101,6 +103,9 @@ export default {
     isLoading() {
       return this.$apollo.queries.workspaces.loading || !this.projectDetailsLoaded;
     },
+    isWorkspacesDropdownGroupAvailable() {
+      return this.glFeatures.remoteDevelopment && this.glFeatures.remoteDevelopmentFeatureFlag;
+    },
   },
   methods: {
     displayUpdateFailedAlert({ error }) {
@@ -123,13 +128,18 @@ export default {
 </script>
 <template>
   <update-workspace-mutation
+    v-if="isWorkspacesDropdownGroupAvailable"
     @updateSucceed="hideUpdateFailedAlert"
     @updateFailed="displayUpdateFailedAlert"
   >
     <template #default="{ update }">
-      <gl-disclosure-dropdown-group bordered border-position="bottom" class="gl-max-w-48 gl-py-2">
+      <gl-disclosure-dropdown-group
+        bordered
+        class="edit-dropdown-group-width gl-pt-2 gl-pb-4"
+        data-testid="workspaces-dropdown-group"
+      >
         <template #group-label>
-          <span class="gl-display-flex gl-font-sm">{{ $options.i18n.workspacesGroupLabel }}</span>
+          <span class="gl-display-flex gl-font-base">{{ $options.i18n.workspacesGroupLabel }}</span>
         </template>
         <get-project-details-query
           :project-full-path="projectFullPath"
@@ -163,12 +173,23 @@ export default {
               @updateWorkspace="update(workspace.id, $event)"
             />
           </template>
-
-          <div v-else class="gl-px-4 gl-py-2 gl-font-sm" data-testid="no-workspaces-message">
-            {{ $options.i18n.noWorkspacesMessage }}
+          <div
+            v-else
+            class="gl-px-4 gl-py-2 gl-font-base gl-text-left"
+            data-testid="no-workspaces-message"
+          >
+            <p class="gl-mb-0">
+              {{ $options.i18n.noWorkspacesMessage }}
+            </p>
+            <p v-if="!supportsWorkspaces" class="gl-mb-0 gl-mt-2">
+              {{ $options.i18n.noWorkspacesSupportMessage }}
+            </p>
           </div>
 
-          <div class="gl-px-4 gl-py-3">
+          <div
+            v-if="supportsWorkspaces"
+            class="gl-px-4 gl-py-3 gl-display-flex gl-justify-content-start"
+          >
             <gl-button
               v-if="supportsWorkspaces"
               :href="newWorkspacePath"
@@ -176,7 +197,6 @@ export default {
               block
               >{{ $options.i18n.newWorkspaceButton }}</gl-button
             >
-            <span v-else class="gl-font-sm">{{ $options.i18n.noWorkspacesSupportMessage }}</span>
           </div>
         </template>
       </gl-disclosure-dropdown-group>
diff --git a/ee/app/assets/javascripts/remote_development/constants.js b/ee/app/assets/javascripts/remote_development/constants.js
index 5e37e39d7064b3f55362521fed592161a8e6705d..4d15df1a89fb482240757d2c9ccdb3f0eab9c00f 100644
--- a/ee/app/assets/javascripts/remote_development/constants.js
+++ b/ee/app/assets/javascripts/remote_development/constants.js
@@ -28,7 +28,7 @@ export const DEFAULT_DESIRED_STATE = WORKSPACE_STATES.running;
 export const WORKSPACES_LIST_POLL_INTERVAL = 3000;
 export const ROUTES = {
   index: 'index',
-  create: 'create',
+  new: 'new',
 };
 
 export const FILL_CLASS_GREEN = 'gl-fill-green-500';
diff --git a/ee/app/assets/javascripts/remote_development/pages/list.vue b/ee/app/assets/javascripts/remote_development/pages/list.vue
index c54866b3f58676d8a8a107273c5effb6b3d2f909..f5dfef577b4c2aad689a3bec62c8687f96b71cca 100644
--- a/ee/app/assets/javascripts/remote_development/pages/list.vue
+++ b/ee/app/assets/javascripts/remote_development/pages/list.vue
@@ -145,7 +145,7 @@ export default {
         }}</gl-link>
         <gl-button
           variant="confirm"
-          :to="$options.ROUTES.create"
+          :to="$options.ROUTES.new"
           data-qa-selector="list_new_workspace_button"
           >{{ $options.i18n.newWorkspaceButton }}</gl-button
         >
diff --git a/ee/app/assets/javascripts/remote_development/router/index.js b/ee/app/assets/javascripts/remote_development/router/index.js
index 6553d29294b5ecef5400ac85f37be875d9b1c3a3..6827764470bca51592739f263f11e962b2a4ed54 100644
--- a/ee/app/assets/javascripts/remote_development/router/index.js
+++ b/ee/app/assets/javascripts/remote_development/router/index.js
@@ -14,8 +14,8 @@ export default function createRouter({ base }) {
       component: WorkspacesList,
     },
     {
-      path: '/create',
-      name: ROUTES.create,
+      path: '/new',
+      name: ROUTES.new,
       component: CreateWorkspace,
     },
     {
diff --git a/ee/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/ee/app/assets/javascripts/vue_shared/components/web_ide_link.vue
new file mode 100644
index 0000000000000000000000000000000000000000..260f7610904cf1d7ccfd13e442f924cef1685dbd
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -0,0 +1,61 @@
+<script>
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
+
+export default {
+  components: {
+    WorkspacesDropdownGroup: () =>
+      import(
+        'ee_component/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.vue'
+      ),
+    WebIdeLink,
+  },
+  inject: {
+    newWorkspacePath: {
+      default: '',
+    },
+  },
+  props: {
+    ...WebIdeLink.props,
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    projectId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      isWorkspacesDropdownGroupEnabled: false,
+    };
+  },
+  methods: {
+    disableWorkspacesDropdownGroup() {
+      this.isWorkspacesDropdownGroupEnabled = false;
+    },
+    enableWorkspacesDropdownGroup() {
+      this.isWorkspacesDropdownGroupEnabled = true;
+    },
+  },
+  webIdeButtonId: 'web-ide-link',
+};
+</script>
+
+<template>
+  <web-ide-link
+    v-bind="$props"
+    @edit="$emit('edit', $event)"
+    @shown="enableWorkspacesDropdownGroup"
+    @hidden="disableWorkspacesDropdownGroup"
+  >
+    <workspaces-dropdown-group
+      v-if="isWorkspacesDropdownGroupEnabled"
+      :new-workspace-path="newWorkspacePath"
+      :project-id="projectId"
+      :project-full-path="projectPath"
+    />
+  </web-ide-link>
+</template>
diff --git a/ee/app/controllers/ee/projects/blob_controller.rb b/ee/app/controllers/ee/projects/blob_controller.rb
new file mode 100644
index 0000000000000000000000000000000000000000..f020aded602d65c044aa14148db596339ace4f30
--- /dev/null
+++ b/ee/app/controllers/ee/projects/blob_controller.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module EE
+  module Projects
+    module BlobController
+      extend ActiveSupport::Concern
+
+      prepended do
+        before_action do
+          push_frontend_feature_flag(:remote_development_feature_flag)
+          push_licensed_feature(:remote_development)
+        end
+      end
+    end
+  end
+end
diff --git a/ee/app/controllers/ee/projects/tree_controller.rb b/ee/app/controllers/ee/projects/tree_controller.rb
new file mode 100644
index 0000000000000000000000000000000000000000..b77419396317a087cecf9e903261dc36ee2e3ac1
--- /dev/null
+++ b/ee/app/controllers/ee/projects/tree_controller.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module EE
+  module Projects
+    module TreeController
+      extend ActiveSupport::Concern
+
+      prepended do
+        before_action do
+          push_frontend_feature_flag(:remote_development_feature_flag)
+          push_licensed_feature(:remote_development)
+        end
+      end
+    end
+  end
+end
diff --git a/ee/app/controllers/ee/projects_controller.rb b/ee/app/controllers/ee/projects_controller.rb
index b3136f8a896014320ec39f4f178d943d776bbc7b..2938d7a0e6c230cecc231ec541baefad4aaa7bad 100644
--- a/ee/app/controllers/ee/projects_controller.rb
+++ b/ee/app/controllers/ee/projects_controller.rb
@@ -19,6 +19,8 @@ module ProjectsController
 
       before_action do
         push_frontend_feature_flag(:product_analytics_snowplow_support)
+        push_frontend_feature_flag(:remote_development_feature_flag)
+        push_licensed_feature(:remote_development)
       end
 
       feature_category :groups_and_projects, [:restore]
diff --git a/ee/app/helpers/ee/blob_helper.rb b/ee/app/helpers/ee/blob_helper.rb
index 67f083940ee2848d87c10a496a4ff655650ffcc6..64f4b178229905146ec7d94605e30718e3fb9bb0 100644
--- a/ee/app/helpers/ee/blob_helper.rb
+++ b/ee/app/helpers/ee/blob_helper.rb
@@ -7,7 +7,8 @@ module BlobHelper
     override :vue_blob_app_data
     def vue_blob_app_data(project, blob, ref)
       super.merge({
-        explain_code_available: ::Llm::ExplainCodeService.new(current_user, project).valid?.to_s
+        explain_code_available: ::Llm::ExplainCodeService.new(current_user, project).valid?.to_s,
+        new_workspace_path: new_remote_development_workspace_path
       })
     end
   end
diff --git a/ee/app/helpers/ee/tree_helper.rb b/ee/app/helpers/ee/tree_helper.rb
index 899d5b5d506490bbd0af87e1fa205fd427a0bd85..189662f92cd787fe8f794589507c11a85f39d4ac 100644
--- a/ee/app/helpers/ee/tree_helper.rb
+++ b/ee/app/helpers/ee/tree_helper.rb
@@ -14,5 +14,13 @@ def vue_file_list_data(project, ref)
         explain_code_available: ::Llm::ExplainCodeService.new(current_user, project).valid?.to_s
       })
     end
+
+    override :web_ide_button_data
+    def web_ide_button_data(options = {})
+      super.merge({
+        new_workspace_path: new_remote_development_workspace_path,
+        project_id: project_to_use.id
+      })
+    end
   end
 end
diff --git a/ee/config/routes/remote_development.rb b/ee/config/routes/remote_development.rb
index 7f3c9626cb62b052dc4f2bdc892c4894f1cb7b31..cc564a6a95318544c75cd9771b331f3543da93cc 100644
--- a/ee/config/routes/remote_development.rb
+++ b/ee/config/routes/remote_development.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
 namespace :remote_development do
-  resources :workspaces, path: 'workspaces(/*vueroute)'
+  resources :workspaces, path: 'workspaces(/*vueroute)' do
+    resources :workspaces, only: [:index, :new], controller: :workspaces, action: :index
+  end
 end
diff --git a/ee/spec/features/remote_development/workspaces_dropdown_group_spec.rb b/ee/spec/features/remote_development/workspaces_dropdown_group_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..b188265e6edbc5cbdc05710815cd6bf204475dfa
--- /dev/null
+++ b/ee/spec/features/remote_development/workspaces_dropdown_group_spec.rb
@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Remote Development workspaces dropdown group', :api, :js, feature_category: :remote_development do
+  include_context 'with remote development shared fixtures'
+  include_context 'file upload requests helpers'
+
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group, name: 'test-group') }
+
+  let_it_be(:devfile_path) { '.devfile.yaml' }
+
+  let_it_be(:project) do
+    files = { devfile_path => example_devfile }
+    create(:project, :public, :in_group, :custom_repo, path: 'test-project', files: files, namespace: group)
+  end
+
+  let_it_be(:agent) do
+    create(:ee_cluster_agent, :with_remote_development_agent_config, project: project, created_by_user: user)
+  end
+
+  let_it_be(:agent_token) { create(:cluster_agent_token, agent: agent, created_by_user: user) }
+
+  let_it_be(:workspace) do
+    create(:workspace, user: user, updated_at: 2.days.ago, project_id: project.id,
+      actual_state: ::RemoteDevelopment::Workspaces::States::RUNNING,
+      desired_state: ::RemoteDevelopment::Workspaces::States::RUNNING
+    )
+  end
+
+  let(:workspaces_dropdown_selector) { '[data-testid="workspaces-dropdown-group"]' }
+
+  before_all do
+    group.add_developer(user)
+  end
+
+  before do
+    allow(Gitlab::Kas).to receive(:verify_api_request).and_return(true)
+
+    stub_licensed_features(remote_development: true)
+
+    # rubocop:disable RSpec/AnyInstanceOf - It's NOT the next instance...
+    allow_any_instance_of(Gitlab::Auth::AuthFinders)
+      .to receive(:cluster_agent_token_from_authorization_token).and_return(agent_token)
+    # rubocop:enable RSpec/AnyInstanceOf
+
+    sign_in(user)
+    wait_for_requests
+  end
+
+  shared_examples 'handles workspaces dropdown group visibility' do |feature_flag_enabled, feature_available, visible|
+    before do
+      stub_licensed_features(remote_development: feature_available)
+      stub_feature_flags(remote_development_feature_flag: feature_flag_enabled)
+
+      visit subject
+    end
+
+    context "when remote_development_feature_flag=#{feature_flag_enabled}" do
+      context "when remote_development feature availability=#{feature_available}" do
+        it 'does not display workspaces dropdown group' do
+          click_button 'Edit'
+
+          expect(page.has_css?(workspaces_dropdown_selector)).to be(visible)
+        end
+      end
+    end
+  end
+
+  shared_examples 'views and manages workspaces in workspaces dropdown group' do
+    it_behaves_like 'handles workspaces dropdown group visibility', true, true, true
+    it_behaves_like 'handles workspaces dropdown group visibility', true, false, false
+    it_behaves_like 'handles workspaces dropdown group visibility', false, true, false
+
+    context 'when workspaces dropdown group is visible' do
+      before do
+        visit subject
+        click_button 'Edit'
+      end
+
+      it 'allows navigating to the new workspace page' do
+        click_link 'New workspace'
+
+        expect(page).to have_current_path(new_remote_development_workspace_path)
+      end
+
+      it 'allows managing a user workspace' do
+        # Asserts workspace is displayed
+        expect(page).to have_content(workspace.name)
+
+        # Asserts the workspace state is correctly displayed
+        expect_workspace_state_indicator(workspace.actual_state)
+
+        # Asserts that all workspaces actions are visible
+        expect(page).to have_button('Restart')
+        expect(page).to have_button('Stop')
+        expect(page).to have_button('Terminate')
+
+        click_button('Stop')
+
+        # Ensures that the user can change a workspace state
+        expect(page).to have_button('Stopping', disabled: true)
+      end
+
+      def expect_workspace_state_indicator(state)
+        expect(page).to have_selector("svg[data-testid='workspace-state-indicator'][title='#{state}']")
+      end
+    end
+  end
+
+  describe 'when viewing project overview page' do
+    let(:subject) { project_path(project) }
+
+    it_behaves_like 'views and manages workspaces in workspaces dropdown group'
+  end
+
+  describe 'when viewing blob page' do
+    let(:subject) { project_blob_path(project, "#{project.default_branch}/#{devfile_path}") }
+
+    it_behaves_like 'views and manages workspaces in workspaces dropdown group'
+  end
+end
diff --git a/ee/spec/frontend/remote_development/components/list/empty_state_spec.js b/ee/spec/frontend/remote_development/components/list/empty_state_spec.js
index 7623df60791f6e95b20eef50342db762beccad18..24703f3c0908e05f9aae7a4399b79efbc507f5f8 100644
--- a/ee/spec/frontend/remote_development/components/list/empty_state_spec.js
+++ b/ee/spec/frontend/remote_development/components/list/empty_state_spec.js
@@ -41,7 +41,7 @@ describe('remote_development/components/list/empty_state.vue', () => {
         variant: 'confirm',
       });
       expect(button.attributes()).toMatchObject({
-        to: ROUTES.create,
+        to: ROUTES.new,
       });
     });
   });
diff --git a/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js b/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js
index 79ae50dd72b8ea5f1d825a5eb20d5f5924a44f65..286f256e04b739950bf6208ca0caf8fe86e94d67 100644
--- a/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js
+++ b/ee/spec/frontend/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group_spec.js
@@ -47,11 +47,16 @@ describe('remote_development/components/workspaces_dropdown_group/workspaces_dro
 
     mockApollo = createMockApollo([[userWorkspacesListQuery, userWorkspacesListQueryHandler]]);
   };
-  const createWrapper = () => {
+  const createWrapper = ({
+    glFeatures = { remoteDevelopment: true, remoteDevelopmentFeatureFlag: true },
+  } = {}) => {
     updateWorkspaceMutationMock = jest.fn();
 
     wrapper = shallowMountExtended(WorkspacesDropdownGroup, {
       apolloProvider: mockApollo,
+      provide: {
+        glFeatures,
+      },
       propsData: {
         projectId: PROJECT_ID,
         projectFullPath: PROJECT_FULL_PATH,
@@ -77,6 +82,29 @@ describe('remote_development/components/workspaces_dropdown_group/workspaces_dro
     buildMockApollo();
   });
 
+  describe('feature flag visibility', () => {
+    describe.each`
+      rdAvailable | rdFFlagEnabled | visible
+      ${true}     | ${true}        | ${true}
+      ${true}     | ${false}       | ${false}
+      ${false}    | ${true}        | ${false}
+    `(
+      'rdAvailable=$rdAvailable, rdFFlagEnabled=$rdFFlagEnabled, isBlob=$isBlob',
+      ({ rdAvailable, rdFFlagEnabled, visible }) => {
+        it(`workspaces dropdown visible=$visible`, () => {
+          createWrapper({
+            glFeatures: {
+              remoteDevelopment: rdAvailable,
+              remoteDevelopmentFeatureFlag: rdFFlagEnabled,
+            },
+          });
+
+          expect(findUpdateWorkspaceMutation().exists()).toBe(visible);
+        });
+      },
+    );
+  });
+
   describe('when loading data', () => {
     beforeEach(() => {
       createWrapper();
@@ -247,6 +275,9 @@ describe('remote_development/components/workspaces_dropdown_group/workspaces_dro
 
   describe('new workspace button visibility', () => {
     beforeEach(() => {
+      userWorkspacesListQueryHandler.mockReset();
+      userWorkspacesListQueryHandler.mockResolvedValueOnce(USER_WORKSPACES_QUERY_EMPTY_RESULT);
+
       createWrapper();
     });
 
@@ -256,14 +287,17 @@ describe('remote_development/components/workspaces_dropdown_group/workspaces_dro
       ${'result'} | ${{ hasDevFile: true, clusterAgents: [] }}
       ${'result'} | ${{ hasDevFile: false, clusterAgents: [{}] }}
       ${'error'}  | ${undefined}
-    `('when $event is emitted with $payload, visible = $visible', async ({ event, payload }) => {
-      findGetProjectDetailsQuery().vm.$emit(event, payload);
+    `(
+      'when $event is emitted with $payload, the dropdown is hidden',
+      async ({ event, payload }) => {
+        findGetProjectDetailsQuery().vm.$emit(event, payload);
 
-      await waitForPromises();
+        await waitForPromises();
 
-      expect(wrapper.text()).toContain(i18n.noWorkspacesSupportMessage);
-      expect(findNewWorkspaceButton().exists()).toBe(false);
-    });
+        expect(wrapper.text()).toContain(i18n.noWorkspacesSupportMessage);
+        expect(findNewWorkspaceButton().exists()).toBe(false);
+      },
+    );
 
     it('displays new workspace button when project has devfile and associated cluster agents', async () => {
       findGetProjectDetailsQuery().vm.$emit('result', { hasDevFile: true, clusterAgents: [{}] });
diff --git a/ee/spec/frontend/remote_development/pages/list_spec.js b/ee/spec/frontend/remote_development/pages/list_spec.js
index 776f371f31434549a177d07676b75beb9e58fae8..ee5b76bb686f1f68c0131bac939cea1caf51b56f 100644
--- a/ee/spec/frontend/remote_development/pages/list_spec.js
+++ b/ee/spec/frontend/remote_development/pages/list_spec.js
@@ -214,7 +214,7 @@ describe('remote_development/pages/list.vue', () => {
       await waitForPromises();
     });
     it('displays a link button that navigates to the create workspace page', () => {
-      expect(findNewWorkspaceButton().attributes().to).toBe(ROUTES.create);
+      expect(findNewWorkspaceButton().attributes().to).toBe(ROUTES.new);
       expect(findNewWorkspaceButton().text()).toMatch(/New workspace/);
     });
 
diff --git a/ee/spec/frontend/remote_development/router/index_spec.js b/ee/spec/frontend/remote_development/router/index_spec.js
index d6b71e58701a6d6463c3e5d6858418db680ee759..30bbd2a70f99ea86d0a18f75e07dfe7d38d1d7c1 100644
--- a/ee/spec/frontend/remote_development/router/index_spec.js
+++ b/ee/spec/frontend/remote_development/router/index_spec.js
@@ -6,9 +6,10 @@ import App from 'ee/remote_development/pages/app.vue';
 import WorkspacesList from 'ee/remote_development/pages/list.vue';
 import createRouter from 'ee/remote_development/router/index';
 import CreateWorkspace from 'ee/remote_development/pages/create.vue';
+import userWorkspacesProjectsNamesQuery from 'ee/remote_development/graphql/queries/user_workspaces_projects_names.query.graphql';
+import { ROUTES } from 'ee/remote_development/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import userWorkspacesListQuery from 'ee/remote_development/graphql/queries/user_workspaces_list.query.graphql';
-import userWorkspacesProjectsNamesQuery from 'ee/remote_development/graphql/queries/user_workspaces_projects_names.query.graphql';
 import {
   USER_WORKSPACES_PROJECT_NAMES_QUERY_RESULT,
   USER_WORKSPACES_QUERY_EMPTY_RESULT,
@@ -24,14 +25,14 @@ describe('remote_development/router/index.js', () => {
   let wrapper;
 
   beforeEach(() => {
-    router = createRouter('/');
+    router = createRouter(ROUTES.index);
   });
 
   afterEach(() => {
     window.location.hash = '';
   });
 
-  const mountApp = async (route = '/') => {
+  const mountApp = async (route = ROUTES.index) => {
     await router.push(route);
 
     wrapper = mountExtended(App, {
@@ -76,10 +77,10 @@ describe('remote_development/router/index.js', () => {
 
   describe('create path', () => {
     beforeEach(async () => {
-      await mountApp('/create');
+      await mountApp(ROUTES.new);
     });
 
-    it('renders CreateWorkspace on route /create', () => {
+    it(`renders CreateWorkspace on route ${ROUTES.new}`, () => {
       expect(findCreateWorkspacePage().exists()).toBe(true);
     });
 
diff --git a/ee/spec/frontend/repository/components/blob_content_viewer_spec.js b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
index 051ebf8c58c9ccd3a796b0dfebcc03945837b70c..9bd7f23dd52bee3535bf0727f210a94166962945 100644
--- a/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -13,6 +13,7 @@ import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql';
 import projectInfoQuery from '~/repository/queries/project_info.query.graphql';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import WebIdeLink from 'ee_else_ce/vue_shared/components/web_ide_link.vue';
 import {
   simpleViewerMock,
   projectMock,
@@ -114,6 +115,15 @@ describe('Blob content viewer component', () => {
     mockAxios.reset();
   });
 
+  it('provides project id and project path to web ide link component', async () => {
+    await createComponent();
+
+    expect(wrapper.findComponent(WebIdeLink).props()).toMatchObject({
+      projectId: 1234,
+      projectPath: propsMock.projectPath,
+    });
+  });
+
   describe('AI Genie component', () => {
     const prepGonAndLoad = async (explainCodeAvailable = true) => {
       createComponent({ explainCodeAvailable });
diff --git a/ee/spec/frontend/vue_shared/components/web_ide_link_spec.js b/ee/spec/frontend/vue_shared/components/web_ide_link_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..922d24cfa2a3a2a4e36cab6bdd76d7c79c4f3fed
--- /dev/null
+++ b/ee/spec/frontend/vue_shared/components/web_ide_link_spec.js
@@ -0,0 +1,83 @@
+import { nextTick } from 'vue';
+import WorkspacesDropdownGroup from 'ee_component/remote_development/components/workspaces_dropdown_group/workspaces_dropdown_group.vue';
+import CEWebIdeLink from '~/vue_shared/components/web_ide_link.vue';
+import WebIdeLink from 'ee_component/vue_shared/components/web_ide_link.vue';
+import { stubComponent } from 'helpers/stub_component';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+jest.mock('~/lib/utils/url_utility');
+
+describe('ee_component/vue_shared/components/web_ide_link', () => {
+  const projectId = 1;
+  const newWorkspacePath = 'workspaces/new';
+  const projectPath = 'bar/foo';
+  let wrapper;
+
+  function createComponent({ props = {}, provide = {} } = {}) {
+    wrapper = shallowMountExtended(WebIdeLink, {
+      propsData: {
+        projectId,
+        projectPath,
+        ...props,
+      },
+      provide: {
+        ...provide,
+      },
+      stubs: {
+        WorkspacesDropdownGroup: stubComponent(WorkspacesDropdownGroup),
+      },
+    });
+  }
+
+  const findCEWebIdeLink = () => wrapper.findComponent(CEWebIdeLink);
+  const findWorkspacesDropdownGroup = () => wrapper.findComponent(WorkspacesDropdownGroup);
+
+  it('passes down properties to the CEWebIdeLink component', () => {
+    createComponent({ props: { isBlob: true } });
+
+    expect(findCEWebIdeLink().props('isBlob')).toBe(true);
+  });
+
+  it('bubbles up edit event emitted by CEWebIdeLink', () => {
+    createComponent();
+
+    findCEWebIdeLink().vm.$emit('edit', true);
+
+    expect(wrapper.emitted('edit')).toEqual([[true]]);
+  });
+
+  describe('when CE Web IDE Link component emits "shown" event', () => {
+    describe('when workspaces dropdown group is visible', () => {
+      beforeEach(async () => {
+        createComponent({
+          props: { projectId, projectPath },
+          provide: {
+            newWorkspacePath,
+          },
+        });
+
+        findCEWebIdeLink().vm.$emit('shown');
+
+        await nextTick();
+      });
+
+      it('provides required parameters to workspaces dropdown group', () => {
+        expect(findWorkspacesDropdownGroup().props()).toEqual({
+          projectId,
+          projectFullPath: projectPath,
+          newWorkspacePath,
+        });
+      });
+
+      it('hides workspaces dropdown group when actions button emits hidden event', async () => {
+        expect(findWorkspacesDropdownGroup().exists()).toBe(true);
+
+        findCEWebIdeLink().vm.$emit('hidden');
+
+        await nextTick();
+
+        expect(findWorkspacesDropdownGroup().exists()).toBe(false);
+      });
+    });
+  });
+});
diff --git a/ee/spec/helpers/ee/blob_helper_spec.rb b/ee/spec/helpers/ee/blob_helper_spec.rb
index 85f792553e17889540d2088be9b1e7f06fd74322..a7fd1460a44f74e1a35f7b9e2fea424033f5ce8c 100644
--- a/ee/spec/helpers/ee/blob_helper_spec.rb
+++ b/ee/spec/helpers/ee/blob_helper_spec.rb
@@ -73,7 +73,8 @@
 
       expect(helper.vue_blob_app_data(project, blob, ref)).to include({
         user_id: '',
-        explain_code_available: 'false'
+        explain_code_available: 'false',
+        new_workspace_path: new_remote_development_workspace_path
       })
     end
   end
diff --git a/ee/spec/helpers/tree_helper_spec.rb b/ee/spec/helpers/tree_helper_spec.rb
index 15c804b1a5192fe8c7417a8e915b760e480af9f3..c868decbd0ddb3f51d28d7ff3b7934454d1d44fe 100644
--- a/ee/spec/helpers/tree_helper_spec.rb
+++ b/ee/spec/helpers/tree_helper_spec.rb
@@ -30,4 +30,20 @@
       )
     end
   end
+
+  describe '#web_ide_button_data' do
+    before do
+      allow(helper).to receive(:project_to_use).and_return(project)
+      allow(helper).to receive(:project_ci_pipeline_editor_path).and_return('')
+    end
+
+    it 'includes new_workspace_path  and project id properties' do
+      options = {}
+
+      expect(helper.web_ide_button_data(options)).to include(
+        new_workspace_path: new_remote_development_workspace_path,
+        project_id: project.id
+      )
+    end
+  end
 end
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 5b9542150f1cb3a8c9cb90a89d7723fd7e7d97dd..e2bb7cdb2d79a6436f5a2a150bfbd161090c5077 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -11,7 +11,7 @@ import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
-import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
+import WebIdeLink from 'ee_else_ce/vue_shared/components/web_ide_link.vue';
 import ForkSuggestion from '~/repository/components/fork_suggestion.vue';
 import { loadViewer } from '~/repository/components/blob_viewers';
 import DownloadViewer from '~/repository/components/blob_viewers/download_viewer.vue';
diff --git a/spec/frontend/vue_shared/components/actions_button_spec.js b/spec/frontend/vue_shared/components/actions_button_spec.js
index e7663e2adb2c2c58b10cf1f3edc91cc80bdbbec4..9f9a27c6997ae9f35f92373cecbbe0720a69d1f4 100644
--- a/spec/frontend/vue_shared/components/actions_button_spec.js
+++ b/spec/frontend/vue_shared/components/actions_button_spec.js
@@ -31,12 +31,13 @@ const TEST_ACTION_2 = {
 describe('vue_shared/components/actions_button', () => {
   let wrapper;
 
-  function createComponent(props) {
+  function createComponent({ props = {}, slots = {} } = {}) {
     wrapper = shallowMountExtended(ActionsButton, {
       propsData: { actions: [TEST_ACTION, TEST_ACTION_2], toggleText: 'Edit', ...props },
       stubs: {
         GlDisclosureDropdownItem,
       },
+      slots,
     });
   }
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
@@ -47,11 +48,29 @@ describe('vue_shared/components/actions_button', () => {
     expect(findDropdown().props().toggleText).toBe('Edit');
   });
 
+  it('dropdown has a fluid width', () => {
+    createComponent();
+
+    expect(findDropdown().props().fluidWidth).toBe(true);
+  });
+
+  it('provides a default slot', () => {
+    const slotContent = 'default text';
+
+    createComponent({
+      slots: {
+        default: slotContent,
+      },
+    });
+
+    expect(findDropdown().text()).toContain(slotContent);
+  });
+
   it('allows customizing variant and category', () => {
     const variant = 'confirm';
     const category = 'secondary';
 
-    createComponent({ variant, category });
+    createComponent({ props: { variant, category } });
 
     expect(findDropdown().props()).toMatchObject({ category, variant });
   });
@@ -88,4 +107,13 @@ describe('vue_shared/components/actions_button', () => {
       });
     });
   });
+
+  it.each(['shown', 'hidden'])(
+    'bubbles up %s event from the disclosure dropdown component',
+    (event) => {
+      createComponent();
+      findDropdown().vm.$emit(event);
+      expect(wrapper.emitted(event)).toHaveLength(1);
+    },
+  );
 });
diff --git a/spec/frontend/vue_shared/components/web_ide_link_spec.js b/spec/frontend/vue_shared/components/web_ide_link_spec.js
index e54de25dc0d91c7816f275d1a709fdcc788d1419..b6c22ceaa2325e068b8aefdc86708e797f203ed7 100644
--- a/spec/frontend/vue_shared/components/web_ide_link_spec.js
+++ b/spec/frontend/vue_shared/components/web_ide_link_spec.js
@@ -85,7 +85,7 @@ describe('vue_shared/components/web_ide_link', () => {
 
   let wrapper;
 
-  function createComponent(props, { mountFn = shallowMountExtended, glFeatures = {} } = {}) {
+  function createComponent(props, { mountFn = shallowMountExtended, slots = {} } = {}) {
     const fakeApollo = createMockApollo([
       [getWritableForksQuery, jest.fn().mockResolvedValue(getWritableForksResponse)],
     ]);
@@ -98,9 +98,7 @@ describe('vue_shared/components/web_ide_link', () => {
         forkPath,
         ...props,
       },
-      provide: {
-        glFeatures,
-      },
+      slots,
       stubs: {
         GlModal: stubComponent(GlModal, {
           template: `
@@ -215,6 +213,27 @@ describe('vue_shared/components/web_ide_link', () => {
     expect(findActionsButton().props('actions')).toEqual(expectedActions);
   });
 
+  it('bubbles up shown and hidden events triggered by actions button component', () => {
+    createComponent();
+
+    expect(wrapper.emitted('shown')).toBe(undefined);
+    expect(wrapper.emitted('hidden')).toBe(undefined);
+
+    findActionsButton().vm.$emit('shown');
+    findActionsButton().vm.$emit('hidden');
+
+    expect(wrapper.emitted('shown')).toHaveLength(1);
+    expect(wrapper.emitted('hidden')).toHaveLength(1);
+  });
+
+  it('exposes a default slot', () => {
+    const slotContent = 'default slot content';
+
+    createComponent({}, { slots: { default: slotContent } });
+
+    expect(wrapper.text()).toContain(slotContent);
+  });
+
   describe('when pipeline editor action is available', () => {
     beforeEach(() => {
       createComponent({