From b84746f473e7ebfb1153a0d84c2b6935c61b9492 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 1 May 2024 02:48:41 -0500
Subject: [PATCH 1/7] Add Extensions Marketplace field to user preferences page

- Adds `web_ide_extensions_marketplace` feature flag.
- Adds integration view to user preferences with third-party
  acknowledgement warning.
- Moves some Remote-Development calculation to CE
---
 .../javascripts/ide/init_gitlab_web_ide.js    |   5 +
 .../extensions_marketplace_warning.vue        | 113 ++++++++++++++++++
 .../components/integration_view.vue           |  22 +++-
 .../components/profile_preferences.vue        |  53 +++++++-
 .../profile/preferences/constants.js          |   7 ++
 .../profiles/preferences_controller.rb        |   1 +
 app/helpers/ide_helper.rb                     |   3 +-
 app/helpers/preferences_helper.rb             |  14 +++
 app/models/user.rb                            |   1 +
 app/models/user_preference.rb                 |  10 ++
 app/views/profiles/preferences/show.html.haml |   7 +-
 .../beta/web_ide_extensions_marketplace.yml   |   9 ++
 doc/user/profile/preferences.md               |  22 +++-
 doc/user/project/web_ide/index.md             |  39 ++++++
 .../extensions_gallery_metadata_generator.rb  |  39 +-----
 lib/gitlab/web_ide/extensions_marketplace.rb  | 108 +++++++++++++++++
 locale/gitlab.pot                             |  27 +++++
 spec/helpers/preferences_helper_spec.rb       |  46 ++++---
 spec/models/user_preference_spec.rb           |  39 ++++++
 spec/models/user_spec.rb                      |   3 +
 20 files changed, 508 insertions(+), 60 deletions(-)
 create mode 100644 app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue
 create mode 100644 config/feature_flags/beta/web_ide_extensions_marketplace.yml
 create mode 100644 lib/gitlab/web_ide/extensions_marketplace.rb

diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js
index 4581b508fe8b6f..beb79d027c4cee 100644
--- a/app/assets/javascripts/ide/init_gitlab_web_ide.js
+++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js
@@ -46,6 +46,7 @@ export const initGitlabWebIDE = async (el) => {
     forkInfo: forkInfoJSON,
     editorFont: editorFontJSON,
     codeSuggestionsEnabled,
+    extensionsGallerySettings: extensionsGallerySettingsJSON,
   } = el.dataset;
 
   const rootEl = setupRootElement(el);
@@ -53,6 +54,9 @@ export const initGitlabWebIDE = async (el) => {
     ? convertObjectPropsToCamelCase(JSON.parse(editorFontJSON), { deep: true })
     : null;
   const forkInfo = forkInfoJSON ? JSON.parse(forkInfoJSON) : null;
+  const extensionsGallerySettings = extensionsGallerySettingsJSON
+    ? convertObjectPropsToCamelCase(JSON.parse(extensionsGallerySettingsJSON), { deep: true })
+    : undefined;
 
   const oauthConfig = getOAuthConfig(el.dataset);
   const httpHeaders = oauthConfig
@@ -85,6 +89,7 @@ export const initGitlabWebIDE = async (el) => {
       settingsSync: true,
     },
     editorFont,
+    extensionsGallerySettings,
     codeSuggestionsEnabled,
     handleTracking,
     // See https://gitlab.com/gitlab-org/gitlab-web-ide/-/blob/main/packages/web-ide-types/src/config.ts#L86
diff --git a/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue b/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue
new file mode 100644
index 00000000000000..3654215a6b7ff4
--- /dev/null
+++ b/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue
@@ -0,0 +1,113 @@
+<script>
+import { GlIcon, GlLink, GlModal, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+const WARNING_PARAGRAPH_1 = s__(
+  'PreferencesIntegrations|Third-party extensions are now available in the Web IDE. While each extension runs in a secure browser sandbox, %{boldStart}third-party extensions%{boldEnd} may have access to the contents of the files opened in the Web IDE, %{boldStart}including any personal data in those files%{boldEnd}, and may communicate with external servers.',
+);
+
+const WARNING_PARAGRAPH_2 = s__(
+  'PreferencesIntegrations|GitLab does not assume any responsibility for the functionality of these third-party extensions. Each %{boldStart}third-party%{boldEnd} extension has %{boldStart}their own independent%{boldEnd} terms and conditions listed in the marketplace. By installing an extension, you are agreeing to the terms & conditions and Privacy Policy that govern each individual extension as listed in the marketplace.',
+);
+
+const WARNING_PARAGRAPH_3 = s__(
+  'PreferencesIntegrations|By using the Extension Marketplace, you will send data, such as IP address and other device information, to %{url} in accordance with their independent terms and privacy policy.',
+);
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+    GlModal,
+    GlSprintf,
+  },
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    helpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    extensionsMarketplaceUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    actionSecondary() {
+      if (!this.helpUrl) {
+        return undefined;
+      }
+
+      return {
+        text: s__('PreferencesIntegrations|Learn more'),
+        attributes: {
+          href: this.helpUrl,
+          variant: 'default',
+        },
+      };
+    },
+  },
+  methods: {
+    onPrimary() {
+      this.$emit('accept');
+    },
+  },
+  actionPrimary: {
+    text: s__('PreferencesIntegrations|I understand'),
+  },
+  TITLE: s__('PreferencesIntegrations|Third-Party Extensions Acknowledgement'),
+  WARNING_PARAGRAPH_1,
+  WARNING_PARAGRAPH_2,
+  WARNING_PARAGRAPH_3,
+};
+</script>
+
+<template>
+  <gl-modal
+    :modal-id="modalId"
+    :visible="visible"
+    :title="$optins.TITLE"
+    :action-primary="$options.actionPrimary"
+    :action-secondary="actionSecondary"
+    @change="$emit('change', $event)"
+    @primary="onPrimary"
+  >
+    <p>
+      <gl-sprintf :message="$options.WARNING_PARAGRAPH_1">
+        <template #bold="{ content }">
+          <span class="gl-font-weight-bold">{{ content }}</span>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p>
+      <gl-sprintf :message="$options.WARNING_PARAGRAPH_2">
+        <template #bold="{ content }">
+          <span class="gl-font-weight-bold">{{ content }}</span>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p>
+      <gl-sprintf v-if="extensionsMarketplaceUrl" :message="$options.WARNING_PARAGRAPH_3">
+        <template #url>
+          <gl-link :href="extensionsMarketplaceUrl" target="_blank"
+            >{{ extensionsMarketplaceUrl }}
+            <gl-icon name="external-link" class="gl-align-middle" :size="12" />
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/profile/preferences/components/integration_view.vue b/app/assets/javascripts/profile/preferences/components/integration_view.vue
index 9924f248b891ab..b4a06c866eb6bd 100644
--- a/app/assets/javascripts/profile/preferences/components/integration_view.vue
+++ b/app/assets/javascripts/profile/preferences/components/integration_view.vue
@@ -2,6 +2,8 @@
 import { GlIcon, GlLink, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
 
+const toCheckboxValue = (bool) => (bool ? '1' : false);
+
 export default {
   name: 'IntegrationView',
   components: {
@@ -11,7 +13,6 @@ export default {
     GlFormCheckbox,
     IntegrationHelpText,
   },
-  inject: ['userFields'],
   props: {
     helpLink: {
       type: String,
@@ -29,10 +30,14 @@ export default {
       type: Object,
       required: true,
     },
+    value: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
-      isEnabled: this.userFields[this.config.formName] ? '1' : '0',
+      checkboxValue: toCheckboxValue(this.value),
     };
   },
   computed: {
@@ -43,6 +48,17 @@ export default {
       return `user_${this.config.formName}`;
     },
   },
+  watch: {
+    value: {
+      handler(val) {
+        this.checkboxValue = toCheckboxValue(val);
+      },
+      immediate: true,
+    },
+    checkboxValue(val) {
+      this.$emit('input', Boolean(val));
+    },
+  },
 };
 </script>
 
@@ -61,7 +77,7 @@ export default {
       value="0"
       data-testid="profile-preferences-integration-hidden-field"
     />
-    <gl-form-checkbox :id="formId" :checked="isEnabled" :name="formName" value="1"
+    <gl-form-checkbox :id="formId" v-model="checkboxValue" :name="formName" value="1"
       >{{ config.label }}
       <template #help>
         <integration-help-text :message="message" :message-url="messageUrl" />
diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 87296200822829..9076e09433cbc8 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -1,8 +1,9 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import { createAlert, VARIANT_DANGER } from '~/alert';
-import { INTEGRATION_VIEW_CONFIGS, i18n } from '../constants';
+import { INTEGRATION_VIEW_CONFIGS, i18n, INTEGRATION_EXTENSIONS_MARKETPLACE } from '../constants';
 import IntegrationView from './integration_view.vue';
+import ExtensionsMarketplaceWarning from './extensions_marketplace_warning.vue';
 
 function updateClasses(bodyClasses = '', applicationTheme, layout) {
   // Remove documentElement class for any previous theme, re-add current one
@@ -24,6 +25,7 @@ export default {
   components: {
     IntegrationView,
     GlButton,
+    ExtensionsMarketplaceWarning,
   },
   inject: {
     integrationViews: {
@@ -38,6 +40,9 @@ export default {
     userFields: {
       default: {},
     },
+    extensionsMarketplaceUrl: {
+      default: '',
+    },
     formEl: 'formEl',
     profilePreferencesPath: 'profilePreferencesPath',
     bodyClasses: 'bodyClasses',
@@ -45,12 +50,46 @@ export default {
   integrationViewConfigs: INTEGRATION_VIEW_CONFIGS,
   i18n,
   data() {
+    const integrationValues = this.integrationViews.reduce((acc, { name }) => {
+      const { formName } = INTEGRATION_VIEW_CONFIGS[name];
+
+      acc[name] = Boolean(this.userFields[formName]);
+
+      return acc;
+    }, {});
+
     return {
       isSubmitEnabled: true,
       darkModeOnCreate: null,
       schemeOnCreate: null,
+      integrationValues,
+      needsExtensionsMarketplaceWarning: !integrationValues[INTEGRATION_EXTENSIONS_MARKETPLACE],
+      showExtensionsMarketplaceWarning: false,
     };
   },
+  computed: {
+    extensionsMarketplaceView() {
+      return this.integrationViews.find(({ name }) => name === INTEGRATION_EXTENSIONS_MARKETPLACE);
+    },
+  },
+  watch: {
+    [`integrationValues.${INTEGRATION_EXTENSIONS_MARKETPLACE}`]: {
+      handler(val) {
+        if (this.needsExtensionsMarketplaceWarning && val) {
+          this.showExtensionsMarketplaceWarning = true;
+        }
+      },
+    },
+    async showExtensionsMarketplaceWarning(val) {
+      await this.$nextTick();
+
+      if (val) {
+        this.$set(this.integrationValues, INTEGRATION_EXTENSIONS_MARKETPLACE, false);
+      } else if (!this.needsExtensionsMarketplaceWarning) {
+        this.$set(this.integrationValues, INTEGRATION_EXTENSIONS_MARKETPLACE, true);
+      }
+    },
+  },
   created() {
     this.formEl.addEventListener('ajax:beforeSend', this.handleLoading);
     this.formEl.addEventListener('ajax:success', this.handleSuccess);
@@ -105,6 +144,9 @@ export default {
       createAlert({ message, variant });
       this.isSubmitEnabled = true;
     },
+    onExtensionsMarketplaceAccept() {
+      this.needsExtensionsMarketplaceWarning = false;
+    },
   },
 };
 </script>
@@ -129,6 +171,7 @@ export default {
         <integration-view
           v-for="view in integrationViews"
           :key="view.name"
+          v-model="integrationValues[view.name]"
           :help-link="view.help_link"
           :message="view.message"
           :message-url="view.message_url"
@@ -148,5 +191,13 @@ export default {
         {{ $options.i18n.saveChanges }}
       </gl-button>
     </div>
+    <extensions-marketplace-warning
+      v-if="extensionsMarketplaceView"
+      v-model="showExtensionsMarketplaceWarning"
+      modal-id="extensions-marketplace-warning"
+      :extensions-marketplace-url="extensionsMarketplaceUrl"
+      :help-url="extensionsMarketplaceView.help_link"
+      @accept="onExtensionsMarketplaceAccept"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/profile/preferences/constants.js b/app/assets/javascripts/profile/preferences/constants.js
index ea8464ba06544f..1da710fc08cf4e 100644
--- a/app/assets/javascripts/profile/preferences/constants.js
+++ b/app/assets/javascripts/profile/preferences/constants.js
@@ -1,5 +1,7 @@
 import { s__, __ } from '~/locale';
 
+export const INTEGRATION_EXTENSIONS_MARKETPLACE = 'extensions_marketplace';
+
 export const INTEGRATION_VIEW_CONFIGS = {
   sourcegraph: {
     title: s__('Preferences|Sourcegraph'),
@@ -11,6 +13,11 @@ export const INTEGRATION_VIEW_CONFIGS = {
     label: s__('Preferences|Enable Gitpod integration'),
     formName: 'gitpod_enabled',
   },
+  [INTEGRATION_EXTENSIONS_MARKETPLACE]: {
+    title: s__('Preferences|Extensions Marketplace'),
+    label: s__('Preferences|Enable Extensions Marketplace'),
+    formName: 'extensions_marketplace_enabled',
+  },
 };
 
 export const i18n = {
diff --git a/app/controllers/profiles/preferences_controller.rb b/app/controllers/profiles/preferences_controller.rb
index 77ae313b5736e5..c793d866182164 100644
--- a/app/controllers/profiles/preferences_controller.rb
+++ b/app/controllers/profiles/preferences_controller.rb
@@ -56,6 +56,7 @@ def preferences_param_names
       :tab_width,
       :sourcegraph_enabled,
       :gitpod_enabled,
+      :extensions_marketplace_enabled,
       :render_whitespace_in_code,
       :project_shortcut_buttons,
       :keyboard_shortcuts_enabled,
diff --git a/app/helpers/ide_helper.rb b/app/helpers/ide_helper.rb
index 312807c004a547..3ba9c27962a6b6 100644
--- a/app/helpers/ide_helper.rb
+++ b/app/helpers/ide_helper.rb
@@ -71,7 +71,8 @@ def new_ide_data(project:)
       'csp-nonce' => content_security_policy_nonce,
       # We will replace these placeholders in the FE
       'ide-remote-path' => ide_remote_path(remote_host: ':remote_host', remote_path: ':remote_path'),
-      'editor-font' => new_ide_fonts.to_json
+      'editor-font' => new_ide_fonts.to_json,
+      'extensions-gallery-settings' => ::Gitlab::WebIde::ExtensionsMarketplace.webide_extensions_gallery_settings(user: current_user).to_json
     }.merge(new_ide_code_suggestions_data).merge(new_ide_oauth_data)
   end
 
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index 53d6d35ba8cc44..7e7113ca82fc1f 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -128,11 +128,25 @@ def integration_views
     [].tap do |views|
       views << { name: 'gitpod', message: gitpod_enable_description, message_url: gitpod_url_placeholder, help_link: help_page_path('integration/gitpod') } if Gitlab::CurrentSettings.gitpod_enabled
       views << { name: 'sourcegraph', message: sourcegraph_url_message, message_url: Gitlab::CurrentSettings.sourcegraph_url, help_link: help_page_path('user/profile/preferences', anchor: 'sourcegraph') } if Gitlab::Sourcegraph.feature_available? && Gitlab::CurrentSettings.sourcegraph_enabled
+      views << extensions_marketplace_view if Gitlab::WebIde::ExtensionsMarketplace.feature_enabled?(user: current_user)
     end
   end
 
   private
 
+  def extensions_marketplace_view
+    # We handle the linkStart / linkEnd inside of a Vue sprintf
+    extensions_marketplace_home = "%{linkStart}#{::Gitlab::WebIde::ExtensionsMarketplace.marketplace_home_url}%{linkEnd}"
+    message = format(s_('PreferencesIntegrations|Use %{extensions_marketplace_home} as the Extensions Marketplace for the Web IDE.'), extensions_marketplace_home: extensions_marketplace_home)
+
+    {
+      name: 'extensions_marketplace',
+      message: message,
+      message_url: Gitlab::WebIde::ExtensionsMarketplace.marketplace_home_url,
+      help_link: Gitlab::WebIde::ExtensionsMarketplace.help_preferences_url
+    }
+  end
+
   def gitpod_url_placeholder
     Gitlab::CurrentSettings.gitpod_url.presence || 'https://gitpod.io/'
   end
diff --git a/app/models/user.rb b/app/models/user.rb
index 6edebb56a4cc35..74c9479f46efd9 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -410,6 +410,7 @@ def update_tracked_fields!(request)
     :gitpod_enabled, :gitpod_enabled=,
     :use_web_ide_extension_marketplace, :use_web_ide_extension_marketplace=,
     :extensions_marketplace_opt_in_status, :extensions_marketplace_opt_in_status=,
+    :extensions_marketplace_enabled, :extensions_marketplace_enabled=,
     :setup_for_company, :setup_for_company=,
     :project_shortcut_buttons, :project_shortcut_buttons=,
     :keyboard_shortcuts_enabled, :keyboard_shortcuts_enabled=,
diff --git a/app/models/user_preference.rb b/app/models/user_preference.rb
index 5845b521e14dba..6646165f74b050 100644
--- a/app/models/user_preference.rb
+++ b/app/models/user_preference.rb
@@ -131,6 +131,16 @@ def early_access_event_tracking?
     early_access_program_participant? && early_access_program_tracking?
   end
 
+  def extensions_marketplace_enabled
+    extensions_marketplace_opt_in_status == "enabled"
+  end
+
+  def extensions_marketplace_enabled=(value)
+    status = ActiveRecord::Type::Boolean.new.cast(value) ? 'enabled' : 'disabled'
+
+    self.extensions_marketplace_opt_in_status = status
+  end
+
   private
 
   def user_belongs_to_home_organization
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 5065f27f40333b..61f63d5429ba39 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -3,12 +3,13 @@
 - user_theme_id = Gitlab::Themes.for_user(@user).id
 - user_color_mode_id = Gitlab::ColorModes.for_user(@user).id
 - user_color_schema_id = Gitlab::ColorSchemes.for_user(@user).id
-- user_fields = { color_mode_id: user_color_mode_id, theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
+- user_fields = { color_mode_id: user_color_mode_id, theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled, extensions_marketplace_enabled: @user.extensions_marketplace_enabled }.to_json
 - fixed_help_text = s_('Preferences|Content will be a maximum of 1280 pixels wide.')
 - fluid_help_text = s_('Preferences|Content will span %{percentage} of the page width.').html_safe % { percentage: '100%' }
 - @color_modes = Gitlab::ColorModes::available_modes.to_json
 - @themes = Gitlab::Themes::available_themes.to_json
-- data_attributes = { color_modes: @color_modes, themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
+- extensions_marketplace_url = ::Gitlab::WebIde::ExtensionsMarketplace.marketplace_home_url
+- data_attributes = { color_modes: @color_modes, themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path, extensions_marketplace_url: extensions_marketplace_url }
 - @force_desktop_expanded_sidebar = true
 
 = gitlab_ui_form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
@@ -186,4 +187,6 @@
       s_('Preferences|Enable follow users')
   = render_if_exists 'profiles/preferences/zoekt_settings', form: f
 
+  -# Anchor used for linking straight to integrations part
+  %span#integrations
   #js-profile-preferences-app{ data: data_attributes }
diff --git a/config/feature_flags/beta/web_ide_extensions_marketplace.yml b/config/feature_flags/beta/web_ide_extensions_marketplace.yml
new file mode 100644
index 00000000000000..ba76b1d3fb598d
--- /dev/null
+++ b/config/feature_flags/beta/web_ide_extensions_marketplace.yml
@@ -0,0 +1,9 @@
+---
+name: web_ide_extensions_marketplace
+feature_issue_url: https://gitlab.com/groups/gitlab-org/-/epics/7685
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/459028
+milestone: '17.0'
+group: group::ide
+type: beta
+default_enabled: false
diff --git a/doc/user/profile/preferences.md b/doc/user/profile/preferences.md
index 78f18b2465528c..9a72508c615ac5 100644
--- a/doc/user/profile/preferences.md
+++ b/doc/user/profile/preferences.md
@@ -342,7 +342,7 @@ To access your **Followers** and **Following** tabs:
 
 ## Integrate your GitLab instance with third-party services
 
-Give third-party services access to your GitLab account.
+Give third-party services access to enhance the GitLab experience.
 
 ### Integrate your GitLab instance with Gitpod
 
@@ -370,6 +370,26 @@ To integrate with Sourcegraph:
 
 You must be the administrator of the GitLab instance to configure GitLab with Sourcegraph.
 
+### Integrate with Extensions Marketplace
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352) in GitLab 17.0 [with a flag](../../administration/feature_flags.md) named `web_ide_extensions_marketplace`. Disabled by default.
+> - [Enabled on GitLab.com](https://gitlab.com/gitlab-org/gitlab/-/issues/459028) in GitLab 17.0.
+
+The [Extensions Marketplace](../project/web_ide/index.md#extensions-marketplace) enables users to
+search and manage extensions for the Web IDE.
+
+If the GitLab instance is configured to use a third-party service for the Extensions
+Marketplace, you must enable the marketplace in your user preferences.
+
+To enable the Extensions Marketplace for the Web IDE:
+
+1. On the left sidebar, select your avatar.
+1. Select **Preferences**.
+1. Find the **Integrations** section.
+1. Select the **Enable Extensions Marketplace** checkbox.
+1. Select **I understand** in the Third-Party Extensions Acknowledgement.
+1. Select **Save changes**.
+
 <!-- ## Troubleshooting
 
 Include any troubleshooting steps that you can foresee. If you know beforehand what issues
diff --git a/doc/user/project/web_ide/index.md b/doc/user/project/web_ide/index.md
index f286b3224b3e5e..597f85148b696e 100644
--- a/doc/user/project/web_ide/index.md
+++ b/doc/user/project/web_ide/index.md
@@ -235,6 +235,45 @@ However, you can use a terminal to install dependencies and compile and debug co
 
 For more information, see [Remote development](../remote_development/index.md).
 
+## Extensions Marketplace
+
+DETAILS:
+**Status**: Beta
+
+WARNING:
+This feature is in [Beta](../../../policy/experiment-beta-support.md#beta) and subject to change without notice.
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352) in GitLab 17.0 [with a flag](../../../administration/feature_flags.md) named `web_ide_extensions_marketplace`. Disabled by default.
+> - [Enabled on GitLab.com](https://gitlab.com/gitlab-org/gitlab/-/issues/459028) in GitLab 17.0.
+
+FLAG:
+On self-managed GitLab, by default this feature is not available. To enable the feature, an administrator can [enable the feature flag](../../../administration/feature_flags.md) named `web_ide_oauth` **and** `web_ide_extensions_marketplace`. On GitLab.com and GitLab Dedicated, this feature is available.
+
+The Web IDE Extensions Marketplace enables users to download and run VSCode
+extensions that enhance the editing experience.
+
+To search for and install extensions:
+
+1. On the top menu bar, select **View > Extensions**,
+   or press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.
+1. Enter text to search for an extension (like `vim`).
+1. Select an extension to view information.
+1. To install the extensions, click **Install** in the extension information page.
+
+To uninstall extensions:
+
+1. On the top menu bar, select **View > Extensions**,
+   or press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.
+1. You should see a list of **Installed** extensions. If not, on the menu
+   in the extensions sidebar, select **Views > Installed** and make sure
+   it is checked.
+1. Click on an extension to view its information.
+1. To uninstall the extension, click **Uninstall** in the extension information page.
+
+The marketplace is preconfigured at the GitLab instance level. For now, this is
+hardcoded to [`https://open-vsx.org/`](https://open-vsx.org/), but this will
+soon be configurable by GitLab administrators (See [this epic](https://gitlab.com/groups/gitlab-org/-/epics/11770)).
+
 ## Related topics
 
 - [GitLab Duo Chat in the Web IDE](../../gitlab_duo_chat.md#use-gitlab-duo-chat-in-the-web-ide)
diff --git a/ee/lib/remote_development/settings/extensions_gallery_metadata_generator.rb b/ee/lib/remote_development/settings/extensions_gallery_metadata_generator.rb
index 4cb20daabbc6e1..ca12819275c05a 100644
--- a/ee/lib/remote_development/settings/extensions_gallery_metadata_generator.rb
+++ b/ee/lib/remote_development/settings/extensions_gallery_metadata_generator.rb
@@ -5,19 +5,6 @@ module Settings
     class ExtensionsGalleryMetadataGenerator
       include Messages
 
-      # NOTE: These `disabled_reason` enumeration values are also referenced/consumed in
-      #       the "gitlab-web-ide" and "gitlab-web-ide-vscode-fork" projects
-      #       (https://gitlab.com/gitlab-org/gitlab-web-ide & https://gitlab.com/gitlab-org/gitlab-web-ide-vscode-fork),
-      #       so we must ensure that any changes made here are also reflected in those projects.
-      DISABLED_REASONS =
-        %i[
-          no_user
-          no_flag
-          instance_disabled
-          opt_in_unset
-          opt_in_disabled
-        ].to_h { |reason| [reason, reason] }.freeze
-
       # @param [Hash] value
       # @return [Hash]
       def self.generate(value)
@@ -29,7 +16,7 @@ def self.generate(value)
             extensions_marketplace_feature_flag_enabled
         }
 
-        extensions_gallery_metadata = generate_settings(
+        extensions_gallery_metadata = ::Gitlab::WebIde::ExtensionsMarketplace.metadata_for_user(
           user: user,
           flag_enabled: extensions_marketplace_feature_flag_enabled
         )
@@ -37,30 +24,6 @@ def self.generate(value)
         value[:settings][:vscode_extensions_gallery_metadata] = extensions_gallery_metadata
         value
       end
-
-      # @param [User, nil] user
-      # @param [Boolean, nil] flag_enabled
-      # @return [Hash]
-      def self.generate_settings(user:, flag_enabled:)
-        return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:no_user) } unless user
-        return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:no_flag) } if flag_enabled.nil?
-        return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:instance_disabled) } unless flag_enabled
-
-        # noinspection RubyNilAnalysis -- RubyMine doesn't realize user can't be nil because of guard clause above
-        opt_in_status = user.extensions_marketplace_opt_in_status.to_sym
-
-        return { enabled: true } if opt_in_status == :enabled
-        return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:opt_in_unset) } if opt_in_status == :unset
-
-        if opt_in_status == :disabled
-          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:opt_in_disabled) }
-        end
-
-        # This is an internal bug due to an enumeration mismatch/inconsistency with the model, so lets throw an
-        # exception up the stack and let it be returned as a 500 - don't try to handle it via the ROP chain
-        raise "Invalid user.extensions_marketplace_opt_in_status: '#{opt_in_status}'. " \
-          "Supported statuses are: #{Enums::WebIde::ExtensionsMarketplaceOptInStatus.statuses.keys}." # rubocop:disable Layout/LineEndStringConcatenationIndentation -- This is already changed in the next version of gitlab-styles
-      end
     end
   end
 end
diff --git a/lib/gitlab/web_ide/extensions_marketplace.rb b/lib/gitlab/web_ide/extensions_marketplace.rb
new file mode 100644
index 00000000000000..8f262e09b92bec
--- /dev/null
+++ b/lib/gitlab/web_ide/extensions_marketplace.rb
@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Gitlab
+  module WebIde
+    module ExtensionsMarketplace
+      # NOTE: These `disabled_reason` enumeration values are also referenced/consumed in
+      #       the "gitlab-web-ide" and "gitlab-web-ide-vscode-fork" projects
+      #       (https://gitlab.com/gitlab-org/gitlab-web-ide & https://gitlab.com/gitlab-org/gitlab-web-ide-vscode-fork),
+      #       so we must ensure that any changes made here are also reflected in those projects.
+      DISABLED_REASONS =
+        %i[
+          no_user
+          no_flag
+          instance_disabled
+          opt_in_unset
+          opt_in_disabled
+        ].to_h { |reason| [reason, reason] }.freeze
+
+      class << self
+        def feature_enabled?(user:)
+          # TODO: Add instance-level setting for this https://gitlab.com/gitlab-org/gitlab/-/issues/451871
+
+          # note: OAuth **must** be enabled for us to use the extension marketplace
+          ::Gitlab::WebIde::DefaultOauthApplication.feature_enabled?(user) &&
+            Feature.enabled?(:web_ide_extensions_marketplace, user)
+        end
+
+        def vscode_settings
+          # TODO: Add instance-level setting for this https://gitlab.com/gitlab-org/gitlab/-/issues/451871
+          # TODO: We need to harmonize this with `ee/lib/remote_development/settings/defaults_initializer.rb`
+          #       https://gitlab.com/gitlab-org/gitlab/-/issues/460515
+          {
+            item_url: 'https://open-vsx.org/vscode/item',
+            service_url: 'https://open-vsx.org/vscode/gallery',
+            resource_url_template:
+              'https://open-vsx.org/vscode/unpkg/{publisher}/{name}/{version}/{path}',
+            control_url: '',
+            nls_base_url: '',
+            publisher_url: ''
+          }
+        end
+
+        # This value is used when the end-user is accepting the third-party extension marketplace integration.
+        def marketplace_home_url
+          "https://open-vsx.org"
+        end
+
+        def help_url
+          ::Gitlab::Routing.url_helpers.help_page_url('user/project/web_ide/index', anchor: 'extensions-marketplace')
+        end
+
+        def help_preferences_url
+          ::Gitlab::Routing.url_helpers.help_page_url('user/profile/preferences',
+            anchor: 'integrate-with-extensions-marketplace')
+        end
+
+        def user_preferences_url
+          ::Gitlab::Routing.url_helpers.profile_preferences_url(anchor: 'integrations')
+        end
+
+        # This returns a value to be used in the Web IDE config `extensionsGallerySettings`
+        # It should match the type expected by the Web IDE:
+        #
+        # - https://gitlab.com/gitlab-org/gitlab-web-ide/-/blob/51f9e91f890752596e7a3ef51f436fea07885eff/packages/web-ide-types/src/config.ts#L109
+        #
+        # @return [Hash]
+        def webide_extensions_gallery_settings(user:)
+          flag_enabled = feature_enabled?(user: user)
+          metadata = metadata_for_user(user: user, flag_enabled: flag_enabled)
+
+          return { enabled: true, vscode_settings: vscode_settings } if metadata.fetch(:enabled)
+
+          disabled_reason = metadata.fetch(:disabled_reason, nil)
+          result = { enabled: false, reason: disabled_reason, help_url: help_url }
+
+          if disabled_reason == :opt_in_unset || disabled_reason == :opt_in_disabled
+            result[:user_preferences_url] = user_preferences_url
+          end
+
+          result
+        end
+
+        # @param [User, nil] user
+        # @param [Boolean, nil] flag_enabled
+        # @return [Hash]
+        def metadata_for_user(user:, flag_enabled:)
+          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:no_user) } unless user
+          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:no_flag) } if flag_enabled.nil?
+          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:instance_disabled) } unless flag_enabled
+
+          # noinspection RubyNilAnalysis -- RubyMine doesn't realize user can't be nil because of guard clause above
+          opt_in_status = user.extensions_marketplace_opt_in_status.to_sym
+
+          return { enabled: true } if opt_in_status == :enabled
+          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:opt_in_unset) } if opt_in_status == :unset
+
+          if opt_in_status == :disabled
+            return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:opt_in_disabled) }
+          end
+
+          # This is an internal bug due to an enumeration mismatch/inconsistency with the model
+          raise "Invalid user.extensions_marketplace_opt_in_status: '#{opt_in_status}'. " \
+            "Supported statuses are: #{Enums::WebIde::ExtensionsMarketplaceOptInStatus.statuses.keys}." # rubocop:disable Layout/LineEndStringConcatenationIndentation -- This is already changed in the next version of gitlab-styles
+        end
+      end
+    end
+  end
+end
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 60c05b095b12e4..d03d413ca43038 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -38762,6 +38762,27 @@ msgstr ""
 msgid "Preferences saved."
 msgstr ""
 
+msgid "PreferencesIntegrations|By using the Extension Marketplace, you will send data, such as IP address and other device information, to %{url} in accordance with their independent terms and privacy policy."
+msgstr ""
+
+msgid "PreferencesIntegrations|GitLab does not assume any responsibility for the functionality of these third-party extensions. Each %{boldStart}third-party%{boldEnd} extension has %{boldStart}their own independent%{boldEnd} terms and conditions listed in the marketplace. By installing an extension, you are agreeing to the terms & conditions and Privacy Policy that govern each individual extension as listed in the marketplace."
+msgstr ""
+
+msgid "PreferencesIntegrations|I understand"
+msgstr ""
+
+msgid "PreferencesIntegrations|Learn more"
+msgstr ""
+
+msgid "PreferencesIntegrations|Third-Party Extensions Acknowledgement"
+msgstr ""
+
+msgid "PreferencesIntegrations|Third-party extensions are now available in the Web IDE. While each extension runs in a secure browser sandbox, %{boldStart}third-party extensions%{boldEnd} may have access to the contents of the files opened in the Web IDE, %{boldStart}including any personal data in those files%{boldEnd}, and may communicate with external servers."
+msgstr ""
+
+msgid "PreferencesIntegrations|Use %{extensions_marketplace_home} as the Extensions Marketplace for the Web IDE."
+msgstr ""
+
 msgid "Preferences|%{link_start}List of keyboard shortcuts%{link_end}"
 msgstr ""
 
@@ -38822,6 +38843,9 @@ msgstr ""
 msgid "Preferences|Enable %{link_start}Code Suggestions%{link_end} for the following groups.%{br_tag}Only groups that have purchased the Code Suggestion add-on and have available seats are listed here.%{br_tag} If you were expecting to see a group and it is missing from the list, please contact the group owner."
 msgstr ""
 
+msgid "Preferences|Enable Extensions Marketplace"
+msgstr ""
+
 msgid "Preferences|Enable Gitpod integration"
 msgstr ""
 
@@ -38840,6 +38864,9 @@ msgstr ""
 msgid "Preferences|Enable keyboard shortcuts"
 msgstr ""
 
+msgid "Preferences|Extensions Marketplace"
+msgstr ""
+
 msgid "Preferences|Failed to save preferences."
 msgstr ""
 
diff --git a/spec/helpers/preferences_helper_spec.rb b/spec/helpers/preferences_helper_spec.rb
index b259cb8eaf7159..7e1749435fe3de 100644
--- a/spec/helpers/preferences_helper_spec.rb
+++ b/spec/helpers/preferences_helper_spec.rb
@@ -3,11 +3,14 @@
 require 'spec_helper'
 
 RSpec.describe PreferencesHelper do
-  describe '#dashboard_choices' do
-    let(:user) { build(:user) }
+  let_it_be(:user) { build(:user) }
+
+  before do
+    allow(helper).to receive(:current_user).and_return(user)
+  end
 
+  describe '#dashboard_choices' do
     before do
-      allow(helper).to receive(:current_user).and_return(user)
       allow(helper).to receive(:can?).and_return(false)
     end
 
@@ -242,16 +245,15 @@ def stub_user(messages = {})
 
   describe '#integration_views' do
     let(:gitpod_url) { 'http://gitpod.test' }
+    let(:gitpod_enabled) { false }
 
     before do
       allow(Gitlab::CurrentSettings).to receive(:gitpod_enabled).and_return(gitpod_enabled)
       allow(Gitlab::CurrentSettings).to receive(:gitpod_url).and_return(gitpod_url)
     end
 
-    context 'when Gitpod is not enabled' do
-      let(:gitpod_enabled) { false }
-
-      it 'does not include Gitpod integration' do
+    context 'on default' do
+      it 'does not include integration views' do
         expect(helper.integration_views).to be_empty
       end
     end
@@ -260,20 +262,36 @@ def stub_user(messages = {})
       let(:gitpod_enabled) { true }
 
       it 'includes Gitpod integration' do
-        expect(helper.integration_views[0][:name]).to eq 'gitpod'
-      end
-
-      it 'returns the Gitpod url configured in settings' do
-        expect(helper.integration_views[0][:message_url]).to eq gitpod_url
+        expect(helper.integration_views).to include(
+          a_hash_including({ name: 'gitpod', message_url: gitpod_url })
+        )
       end
 
       context 'when Gitpod url is not set' do
         let(:gitpod_url) { '' }
 
-        it 'returns the Gitpod default url' do
-          expect(helper.integration_views[0][:message_url]).to eq 'https://gitpod.io/'
+        it 'includes Gitpod integration with default url' do
+          expect(helper.integration_views).to include(
+            a_hash_including({ name: 'gitpod', message_url: 'https://gitpod.io/' })
+          )
         end
       end
     end
+
+    context 'when WebIdeExtensionsMarketplace is enabled' do
+      before do
+        allow(Gitlab::WebIde::ExtensionsMarketplace).to receive(:feature_enabled?).with(user).and_return(true)
+      end
+
+      it 'includes Extensions Marketplace integration' do
+        expect(helper.integration_views).to include(
+          a_hash_including({
+            name: 'extensions_marketplace',
+            message: 'Use %{linkStart}https://open-vsx.org%{linkEnd} as the Extensions Marketplace for the Web IDE.',
+            message_url: 'https://open-vsx.org'
+          })
+        )
+      end
+    end
   end
 end
diff --git a/spec/models/user_preference_spec.rb b/spec/models/user_preference_spec.rb
index 1c520f08b7cbd4..d90958aa95acc8 100644
--- a/spec/models/user_preference_spec.rb
+++ b/spec/models/user_preference_spec.rb
@@ -340,4 +340,43 @@
       it { expect(user_preference.early_access_event_tracking?).to be false }
     end
   end
+
+  describe '#extensions_marketplace_enabled' do
+    where(:opt_in_status, :expected_value) do
+      [
+        ["enabled", true],
+        ["disabled", false],
+        ["unset", false]
+      ]
+    end
+
+    with_them do
+      it 'returns boolean from extensions_marketplace_opt_in_status' do
+        user_preference.update!(extensions_marketplace_opt_in_status: opt_in_status)
+
+        expect(user_preference.extensions_marketplace_enabled).to be expected_value
+      end
+    end
+  end
+
+  describe '#extensions_marketplace_enabled=' do
+    where(:value, :expected_opt_in_status) do
+      [
+        [true, "enabled"],
+        [false, "disabled"],
+        [0, "disabled"],
+        [1, "enabled"]
+      ]
+    end
+
+    with_them do
+      it 'updates extensions_marketplace_opt_in_status' do
+        user_preference.update!(extensions_marketplace_opt_in_status: 'unset')
+
+        user_preference.extensions_marketplace_enabled = value
+
+        expect(user_preference.extensions_marketplace_opt_in_status).to be expected_opt_in_status
+      end
+    end
+  end
 end
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index 8b8b082fe6f590..02d1f84d87f471 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -89,6 +89,9 @@
     it { is_expected.to delegate_method(:use_new_navigation).to(:user_preference) }
     it { is_expected.to delegate_method(:use_new_navigation=).to(:user_preference).with_arguments(:args) }
 
+    it { is_expected.to delegate_method(:extensions_marketplace_enabled).to(:user_preference) }
+    it { is_expected.to delegate_method(:extensions_marketplace_enabled=).to(:user_preference).with_arguments(:args) }
+
     it { is_expected.to delegate_method(:pinned_nav_items).to(:user_preference) }
     it { is_expected.to delegate_method(:pinned_nav_items=).to(:user_preference).with_arguments(:args) }
 
-- 
GitLab


From 7bf30d183be7e52d58f0d6710ba6615bddff0f7a Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Mon, 6 May 2024 15:08:18 -0500
Subject: [PATCH 2/7] BE unit tests for extensions marketplace

- Can be squashed into prev commit
---
 .../profiles/preferences_controller_spec.rb   |   3 +-
 spec/helpers/ide_helper_spec.rb               |   9 ++
 .../web_ide/extensions_marketplace_spec.rb    | 135 ++++++++++++++++++
 3 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb

diff --git a/spec/controllers/profiles/preferences_controller_spec.rb b/spec/controllers/profiles/preferences_controller_spec.rb
index 7a026da540125c..504c75aaf532a2 100644
--- a/spec/controllers/profiles/preferences_controller_spec.rb
+++ b/spec/controllers/profiles/preferences_controller_spec.rb
@@ -61,7 +61,8 @@ def go(params: {}, format: :json)
           tab_width: '5',
           project_shortcut_buttons: 'true',
           keyboard_shortcuts_enabled: 'true',
-          render_whitespace_in_code: 'true'
+          render_whitespace_in_code: 'true',
+          extensions_marketplace_enabled: '1'
         }.with_indifferent_access
 
         expect(user).to receive(:assign_attributes).with(ActionController::Parameters.new(prefs).permit!)
diff --git a/spec/helpers/ide_helper_spec.rb b/spec/helpers/ide_helper_spec.rb
index 99ef0998fda82b..4af32085d66901 100644
--- a/spec/helpers/ide_helper_spec.rb
+++ b/spec/helpers/ide_helper_spec.rb
@@ -83,6 +83,15 @@
           .to include(base_data)
       end
 
+      it 'includes extensions gallery settings' do
+        expect(Gitlab::WebIde::ExtensionsMarketplace).to receive(:webide_extensions_gallery_settings)
+          .with(user: user).and_return({ enabled: false })
+
+        actual = helper.ide_data(project: nil, fork_info: fork_info, params: params)
+
+        expect(actual).to include({ 'extensions-gallery-settings' => { enabled: false }.to_json })
+      end
+
       it 'includes editor font configuration' do
         ide_data = helper.ide_data(project: nil, fork_info: fork_info, params: params)
         editor_font = ::Gitlab::Json.parse(ide_data.fetch('editor-font'), symbolize_names: true)
diff --git a/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb b/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb
new file mode 100644
index 00000000000000..fd3050be7bfb53
--- /dev/null
+++ b/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb
@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Gitlab::WebIde::ExtensionsMarketplace, feature_category: :web_ide do
+  using RSpec::Parameterized::TableSyntax
+
+  let_it_be_with_reload(:current_user) { create(:user) }
+  let_it_be(:default_vscode_settings) do
+    {
+      item_url: 'https://open-vsx.org/vscode/item',
+      service_url: 'https://open-vsx.org/vscode/gallery',
+      resource_url_template:
+        'https://open-vsx.org/vscode/unpkg/{publisher}/{name}/{version}/{path}'
+    }
+  end
+
+  describe '#feature_enabled?' do
+    where(:web_ide_extensions_marketplace, :web_ide_oauth, :expectation) do
+      ref(:current_user) | false | false
+      false              | true  | false
+      ref(:current_user) | true  | true
+    end
+
+    with_them do
+      it 'returns the expected value' do
+        stub_feature_flags(web_ide_extensions_marketplace: web_ide_extensions_marketplace)
+        expect(::Gitlab::WebIde::DefaultOauthApplication).to receive(:feature_enabled?)
+          .with(current_user).and_return(web_ide_oauth)
+
+        expect(described_class.feature_enabled?(user: current_user)).to be(expectation)
+      end
+    end
+  end
+
+  describe '#vscode_settings' do
+    it { expect(described_class.vscode_settings).to match(hash_including(default_vscode_settings)) }
+  end
+
+  describe '#marketplace_home_url' do
+    it { expect(described_class.marketplace_home_url).to eq('https://open-vsx.org') }
+  end
+
+  describe '#help_url' do
+    it { expect(described_class.help_url).to match('/help/user/project/web_ide/index#extensions-marketplace') }
+  end
+
+  describe '#help_preferences_url' do
+    it do
+      expect(described_class.help_preferences_url).to match(
+        '/help/user/profile/preferences#integrate-with-extensions-marketplace'
+      )
+    end
+  end
+
+  describe '#user_preferences_url' do
+    it { expect(described_class.user_preferences_url).to match('/-/profile/preferences#integrations') }
+  end
+
+  describe '#metadata_for_user' do
+    where(:user, :opt_in_status, :flag_enabled, :expectation) do
+      nil                | nil       | false | { enabled: false, disabled_reason: :no_user }
+      ref(:current_user) | nil       | nil   | { enabled: false, disabled_reason: :no_flag }
+      ref(:current_user) | nil       | false | { enabled: false, disabled_reason: :instance_disabled }
+      ref(:current_user) | :enabled  | true  | { enabled: true }
+      ref(:current_user) | :disabled | true  | { enabled: false, disabled_reason: :opt_in_disabled }
+      ref(:current_user) | :unset    | true  | { enabled: false, disabled_reason: :opt_in_unset }
+    end
+
+    with_them do
+      subject(:metadata) { described_class.metadata_for_user(user: user, flag_enabled: flag_enabled) }
+
+      before do
+        user.update!(extensions_marketplace_opt_in_status: opt_in_status) if user && opt_in_status
+      end
+
+      it 'returns expected metadata for user' do
+        expect(metadata).to eq(expectation)
+      end
+    end
+  end
+
+  describe '#webide_extensions_gallery_settings' do
+    subject(:webide_settings) { described_class.webide_extensions_gallery_settings(user: current_user) }
+
+    context 'when instance enabled' do
+      before do
+        stub_feature_flags(
+          web_ide_extensions_marketplace: current_user,
+          web_ide_oauth: current_user,
+          vscode_web_ide: current_user
+        )
+      end
+
+      it 'when user opt in enabled, returns enabled settings' do
+        current_user.update!(extensions_marketplace_opt_in_status: :enabled)
+
+        expect(webide_settings).to match({
+          enabled: true,
+          vscode_settings: hash_including(default_vscode_settings)
+        })
+      end
+
+      context 'when user opt in disabled' do
+        where(:opt_in_status, :reason) do
+          :unset    | :opt_in_unset
+          :disabled | :opt_in_disabled
+        end
+
+        with_them do
+          it 'returns disabled settings' do
+            current_user.update!(extensions_marketplace_opt_in_status: opt_in_status)
+
+            expect(webide_settings).to match({
+              enabled: false,
+              reason: reason,
+              help_url: described_class.help_url,
+              user_preferences_url: described_class.user_preferences_url
+            })
+          end
+        end
+      end
+    end
+
+    context 'when instance disabled' do
+      it 'returns disabled settings and help url' do
+        expect(webide_settings).to match({
+          enabled: false,
+          reason: :instance_disabled,
+          help_url: described_class.help_url
+        })
+      end
+    end
+  end
+end
-- 
GitLab


From 0cee7e887528ff7cf3330d343a652a1addd1e844 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Mon, 6 May 2024 15:52:47 -0500
Subject: [PATCH 3/7] FE tests for extensions marketplace

- Also refactor to encapsulate warning logic in
  extensions_marketplace_warning.vue
---
 .../extensions_marketplace_warning.vue        |  59 ++++---
 .../components/integration_view.vue           |  10 +-
 .../components/profile_preferences.vue        |  32 +---
 spec/frontend/ide/init_gitlab_web_ide_spec.js |  31 ++++
 .../extensions_marketplace_warning_spec.js    | 157 ++++++++++++++++++
 .../components/integration_view_spec.js       |  49 +++---
 .../components/profile_preferences_spec.js    |  50 +++++-
 spec/helpers/preferences_helper_spec.rb       |   2 +-
 8 files changed, 312 insertions(+), 78 deletions(-)
 create mode 100644 spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js

diff --git a/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue b/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue
index 3654215a6b7ff4..1dd7bc8352da54 100644
--- a/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue
+++ b/app/assets/javascripts/profile/preferences/components/extensions_marketplace_warning.vue
@@ -2,15 +2,15 @@
 import { GlIcon, GlLink, GlModal, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
-const WARNING_PARAGRAPH_1 = s__(
+export const WARNING_PARAGRAPH_1 = s__(
   'PreferencesIntegrations|Third-party extensions are now available in the Web IDE. While each extension runs in a secure browser sandbox, %{boldStart}third-party extensions%{boldEnd} may have access to the contents of the files opened in the Web IDE, %{boldStart}including any personal data in those files%{boldEnd}, and may communicate with external servers.',
 );
 
-const WARNING_PARAGRAPH_2 = s__(
+export const WARNING_PARAGRAPH_2 = s__(
   'PreferencesIntegrations|GitLab does not assume any responsibility for the functionality of these third-party extensions. Each %{boldStart}third-party%{boldEnd} extension has %{boldStart}their own independent%{boldEnd} terms and conditions listed in the marketplace. By installing an extension, you are agreeing to the terms & conditions and Privacy Policy that govern each individual extension as listed in the marketplace.',
 );
 
-const WARNING_PARAGRAPH_3 = s__(
+export const WARNING_PARAGRAPH_3 = s__(
   'PreferencesIntegrations|By using the Extension Marketplace, you will send data, such as IP address and other device information, to %{url} in accordance with their independent terms and privacy policy.',
 );
 
@@ -21,16 +21,13 @@ export default {
     GlModal,
     GlSprintf,
   },
-  model: {
-    prop: 'visible',
-    event: 'change',
+  inject: {
+    extensionsMarketplaceUrl: {
+      default: '',
+    },
   },
   props: {
-    modalId: {
-      type: String,
-      required: true,
-    },
-    visible: {
+    value: {
       type: Boolean,
       required: true,
     },
@@ -39,11 +36,13 @@ export default {
       required: false,
       default: '',
     },
-    extensionsMarketplaceUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
+  },
+  data() {
+    return {
+      // If we have already enabled, let's consider warning not necessary
+      needsWarning: !this.value,
+      showWarning: false,
+    };
   },
   computed: {
     actionSecondary() {
@@ -60,9 +59,28 @@ export default {
       };
     },
   },
+  watch: {
+    value(val) {
+      // Have we tried to accept but we need to show the warning?
+      if (val && this.needsWarning) {
+        this.showWarning = true;
+      }
+    },
+    async showWarning(val) {
+      // Wait a bit so that `needsWarning` is properly updated if accepting.
+      await this.$nextTick();
+
+      // If we are showing the warning, the value should be false. Don't treat the user as accepting yet.
+      if (val) {
+        this.$emit('input', false);
+      } else if (!this.needsWarning) {
+        this.$emit('input', true);
+      }
+    },
+  },
   methods: {
     onPrimary() {
-      this.$emit('accept');
+      this.needsWarning = false;
     },
   },
   actionPrimary: {
@@ -77,12 +95,11 @@ export default {
 
 <template>
   <gl-modal
-    :modal-id="modalId"
-    :visible="visible"
-    :title="$optins.TITLE"
+    v-model="showWarning"
+    modal-id="extensions-marketplace-warning-modal"
+    :title="$options.TITLE"
     :action-primary="$options.actionPrimary"
     :action-secondary="actionSecondary"
-    @change="$emit('change', $event)"
     @primary="onPrimary"
   >
     <p>
diff --git a/app/assets/javascripts/profile/preferences/components/integration_view.vue b/app/assets/javascripts/profile/preferences/components/integration_view.vue
index b4a06c866eb6bd..06f8459e637cc3 100644
--- a/app/assets/javascripts/profile/preferences/components/integration_view.vue
+++ b/app/assets/javascripts/profile/preferences/components/integration_view.vue
@@ -49,13 +49,13 @@ export default {
     },
   },
   watch: {
-    value: {
-      handler(val) {
-        this.checkboxValue = toCheckboxValue(val);
-      },
-      immediate: true,
+    value(val) {
+      this.checkboxValue = toCheckboxValue(val);
     },
     checkboxValue(val) {
+      // note: When checked we get '1' since we set `value` prop. Unchecked is `false` as expected.
+      //       This value="1" needs to be set to properly handle the Rails form.
+      //       https://bootstrap-vue.org/docs/components/form-checkbox#comp-ref-b-form-checkbox-props
       this.$emit('input', Boolean(val));
     },
   },
diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 9076e09433cbc8..119e4efd82d1a1 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -40,15 +40,13 @@ export default {
     userFields: {
       default: {},
     },
-    extensionsMarketplaceUrl: {
-      default: '',
-    },
     formEl: 'formEl',
     profilePreferencesPath: 'profilePreferencesPath',
     bodyClasses: 'bodyClasses',
   },
   integrationViewConfigs: INTEGRATION_VIEW_CONFIGS,
   i18n,
+  INTEGRATION_EXTENSIONS_MARKETPLACE,
   data() {
     const integrationValues = this.integrationViews.reduce((acc, { name }) => {
       const { formName } = INTEGRATION_VIEW_CONFIGS[name];
@@ -63,8 +61,6 @@ export default {
       darkModeOnCreate: null,
       schemeOnCreate: null,
       integrationValues,
-      needsExtensionsMarketplaceWarning: !integrationValues[INTEGRATION_EXTENSIONS_MARKETPLACE],
-      showExtensionsMarketplaceWarning: false,
     };
   },
   computed: {
@@ -72,24 +68,6 @@ export default {
       return this.integrationViews.find(({ name }) => name === INTEGRATION_EXTENSIONS_MARKETPLACE);
     },
   },
-  watch: {
-    [`integrationValues.${INTEGRATION_EXTENSIONS_MARKETPLACE}`]: {
-      handler(val) {
-        if (this.needsExtensionsMarketplaceWarning && val) {
-          this.showExtensionsMarketplaceWarning = true;
-        }
-      },
-    },
-    async showExtensionsMarketplaceWarning(val) {
-      await this.$nextTick();
-
-      if (val) {
-        this.$set(this.integrationValues, INTEGRATION_EXTENSIONS_MARKETPLACE, false);
-      } else if (!this.needsExtensionsMarketplaceWarning) {
-        this.$set(this.integrationValues, INTEGRATION_EXTENSIONS_MARKETPLACE, true);
-      }
-    },
-  },
   created() {
     this.formEl.addEventListener('ajax:beforeSend', this.handleLoading);
     this.formEl.addEventListener('ajax:success', this.handleSuccess);
@@ -144,9 +122,6 @@ export default {
       createAlert({ message, variant });
       this.isSubmitEnabled = true;
     },
-    onExtensionsMarketplaceAccept() {
-      this.needsExtensionsMarketplaceWarning = false;
-    },
   },
 };
 </script>
@@ -193,11 +168,8 @@ export default {
     </div>
     <extensions-marketplace-warning
       v-if="extensionsMarketplaceView"
-      v-model="showExtensionsMarketplaceWarning"
-      modal-id="extensions-marketplace-warning"
-      :extensions-marketplace-url="extensionsMarketplaceUrl"
+      v-model="integrationValues[$options.INTEGRATION_EXTENSIONS_MARKETPLACE]"
       :help-url="extensionsMarketplaceView.help_link"
-      @accept="onExtensionsMarketplaceAccept"
     />
   </div>
 </template>
diff --git a/spec/frontend/ide/init_gitlab_web_ide_spec.js b/spec/frontend/ide/init_gitlab_web_ide_spec.js
index a757b8ec622838..3a75e110c73a3a 100644
--- a/spec/frontend/ide/init_gitlab_web_ide_spec.js
+++ b/spec/frontend/ide/init_gitlab_web_ide_spec.js
@@ -36,6 +36,13 @@ const TEST_START_REMOTE_PARAMS = {
   remotePath: '/test/projects/f oo',
   connectionToken: '123abc',
 };
+const TEST_EXTENSIONS_GALLERY_SETTINGS = JSON.stringify({
+  enabled: true,
+  vscode_settings: {
+    item_url: 'https://gitlab.test/vscode/marketplace/item/url',
+    service_url: 'https://gitlab.test/vscode/marketplace/service/url',
+  },
+});
 const TEST_EDITOR_FONT_SRC_URL = 'http://gitlab.test/assets/gitlab-mono/GitLabMono.woff2';
 const TEST_EDITOR_FONT_FORMAT = 'woff2';
 const TEST_EDITOR_FONT_FAMILY = 'GitLab Mono';
@@ -262,4 +269,28 @@ describe('ide/init_gitlab_web_ide', () => {
       );
     });
   });
+
+  describe('when extensionsGallerySettings is in dataset', () => {
+    beforeEach(() => {
+      findRootElement().dataset.extensionsGallerySettings = TEST_EXTENSIONS_GALLERY_SETTINGS;
+
+      createSubject();
+    });
+
+    it('calls start with element and extensionsGallerySettings', () => {
+      expect(start).toHaveBeenCalledTimes(1);
+      expect(start).toHaveBeenCalledWith(
+        findRootElement(),
+        expect.objectContaining({
+          extensionsGallerySettings: {
+            enabled: true,
+            vscodeSettings: {
+              itemUrl: 'https://gitlab.test/vscode/marketplace/item/url',
+              serviceUrl: 'https://gitlab.test/vscode/marketplace/service/url',
+            },
+          },
+        }),
+      );
+    });
+  });
 });
diff --git a/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js b/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js
new file mode 100644
index 00000000000000..507ffbba0f47c1
--- /dev/null
+++ b/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js
@@ -0,0 +1,157 @@
+import { nextTick } from 'vue';
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ExtensionsMarketplaceWarning, {
+  WARNING_PARAGRAPH_1,
+  WARNING_PARAGRAPH_2,
+  WARNING_PARAGRAPH_3,
+} from '~/profile/preferences/components/extensions_marketplace_warning.vue';
+
+const TEST_HELP_URL = 'http://localhost/help/url';
+const TEST_MARKETPLACE_URL = 'http://localhost/extensions/marketplace';
+
+describe('profile/preferences/components/extensions_marketplace_warning', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(ExtensionsMarketplaceWarning, {
+      propsData: {
+        value: false,
+        helpUrl: TEST_HELP_URL,
+        ...props,
+      },
+      provide: {
+        extensionsMarketplaceUrl: TEST_MARKETPLACE_URL,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  const closeModal = async () => {
+    findModal().vm.$emit('change', false);
+    findModal().vm.$emit('hide');
+
+    await nextTick();
+  };
+
+  describe('when initializes with value: false', () => {
+    beforeEach(() => {
+      createComponent({ value: false });
+    });
+
+    it('does not show modal', () => {
+      expect(findModal().props('visible')).toBe(false);
+    });
+
+    describe('when value changes to true', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ value: true });
+
+        await nextTick();
+      });
+
+      it('shows modal with props', () => {
+        expect(findModal().props()).toMatchObject({
+          visible: true,
+          modalId: 'extensions-marketplace-warning-modal',
+          title: 'Third-Party Extensions Acknowledgement',
+          actionPrimary: {
+            text: 'I understand',
+          },
+          actionSecondary: {
+            text: 'Learn more',
+            attributes: {
+              href: TEST_HELP_URL,
+              variant: 'default',
+            },
+          },
+        });
+      });
+
+      it('shows modal text', () => {
+        expect(findModal().text()).toMatchInterpolatedText(
+          `${WARNING_PARAGRAPH_1} ${WARNING_PARAGRAPH_2} ${WARNING_PARAGRAPH_3}`.replace(
+            '%{url}',
+            TEST_MARKETPLACE_URL,
+          ),
+        );
+      });
+
+      it('emits input to reset value to false', () => {
+        expect(wrapper.emitted('input')).toEqual([[false]]);
+      });
+
+      describe('when modal canceled', () => {
+        beforeEach(async () => {
+          await closeModal();
+        });
+
+        it('does not change anything', () => {
+          expect(wrapper.emitted('input')).toEqual([[false]]);
+        });
+
+        it('opens modal again when value changes', async () => {
+          wrapper.setProps({ value: false });
+          await nextTick();
+
+          expect(findModal().props('visible')).toBe(false);
+
+          wrapper.setProps({ value: true });
+          await nextTick();
+
+          expect(findModal().props('visible')).toBe(true);
+        });
+      });
+
+      describe('when modal is accepted', () => {
+        beforeEach(async () => {
+          findModal().vm.$emit('primary');
+
+          await closeModal();
+        });
+
+        it('updates value', () => {
+          expect(wrapper.emitted('input')).toEqual([[false], [true]]);
+        });
+
+        it('does not open modal when value changes', async () => {
+          wrapper.setProps({ value: false });
+          await nextTick();
+
+          expect(findModal().props('visible')).toBe(false);
+
+          wrapper.setProps({ value: true });
+          await nextTick();
+
+          expect(findModal().props('visible')).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('when initiailized with value: true', () => {
+    beforeEach(() => {
+      createComponent({ value: true });
+    });
+
+    it('does not show modal', () => {
+      expect(findModal().props('visible')).toBe(false);
+    });
+
+    it('does not open modal when value changes', async () => {
+      wrapper.setProps({ value: false });
+      await nextTick();
+
+      expect(findModal().props('visible')).toBe(false);
+
+      wrapper.setProps({ value: true });
+      await nextTick();
+
+      expect(findModal().props('visible')).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/profile/preferences/components/integration_view_spec.js b/spec/frontend/profile/preferences/components/integration_view_spec.js
index b809f2f4aede8d..0ea6271c944cb3 100644
--- a/spec/frontend/profile/preferences/components/integration_view_spec.js
+++ b/spec/frontend/profile/preferences/components/integration_view_spec.js
@@ -1,10 +1,11 @@
+import { nextTick } from 'vue';
 import { GlFormGroup } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
-import { integrationViews, userFields } from '../mock_data';
+import { integrationViews } from '../mock_data';
 
 const viewProps = convertObjectPropsToCamelCase(integrationViews[0]);
 
@@ -16,16 +17,12 @@ describe('IntegrationView component', () => {
       label: 'Enable foo',
       formName: 'foo_enabled',
     },
+    value: true,
     ...viewProps,
   };
 
-  function createComponent(options = {}) {
-    const { props = {}, provide = {} } = options;
+  function createComponent(props = {}) {
     return mountExtended(IntegrationView, {
-      provide: {
-        userFields,
-        ...provide,
-      },
       propsData: {
         ...defaultProps,
         ...props,
@@ -73,19 +70,7 @@ describe('IntegrationView component', () => {
   });
 
   it('should set the checkbox value to be false when false is provided', () => {
-    wrapper = createComponent({
-      provide: {
-        userFields: {
-          foo_enabled: false,
-        },
-      },
-    });
-
-    expect(findCheckbox().element.checked).toBe(false);
-  });
-
-  it('should set the checkbox value to be false when not provided', () => {
-    wrapper = createComponent({ provide: { userFields: {} } });
+    wrapper = createComponent({ value: false });
 
     expect(findCheckbox().element.checked).toBe(false);
   });
@@ -95,4 +80,28 @@ describe('IntegrationView component', () => {
 
     expect(wrapper.findComponent(IntegrationHelpText).exists()).toBe(true);
   });
+
+  describe('when prop value changes', () => {
+    beforeEach(async () => {
+      wrapper = createComponent();
+
+      wrapper.setProps({ value: false });
+      await nextTick();
+    });
+
+    it('should update the checkbox value', () => {
+      expect(findCheckbox().element.checked).toBe(false);
+    });
+  });
+
+  it('when checkbox clicked, should update the checkbox value', async () => {
+    wrapper = createComponent({ value: false });
+
+    expect(wrapper.emitted('input')).toBe(undefined);
+
+    findCheckbox().setChecked(true);
+    await nextTick();
+
+    expect(wrapper.emitted('input')).toEqual([[true]]);
+  });
 });
diff --git a/spec/frontend/profile/preferences/components/profile_preferences_spec.js b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
index 6fa7f4303f4469..67f766ad1161c3 100644
--- a/spec/frontend/profile/preferences/components/profile_preferences_spec.js
+++ b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
@@ -6,7 +6,12 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { createAlert, VARIANT_DANGER } from '~/alert';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue';
-import { i18n } from '~/profile/preferences/constants';
+import ExtensionsMarketplaceWarning from '~/profile/preferences/components/extensions_marketplace_warning.vue';
+import {
+  i18n,
+  INTEGRATION_EXTENSIONS_MARKETPLACE,
+  INTEGRATION_VIEW_CONFIGS,
+} from '~/profile/preferences/constants';
 import {
   integrationViews,
   userFields,
@@ -243,4 +248,47 @@ describe('ProfilePreferences component', () => {
       expect(window.location.reload).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('with extensions marketplace integration view', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        provide: {
+          integrationViews: [
+            {
+              name: INTEGRATION_EXTENSIONS_MARKETPLACE,
+              help_link: 'http://foo.com/help-extensions-marketplace',
+              message: 'Click %{linkStart}Foo%{linkEnd}!',
+              message_url: 'http://foo.com',
+            },
+          ],
+        },
+      });
+    });
+
+    it('renders view with 2-way-bound value', async () => {
+      const integrationView = wrapper.findComponent(IntegrationView);
+
+      expect(integrationView.props()).toMatchObject({
+        value: false,
+        config: INTEGRATION_VIEW_CONFIGS[INTEGRATION_EXTENSIONS_MARKETPLACE],
+      });
+
+      await integrationView.vm.$emit('input', true);
+
+      expect(integrationView.props('value')).toBe(true);
+    });
+
+    it('renders extensions marketplace warning with 2-way-bound value', async () => {
+      const warning = wrapper.findComponent(ExtensionsMarketplaceWarning);
+
+      expect(warning.props()).toEqual({
+        helpUrl: 'http://foo.com/help-extensions-marketplace',
+        value: false,
+      });
+
+      await warning.vm.$emit('input', true);
+
+      expect(warning.props('value')).toBe(true);
+    });
+  });
 });
diff --git a/spec/helpers/preferences_helper_spec.rb b/spec/helpers/preferences_helper_spec.rb
index 7e1749435fe3de..e6934d8b8989f9 100644
--- a/spec/helpers/preferences_helper_spec.rb
+++ b/spec/helpers/preferences_helper_spec.rb
@@ -280,7 +280,7 @@ def stub_user(messages = {})
 
     context 'when WebIdeExtensionsMarketplace is enabled' do
       before do
-        allow(Gitlab::WebIde::ExtensionsMarketplace).to receive(:feature_enabled?).with(user).and_return(true)
+        allow(Gitlab::WebIde::ExtensionsMarketplace).to receive(:feature_enabled?).with(user: user).and_return(true)
       end
 
       it 'includes Extensions Marketplace integration' do
-- 
GitLab


From 74351cdb7a834c14bb3285cec28c21e345a0a917 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 7 May 2024 00:10:21 -0500
Subject: [PATCH 4/7] BE maintainer review changes

- Add private method in ide_helper
- Add note for no `?` in user_preference
- Refactor `metadata_for_user` for readability and
 using `case`
---
 app/helpers/ide_helper.rb                    |  6 ++++-
 app/models/user_preference.rb                |  2 ++
 lib/gitlab/web_ide/extensions_marketplace.rb | 28 ++++++++++++++------
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/app/helpers/ide_helper.rb b/app/helpers/ide_helper.rb
index 3ba9c27962a6b6..e2c41f6da9940b 100644
--- a/app/helpers/ide_helper.rb
+++ b/app/helpers/ide_helper.rb
@@ -72,7 +72,7 @@ def new_ide_data(project:)
       # We will replace these placeholders in the FE
       'ide-remote-path' => ide_remote_path(remote_host: ':remote_host', remote_path: ':remote_path'),
       'editor-font' => new_ide_fonts.to_json,
-      'extensions-gallery-settings' => ::Gitlab::WebIde::ExtensionsMarketplace.webide_extensions_gallery_settings(user: current_user).to_json
+      'extensions-gallery-settings' => extensions_gallery_settings
     }.merge(new_ide_code_suggestions_data).merge(new_ide_oauth_data)
   end
 
@@ -106,4 +106,8 @@ def convert_to_project_entity_json(project)
   def has_dismissed_ide_environments_callout?
     current_user.dismissed_callout?(feature_name: 'web_ide_ci_environments_guidance')
   end
+
+  def extensions_gallery_settings
+    Gitlab::WebIde::ExtensionsMarketplace.webide_extensions_gallery_settings(user: current_user).to_json
+  end
 end
diff --git a/app/models/user_preference.rb b/app/models/user_preference.rb
index 6646165f74b050..73162ba6e84340 100644
--- a/app/models/user_preference.rb
+++ b/app/models/user_preference.rb
@@ -131,6 +131,8 @@ def early_access_event_tracking?
     early_access_program_participant? && early_access_program_tracking?
   end
 
+  # NOTE: Despite this returning a boolean, it does not end in `?` out of
+  #       symmetry with the other integration fields like `gitpod_enabled`
   def extensions_marketplace_enabled
     extensions_marketplace_opt_in_status == "enabled"
   end
diff --git a/lib/gitlab/web_ide/extensions_marketplace.rb b/lib/gitlab/web_ide/extensions_marketplace.rb
index 8f262e09b92bec..903a2ecc00776a 100644
--- a/lib/gitlab/web_ide/extensions_marketplace.rb
+++ b/lib/gitlab/web_ide/extensions_marketplace.rb
@@ -84,24 +84,36 @@ def webide_extensions_gallery_settings(user:)
         # @param [Boolean, nil] flag_enabled
         # @return [Hash]
         def metadata_for_user(user:, flag_enabled:)
-          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:no_user) } unless user
-          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:no_flag) } if flag_enabled.nil?
-          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:instance_disabled) } unless flag_enabled
+          return metadata_disabled(:no_user) unless user
+          return metadata_disabled(:no_flag) if flag_enabled.nil?
+          return metadata_disabled(:instance_disabled) unless flag_enabled
 
           # noinspection RubyNilAnalysis -- RubyMine doesn't realize user can't be nil because of guard clause above
           opt_in_status = user.extensions_marketplace_opt_in_status.to_sym
 
-          return { enabled: true } if opt_in_status == :enabled
-          return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:opt_in_unset) } if opt_in_status == :unset
-
-          if opt_in_status == :disabled
-            return { enabled: false, disabled_reason: DISABLED_REASONS.fetch(:opt_in_disabled) }
+          case opt_in_status
+          when :enabled
+            return metadata_enabled
+          when :unset
+            return metadata_disabled(:opt_in_unset)
+          when :disabled
+            return metadata_disabled(:opt_in_disabled)
           end
 
           # This is an internal bug due to an enumeration mismatch/inconsistency with the model
           raise "Invalid user.extensions_marketplace_opt_in_status: '#{opt_in_status}'. " \
             "Supported statuses are: #{Enums::WebIde::ExtensionsMarketplaceOptInStatus.statuses.keys}." # rubocop:disable Layout/LineEndStringConcatenationIndentation -- This is already changed in the next version of gitlab-styles
         end
+
+        private
+
+        def metadata_enabled
+          { enabled: true }
+        end
+
+        def metadata_disabled(reason)
+          { enabled: false, disabled_reason: DISABLED_REASONS.fetch(reason) }
+        end
       end
     end
   end
-- 
GitLab


From 95f6edaa1354c04c91ffba4a7346dbb36c682c31 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 7 May 2024 08:40:36 -0500
Subject: [PATCH 5/7] Update docs and UI text based on review

- Renamed integrations section to "Web IDE"
- We'll handle how to generalize this for RD later
---
 .../profile/preferences/constants.js          |  4 +-
 app/helpers/preferences_helper.rb             |  2 +-
 doc/user/profile/preferences.md               | 22 +++----
 doc/user/project/web_ide/index.md             | 59 ++++++++-----------
 lib/gitlab/web_ide/extensions_marketplace.rb  |  4 +-
 locale/gitlab.pot                             | 14 ++---
 spec/helpers/preferences_helper_spec.rb       |  4 +-
 .../web_ide/extensions_marketplace_spec.rb    |  4 +-
 8 files changed, 52 insertions(+), 61 deletions(-)

diff --git a/app/assets/javascripts/profile/preferences/constants.js b/app/assets/javascripts/profile/preferences/constants.js
index 1da710fc08cf4e..ab838772729b16 100644
--- a/app/assets/javascripts/profile/preferences/constants.js
+++ b/app/assets/javascripts/profile/preferences/constants.js
@@ -14,8 +14,8 @@ export const INTEGRATION_VIEW_CONFIGS = {
     formName: 'gitpod_enabled',
   },
   [INTEGRATION_EXTENSIONS_MARKETPLACE]: {
-    title: s__('Preferences|Extensions Marketplace'),
-    label: s__('Preferences|Enable Extensions Marketplace'),
+    title: s__('Preferences|Web IDE'),
+    label: s__('Preferences|Enable extension marketplace'),
     formName: 'extensions_marketplace_enabled',
   },
 };
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index 7e7113ca82fc1f..6fdfde13a6199d 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -137,7 +137,7 @@ def integration_views
   def extensions_marketplace_view
     # We handle the linkStart / linkEnd inside of a Vue sprintf
     extensions_marketplace_home = "%{linkStart}#{::Gitlab::WebIde::ExtensionsMarketplace.marketplace_home_url}%{linkEnd}"
-    message = format(s_('PreferencesIntegrations|Use %{extensions_marketplace_home} as the Extensions Marketplace for the Web IDE.'), extensions_marketplace_home: extensions_marketplace_home)
+    message = format(s_('PreferencesIntegrations|Uses %{extensions_marketplace_home} as the extension marketplace for the Web IDE.'), extensions_marketplace_home: extensions_marketplace_home)
 
     {
       name: 'extensions_marketplace',
diff --git a/doc/user/profile/preferences.md b/doc/user/profile/preferences.md
index 9a72508c615ac5..573a3571807c16 100644
--- a/doc/user/profile/preferences.md
+++ b/doc/user/profile/preferences.md
@@ -370,24 +370,26 @@ To integrate with Sourcegraph:
 
 You must be the administrator of the GitLab instance to configure GitLab with Sourcegraph.
 
-### Integrate with Extensions Marketplace
+### Integrate with the extension marketplace
 
-> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352) in GitLab 17.0 [with a flag](../../administration/feature_flags.md) named `web_ide_extensions_marketplace`. Disabled by default.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352) in GitLab 17.0 [with flags](../../administration/feature_flags.md) named `web_ide_oauth` and `web_ide_extensions_marketplace`. Disabled by default.
 > - [Enabled on GitLab.com](https://gitlab.com/gitlab-org/gitlab/-/issues/459028) in GitLab 17.0.
 
-The [Extensions Marketplace](../project/web_ide/index.md#extensions-marketplace) enables users to
-search and manage extensions for the Web IDE.
+FLAG:
+The availability of this feature is controlled by a feature flag.
+For more information, see the history.
 
-If the GitLab instance is configured to use a third-party service for the Extensions
-Marketplace, you must enable the marketplace in your user preferences.
+You can use the [extension marketplace](../project/web_ide/index.md#extension-marketplace)
+to search and manage extensions for the Web IDE.
+For third-party extensions, you must enable the marketplace in your user preferences.
 
-To enable the Extensions Marketplace for the Web IDE:
+To enable the extension marketplace for the Web IDE:
 
 1. On the left sidebar, select your avatar.
 1. Select **Preferences**.
-1. Find the **Integrations** section.
-1. Select the **Enable Extensions Marketplace** checkbox.
-1. Select **I understand** in the Third-Party Extensions Acknowledgement.
+1. Go to the **Integrations** section.
+1. Select the **Enable extension marketplace** checkbox.
+1. In the third-party extension acknowledgement, select **I understand**.
 1. Select **Save changes**.
 
 <!-- ## Troubleshooting
diff --git a/doc/user/project/web_ide/index.md b/doc/user/project/web_ide/index.md
index 597f85148b696e..beb7186448c246 100644
--- a/doc/user/project/web_ide/index.md
+++ b/doc/user/project/web_ide/index.md
@@ -203,20 +203,6 @@ To view any notification you might have missed:
 1. On the bottom status bar, on the right, select the bell icon (**{notifications}**) for a list of notifications.
 1. Select the notification you want to view.
 
-<!-- ## Privacy and data collection for extensions
-
-The Web IDE Extension Marketplace is based on Open VSX. Open VSX does not collect any
-data about you or your activities on the platform.
-
-However, the privacy and data collection practices of extensions available on Open VSX can vary.
-Some extensions might collect data to provide personalized recommendations or to improve the functionality.
-Other extensions might collect data for analytics or advertising purposes.
-
-To protect your privacy and data:
-
-- Carefully review the permissions requested by an extension before you install the extension.
-- Keep your extensions up to date to ensure that any security or privacy vulnerabilities are addressed promptly. -->
-
 ## Interactive web terminals
 
 DETAILS:
@@ -235,7 +221,7 @@ However, you can use a terminal to install dependencies and compile and debug co
 
 For more information, see [Remote development](../remote_development/index.md).
 
-## Extensions Marketplace
+## Extension marketplace
 
 DETAILS:
 **Status**: Beta
@@ -243,36 +229,39 @@ DETAILS:
 WARNING:
 This feature is in [Beta](../../../policy/experiment-beta-support.md#beta) and subject to change without notice.
 
-> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352) in GitLab 17.0 [with a flag](../../../administration/feature_flags.md) named `web_ide_extensions_marketplace`. Disabled by default.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352) in GitLab 17.0 [with flags](../../../administration/feature_flags.md) named `web_ide_oauth` and `web_ide_extensions_marketplace`. Disabled by default.
 > - [Enabled on GitLab.com](https://gitlab.com/gitlab-org/gitlab/-/issues/459028) in GitLab 17.0.
 
 FLAG:
-On self-managed GitLab, by default this feature is not available. To enable the feature, an administrator can [enable the feature flag](../../../administration/feature_flags.md) named `web_ide_oauth` **and** `web_ide_extensions_marketplace`. On GitLab.com and GitLab Dedicated, this feature is available.
+The availability of this feature is controlled by a feature flag.
+For more information, see the history.
 
-The Web IDE Extensions Marketplace enables users to download and run VSCode
-extensions that enhance the editing experience.
+Prerequisites:
 
-To search for and install extensions:
+- You must enable the extension marketplace in your [user preferences](../../profile/preferences.md#integrate-with-the-extension-marketplace).
 
-1. On the top menu bar, select **View > Extensions**,
-   or press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.
-1. Enter text to search for an extension (like `vim`).
-1. Select an extension to view information.
-1. To install the extensions, click **Install** in the extension information page.
+You can use the extension marketplace to download and run VS Code extensions in the Web IDE.
+
+The extension marketplace is preconfigured at the GitLab instance level
+and is hardcoded to [`https://open-vsx.org/`](https://open-vsx.org/).
+[Epic 11770](https://gitlab.com/groups/gitlab-org/-/epics/11770) proposes to change this behavior.
+
+### Install an extension
 
-To uninstall extensions:
+To install an extension in the Web IDE:
 
 1. On the top menu bar, select **View > Extensions**,
    or press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.
-1. You should see a list of **Installed** extensions. If not, on the menu
-   in the extensions sidebar, select **Views > Installed** and make sure
-   it is checked.
-1. Click on an extension to view its information.
-1. To uninstall the extension, click **Uninstall** in the extension information page.
-
-The marketplace is preconfigured at the GitLab instance level. For now, this is
-hardcoded to [`https://open-vsx.org/`](https://open-vsx.org/), but this will
-soon be configurable by GitLab administrators (See [this epic](https://gitlab.com/groups/gitlab-org/-/epics/11770)).
+1. In the search box, enter the extension name.
+1. Select the extension you want to install.
+1. Select **Install**.
+
+### Uninstall an extension
+
+To uninstall an extension in the Web IDE:
+
+1. From the list of installed extensions, select the extension you want to uninstall.
+1. Select **Uninstall**.
 
 ## Related topics
 
diff --git a/lib/gitlab/web_ide/extensions_marketplace.rb b/lib/gitlab/web_ide/extensions_marketplace.rb
index 903a2ecc00776a..36a8db999fefc5 100644
--- a/lib/gitlab/web_ide/extensions_marketplace.rb
+++ b/lib/gitlab/web_ide/extensions_marketplace.rb
@@ -46,12 +46,12 @@ def marketplace_home_url
         end
 
         def help_url
-          ::Gitlab::Routing.url_helpers.help_page_url('user/project/web_ide/index', anchor: 'extensions-marketplace')
+          ::Gitlab::Routing.url_helpers.help_page_url('user/project/web_ide/index', anchor: 'extension-marketplace')
         end
 
         def help_preferences_url
           ::Gitlab::Routing.url_helpers.help_page_url('user/profile/preferences',
-            anchor: 'integrate-with-extensions-marketplace')
+            anchor: 'integrate-with-the-extension-marketplace')
         end
 
         def user_preferences_url
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d03d413ca43038..2dd08c3d57ceb7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -38780,7 +38780,7 @@ msgstr ""
 msgid "PreferencesIntegrations|Third-party extensions are now available in the Web IDE. While each extension runs in a secure browser sandbox, %{boldStart}third-party extensions%{boldEnd} may have access to the contents of the files opened in the Web IDE, %{boldStart}including any personal data in those files%{boldEnd}, and may communicate with external servers."
 msgstr ""
 
-msgid "PreferencesIntegrations|Use %{extensions_marketplace_home} as the Extensions Marketplace for the Web IDE."
+msgid "PreferencesIntegrations|Uses %{extensions_marketplace_home} as the extension marketplace for the Web IDE."
 msgstr ""
 
 msgid "Preferences|%{link_start}List of keyboard shortcuts%{link_end}"
@@ -38843,15 +38843,15 @@ msgstr ""
 msgid "Preferences|Enable %{link_start}Code Suggestions%{link_end} for the following groups.%{br_tag}Only groups that have purchased the Code Suggestion add-on and have available seats are listed here.%{br_tag} If you were expecting to see a group and it is missing from the list, please contact the group owner."
 msgstr ""
 
-msgid "Preferences|Enable Extensions Marketplace"
-msgstr ""
-
 msgid "Preferences|Enable Gitpod integration"
 msgstr ""
 
 msgid "Preferences|Enable Zoekt code search"
 msgstr ""
 
+msgid "Preferences|Enable extension marketplace"
+msgstr ""
+
 msgid "Preferences|Enable follow users"
 msgstr ""
 
@@ -38864,9 +38864,6 @@ msgstr ""
 msgid "Preferences|Enable keyboard shortcuts"
 msgstr ""
 
-msgid "Preferences|Extensions Marketplace"
-msgstr ""
-
 msgid "Preferences|Failed to save preferences."
 msgstr ""
 
@@ -38945,6 +38942,9 @@ msgstr ""
 msgid "Preferences|Use relative times"
 msgstr ""
 
+msgid "Preferences|Web IDE"
+msgstr ""
+
 msgid "Preferences|When you type in a description or comment box, pressing %{kbdOpen}Enter%{kbdClose} in a list adds a new item below."
 msgstr ""
 
diff --git a/spec/helpers/preferences_helper_spec.rb b/spec/helpers/preferences_helper_spec.rb
index e6934d8b8989f9..5306b86d08f2e2 100644
--- a/spec/helpers/preferences_helper_spec.rb
+++ b/spec/helpers/preferences_helper_spec.rb
@@ -283,11 +283,11 @@ def stub_user(messages = {})
         allow(Gitlab::WebIde::ExtensionsMarketplace).to receive(:feature_enabled?).with(user: user).and_return(true)
       end
 
-      it 'includes Extensions Marketplace integration' do
+      it 'includes extension marketplace integration' do
         expect(helper.integration_views).to include(
           a_hash_including({
             name: 'extensions_marketplace',
-            message: 'Use %{linkStart}https://open-vsx.org%{linkEnd} as the Extensions Marketplace for the Web IDE.',
+            message: 'Uses %{linkStart}https://open-vsx.org%{linkEnd} as the extension marketplace for the Web IDE.',
             message_url: 'https://open-vsx.org'
           })
         )
diff --git a/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb b/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb
index fd3050be7bfb53..7c9ba0553a6033 100644
--- a/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb
+++ b/spec/lib/gitlab/web_ide/extensions_marketplace_spec.rb
@@ -42,13 +42,13 @@
   end
 
   describe '#help_url' do
-    it { expect(described_class.help_url).to match('/help/user/project/web_ide/index#extensions-marketplace') }
+    it { expect(described_class.help_url).to match('/help/user/project/web_ide/index#extension-marketplace') }
   end
 
   describe '#help_preferences_url' do
     it do
       expect(described_class.help_preferences_url).to match(
-        '/help/user/profile/preferences#integrate-with-extensions-marketplace'
+        '/help/user/profile/preferences#integrate-with-the-extension-marketplace'
       )
     end
   end
-- 
GitLab


From 2c894b52b4ed38c6a0f036b21eebd0fa347d62ac Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 7 May 2024 09:04:35 -0500
Subject: [PATCH 6/7] FE review updates

- Add helper in extensions_marketplace_warning_spec
- Move integrations anchor into Vue component
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/151352#note_1896173797
---
 .../components/profile_preferences.vue        |  6 ++++-
 app/views/profiles/preferences/show.html.haml |  2 --
 .../extensions_marketplace_warning_spec.js    | 27 +++++++++----------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
index 119e4efd82d1a1..f42ca4cf569d98 100644
--- a/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
+++ b/app/assets/javascripts/profile/preferences/components/profile_preferences.vue
@@ -134,7 +134,11 @@ export default {
     >
       <div class="settings-sticky-header">
         <div class="settings-sticky-header-inner">
-          <h4 class="gl-my-0" data-testid="profile-preferences-integrations-heading">
+          <h4
+            id="integrations"
+            class="gl-my-0"
+            data-testid="profile-preferences-integrations-heading"
+          >
             {{ $options.i18n.integrations }}
           </h4>
         </div>
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 61f63d5429ba39..a7a44db96cd6a4 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -187,6 +187,4 @@
       s_('Preferences|Enable follow users')
   = render_if_exists 'profiles/preferences/zoekt_settings', form: f
 
-  -# Anchor used for linking straight to integrations part
-  %span#integrations
   #js-profile-preferences-app{ data: data_attributes }
diff --git a/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js b/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js
index 507ffbba0f47c1..c037b406633caf 100644
--- a/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js
+++ b/spec/frontend/profile/preferences/components/extensions_marketplace_warning_spec.js
@@ -38,6 +38,11 @@ describe('profile/preferences/components/extensions_marketplace_warning', () =>
     await nextTick();
   };
 
+  const setValue = async (value) => {
+    wrapper.setProps({ value });
+    await nextTick();
+  };
+
   describe('when initializes with value: false', () => {
     beforeEach(() => {
       createComponent({ value: false });
@@ -49,9 +54,7 @@ describe('profile/preferences/components/extensions_marketplace_warning', () =>
 
     describe('when value changes to true', () => {
       beforeEach(async () => {
-        wrapper.setProps({ value: true });
-
-        await nextTick();
+        await setValue(true);
       });
 
       it('shows modal with props', () => {
@@ -95,13 +98,11 @@ describe('profile/preferences/components/extensions_marketplace_warning', () =>
         });
 
         it('opens modal again when value changes', async () => {
-          wrapper.setProps({ value: false });
-          await nextTick();
+          await setValue(false);
 
           expect(findModal().props('visible')).toBe(false);
 
-          wrapper.setProps({ value: true });
-          await nextTick();
+          await setValue(true);
 
           expect(findModal().props('visible')).toBe(true);
         });
@@ -119,13 +120,11 @@ describe('profile/preferences/components/extensions_marketplace_warning', () =>
         });
 
         it('does not open modal when value changes', async () => {
-          wrapper.setProps({ value: false });
-          await nextTick();
+          await setValue(false);
 
           expect(findModal().props('visible')).toBe(false);
 
-          wrapper.setProps({ value: true });
-          await nextTick();
+          await setValue(true);
 
           expect(findModal().props('visible')).toBe(false);
         });
@@ -143,13 +142,11 @@ describe('profile/preferences/components/extensions_marketplace_warning', () =>
     });
 
     it('does not open modal when value changes', async () => {
-      wrapper.setProps({ value: false });
-      await nextTick();
+      await setValue(false);
 
       expect(findModal().props('visible')).toBe(false);
 
-      wrapper.setProps({ value: true });
-      await nextTick();
+      await setValue(true);
 
       expect(findModal().props('visible')).toBe(false);
     });
-- 
GitLab


From f9e4a102acf74a472ce766f93d74d8daa99afcd0 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 7 May 2024 14:16:26 +0000
Subject: [PATCH 7/7] Doc update - fix first step in uninstall extension

---
 doc/user/project/web_ide/index.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/doc/user/project/web_ide/index.md b/doc/user/project/web_ide/index.md
index beb7186448c246..eb2f64332c09d3 100644
--- a/doc/user/project/web_ide/index.md
+++ b/doc/user/project/web_ide/index.md
@@ -260,6 +260,8 @@ To install an extension in the Web IDE:
 
 To uninstall an extension in the Web IDE:
 
+1. On the top menu bar, select **View > Extensions**,
+   or press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.
 1. From the list of installed extensions, select the extension you want to uninstall.
 1. Select **Uninstall**.
 
-- 
GitLab