Add latest changes from gitlab-org/gitlab@master

10 files changed, 271 insertions, 161 deletions

diff --git a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
index 5f778af1dbb..59066162960 100644
--- a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
+++ b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
@@ -96,12 +96,23 @@ export default {
       }
     },
   },
+  i18n: {
+    project: __('Project'),
+    privateForkSelected: __(
+      "To protect this issue's confidentiality, a private fork of this project was selected.",
+    ),
+    noForks: __('No forks are available to you.'),
+    forkTheProject: __(
+      `To protect this issue's confidentiality, %{linkStart}fork this project%{linkEnd} and set the fork's visibility to private.`,
+    ),
+    readMore: __('Read more'),
+  },
 };
 </script>
 
 <template>
   <div class="confidential-merge-request-fork-group form-group">
-    <label>{{ __('Project') }}</label>
+    <label>{{ $options.i18n.project }}</label>
     <div>
       <dropdown
         v-if="projects.length"
@@ -111,25 +122,13 @@ export default {
       />
       <p class="text-muted mt-1 mb-0">
         <template v-if="projects.length">
-          {{
-            __(
-              "To protect this issue's confidentiality, a private fork of this project was selected.",
-            )
-          }}
+          {{ $options.i18n.privateForkSelected }}
         </template>
         <template v-else>
-          {{ __('No forks are available to you.') }}<br />
-          <gl-sprintf
-            :message="
-              __(
-                `To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private.`,
-              )
-            "
-          >
-            <template #forkLink>
-              <a :href="newForkPath" target="_blank" class="help-link">{{
-                __('fork this project')
-              }}</a>
+          {{ $options.i18n.noForks }}<br />
+          <gl-sprintf :message="$options.i18n.forkTheProject">
+            <template #link="{ content }">
+              <a :href="newForkPath" target="_blank" class="help-link">{{ content }}</a>
             </template>
           </gl-sprintf>
         </template>
@@ -138,7 +137,7 @@ export default {
           class="w-auto p-0 d-inline-block text-primary bg-transparent"
           target="_blank"
         >
-          <span class="sr-only">{{ __('Read more') }}</span>
+          <span class="sr-only">{{ $options.i18n.readMore }}</span>
           <gl-icon name="question-o" />
         </gl-link>
       </p>
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index fa9ee56c049..059772e8cb9 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -5,7 +5,7 @@ import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import CodeQualityWalkthrough from '~/code_quality_walkthrough/components/step.vue';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import { sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import delayedJobMixin from '../mixins/delayed_job_mixin';
 import EmptyState from './empty_state.vue';
@@ -126,6 +126,9 @@ export default {
     shouldRenderCodeQualityWalkthrough() {
       return this.job.status.group === 'failed-with-warnings';
     },
+    itemName() {
+      return sprintf(__('Job %{jobName}'), { jobName: this.job.name });
+    },
   },
   watch: {
     // Once the job log is loaded,
@@ -205,12 +208,11 @@ export default {
           <div class="build-header top-area">
             <ci-header
               :status="job.status"
-              :item-id="job.id"
               :time="headerTime"
               :user="job.user"
               :has-sidebar-button="true"
               :should-render-triggered-label="shouldRenderTriggeredLabel"
-              :item-name="__('Job')"
+              :item-name="itemName"
               @clickedSidebarButton="toggleSidebar"
             />
           </div>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
index 3595f83baf0..74c0cb44c51 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
@@ -1,35 +1,24 @@
 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import Composer from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue';
+import Conan from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue';
+import Maven from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue';
+import Nuget from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue';
+import Pypi from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue';
 import {
-  PACKAGE_TYPE_NUGET,
+  PACKAGE_TYPE_COMPOSER,
   PACKAGE_TYPE_CONAN,
   PACKAGE_TYPE_MAVEN,
-  PACKAGE_TYPE_COMPOSER,
+  PACKAGE_TYPE_NUGET,
   PACKAGE_TYPE_PYPI,
 } from '~/packages_and_registries/package_registry/constants';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 
 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}'),
-    targetShaCopyButton: s__('PackageRegistry|Copy target SHA'),
-    targetSha: s__('PackageRegistry|Target SHA: %{sha}'),
-    composerJson: s__(
-      'PackageRegistry|Composer.json with license: %{license} and version: %{version}',
-    ),
-    requiredPython: s__('PackageRegistry|Required Python: %{pythonVersion}'),
-  },
   components: {
-    DetailsRow,
-    GlLink,
-    GlSprintf,
-    ClipboardButton,
+    Composer,
+    Conan,
+    Maven,
+    Nuget,
+    Pypi,
   },
   props: {
     packageEntity: {
@@ -38,31 +27,17 @@ export default {
     },
   },
   computed: {
-    showMetadata() {
-      return (
-        [
-          PACKAGE_TYPE_NUGET,
-          PACKAGE_TYPE_CONAN,
-          PACKAGE_TYPE_MAVEN,
-          PACKAGE_TYPE_COMPOSER,
-          PACKAGE_TYPE_PYPI,
-        ].includes(this.packageEntity.packageType) && this.packageEntity.metadata
-      );
-    },
-    showNugetMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_NUGET;
-    },
-    showConanMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_CONAN;
+    metadataComponent() {
+      return {
+        [PACKAGE_TYPE_COMPOSER]: Composer,
+        [PACKAGE_TYPE_CONAN]: Conan,
+        [PACKAGE_TYPE_MAVEN]: Maven,
+        [PACKAGE_TYPE_NUGET]: Nuget,
+        [PACKAGE_TYPE_PYPI]: Pypi,
+      }[this.packageEntity.packageType];
     },
-    showMavenMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_MAVEN;
-    },
-    showComposerMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_COMPOSER;
-    },
-    showPypiMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_PYPI;
+    showMetadata() {
+      return this.metadataComponent && this.packageEntity.metadata;
     },
   },
 };
@@ -71,95 +46,12 @@ export default {
 <template>
   <div v-if="showMetadata">
     <h3 class="gl-font-lg" 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="showNugetMetadata">
-        <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.metadata.projectUrl" target="_blank">{{
-                packageEntity.metadata.projectUrl
-              }}</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.metadata.licenseUrl" target="_blank">{{
-                packageEntity.metadata.licenseUrl
-              }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </details-row>
-      </template>
-
-      <details-row
-        v-else-if="showConanMetadata"
-        icon="information-o"
-        padding="gl-p-4"
-        data-testid="conan-recipe"
-      >
-        <gl-sprintf :message="$options.i18n.recipeText">
-          <template #recipe>{{ packageEntity.metadata.recipe }}</template>
-        </gl-sprintf>
-      </details-row>
-
-      <template v-else-if="showMavenMetadata">
-        <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
-          <gl-sprintf :message="$options.i18n.appName">
-            <template #name>
-              <strong>{{ packageEntity.metadata.appName }}</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.metadata.appGroup }}</strong>
-            </template>
-          </gl-sprintf>
-        </details-row>
-      </template>
-
-      <template v-else-if="showComposerMetadata">
-        <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
-          <gl-sprintf :message="$options.i18n.targetSha">
-            <template #sha>
-              <strong>{{ packageEntity.metadata.targetSha }}</strong>
-              <clipboard-button
-                :title="$options.i18n.targetShaCopyButton"
-                :text="packageEntity.metadata.targetSha"
-                category="tertiary"
-                css-class="gl-p-0!"
-              />
-            </template>
-          </gl-sprintf>
-        </details-row>
-        <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
-          <gl-sprintf :message="$options.i18n.composerJson">
-            <template #license>
-              <strong>{{ packageEntity.metadata.composerJson.license }}</strong>
-            </template>
-            <template #version>
-              <strong>{{ packageEntity.metadata.composerJson.version }}</strong>
-            </template>
-          </gl-sprintf>
-        </details-row>
-      </template>
-
-      <details-row
-        v-else-if="showPypiMetadata"
-        icon="information-o"
-        padding="gl-p-4"
-        data-testid="pypi-required-python"
-      >
-        <gl-sprintf :message="$options.i18n.requiredPython">
-          <template #pythonVersion>
-            <strong>{{ packageEntity.metadata.requiredPython }}</strong>
-          </template>
-        </gl-sprintf>
-      </details-row>
+      <component
+        :is="metadataComponent"
+        :package-entity="packageEntity"
+        data-testid="component-is"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
new file mode 100644
index 00000000000..b6a36a0b00f
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    targetShaCopyButton: s__('PackageRegistry|Copy target SHA'),
+    targetSha: s__('PackageRegistry|Target SHA: %{sha}'),
+    composerJson: s__(
+      'PackageRegistry|Composer.json with license: %{license} and version: %{version}',
+    ),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+    ClipboardButton,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
+      <gl-sprintf :message="$options.i18n.targetSha">
+        <template #sha>
+          <strong>{{ packageEntity.metadata.targetSha }}</strong>
+          <clipboard-button
+            :title="$options.i18n.targetShaCopyButton"
+            :text="packageEntity.metadata.targetSha"
+            category="tertiary"
+            css-class="gl-p-0!"
+          />
+        </template>
+      </gl-sprintf>
+    </details-row>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
+      <gl-sprintf :message="$options.i18n.composerJson">
+        <template #license>
+          <strong>{{ packageEntity.metadata.composerJson.license }}</strong>
+        </template>
+        <template #version>
+          <strong>{{ packageEntity.metadata.composerJson.version }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
new file mode 100644
index 00000000000..10797d74acf
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="conan-recipe">
+      <gl-sprintf :message="$options.i18n.recipeText">
+        <template #recipe>{{ packageEntity.metadata.recipe }}</template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
new file mode 100644
index 00000000000..fd9fb49a9f2
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    appGroup: s__('PackageRegistry|App group: %{group}'),
+    appName: s__('PackageRegistry|App name: %{name}'),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
+      <gl-sprintf :message="$options.i18n.appName">
+        <template #name>
+          <strong>{{ packageEntity.metadata.appName }}</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.metadata.appGroup }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
new file mode 100644
index 00000000000..f0da7db6c91
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
@@ -0,0 +1,46 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    sourceText: s__('PackageRegistry|Source project located at %{link}'),
+    licenseText: s__('PackageRegistry|License information located at %{link}'),
+  },
+  components: {
+    DetailsRow,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <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.metadata.projectUrl" target="_blank">{{
+            packageEntity.metadata.projectUrl
+          }}</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.metadata.licenseUrl" target="_blank">{{
+            packageEntity.metadata.licenseUrl
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
new file mode 100644
index 00000000000..6534eef532c
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
@@ -0,0 +1,34 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    requiredPython: s__('PackageRegistry|Required Python: %{pythonVersion}'),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="pypi-required-python">
+      <gl-sprintf :message="$options.i18n.requiredPython">
+        <template #pythonVersion>
+          <strong>{{ packageEntity.metadata.requiredPython }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 5db2b604956..4db6a3c9fd8 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -218,7 +218,7 @@ export default {
       :status="pipeline.detailedStatus"
       :time="pipeline.createdAt"
       :user="pipeline.user"
-      :item-id="Number(pipelineId)"
+      :item-id="pipelineId"
       item-name="Pipeline"
     >
       <gl-button
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 9e334f944a0..41613bb3307 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -37,8 +37,9 @@ export default {
       required: true,
     },
     itemId: {
-      type: Number,
-      required: true,
+      type: String,
+      required: false,
+      default: '',
     },
     time: {
       type: String,
@@ -86,6 +87,13 @@ export default {
     message() {
       return this.user?.status?.message;
     },
+    item() {
+      if (this.itemId) {
+        return `${this.itemName} #${this.itemId}`;
+      }
+
+      return this.itemName;
+    },
   },
 
   methods: {
@@ -106,7 +114,7 @@ export default {
     <section class="header-main-content gl-mr-3">
       <ci-icon-badge :status="status" />
 
-      <strong data-testid="ci-header-item-text"> {{ itemName }} #{{ itemId }} </strong>
+      <strong data-testid="ci-header-item-text">{{ item }}</strong>
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template>
       <template v-else>{{ __('created') }}</template>