Add latest changes from gitlab-org/gitlab@master

5 files changed, 114 insertions, 3 deletions

diff --git a/app/assets/javascripts/usage_quotas/storage/components/container_registry_usage.vue b/app/assets/javascripts/usage_quotas/storage/components/container_registry_usage.vue
new file mode 100644
index 00000000000..605ebee902c
--- /dev/null
+++ b/app/assets/javascripts/usage_quotas/storage/components/container_registry_usage.vue
@@ -0,0 +1,70 @@
+<script>
+import UsageBanner from '~/vue_shared/components/usage_quotas/usage_banner.vue';
+import { s__ } from '~/locale';
+import NumberToHumanSize from '~/vue_shared/components/number_to_human_size/number_to_human_size.vue';
+import HelpPageLink from '~/vue_shared/components/help_page_link/help_page_link.vue';
+import StorageTypeWarning from './storage_type_warning.vue';
+
+export default {
+  name: 'ContainerRegistryUsage',
+  components: {
+    NumberToHumanSize,
+    StorageTypeWarning,
+    UsageBanner,
+    HelpPageLink,
+  },
+  props: {
+    containerRegistrySize: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    containerRegistrySizeIsEstimated: {
+      type: Boolean,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  i18n: {
+    containerRegistry: s__('UsageQuota|Container Registry'),
+    storageUsed: s__('UsageQuota|Storage used'),
+    containerRegistryDescription: s__(
+      'UsageQuota|Gitlab-integrated Docker Container Registry for storing Docker Images.',
+    ),
+    estimatedWarningTooltip: s__(
+      'UsageQuota|Precise calculation of Container Registry storage size is delayed because it is too large for synchronous estimation. Precise evaluation will be scheduled within 24 hours.',
+    ),
+  },
+};
+</script>
+<template>
+  <usage-banner :loading="loading">
+    <template #left-primary-text>
+      {{ $options.i18n.containerRegistry }}
+    </template>
+    <template #left-secondary-text>
+      <span>
+        {{ $options.i18n.containerRegistryDescription }}
+        <help-page-link href="user/packages/container_registry/index">
+          {{ __('More information') }}
+        </help-page-link>
+      </span>
+    </template>
+    <template #right-primary-text>
+      {{ $options.i18n.storageUsed }}
+    </template>
+    <template #right-secondary-text>
+      <number-to-human-size :value="containerRegistrySize" data-testid="total-size-section" />
+      <storage-type-warning v-if="containerRegistrySizeIsEstimated">
+        {{ $options.i18n.estimatedWarningTooltip }}
+        <help-page-link href="user/usage_quotas#delayed-refresh">
+          {{ __('Learn more.') }}
+        </help-page-link>
+      </storage-type-warning>
+    </template>
+  </usage-banner>
+</template>
diff --git a/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue b/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue
index afb8502434e..efdb1b185d4 100644
--- a/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue
+++ b/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
 import StorageUsageStatistics from 'ee_else_ce/usage_quotas/storage/components/storage_usage_statistics.vue';
-import DependencyProxyUsage from '~/usage_quotas/storage/components/dependency_proxy_usage.vue';
+import DependencyProxyUsage from './dependency_proxy_usage.vue';
+import ContainerRegistryUsage from './container_registry_usage.vue';
 
 export default {
   name: 'NamespaceStorageApp',
@@ -9,6 +10,7 @@ export default {
     GlAlert,
     StorageUsageStatistics,
     DependencyProxyUsage,
+    ContainerRegistryUsage,
   },
   inject: ['userNamespace'],
   props: {
@@ -45,6 +47,12 @@ export default {
     dependencyProxyTotalSize() {
       return this.namespace.rootStorageStatistics?.dependencyProxySize ?? 0;
     },
+    containerRegistrySize() {
+      return this.namespace.rootStorageStatistics?.containerRegistrySize ?? 0;
+    },
+    containerRegistrySizeIsEstimated() {
+      return this.namespace.rootStorageStatistics?.containerRegistrySizeIsEstimated ?? false;
+    },
   },
 };
 </script>
@@ -75,6 +83,11 @@ export default {
       :dependency-proxy-total-size="dependencyProxyTotalSize"
       :loading="isNamespaceStorageStatisticsLoading"
     />
+    <container-registry-usage
+      :container-registry-size="containerRegistrySize"
+      :container-registry-size-is-estimated="containerRegistrySizeIsEstimated"
+      :loading="isNamespaceStorageStatisticsLoading"
+    />
 
     <slot name="ee-storage-app"></slot>
   </div>
diff --git a/app/assets/javascripts/usage_quotas/storage/components/storage_type_warning.vue b/app/assets/javascripts/usage_quotas/storage/components/storage_type_warning.vue
new file mode 100644
index 00000000000..73086afa29a
--- /dev/null
+++ b/app/assets/javascripts/usage_quotas/storage/components/storage_type_warning.vue
@@ -0,0 +1,28 @@
+<script>
+import { GlIcon, GlPopover } from '@gitlab/ui';
+
+export default {
+  name: 'StorageTypeWarning',
+  components: {
+    GlPopover,
+    GlIcon,
+  },
+  data() {
+    return {
+      mounted: false,
+    };
+  },
+  mounted() {
+    this.mounted = true;
+  },
+};
+</script>
+
+<template>
+  <span>
+    <gl-icon ref="glIcon" name="warning" class="gl-ml-2 gl-text-gray-500" />
+    <gl-popover v-if="mounted" :target="$refs.glIcon" triggers="hover focus" placement="top">
+      <slot></slot>
+    </gl-popover>
+  </span>
+</template>
diff --git a/app/views/profiles/notifications/_group_settings.html.haml b/app/views/profiles/notifications/_group_settings.html.haml
index 1878634e56c..51b9d576bf5 100644
--- a/app/views/profiles/notifications/_group_settings.html.haml
+++ b/app/views/profiles/notifications/_group_settings.html.haml
@@ -10,6 +10,6 @@
 
   .gl-display-flex.gl-gap-3.gl-flex-wrap
     - if setting
-      .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, group_id: group.id, show_label: "true" } }
+      .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, help_page_path: help_page_path('user/profile/notifications'), group_id: group.id, show_label: "true" } }
     = form_for setting, url: profile_group_notifications_path(group), method: :put, html: { class: 'update-notifications gl-display-flex' } do |f|
       .js-notification-email-listbox-input{ data: {  name: 'notification_setting[notification_email]', emails: @user.public_verified_emails.to_json, empty_value_text: _('Global notification email') , value: setting.notification_email, placement: 'right' } }
diff --git a/app/views/profiles/notifications/_project_settings.html.haml b/app/views/profiles/notifications/_project_settings.html.haml
index 955449f0ba1..e898bcaedeb 100644
--- a/app/views/profiles/notifications/_project_settings.html.haml
+++ b/app/views/profiles/notifications/_project_settings.html.haml
@@ -10,4 +10,4 @@
 
   .gl-display-flex.gl-gap-3.gl-flex-wrap
     - if setting
-      .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, project_id: project.id, container_class: 'gl-mr-3', show_label: "true" } }
+      .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(setting).to_json, notification_level: setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: project.id, container_class: 'gl-mr-3', show_label: "true" } }