Add latest changes from gitlab-org/gitlab@master

11 files changed, 220 insertions, 49 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index bde62275797..ab14b681f10 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -72,10 +72,6 @@ export default {
       type: String,
       required: true,
     },
-    addDashboardDocumentationPath: {
-      type: String,
-      required: true,
-    },
     settingsPath: {
       type: String,
       required: true,
@@ -409,7 +405,6 @@ export default {
       v-if="showHeader"
       ref="prometheusGraphsHeader"
       class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
-      :add-dashboard-documentation-path="addDashboardDocumentationPath"
       :default-branch="defaultBranch"
       :rearrange-panels-available="rearrangePanelsAvailable"
       :custom-metrics-available="customMetricsAvailable"
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue
index 82bd263e9b0..7ac35809b99 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -107,10 +107,6 @@ export default {
       type: Object,
       required: true,
     },
-    addDashboardDocumentationPath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -128,6 +124,7 @@ export default {
       'canAccessOperationsSettings',
       'operationsSettingsPath',
       'currentDashboard',
+      'addDashboardDocumentationPath',
     ]),
     ...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
     isOutOfTheBoxDashboard() {
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
index 7e6ebfe26c0..1f878a113fe 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
@@ -1,6 +1,14 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlCard, GlForm, GlFormGroup, GlFormTextarea, GlButton, GlAlert } from '@gitlab/ui';
+import {
+  GlCard,
+  GlForm,
+  GlFormGroup,
+  GlFormTextarea,
+  GlButton,
+  GlSprintf,
+  GlAlert,
+} from '@gitlab/ui';
 import DashboardPanel from './dashboard_panel.vue';
 
 const initialYml = `title:
@@ -18,6 +26,7 @@ export default {
     GlFormGroup,
     GlFormTextarea,
     GlButton,
+    GlSprintf,
     GlAlert,
     DashboardPanel,
   },
@@ -31,6 +40,8 @@ export default {
       'panelPreviewIsLoading',
       'panelPreviewError',
       'panelPreviewGraphData',
+      'projectPath',
+      'addDashboardDocumentationPath',
     ]),
   },
   methods: {
@@ -43,45 +54,91 @@ export default {
 </script>
 <template>
   <div>
-    <gl-card>
-      <template #header>
-        <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|Define and preview panel') }}</h2>
-      </template>
-      <template #default>
-        <gl-form @submit.prevent="onSubmit">
-          <gl-form-group
-            :label="s__('Metrics|Panel YAML')"
-            :description="s__('Metrics|Define panel YAML to preview panel.')"
-            label-for="panel-yml-input"
+    <div class="gl-display-flex gl-mx-n3">
+      <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3">
+        <template #header>
+          <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2>
+        </template>
+        <template #default>
+          <p>{{ s__('Metrics|Define panel YAML below to preview panel.') }}</p>
+          <gl-form @submit.prevent="onSubmit">
+            <gl-form-group :label="s__('Metrics|Panel YAML')" label-for="panel-yml-input">
+              <gl-form-textarea
+                id="panel-yml-input"
+                v-model="yml"
+                class="gl-h-200! gl-font-monospace! gl-font-size-monospace!"
+              />
+            </gl-form-group>
+            <div class="gl-text-right">
+              <gl-button
+                ref="clipboardCopyBtn"
+                variant="success"
+                category="secondary"
+                :data-clipboard-text="yml"
+                @click="$toast.show(s__('Metrics|Panel YAML copied'))"
+              >
+                {{ s__('Metrics|Copy YAML') }}
+              </gl-button>
+              <gl-button
+                type="submit"
+                variant="success"
+                :disabled="panelPreviewIsLoading"
+                class="js-no-auto-disable"
+              >
+                {{ s__('Metrics|Preview panel') }}
+              </gl-button>
+            </div>
+          </gl-form>
+        </template>
+      </gl-card>
+
+      <gl-card
+        class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3"
+        body-class="gl-display-flex gl-flex-direction-column"
+      >
+        <template #header>
+          <h2 class="gl-font-size-h2 gl-my-3">
+            {{ s__('Metrics|2. Paste panel YAML into dashboard') }}
+          </h2>
+        </template>
+        <template #default>
+          <div
+            class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-justify-content-center"
           >
-            <gl-form-textarea
-              id="panel-yml-input"
-              v-model="yml"
-              class="gl-h-200! gl-font-monospace! gl-font-size-monospace!"
-            />
-          </gl-form-group>
+            <p>
+              {{ s__('Metrics|Copy and paste the panel YAML into your dashboard YAML file.') }}
+              <br />
+              <gl-sprintf
+                :message="
+                  s__(
+                    'Metrics|Dashboard files can be found in %{codeStart}.gitlab/dashboards%{codeEnd} at the root of this project.',
+                  )
+                "
+              >
+                <template #code="{content}">
+                  <code>{{ content }}</code>
+                </template>
+              </gl-sprintf>
+            </p>
+          </div>
+
           <div class="gl-text-right">
             <gl-button
-              ref="clipboardCopyBtn"
-              variant="success"
+              ref="viewDocumentationBtn"
               category="secondary"
-              :data-clipboard-text="yml"
-              @click="$toast.show(s__('Metrics|Panel YAML copied'))"
+              variant="info"
+              target="_blank"
+              :href="addDashboardDocumentationPath"
             >
-              {{ s__('Metrics|Copy YAML') }}
+              {{ s__('Metrics|View documentation') }}
             </gl-button>
-            <gl-button
-              type="submit"
-              variant="success"
-              :disabled="panelPreviewIsLoading"
-              class="js-no-auto-disable"
-            >
-              {{ s__('Metrics|Preview panel') }}
+            <gl-button ref="openRepositoryBtn" variant="success" :href="projectPath">
+              {{ s__('Metrics|Open repository') }}
             </gl-button>
           </div>
-        </gl-form>
-      </template>
-    </gl-card>
+        </template>
+      </gl-card>
+    </div>
 
     <gl-alert v-if="panelPreviewError" variant="warning" :dismissible="false">
       {{ panelPreviewError }}
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
index e23a305bd93..6cf486da63e 100644
--- a/app/assets/javascripts/monitoring/stores/state.js
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -80,6 +80,7 @@ export default () => ({
   projectPath: null,
   operationsSettingsPath: '',
   logsPath: invalidUrl,
+  addDashboardDocumentationPath: '',
 
   // static paths
   customDashboardBasePath: '',
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 8f9e32dc8d5..74af45fcb0c 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -32,6 +32,7 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
     logsPath,
     currentEnvironmentName,
     customDashboardBasePath,
+    addDashboardDocumentationPath,
     ...dataProps
   } = dataset;
 
@@ -54,6 +55,7 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
       logsPath,
       currentEnvironmentName,
       customDashboardBasePath,
+      addDashboardDocumentationPath,
     },
     dataProps,
   };
diff --git a/app/assets/javascripts/packages/details/components/additional_metadata.vue b/app/assets/javascripts/packages/details/components/additional_metadata.vue
new file mode 100644
index 00000000000..adc569e466a
--- /dev/null
+++ b/app/assets/javascripts/packages/details/components/additional_metadata.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import DetailsRow from '~/registry/shared/components/details_row.vue';
+import { generateConanRecipe } from '../utils';
+import { PackageType } from '../../shared/constants';
+
+export default {
+  i18n: {
+    sourceText: s__('PackageRegistry|Source project located at %{link}'),
+    licenseText: s__('PackageRegistry|License information located at %{link}'),
+    recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
+    appGroup: s__('PackageRegistry|App group: %{group}'),
+    appName: s__('PackageRegistry|App name: %{name}'),
+  },
+  components: {
+    DetailsRow,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    conanRecipe() {
+      return generateConanRecipe(this.packageEntity);
+    },
+    showMetadata() {
+      const visibilityConditions = {
+        [PackageType.NUGET]: this.packageEntity.nuget_metadatum,
+        [PackageType.CONAN]: this.packageEntity.conan_metadatum,
+        [PackageType.MAVEN]: this.packageEntity.maven_metadatum,
+      };
+      return visibilityConditions[this.packageEntity.package_type];
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="showMetadata">
+    <h3 class="gl-font-lg gl-mt-5" data-testid="title">{{ __('Additional Metadata') }}</h3>
+
+    <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main">
+      <template v-if="packageEntity.nuget_metadatum">
+        <details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source">
+          <gl-sprintf :message="$options.i18n.sourceText">
+            <template #link>
+              <gl-link :href="packageEntity.nuget_metadatum.project_url" target="_blank">{{
+                packageEntity.nuget_metadatum.project_url
+              }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </details-row>
+        <details-row icon="license" padding="gl-p-4" data-testid="nuget-license">
+          <gl-sprintf :message="$options.i18n.licenseText">
+            <template #link>
+              <gl-link :href="packageEntity.nuget_metadatum.license_url" target="_blank">{{
+                packageEntity.nuget_metadatum.license_url
+              }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </details-row>
+      </template>
+
+      <details-row
+        v-else-if="packageEntity.conan_metadatum"
+        icon="information-o"
+        padding="gl-p-4"
+        data-testid="conan-recipe"
+      >
+        <gl-sprintf :message="$options.i18n.recipeText">
+          <template #recipe>{{ conanRecipe }}</template>
+        </gl-sprintf>
+      </details-row>
+
+      <template v-else-if="packageEntity.maven_metadatum">
+        <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
+          <gl-sprintf :message="$options.i18n.appName">
+            <template #name>
+              <strong>{{ packageEntity.maven_metadatum.app_name }}</strong>
+            </template>
+          </gl-sprintf>
+        </details-row>
+        <details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
+          <gl-sprintf :message="$options.i18n.appGroup">
+            <template #group>
+              <strong>{{ packageEntity.maven_metadatum.app_group }}</strong>
+            </template>
+          </gl-sprintf>
+        </details-row>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages/details/components/app.vue b/app/assets/javascripts/packages/details/components/app.vue
index d48f9651b59..b6a9457688d 100644
--- a/app/assets/javascripts/packages/details/components/app.vue
+++ b/app/assets/javascripts/packages/details/components/app.vue
@@ -12,6 +12,7 @@ import {
   GlTable,
   GlSprintf,
 } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import Tracking from '~/tracking';
 import PackageActivity from './activity.vue';
 import PackageHistory from './package_history.vue';
@@ -25,6 +26,7 @@ import PypiInstallation from './pypi_installation.vue';
 import PackagesListLoader from '../../shared/components/packages_list_loader.vue';
 import PackageListRow from '../../shared/components/package_list_row.vue';
 import DependencyRow from './dependency_row.vue';
+import AdditionalMetadata from './additional_metadata.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -32,7 +34,6 @@ import { generatePackageInfo } from '../utils';
 import { __, s__ } from '~/locale';
 import { PackageType, TrackingActions } from '../../shared/constants';
 import { packageTypeToTrackCategory } from '../../shared/utils';
-import { mapActions, mapState } from 'vuex';
 
 export default {
   name: 'PackagesApp',
@@ -59,6 +60,7 @@ export default {
     PackageListRow,
     DependencyRow,
     PackageHistory,
+    AdditionalMetadata,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -253,9 +255,12 @@ export default {
           <package-activity />
         </template>
 
-        <package-history v-else :package-entity="packageEntity" :project-name="projectName" />
+        <template v-else>
+          <package-history :package-entity="packageEntity" :project-name="projectName" />
+          <additional-metadata :package-entity="packageEntity" />
+        </template>
 
-        <h3 class="gl-font-lg">{{ __('Files') }}</h3>
+        <h3 class="gl-font-lg gl-mt-5">{{ __('Files') }}</h3>
         <gl-table
           :fields="$options.filesTableHeaderFields"
           :items="filesTableRows"
diff --git a/app/assets/javascripts/packages/details/components/history_element.vue b/app/assets/javascripts/packages/details/components/history_element.vue
index f2129ec9c29..8a51c1528cf 100644
--- a/app/assets/javascripts/packages/details/components/history_element.vue
+++ b/app/assets/javascripts/packages/details/components/history_element.vue
@@ -19,7 +19,7 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item class="system-note note-wrapper gl-my-6!">
+  <timeline-entry-item class="system-note note-wrapper gl-mb-6!">
     <div class="timeline-icon">
       <gl-icon :name="icon" />
     </div>
diff --git a/app/assets/javascripts/packages/details/components/package_history.vue b/app/assets/javascripts/packages/details/components/package_history.vue
index a3f3e85a1fb..e3351f73791 100644
--- a/app/assets/javascripts/packages/details/components/package_history.vue
+++ b/app/assets/javascripts/packages/details/components/package_history.vue
@@ -44,8 +44,8 @@ export default {
 
 <template>
   <div class="issuable-discussion">
-    <h3 class="gl-ml-6" data-testid="title">{{ __('History') }}</h3>
-    <ul class="timeline main-notes-list notes gl-my-4" data-testid="timeline">
+    <h3 class="gl-font-lg gl-my-3" data-testid="title">{{ __('History') }}</h3>
+    <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline">
       <history-element icon="clock" data-testid="created-on">
         <gl-sprintf :message="$options.i18n.createdOn">
           <template #name>
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
index 51ba2337db6..8ec5cebbe8e 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
@@ -7,7 +7,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import DeleteButton from '../delete_button.vue';
 import ListItem from '../list_item.vue';
-import DetailsRow from './details_row.vue';
+import DetailsRow from '~/registry/shared/components/details_row.vue';
 import {
   REMOVE_TAG_BUTTON_TITLE,
   DIGEST_LABEL,
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_row.vue b/app/assets/javascripts/registry/shared/components/details_row.vue
index c4358b83e23..2e245fadead 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_row.vue
+++ b/app/assets/javascripts/registry/shared/components/details_row.vue
@@ -10,13 +10,29 @@ export default {
       type: String,
       required: true,
     },
+    padding: {
+      type: String,
+      default: 'gl-py-2',
+      required: false,
+    },
+    dashed: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    borderClass() {
+      return this.dashed ? 'gl-border-b-solid gl-border-gray-100 gl-border-b-1' : '';
+    },
   },
 };
 </script>
 
 <template>
   <div
-    class="gl-display-flex gl-align-items-center gl-font-monospace gl-font-sm gl-py-2 gl-word-break-all"
+    class="gl-display-flex gl-align-items-center gl-font-monospace gl-font-sm gl-word-break-all"
+    :class="[padding, borderClass]"
   >
     <gl-icon :name="icon" class="gl-mr-4" />
     <span>