Allow opening projects with VS Code

Adds the ability to open a project in VS Code via the "Clone"
button on the project details page.

app/assets/javascripts/clone_panel.js

@@ -18,6 +18,11 @@ export default function initClonePanel() {
       e.preventDefault();
       const $this = $(e.currentTarget);
       const url = $this.attr('href');
+      if (url && (url.startsWith('vscode://') || url.startsWith('xcode://'))) {
+        // Clone with "..." should open like a normal link
+        return;
+      }
+      e.preventDefault();
       const cloneType = $this.data('cloneType');
 
       $('.is-active', $cloneOptions).removeClass('is-active');

app/assets/stylesheets/framework/dropdowns.scss

@@ -497,7 +497,7 @@
   li {
     a,
     button,
-    .dropdown-item {
+    .dropdown-item:not(.open-with-link) {
       padding: 8px 40px;
       position: relative;
 

app/views/projects/buttons/_clone.html.haml

@@ -6,9 +6,9 @@
     %span.gl-mr-2.js-clone-dropdown-label
       = _('Clone')
     = sprite_icon("chevron-down", css_class: "icon")
-  %ul.p-3.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }
+  %ul.dropdown-menu.dropdown-menu-large.dropdown-menu-selectable.clone-options-dropdown.qa-clone-options{ class: dropdown_class }
     - if ssh_enabled?
-      %li
+      %li{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with SSH')
         .input-group
@@ -17,7 +17,7 @@
             = clipboard_button(target: '#ssh_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
             = render_if_exists 'projects/buttons/geo'
     - if http_enabled?
-      %li.pt-2
+      %li.pt-2{ class: 'gl-px-4!' }
         %label.label-bold
           = _('Clone with %{http_label}') % { http_label: gitlab_config.protocol.upcase }
         .input-group
@@ -25,4 +25,15 @@
           .input-group-append
             = clipboard_button(target: '#http_project_clone', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
             = render_if_exists 'projects/buttons/geo'
+      %li.divider.mt-2
+      %li.pt-2.gl-new-dropdown-item
+        %label.label-bold{ class: 'gl-px-4!' }
+          = _('Open in your IDE')
+        %a.dropdown-item.open-with-link{ href: 'vscode://vscode.git/clone?url=' + CGI.escape(project.http_url_to_repo) }
+          .gl-new-dropdown-item-text-wrapper
+            = _('Visual Studio Code')
+        - if show_xcode_link?(@project)
+          %a.dropdown-item.open-with-link{ href: xcode_uri_to_repo(@project) }
+            .gl-new-dropdown-item-text-wrapper
+              = _("Xcode")
     = render_if_exists 'projects/buttons/kerberos_clone_field'

app/views/projects/buttons/_xcode_link.html.haml

-%a.gl-button.btn.btn-default{ href: xcode_uri_to_repo(@project) }
-  = _("Open in Xcode")

app/views/projects/tree/_tree_header.html.haml

@@ -11,11 +11,6 @@
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
-
-    - if show_xcode_link?(@project)
-      .project-action-button.project-xcode<
-        = render "projects/buttons/xcode_link"
-
     = render 'projects/buttons/download', project: @project, ref: @ref
 
     .project-clone-holder.d-none.d-md-inline-block>

changelogs/unreleased/220957-Open-with-IDE.yml

+---
+title: Allow opening projects with VS Code
+merge_request: 49460
+author: Kev @KevSlashNull
+type: added

doc/user/project/repository/index.md

@@ -242,13 +242,32 @@ Learn how to [clone a repository through the command line](../../../gitlab-basic
 
 Alternatively, clone directly into a code editor as documented below.
 
-### Clone to Apple Xcode
+### Clone and open in Apple Xcode
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/45820) in GitLab 11.0.
 
 Projects that contain a `.xcodeproj` or `.xcworkspace` directory can now be cloned
-into Xcode using the new **Open in Xcode** button, located next to the Git URL
-used for cloning your project. The button is only shown on macOS.
+into Xcode on macOS. To do that:
+
+1. From the GitLab UI, go to the project's overview page.
+1. Click **Clone**.
+1. Select **Xcode**.
+
+The project will be cloned onto your computer in a folder of your choice and you'll
+be prompted to open in XCode.
+
+### Clone and open in Visual Studio Code
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/220957) in GitLab 13.8.
+
+All projects can be cloned into Visual Studio Code. To do that:
+
+1. From the GitLab UI, go to the project's overview page.
+1. Click **Clone**.
+1. Select **VS Code**
+
+You'll be prompted to select a folder to clone the project into. When VS Code has
+successfully cloned your project, it will open the folder.
 
 ## Download Source Code
 

locale/gitlab.pot

@@ -20862,10 +20862,10 @@ msgstr ""
 msgid "Open errors"
 msgstr ""
 
-msgid "Open in Xcode"
+msgid "Open in file view"
 msgstr ""
 
-msgid "Open in file view"
+msgid "Open in your IDE"
 msgstr ""
 
 msgid "Open issues"
@@ -32453,6 +32453,9 @@ msgstr ""
 msgid "Visit settings page"
 msgstr ""
 
+msgid "Visual Studio Code"
+msgstr ""
+
 msgid "VisualReviewApp|%{stepStart}Step 1%{stepEnd}. Copy the following script:"
 msgstr ""
 
@@ -33286,6 +33289,9 @@ msgstr ""
 msgid "Wrong extern UID provided. Make sure Auth0 is configured correctly."
 msgstr ""
 
+msgid "Xcode"
+msgstr ""
+
 msgid "YYYY-MM-DD"
 msgstr ""