Add latest changes from gitlab-org/gitlab@master

1 files changed, 63 insertions, 32 deletions

diff --git a/app/assets/javascripts/code_navigation/components/popover.vue b/app/assets/javascripts/code_navigation/components/popover.vue
index 4cc5a5cd6a2..b7fa3242fbf 100644
--- a/app/assets/javascripts/code_navigation/components/popover.vue
+++ b/app/assets/javascripts/code_navigation/components/popover.vue
@@ -1,10 +1,14 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTabs, GlTab, GlLink, GlBadge } from '@gitlab/ui';
 import DocLine from './doc_line.vue';
 
 export default {
   components: {
     GlButton,
+    GlTabs,
+    GlTab,
+    GlLink,
+    GlBadge,
     DocLine,
   },
   props: {
@@ -54,6 +58,9 @@ export default {
     isDefinitionCurrentBlob() {
       return this.data.definition_path.indexOf(this.blobPath) === 0;
     },
+    references() {
+      return this.data.references || [];
+    },
   },
   watch: {
     position: {
@@ -82,37 +89,61 @@ export default {
     class="popover code-navigation-popover popover-font-size-normal gl-popover bs-popover-bottom show"
   >
     <div :style="{ left: `${offsetLeft}px` }" class="arrow"></div>
-    <div class="overflow-auto code-navigation-popover-container">
-      <div
-        v-for="(hover, index) in data.hover"
-        :key="index"
-        :class="{ 'border-bottom': index !== data.hover.length - 1 }"
-      >
-        <pre
-          v-if="hover.language"
-          ref="code-output"
-          :class="$options.colorScheme"
-          class="border-0 bg-transparent m-0 code highlight text-wrap"
-        ><doc-line v-for="(tokens, tokenIndex) in hover.tokens" :key="tokenIndex" :language="hover.language" :tokens="tokens"/></pre>
-        <p v-else ref="doc-output" class="p-3 m-0 gl-font-base">
-          {{ hover.value }}
+    <gl-tabs nav-class="gl-hidden" content-class="gl-py-0">
+      <gl-tab :title="__('Definition')">
+        <div class="overflow-auto code-navigation-popover-container">
+          <div
+            v-for="(hover, index) in data.hover"
+            :key="index"
+            :class="{ 'border-bottom': index !== data.hover.length - 1 }"
+          >
+            <pre
+              v-if="hover.language"
+              ref="code-output"
+              :class="$options.colorScheme"
+              class="border-0 bg-transparent m-0 code highlight text-wrap"
+            ><doc-line v-for="(tokens, tokenIndex) in hover.tokens" :key="tokenIndex" :language="hover.language" :tokens="tokens"/></pre>
+            <p v-else ref="doc-output" class="p-3 m-0">
+              {{ hover.value }}
+            </p>
+          </div>
+        </div>
+        <div v-if="definitionPath || isCurrentDefinition" class="popover-body border-top">
+          <span v-if="isCurrentDefinition" class="gl-font-weight-bold gl-font-base">
+            {{ s__('CodeIntelligence|This is the definition') }}
+          </span>
+          <gl-button
+            v-else
+            :href="definitionPath"
+            :target="isDefinitionCurrentBlob ? null : '_blank'"
+            class="w-100"
+            variant="default"
+            data-testid="go-to-definition-btn"
+          >
+            {{ __('Go to definition') }}
+          </gl-button>
+        </div>
+      </gl-tab>
+      <gl-tab data-testid="references-tab" class="py-2">
+        <template #title>
+          {{ __('References') }}
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ references.length }}</gl-badge>
+        </template>
+        <template v-if="references.length">
+          <div v-for="(reference, index) in references" :key="index" class="gl-dropdown-item">
+            <gl-link
+              :href="`${definitionPathPrefix}/${reference.path}`"
+              class="dropdown-item"
+              data-testid="reference-link"
+            >
+              {{ reference.path }}
+            </gl-link>
+          </div>
+        </template>
+        <p v-else class="gl-my-4 gl-px-4">
+          {{ s__('CodeNavigation|No references found') }}
         </p>
-      </div>
-    </div>
-    <div v-if="definitionPath || isCurrentDefinition" class="popover-body border-top">
-      <span v-if="isCurrentDefinition" class="gl-font-weight-bold gl-font-base">
-        {{ s__('CodeIntelligence|This is the definition') }}
-      </span>
-      <gl-button
-        v-else
-        :href="definitionPath"
-        :target="isDefinitionCurrentBlob ? null : '_blank'"
-        class="w-100"
-        variant="default"
-        data-testid="go-to-definition-btn"
-      >
-        {{ __('Go to definition') }}
-      </gl-button>
-    </div>
+      </gl-tab>
+    </gl-tabs>
   </div>
 </template>