feat(versions): add version dropdown667

6 files changed, 28 insertions, 51 deletions

diff --git a/content/frontend/404/components/error_message.vue b/content/frontend/404/components/error_message.vue
index baf2f0de..7524bd30 100644
--- a/content/frontend/404/components/error_message.vue
+++ b/content/frontend/404/components/error_message.vue
@@ -5,12 +5,12 @@ export default {
   components: {
     GlLink,
   },
-  inject: {
-    archivesPath: {
-      type: String,
-      default: '',
+    inject: {
+      archivesPath: {
+        type: String,
+        default: '',
+      },
     },
-  },
   props: {
     isProduction: {
       type: Boolean,
diff --git a/content/frontend/versions/components/versions_dropdown.vue b/content/frontend/versions/components/versions_dropdown.vue
index 675af088..1e79e6be 100644
--- a/content/frontend/versions/components/versions_dropdown.vue
+++ b/content/frontend/versions/components/versions_dropdown.vue
@@ -1,5 +1,6 @@
 <script>
 import GlDropdown from '@gitlab/ui/dist/components/base/dropdown/dropdown';
+import GlDropdownDivider from '@gitlab/ui/dist/components/base/dropdown/dropdown_divider';
 import GlDropdownItem from '@gitlab/ui/dist/components/base/dropdown/dropdown_item';
 import GlLink from '@gitlab/ui/dist/components/base/link/link';
 
@@ -9,8 +10,15 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlDropdownDivider,
     GlLink
   },
+  inject: {
+    identifier: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       versions: [],
@@ -35,8 +43,10 @@ export default {
 
 <template>
   <div class="d-flex justify-content-center">
-    <gl-dropdown text="Some dropdown">
-      <gl-dropdown-item v-for="version in versions" :key="version"><gl-link :href="version">{{ version }}</gl-link></gl-dropdown-item>
+    <gl-dropdown text="Versions" toggle-class="text-white">
+      <gl-dropdown-item v-for="version in versions.slice(0,5)" :key="version"><gl-link :href="version">{{ version }}</gl-link></gl-dropdown-item>
+      <gl-dropdown-divider />
+      <gl-dropdown-item><gl-link href="/archives/">Archives</gl-link></gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>
diff --git a/content/frontend/versions/versions.js b/content/frontend/versions/versions.js
index ef2043b6..6d14249e 100644
--- a/content/frontend/versions/versions.js
+++ b/content/frontend/versions/versions.js
@@ -2,13 +2,21 @@ import Vue from 'vue';
 import VersionsDropdown from './components/versions_dropdown.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
+  const { identifier } =
+    document.getElementById('versions-dropdowns').dataset;
+
+
   return new Vue({
     el: '#versions-dropdowns',
     components: {
       VersionsDropdown,
     },
     render(createElement) {
-      return createElement(VersionsDropdown, {});
+      return createElement(VersionsDropdown, {
+        provide: {
+          identifier,
+        }
+      });
     },
   });
 });
diff --git a/layouts/header.html b/layouts/header.html
index e3512794..ee582d59 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -21,34 +21,8 @@
       </li>
     </ul>
     <ul class="navbar-nav mb-0">
-      <div id="versions-dropdowns"></div>
       <li class="nav-item p-2 dropdown">
-        <button class="btn dropdown-toggle text-white" type="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <%= version_dropdown_title %>
-        </button>
-        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-          <a class="dropdown-item" <%= active_dropdown(ENV['CI_DEFAULT_BRANCH']) %> href='<%= @item.identifier.without_ext + '.html' %>' class="versions-tooltip"><%= dotcom %>
-            <i class="fa fa-question-circle-o" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Latest pre-release version of GitLab, with features available or about to become available on GitLab.com. For self-managed GitLab installations, select your version number as listed at your GitLab instance's /help URL."></i>
-          </a>
-          <% if display_previous_versions? %>
-          <!-- Start of online versions -->
-          <div class="dropdown-divider"></div>
-          <% data_versions[:online].each do |version| %>
-            <%= render '/partials/versions_list.*', version: version %>
-          <% end %>
-          <!-- End of online versions -->
-
-          <!-- Start of last major versions -->
-          <div class="dropdown-divider"></div>
-          <% data_versions[:previous_majors].each do |version| %>
-            <%= render '/partials/versions_list.*', version: version %>
-          <% end %>
-          <!-- End of last major versions -->
-
-          <% end %>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" <%= active_dropdown('archives') %> href='/archives/'>Archives</a>
-        </div>
+        <div data-identifier="<%= @item.identifier.without_ext %>" id="versions-dropdowns"></div>
       </li>
       <li class="nav-item p-2">
         <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
diff --git a/layouts/home.html b/layouts/home.html
index d5aefa52..f2005b27 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -14,6 +14,7 @@
       <%= render '/analytics.*' %>
     <% end %>
     <%= render '/schema-microdata.*' %>
+    <script src="<%= @items['/frontend/versions/versions.*'].path %>"></script>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/frontend/home/index.*'].path %>"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
diff --git a/layouts/partials/versions_list.html b/layouts/partials/versions_list.html
deleted file mode 100644
index d35023e7..00000000
--- a/layouts/partials/versions_list.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-     If we are on the archives page, the link here is hardcoded to always
-     point to `/archives/`. If you visit https://docs.gitlab.com/archives/
-     and select a version from the dropdown, that version's archives page
-     will be shown. We want to always show the latest archives page as it
-     contains all current versions and offline archives.
--->
-<% if archives? %>
-  <a class="dropdown-item" href='/archives/'>
-    <%= version %>
-  </a>
-<% else %>
-  <a class="dropdown-item" <%= active_dropdown(version) %> href='/<%= version %><%= @item.identifier.without_ext + '.html' %>'>
-    <%= version %>
-  </a>
-<% end %>