Add latest changes from gitlab-org/gitlab@master

7 files changed, 259 insertions, 20 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 1644f35459b..8a8d38b295c 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -1,5 +1,23 @@
+import { s__ } from '~/locale';
+
 export const TEST_INTEGRATION_EVENT = 'testIntegration';
 export const SAVE_INTEGRATION_EVENT = 'saveIntegration';
 export const GET_JIRA_ISSUE_TYPES_EVENT = 'getJiraIssueTypes';
 export const TOGGLE_INTEGRATION_EVENT = 'toggleIntegration';
 export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm';
+
+export const integrationLevels = {
+  GROUP: 'group',
+  INSTANCE: 'instance',
+};
+
+export const defaultIntegrationLevel = integrationLevels.INSTANCE;
+
+export const overrideDropdownDescriptions = {
+  [integrationLevels.GROUP]: s__(
+    'Integrations|Default settings are inherited from the group level.',
+  ),
+  [integrationLevels.INSTANCE]: s__(
+    'Integrations|Default settings are inherited from the instance level.',
+  ),
+};
diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index 707666f11d2..ba1aeb28616 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -2,8 +2,11 @@
 import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { TEST_INTEGRATION_EVENT, SAVE_INTEGRATION_EVENT } from '~/integrations/constants';
-import { integrationLevels } from '../constants';
+import {
+  TEST_INTEGRATION_EVENT,
+  SAVE_INTEGRATION_EVENT,
+  integrationLevels,
+} from '~/integrations/constants';
 import eventHub from '../event_hub';
 
 import ActiveCheckbox from './active_checkbox.vue';
diff --git a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
index 7b3a067b186..63650400bb7 100644
--- a/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
+++ b/app/assets/javascripts/integrations/edit/components/override_dropdown.vue
@@ -2,7 +2,7 @@
 import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants';
+import { defaultIntegrationLevel, overrideDropdownDescriptions } from '~/integrations/constants';
 
 const dropdownOptions = [
   {
diff --git a/app/assets/javascripts/integrations/edit/constants.js b/app/assets/javascripts/integrations/edit/constants.js
deleted file mode 100644
index b74ae209eb7..00000000000
--- a/app/assets/javascripts/integrations/edit/constants.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { s__ } from '~/locale';
-
-export const integrationLevels = {
-  GROUP: 'group',
-  INSTANCE: 'instance',
-};
-
-export const defaultIntegrationLevel = integrationLevels.INSTANCE;
-
-export const overrideDropdownDescriptions = {
-  [integrationLevels.GROUP]: s__(
-    'Integrations|Default settings are inherited from the group level.',
-  ),
-  [integrationLevels.INSTANCE]: s__(
-    'Integrations|Default settings are inherited from the instance level.',
-  ),
-};
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
new file mode 100644
index 00000000000..195ff7af583
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -0,0 +1,151 @@
+<script>
+import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
+import {
+  PACKAGE_ERROR_STATUS,
+  PACKAGE_DEFAULT_STATUS,
+} from '~/packages_and_registries/package_registry/constants';
+import { getPackageTypeLabel } from '~/packages/shared/utils';
+import PackagePath from '~/packages/shared/components/package_path.vue';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import PublishMethod from '~/packages_and_registries/package_registry/components/list/publish_method.vue';
+import PackageIconAndName from '~/packages/shared/components/package_icon_and_name.vue';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  name: 'PackageListRow',
+  components: {
+    GlButton,
+    GlLink,
+    GlSprintf,
+    GlTruncate,
+    PackageTags,
+    PackagePath,
+    PublishMethod,
+    ListItem,
+    PackageIconAndName,
+    TimeagoTooltip,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['isGroupPage'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    packageType() {
+      return getPackageTypeLabel(this.packageEntity.packageType.toLowerCase());
+    },
+    packageLink() {
+      const { project, id } = this.packageEntity;
+      return `${project?.webUrl}/-/packages/${getIdFromGraphQLId(id)}`;
+    },
+    pipeline() {
+      return this.packageEntity?.pipelines?.nodes[0];
+    },
+    pipelineUser() {
+      return this.pipeline?.user?.name;
+    },
+    showWarningIcon() {
+      return this.packageEntity.status === PACKAGE_ERROR_STATUS;
+    },
+    showTags() {
+      return Boolean(this.packageEntity.tags?.nodes?.length);
+    },
+    disabledRow() {
+      return this.packageEntity.status && this.packageEntity.status !== PACKAGE_DEFAULT_STATUS;
+    },
+  },
+  i18n: {
+    erroredPackageText: s__('PackageRegistry|Invalid Package: failed metadata extraction'),
+  },
+};
+</script>
+
+<template>
+  <list-item data-qa-selector="package_row" :disabled="disabledRow">
+    <template #left-primary>
+      <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
+        <gl-link
+          :href="packageLink"
+          class="gl-text-body gl-min-w-0"
+          data-qa-selector="package_link"
+          :disabled="disabledRow"
+        >
+          <gl-truncate :text="packageEntity.name" />
+        </gl-link>
+
+        <gl-button
+          v-if="showWarningIcon"
+          v-gl-tooltip="{ title: $options.i18n.erroredPackageText }"
+          class="gl-hover-bg-transparent!"
+          icon="warning"
+          category="tertiary"
+          data-testid="warning-icon"
+          :aria-label="__('Warning')"
+        />
+
+        <package-tags
+          v-if="showTags"
+          class="gl-ml-3"
+          :tags="packageEntity.tags.nodes"
+          hide-label
+          :tag-display-limit="1"
+        />
+      </div>
+    </template>
+    <template #left-secondary>
+      <div class="gl-display-flex" data-testid="left-secondary-infos">
+        <span>{{ packageEntity.version }}</span>
+
+        <div v-if="pipelineUser" class="gl-display-none gl-sm-display-flex gl-ml-2">
+          <gl-sprintf :message="s__('PackageRegistry|published by %{author}')">
+            <template #author>{{ pipelineUser }}</template>
+          </gl-sprintf>
+        </div>
+
+        <package-icon-and-name>
+          {{ packageType }}
+        </package-icon-and-name>
+
+        <package-path
+          v-if="isGroupPage"
+          :path="packageEntity.project.fullPath"
+          :disabled="disabledRow"
+        />
+      </div>
+    </template>
+
+    <template #right-primary>
+      <publish-method :pipeline="pipeline" />
+    </template>
+
+    <template #right-secondary>
+      <span>
+        <gl-sprintf :message="__('Created %{timestamp}')">
+          <template #timestamp>
+            <timeago-tooltip :time="packageEntity.createdAt" />
+          </template>
+        </gl-sprintf>
+      </span>
+    </template>
+
+    <template v-if="!disabledRow" #right-action>
+      <gl-button
+        data-testid="action-delete"
+        icon="remove"
+        category="secondary"
+        variant="danger"
+        :title="s__('PackageRegistry|Remove package')"
+        :aria-label="s__('PackageRegistry|Remove package')"
+        @click="$emit('packageToDelete', packageEntity)"
+      />
+    </template>
+  </list-item>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/publish_method.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/publish_method.vue
new file mode 100644
index 00000000000..8ecf433f3ab
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/publish_method.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+export default {
+  name: 'PublishMethod',
+  components: {
+    ClipboardButton,
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    hasPipeline() {
+      return Boolean(this.pipeline);
+    },
+    packageShaShort() {
+      return this.pipeline?.sha?.substring(0, 8);
+    },
+  },
+  i18n: {
+    COPY_COMMIT_SHA: __('Copy commit SHA'),
+    MANUALLY_PUBLISHED: s__('PackageRegistry|Manually Published'),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center">
+    <template v-if="hasPipeline">
+      <gl-icon name="git-merge" class="gl-mr-2" />
+      <span data-testid="pipeline-ref" class="gl-mr-2">{{ pipeline.ref }}</span>
+
+      <gl-icon name="commit" class="gl-mr-2" />
+      <gl-link data-testid="pipeline-sha" :href="pipeline.commitPath" class="gl-mr-2">{{
+        packageShaShort
+      }}</gl-link>
+
+      <clipboard-button
+        :text="pipeline.sha"
+        :title="$options.i18n.COPY_COMMIT_SHA"
+        category="tertiary"
+        size="small"
+      />
+    </template>
+
+    <template v-else>
+      <gl-icon name="upload" class="gl-mr-2" />
+      <span data-testid="manually-published">
+        {{ $options.i18n.MANUALLY_PUBLISHED }}
+      </span>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql
index 101115c96ff..aaf0eb54aff 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql
+++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/fragments/package_data.fragment.graphql
@@ -1,4 +1,27 @@
 fragment PackageData on Package {
   id
   name
+  version
+  packageType
+  createdAt
+  status
+  tags {
+    nodes {
+      name
+    }
+  }
+  pipelines {
+    nodes {
+      sha
+      ref
+      commitPath
+      user {
+        name
+      }
+    }
+  }
+  project {
+    fullPath
+    webUrl
+  }
 }