Add latest changes from gitlab-org/gitlab@master

16 files changed, 140 insertions, 155 deletions

diff --git a/app/assets/javascripts/google_cloud/aiml/panel.vue b/app/assets/javascripts/google_cloud/aiml/panel.vue
new file mode 100644
index 00000000000..f591c47ac40
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/aiml/panel.vue
@@ -0,0 +1,63 @@
+<script>
+import GoogleCloudMenu from '../components/google_cloud_menu.vue';
+import IncubationBanner from '../components/incubation_banner.vue';
+import ServiceTable from './service_table.vue';
+
+export default {
+  components: {
+    IncubationBanner,
+    GoogleCloudMenu,
+    ServiceTable,
+  },
+  props: {
+    configurationUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsUrl: {
+      type: String,
+      required: true,
+    },
+    databasesUrl: {
+      type: String,
+      required: true,
+    },
+    aimlUrl: {
+      type: String,
+      required: true,
+    },
+    visionAiUrl: {
+      type: String,
+      required: true,
+    },
+    translationAiUrl: {
+      type: String,
+      required: true,
+    },
+    languageAiUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-banner />
+
+    <google-cloud-menu
+      active="aiml"
+      :configuration-url="configurationUrl"
+      :deployments-url="deploymentsUrl"
+      :databases-url="databasesUrl"
+      :aiml-url="aimlUrl"
+    />
+
+    <service-table
+      :language-ai-url="languageAiUrl"
+      :translation-ai-url="translationAiUrl"
+      :vision-ai-url="visionAiUrl"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue b/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
index d6b7c702b54..69b9c6133f1 100644
--- a/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
+++ b/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
@@ -4,11 +4,13 @@ import { s__ } from '~/locale';
 const CONFIGURATION_KEY = 'configuration';
 const DEPLOYMENTS_KEY = 'deployments';
 const DATABASES_KEY = 'databases';
+const AIML_KEY = 'aiml';
 
 const i18n = {
   configuration: { title: s__('CloudSeed|Configuration') },
   deployments: { title: s__('CloudSeed|Deployments') },
   databases: { title: s__('CloudSeed|Databases') },
+  aiml: { title: s__('CloudSeed|AI / ML') },
 };
 
 export default {
@@ -29,6 +31,11 @@ export default {
       type: String,
       required: true,
     },
+    aimlUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     isConfigurationActive() {
@@ -40,6 +47,9 @@ export default {
     isDatabasesActive() {
       return this.active === DATABASES_KEY;
     },
+    isAimlActive() {
+      return this.active === AIML_KEY;
+    },
   },
   i18n,
 };
@@ -80,6 +90,17 @@ export default {
           {{ $options.i18n.databases.title }}
         </a>
       </li>
+      <li role="presentation" class="nav-item">
+        <a
+          data-testid="aimlLink"
+          role="tab"
+          :href="aimlUrl"
+          class="nav-link gl-tab-nav-item hidden"
+          :class="{ 'gl-tab-nav-item-active': isAimlActive }"
+        >
+          {{ $options.i18n.aiml.title }}
+        </a>
+      </li>
     </ul>
   </div>
 </template>
diff --git a/app/assets/javascripts/init_diff_stats_dropdown.js b/app/assets/javascripts/init_diff_stats_dropdown.js
index 82350a3987e..d48741c794e 100644
--- a/app/assets/javascripts/init_diff_stats_dropdown.js
+++ b/app/assets/javascripts/init_diff_stats_dropdown.js
@@ -1,20 +1,7 @@
 import Vue from 'vue';
 import DiffStatsDropdown from '~/vue_shared/components/diff_stats_dropdown.vue';
-import { stickyMonitor } from './lib/utils/sticky';
-
-export const initDiffStatsDropdown = (stickyTop) => {
-  if (stickyTop) {
-    // We spend quite a bit of effort in our CSS to set the correct padding-top on the
-    // layout page, so we re-use the padding set there to determine at what height our
-    // element should be sticky
-    const pageLayout = document.querySelector('.layout-page');
-    const pageLayoutTopOffset = pageLayout
-      ? parseFloat(window.getComputedStyle(pageLayout).getPropertyValue('padding-top') || 0)
-      : 0;
-
-    stickyMonitor(document.querySelector('.js-diff-files-changed'), pageLayoutTopOffset, false);
-  }
 
+export const initDiffStatsDropdown = () => {
   const el = document.querySelector('.js-diff-stats-dropdown');
 
   if (!el) {
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
deleted file mode 100644
index a6d53358cb8..00000000000
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ /dev/null
@@ -1,60 +0,0 @@
-export const createPlaceholder = () => {
-  const placeholder = document.createElement('div');
-  placeholder.classList.add('sticky-placeholder');
-
-  return placeholder;
-};
-
-export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
-  const top = Math.floor(el.offsetTop - scrollY);
-
-  if (top <= stickyTop && !el.classList.contains('is-stuck')) {
-    const placeholder = insertPlaceholder ? createPlaceholder() : null;
-    const heightBefore = el.offsetHeight;
-
-    el.classList.add('is-stuck');
-
-    if (insertPlaceholder) {
-      el.parentNode.insertBefore(placeholder, el.nextElementSibling);
-
-      placeholder.style.height = `${heightBefore - el.offsetHeight}px`;
-    }
-  } else if (top > stickyTop && el.classList.contains('is-stuck')) {
-    el.classList.remove('is-stuck');
-
-    if (
-      insertPlaceholder &&
-      el.nextElementSibling &&
-      el.nextElementSibling.classList.contains('sticky-placeholder')
-    ) {
-      el.nextElementSibling.remove();
-    }
-  }
-};
-
-/**
- * Create a listener that will toggle a 'is-stuck' class, based on the current scroll position.
- *
- * - If the current environment does not support `position: sticky`, do nothing.
- *
- * @param {HTMLElement} el The `position: sticky` element.
- * @param {Number} stickyTop Used to determine when an element is stuck.
- * @param {Boolean} insertPlaceholder Should a placeholder element be created when element is stuck?
- */
-export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
-  if (!el) return;
-
-  if (
-    typeof CSS === 'undefined' ||
-    !CSS.supports('(position: -webkit-sticky) or (position: sticky)')
-  )
-    return;
-
-  document.addEventListener(
-    'scroll',
-    () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder),
-    {
-      passive: true,
-    },
-  );
-};
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index eb25879205f..cef224d83e2 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -83,18 +83,6 @@ function scrollToContainer(container) {
   }
 }
 
-function computeTopOffset(tabs) {
-  const navbar = document.querySelector('.navbar-gitlab');
-  const peek = document.getElementById('js-peek');
-  let stickyTop;
-
-  stickyTop = navbar ? navbar.offsetHeight : 0;
-  stickyTop = peek ? stickyTop + peek.offsetHeight : stickyTop;
-  stickyTop = tabs ? stickyTop + tabs.offsetHeight : stickyTop;
-
-  return stickyTop;
-}
-
 function mountPipelines() {
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
   const { mrWidgetData } = gl;
@@ -145,11 +133,11 @@ function destroyPipelines(app) {
   return null;
 }
 
-function loadDiffs({ url, sticky, tabs }) {
+function loadDiffs({ url, tabs }) {
   return axios.get(url).then(({ data }) => {
     const $container = $('#diffs');
     $container.html(data.html);
-    initDiffStatsDropdown(sticky);
+    initDiffStatsDropdown();
 
     localTimeAgo(document.querySelectorAll('#diffs .js-timeago'));
     syntaxHighlight($('#diffs .js-syntax-highlight'));
@@ -537,7 +525,6 @@ export default class MergeRequestTabs {
 
     loadDiffs({
       url: diffUrl,
-      sticky: computeTopOffset(this.mergeRequestTabs),
       tabs: this,
     })
       .then(() => {
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index 9a47a720709..c9f5895c7a3 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -18,7 +18,7 @@ import '~/sourcegraph/load';
 import DiffStats from '~/diffs/components/diff_stats.vue';
 import { initReportAbuse } from '~/projects/report_abuse';
 
-initDiffStatsDropdown(true);
+initDiffStatsDropdown();
 new ZenMode();
 new ShortcutsNavigation();
 
diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js
index 5bcdd34e258..328b5596e1a 100644
--- a/app/assets/javascripts/pages/projects/compare/show/index.js
+++ b/app/assets/javascripts/pages/projects/compare/show/index.js
@@ -7,7 +7,7 @@ import syntaxHighlight from '~/syntax_highlight';
 initCompareSelector();
 
 new Diff(); // eslint-disable-line no-new
-initDiffStatsDropdown(true);
+initDiffStatsDropdown();
 GpgBadges.fetch();
 
 syntaxHighlight([document.querySelector('.files')]);
diff --git a/app/assets/javascripts/pages/projects/wikis/diff/index.js b/app/assets/javascripts/pages/projects/wikis/diff/index.js
index 73440db761f..067ffb3dca9 100644
--- a/app/assets/javascripts/pages/projects/wikis/diff/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/diff/index.js
@@ -1,3 +1,7 @@
+import syntaxHighlight from '~/syntax_highlight';
 import { initDiffStatsDropdown } from '~/init_diff_stats_dropdown';
+import Diff from '~/diff';
 
+new Diff(); // eslint-disable-line no-new
 initDiffStatsDropdown();
+syntaxHighlight([document.querySelector('.files')]);
diff --git a/app/assets/javascripts/profile/components/profile_tabs.vue b/app/assets/javascripts/profile/components/profile_tabs.vue
index 25b94d7dc7f..8e52a98803d 100644
--- a/app/assets/javascripts/profile/components/profile_tabs.vue
+++ b/app/assets/javascripts/profile/components/profile_tabs.vue
@@ -96,7 +96,7 @@ export default {
       :is="component"
       v-for="{ key, component } in $options.tabs"
       :key="key"
-      class="container-fluid container-limited"
+      class="container-fluid container-limited gl-text-left"
       :personal-projects="personalProjects"
       :personal-projects-loading="personalProjectsLoading"
     />
diff --git a/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue b/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
index 56e6399a1b7..f62bfb551df 100644
--- a/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
@@ -147,13 +147,5 @@ export default {
         </template>
       </gl-sprintf>
     </span>
-
-    <div
-      class="diff-stats-additions-deletions-collapsed gl-float-right gl-display-none"
-      data-testid="diff-stats-additions-deletions-collapsed"
-    >
-      <span class="gl-text-green-600 gl-font-weight-bold">+{{ added }}</span>
-      <span class="gl-text-red-500 gl-font-weight-bold">-{{ deleted }}</span>
-    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue
index 64ce4b66213..11aa7b91745 100644
--- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue
+++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue
@@ -21,7 +21,10 @@ export default {
      *   openIssuesCount: number;
      *   permissions: {
      *     projectAccess: { accessLevel: 50 };
-     *   }[];
+     *   };
+     *   descriptionHtml: string;
+     *   updatedAt: string;
+     * }[]
      */
     projects: {
       type: Array,
diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
index 714ffd60c25..266cce29e50 100644
--- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
@@ -17,6 +17,8 @@ import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.
 import { __ } from '~/locale';
 import { numberToMetricPrefix } from '~/lib/utils/number_utils';
 import { truncate } from '~/lib/utils/text_utility';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 const MAX_TOPICS_TO_SHOW = 3;
 const MAX_TOPIC_TITLE_LENGTH = 15;
@@ -30,6 +32,10 @@ export default {
     topics: __('Topics'),
     topicsPopoverTargetText: __('+ %{count} more'),
     moreTopics: __('More topics'),
+    updated: __('Updated'),
+  },
+  safeHtmlConfig: {
+    ADD_TAGS: ['gl-emoji'],
   },
   components: {
     GlAvatarLabeled,
@@ -39,9 +45,11 @@ export default {
     GlBadge,
     GlPopover,
     GlSprintf,
+    TimeAgoTooltip,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml,
   },
   props: {
     /**
@@ -62,6 +70,9 @@ export default {
      *   permissions: {
      *     projectAccess: { accessLevel: 50 };
      *   };
+     *   descriptionHtml: string;
+     *   updatedAt: string;
+     * }
      */
     project: {
       type: Object,
@@ -138,7 +149,7 @@ export default {
 </script>
 
 <template>
-  <li class="gl-py-5 gl-md-display-flex gl-align-items-center gl-border-b">
+  <li class="projects-list-item gl-py-5 gl-md-display-flex gl-align-items-center gl-border-b">
     <gl-avatar-labeled
       class="gl-flex-grow-1"
       :entity-id="project.id"
@@ -158,6 +169,12 @@ export default {
           accessLevelLabel
         }}</user-access-role-badge>
       </template>
+      <div
+        v-if="project.descriptionHtml"
+        v-safe-html:[$options.safeHtmlConfig]="project.descriptionHtml"
+        class="gl-font-sm gl-overflow-hidden gl-line-height-20 description"
+        data-testid="project-description"
+      ></div>
       <div v-if="hasTopics" class="gl-mt-3" data-testid="project-topics">
         <div
           class="gl-w-full gl-display-inline-flex gl-flex-wrap gl-font-base gl-font-weight-normal gl-align-items-center gl-mx-n2 gl-my-n2"
@@ -197,7 +214,7 @@ export default {
       </div>
     </gl-avatar-labeled>
     <div
-      class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-mt-0"
+      class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-pl-10 gl-md-pl-0 gl-md-mt-0"
     >
       <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
         <gl-badge v-if="project.archived" variant="warning">{{ $options.i18n.archived }}</gl-badge>
@@ -231,6 +248,10 @@ export default {
           <span>{{ numberToMetricPrefix(project.openIssuesCount) }}</span>
         </gl-link>
       </div>
+      <div class="gl-font-sm gl-white-space-nowrap gl-text-secondary gl-mt-3">
+        <span>{{ $options.i18n.updated }}</span>
+        <time-ago-tooltip :time="project.updatedAt" />
+      </div>
     </div>
   </li>
 </template>
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 54a4769f66d..3885863999b 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -51,12 +51,11 @@
         pointer-events: none;
       }
 
-      &.is-commit {
-        top: calc(#{$calc-application-header-height} + #{$commit-stat-summary-height});
-      }
-
-      &.is-compare {
-        top: calc(#{$calc-application-header-height} + #{$compare-branches-sticky-header-height});
+      &.is-commit,
+      &.is-compare,
+      &.is-wiki {
+        top: calc(#{$calc-application-header-height});
+        border-top: 0;
       }
     }
 
@@ -682,40 +681,6 @@ table.code {
   }
 }
 
-.diff-files-changed {
-  background-color: $body-bg;
-
-  .inline-parallel-buttons {
-    @include gl-relative;
-    z-index: 1;
-  }
-
-  @include media-breakpoint-up(sm) {
-    @include gl-sticky;
-    top: $calc-application-header-height;
-    z-index: 200;
-
-    &.is-stuck {
-      @include gl-py-0;
-      border-top: 1px solid $white-dark;
-      border-bottom: 1px solid $white-dark;
-
-      .diff-stats-additions-deletions-expanded,
-      .inline-parallel-buttons {
-        @include gl-display-none;
-      }
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    &.is-stuck {
-      .diff-stats-additions-deletions-collapsed {
-        @include gl-display-block;
-      }
-    }
-  }
-}
-
 .note-container {
   background-color: $gray-light;
   border-top: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index dc6a5c5479c..3dd6a435a75 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -739,7 +739,6 @@ $calendar-activity-colors: (
 */
 $commit-max-width-marker-color: rgba(0, 0, 0, 0);
 $commit-message-text-area-bg: rgba(0, 0, 0, 0);
-$commit-stat-summary-height: 32px;
 
 /*
 * Files
@@ -916,11 +915,6 @@ Merge requests
 $mr-tabs-height: 48px;
 
 /*
-Compare Branches
-*/
-$compare-branches-sticky-header-height: 32px;
-
-/*
 Board Swimlanes
 */
 $board-swimlanes-headers-height: 64px;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index e6c7e265cdb..ff1987f35b3 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -654,3 +654,17 @@
     }
   }
 }
+
+.projects-list-item {
+  .description {
+    max-height: $gl-spacing-scale-8;
+
+    p {
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+      display: -webkit-box;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/test_environment.scss b/app/assets/stylesheets/test_environment.scss
index e9ba41f9bb7..38fe2795ff4 100644
--- a/app/assets/stylesheets/test_environment.scss
+++ b/app/assets/stylesheets/test_environment.scss
@@ -1,9 +1,3 @@
-// Disable sticky changes bar for tests
-.diff-files-changed {
-  position: relative !important;
-  top: 0 !important;
-}
-
 // Un-hide inputs for @gitlab/ui custom checkboxes and radios so Capybara can target them
 .custom-control-input {
   z-index: 500;