Merge branch 'revert-b63c09ea' into '15.1'

Revert "Merge branch '1238-backport-versions-menu-151' into '15.1'"

See merge request gitlab-org/gitlab-docs!2931

13 files changed, 81 insertions, 196 deletions

diff --git a/commands/frontend.rb b/commands/frontend.rb
index 7f93d113..d8e662fd 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -28,8 +28,17 @@ run do |opts, args, cmd|
     ERROR
   end
 
-  puts 'Copying GitLab UI CSS sourcemaps...'
+  puts 'Creating icons.svg ...'
   root = File.expand_path('../', __dir__)
+  path = 'node_modules/@gitlab/svgs/dist/icons.svg'
+
+  if File.write('public/assets/images/icons.svg', File.read("#{root}/#{path}"))
+    puts 'Done!'
+  else
+    puts 'Failed to create icons.svg!'
+  end
+
+  puts 'Copying GitLab UI CSS sourcemaps...'
   gl_ui_src = 'node_modules/@gitlab/ui/dist'
   gl_ui_dest = 'public/frontend/shared'
 
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 5866f6b6..b7c988c0 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -277,8 +277,23 @@ ol {
     font-size: 1rem;
   }
 
+  .btn {
+    line-height: 1rem;
+    font-size: 0.875rem;
+  }
+
   .navbar-nav {
     margin-top: 0;
+
+    .dropdown-menu {
+      a {
+        border-bottom: 0;
+
+        &:hover {
+          border-bottom: 0;
+        }
+      }
+    }
   }
 
   /* Override Bootstrap theme color */
@@ -299,14 +314,14 @@ ol {
     color: $gds-indigo-100;
   }
 
-  .gl-dropdown-toggle.gl-button.btn-default,
-  .gl-dropdown-toggle.gl-button.btn-default:hover,
-  .gl-dropdown-toggle.gl-button.btn-default:focus {
+  .dropdown-toggle {
     background-color: $help-indigo-500;
-    color: $gds-white;
-    box-shadow: none;
     svg {
-      fill: $gds-white;
+      fill: $white;
+      margin-right: 0 !important;
+    }
+    &::after {
+      display: none;
     }
   }
 
@@ -484,7 +499,7 @@ ol {
 }
 
 .btn-cta {
-  background-color: $header-free-trial-button-color !important;
+  background-color: $header-free-trial-button-color;
 }
 
 h2[id]::before,
diff --git a/content/frontend/default/components/versions_menu.vue b/content/frontend/default/components/versions_menu.vue
deleted file mode 100644
index 04d2b982..00000000
--- a/content/frontend/default/components/versions_menu.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
-import { getVersions } from '../../services/fetch_versions';
-import { isGitLabHosted } from '../environment';
-
-export default {
-  components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
-  },
-  data() {
-    return {
-      versions: {},
-      activeVersion: '',
-    };
-  },
-  async created() {
-    // Only build this menu if this is a GitLab-hosted copy of the site.
-    // Self-hosted Docs will only contain a single version.
-    if (isGitLabHosted()) {
-      try {
-        this.versions = await getVersions();
-        this.activeVersion = this.getActiveVersion(this.versions);
-      } catch (err) {
-        console.error(`Failed to fetch versions.json: ${err}`); // eslint-disable-line no-console
-      }
-    }
-  },
-  methods: {
-    getVersionPath(versionNumber) {
-      let path = window.location.pathname;
-      if (versionNumber) {
-        path = `/${versionNumber}${path}`;
-      }
-      return path;
-    },
-    getActiveVersion(versions) {
-      let activeVersion = versions.next;
-
-      // Check if the first item in the URL path is a valid version.
-      // If so, that should be the active menu item.
-      const versionPath = window.location.pathname.split('/')[1];
-      if (Object.values(this.versions).includes(versionPath)) {
-        activeVersion = versionPath;
-      }
-      return activeVersion;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown
-    v-if="versions.next"
-    :text="activeVersion"
-    class="gl-mb-4 gl-md-mb-0 gl-md-mr-5 gl-md-ml-3 gl-display-flex"
-    data-testid="versions-menu"
-  >
-    <gl-dropdown-item :href="getVersionPath()">
-      <span data-testid="next-version">{{ versions.next }}</span> (not yet released)
-    </gl-dropdown-item>
-    <gl-dropdown-divider />
-
-    <gl-dropdown-item :href="getVersionPath(versions.current)">
-      {{ versions.current }} (recently released)
-    </gl-dropdown-item>
-    <gl-dropdown-item v-for="v in versions.last_minor" :key="v" :href="getVersionPath(v)">
-      {{ v }}
-    </gl-dropdown-item>
-    <gl-dropdown-divider />
-
-    <gl-dropdown-item v-for="v in versions.last_major" :key="v" :href="getVersionPath(v)">
-      {{ v }}
-    </gl-dropdown-item>
-    <gl-dropdown-divider />
-
-    <gl-dropdown-item href="/archives">Archives</gl-dropdown-item>
-  </gl-dropdown>
-</template>
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index 119842e8..db3786f2 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import NavigationToggle from './components/navigation_toggle.vue';
 import VersionBanner from './components/version_banner.vue';
 import { setupTableOfContents } from './setup_table_of_contents';
-import VersionsMenu from './components/versions_menu.vue';
 
 function fixScrollPosition() {
   if (!window.location.hash || !document.querySelector(window.location.hash)) return;
@@ -18,10 +17,6 @@ function fixScrollPosition() {
 
 document.addEventListener('DOMContentLoaded', () => {
   const versionBanner = document.querySelector('#js-version-banner');
-  if (!versionBanner) {
-    return;
-  }
-
   const isOutdated = versionBanner.hasAttribute('data-is-outdated');
   const { latestVersionUrl, archivesUrl } = versionBanner.dataset;
 
@@ -63,15 +58,3 @@ document.addEventListener('DOMContentLoaded', () => {
 
   setupTableOfContents();
 });
-
-document.addEventListener('DOMContentLoaded', () => {
-  return new Vue({
-    el: '.js-versions-menu',
-    components: {
-      VersionsMenu,
-    },
-    render(createElement) {
-      return createElement(VersionsMenu);
-    },
-  });
-});
diff --git a/content/frontend/default/environment.js b/content/frontend/default/environment.js
deleted file mode 100644
index 05e8ced5..00000000
--- a/content/frontend/default/environment.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Utilities for determining site environment.
- */
-
-export const GlHosts = [
-  {
-    environment: 'production',
-    host: 'docs.gitlab.com',
-  },
-  {
-    environment: 'review',
-    host: '35.193.151.162.nip.io',
-  },
-  {
-    environment: 'local',
-    host: 'localhost',
-  },
-];
-
-export function isGitLabHosted() {
-  return GlHosts.some((e) => window.location.host.includes(e.host));
-}
diff --git a/content/frontend/services/fetch_versions.js b/content/frontend/services/fetch_versions.js
deleted file mode 100644
index e65f396c..00000000
--- a/content/frontend/services/fetch_versions.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export function getVersions() {
-  return fetch('https://docs.gitlab.com/versions.json')
-    .then((response) => response.json())
-    .then((data) => {
-      return data[0];
-    })
-    .catch((error) => console.error(error)); // eslint-disable-line no-console
-}
diff --git a/layouts/cta.html b/layouts/cta.html
index 29d6a920..885378b6 100644
--- a/layouts/cta.html
+++ b/layouts/cta.html
@@ -1,3 +1,3 @@
-<a class="gl-button btn btn-cta text-white gl-shadow-none! gl-md-pr-3" href="https://about.gitlab.com/free-trial/?glm_source=docs.gitlab.com&glm_content=navigation-cta-docs" target="_blank" rel="noopener noreferrer" role="button">
+<a class="btn btn-danger btn-cta text-white" href="https://about.gitlab.com/free-trial/?glm_source=docs.gitlab.com&glm_content=navigation-cta-docs" target="_blank" rel="noopener noreferrer" role="button">
   Get free trial
 </a>
diff --git a/layouts/header.html b/layouts/header.html
index e521a008..f77ff133 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -22,9 +22,36 @@
       <a class="nav-link" href="https://about.gitlab.com/releases/categories/releases/" target="_blank">What's new?</a>
       </li>
     </ul>
-    <div class="js-versions-menu"></div>
-    <ul class="navbar-nav gl-mb-3 gl-md-mb-0 gl-md-pr-3">
-      <li class="nav-item">
+    <ul class="navbar-nav mb-0">
+      <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 %><%= icon('chevron-down') %>
+        </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>
+      </li>
+      <li class="nav-item p-2">
         <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
           <%= render '/cta_omnibus.*' %>
         <% else %>
diff --git a/layouts/home.html b/layouts/home.html
index 3b79e055..6c5bb728 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -15,7 +15,6 @@
     <%= render '/schema-microdata.*' %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
-    <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
     <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
   </body>
diff --git a/package.json b/package.json
index ad6e223d..68ba7040 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "@vue/vue2-jest": "^28.0.0",
     "babel-jest": "^28.1.1",
     "eslint": "^8.17.0",
-    "flush-promises": "^1.0.2",
     "glob": "^8.0.3",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
@@ -45,7 +44,7 @@
     "@gitlab/svgs": "^2.18.0",
     "@gitlab/ui": "^41.5.0",
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-url": "^7.0.0",
+    "@rollup/plugin-image": "^2.1.1",
     "algoliasearch": "^4.13.1",
     "bootstrap": "^4.6.1",
     "compare-versions": "^4.1.3",
diff --git a/rollup.config.js b/rollup.config.js
index 4fd51b49..8836b1e2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,7 +7,7 @@ const commonjs = require('@rollup/plugin-commonjs');
 const { babel } = require('@rollup/plugin-babel');
 const importResolver = require('rollup-plugin-import-resolver');
 const css = require('rollup-plugin-import-css');
-const url = require('@rollup/plugin-url');
+const image = require('@rollup/plugin-image');
 const vue = require('rollup-plugin-vue');
 
 function mapDirectory(file) {
@@ -27,11 +27,7 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({
       requireReturnsDefault: 'preferred',
     }),
     vue(),
-    url({
-      destDir: 'public/assets/images',
-      publicPath: '/assets/images/',
-      fileName: 'icons.svg',
-    }),
+    image(),
     inject({
       exclude: 'node_modules/**',
     }),
diff --git a/spec/frontend/default/components/versions_menu_spec.js b/spec/frontend/default/components/versions_menu_spec.js
deleted file mode 100644
index e7cadd20..00000000
--- a/spec/frontend/default/components/versions_menu_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { mount } from '@vue/test-utils';
-import flushPromises from 'flush-promises';
-import VersionsMenu from '../../../../content/frontend/default/components/versions_menu.vue';
-import { getVersions } from '../../../../content/frontend/services/fetch_versions';
-
-jest.mock('../../../../content/frontend/services/fetch_versions');
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-describe('component: Versions menu', () => {
-  it('Fetches versions.json and displays current version', async () => {
-    const mockNextVersion = '15.2';
-    getVersions.mockResolvedValueOnce({ next: mockNextVersion });
-    const wrapper = mount(VersionsMenu);
-
-    await flushPromises();
-    expect(getVersions).toHaveBeenCalledTimes(1);
-
-    const nextVersion = wrapper.find('[data-testid="next-version"]').element.textContent;
-    expect(nextVersion).toEqual(mockNextVersion);
-  });
-});
diff --git a/yarn.lock b/yarn.lock
index f6f8152a..b150a027 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1471,6 +1471,14 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-image@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.1.1.tgz#898d6b59ac0025d7971ef45640ab330cb0663b0c"
+  integrity sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
+
 "@rollup/plugin-inject@^4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.4.tgz#fbeee66e9a700782c4f65c8b0edbafe58678fbc2"
@@ -1507,15 +1515,6 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
-"@rollup/plugin-url@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-url/-/plugin-url-7.0.0.tgz#571f6fd51c3d0e00f7404c67efdb93492bfac7f8"
-  integrity sha512-cIWcEObrmEPAU8q8NluGWlCPlQDuoSKvkyI3eOFO4fx6W02mLNj4ZEiUT0X2mKMIvQzoWL1feEK9d1yr1ICgrw==
-  dependencies:
-    "@rollup/pluginutils" "^4.2.1"
-    make-dir "^3.1.0"
-    mime "^2.4.6"
-
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -1525,7 +1524,7 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.2.0", "@rollup/pluginutils@^4.2.1":
+"@rollup/pluginutils@^4.2.0":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -3257,11 +3256,6 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-flush-promises@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flush-promises/-/flush-promises-1.0.2.tgz#4948fd58f15281fed79cbafc86293d5bb09b2ced"
-  integrity sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==
-
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -4632,7 +4626,7 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.1.0:
+make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -4770,11 +4764,6 @@ mime@^1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.4.6:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
-  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -4785,6 +4774,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"