Add latest changes from gitlab-org/gitlab@master

17 files changed, 314 insertions, 35 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" } }
diff --git a/doc/administration/audit_events.md b/doc/administration/audit_events.md
index d40e2c86dc9..73618fc209c 100644
--- a/doc/administration/audit_events.md
+++ b/doc/administration/audit_events.md
@@ -50,7 +50,7 @@ Group audit events can also be accessed using the [Group Audit Events API](../ap
 
 Project audit events can also be accessed using the [Project Audit Events API](../api/audit_events.md#project-audit-events). Project audit event queries are limited to a maximum of 30 days.
 
-### Instance audit events **(PREMIUM SAAS)**
+### Instance audit events **(PREMIUM SELF)**
 
 You can view audit events from user actions across an entire GitLab instance.
 To view instance audit events:
diff --git a/doc/administration/geo/disaster_recovery/bring_primary_back.md b/doc/administration/geo/disaster_recovery/bring_primary_back.md
index be4f4d3f6a4..7e4a5cc01af 100644
--- a/doc/administration/geo/disaster_recovery/bring_primary_back.md
+++ b/doc/administration/geo/disaster_recovery/bring_primary_back.md
@@ -75,3 +75,46 @@ If your objective is to have two sites again, you need to bring your **secondary
 site back online as well by repeating the first step
 ([configure the former **primary** site to be a **secondary** site](#configure-the-former-primary-site-to-be-a-secondary-site))
 for the **secondary** site.
+
+## Skipping re-transfer of data on a **secondary** site
+
+When a secondary site is added, if it contains data that would otherwise be synced from the primary, then Geo avoids re-transferring the data.
+
+- Git repositories are transferred by `git fetch`, which only transfers missing refs.
+- Geo's container registry sync code compares tags and only pulls missing tags.
+- [Blobs/files](#skipping-re-transfer-of-blobs-or-files) are skipped if they exist on the first sync.
+
+This behavior is useful when:
+
+- You do a planned failover and demote the old primary site by attaching it as a secondary site without rebuilding it.
+- You do a failover test by promoting and demoting a secondary site and reattach it without rebuilding it.
+- You restore a backup and attach the site as a secondary site.
+- You manually copy data to a secondary site to workaround a sync problem.
+- You delete or truncate registry table rows in the Geo tracking database to workaround a problem.
+- You reset the Geo tracking database to workaround a problem.
+
+### Skipping re-transfer of blobs or files
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/352530) in GitLab 16.8 [with a flag](../../feature_flags.md) named `geo_skip_download_if_exists`. Disabled by default.
+
+FLAG:
+On self-managed GitLab, by default this feature is not available. To make it available, an administrator can [enable the feature flag](../../feature_flags.md) named `geo_skip_download_if_exists`.
+On GitLab.com, this feature is not available.
+
+When you add a secondary site which has preexisting file data, then the secondary Geo site will avoid re-transferring that data. This applies to:
+
+- CI job artifacts
+- CI pipeline artifacts
+- CI secure files
+- LFS objects
+- Merge request diffs
+- Package files
+- Pages deployments
+- Terraform state versions
+- Uploads
+- Dependency proxy manifests
+- Dependency proxy blobs
+
+If the secondary site's copy is actually corrupted, then background verification will eventually fail, and the file will be resynced.
+
+Files will only be skipped in this manner if they do not have a corresponding registry record in the Geo tracking database. The conditions are strict because resyncing is almost always intentional, and we cannot risk mistakenly skipping a transfer.
diff --git a/doc/api/events.md b/doc/api/events.md
index 655b6b43a6b..5e9301a6550 100644
--- a/doc/api/events.md
+++ b/doc/api/events.md
@@ -76,6 +76,7 @@ Example response:
     "project_id":1,
     "action_name":"opened",
     "target_id":160,
+    "target_iid":53,
     "target_type":"Issue",
     "author_id":25,
     "target_title":"Qui natus eos odio tempore et quaerat consequuntur ducimus cupiditate quis.",
@@ -96,6 +97,7 @@ Example response:
     "project_id":1,
     "action_name":"opened",
     "target_id":159,
+    "target_iid":14,
     "target_type":"Issue",
     "author_id":21,
     "target_title":"Nostrum enim non et sed optio illo deleniti non.",
@@ -149,6 +151,7 @@ Example response:
     "project_id": 15,
     "action_name": "closed",
     "target_id": 830,
+    "target_iid": 82,
     "target_type": "Issue",
     "author_id": 1,
     "target_title": "Public project search field",
@@ -168,6 +171,7 @@ Example response:
     "project_id": 15,
     "action_name": "pushed",
     "target_id": null,
+    "target_iid": null,
     "target_type": null,
     "author_id": 1,
     "author": {
@@ -196,6 +200,7 @@ Example response:
     "project_id": 15,
     "action_name": "closed",
     "target_id": 840,
+    "target_iid": 11,
     "target_type": "Issue",
     "author_id": 1,
     "target_title": "Finish & merge Code search PR",
@@ -215,6 +220,7 @@ Example response:
     "project_id": 15,
     "action_name": "commented on",
     "target_id": 1312,
+    "target_iid": 61,
     "target_type": "Note",
     "author_id": 1,
     "target_title": null,
diff --git a/doc/development/documentation/versions.md b/doc/development/documentation/versions.md
index 22fda69094b..0168cd39f01 100644
--- a/doc/development/documentation/versions.md
+++ b/doc/development/documentation/versions.md
@@ -217,6 +217,10 @@ GitLab 16.0, 15.0, and 14.0 are supported.
 
 If you see version history items or inline text that refers to unsupported versions, you can remove it.
 
+In the version history, remove information about [features behind feature flags](feature_flags.md)
+only if all events related to the feature flag happened in unsupported versions.
+If the flag hasn't been removed, readers should know when it was introduced.
+
 Historical feature information is available in [release posts](https://about.gitlab.com/releases/)
 or by searching for the issue or merge request where the work was done.
 
diff --git a/doc/development/rubocop_development_guide.md b/doc/development/rubocop_development_guide.md
index e56443d5653..16c946a4aec 100644
--- a/doc/development/rubocop_development_guide.md
+++ b/doc/development/rubocop_development_guide.md
@@ -112,7 +112,7 @@ A grace period can safely be lifted as soon as there are no warnings for 1 week
 1. Enable the new cop in `.rubocop.yml` (if not already done via [`gitlab-styles`](https://gitlab.com/gitlab-org/ruby/gems/gitlab-styles)).
 1. [Generate TODOs for the new cop](rake_tasks.md#generate-initial-rubocop-todo-list).
 1. [Set the new cop to `grace period`](#cop-grace-period).
-1. Create an issue to fix TODOs and encourage community contributions (via ~"quick win" and/or ~"Seeking community contributions"). [See some examples](https://gitlab.com/gitlab-org/gitlab/-/issues/?sort=created_date&state=opened&label_name%5B%5D=quick%20wins&label_name%5B%5D=static%20code%20analysis&first_page_size=20).
+1. Create an issue to fix TODOs and encourage community contributions (via ~"quick win" and/or ~"Seeking community contributions"). [See some examples](https://gitlab.com/gitlab-org/gitlab/-/issues/?sort=created_date&state=opened&label_name%5B%5D=quick%20win&label_name%5B%5D=static%20code%20analysis&first_page_size=20).
 1. Create an issue to remove `grace period` after 1 week of silence in the `#f_rubocop` Slack channel. [See an example](https://gitlab.com/gitlab-org/gitlab/-/issues/374903).
 
 ## Silenced offenses
diff --git a/doc/user/clusters/agent/index.md b/doc/user/clusters/agent/index.md
index a764d0006a1..20d3448aceb 100644
--- a/doc/user/clusters/agent/index.md
+++ b/doc/user/clusters/agent/index.md
@@ -99,6 +99,21 @@ This channel is used for all communication between the agent and KAS:
 
 For detailed information about channel routing, see [Routing KAS requests in the agent](https://gitlab.com/gitlab-org/cluster-integration/gitlab-agent/-/blob/master/doc/kas_request_routing.md).
 
+## Kubernetes integration glossary
+
+This glossary provides definitions for terms related to the GitLab Kubernetes integration.
+
+| Term | Definition | Scope |
+| --- | --- | --- |
+| GitLab agent for Kubernetes | The overall offering, including related features and the underlying components `agentk` and `kas`. | GitLab, Kubernetes, Flux |
+| `agentk` | The cluster-side component that maintains a secure connection to GitLab for Kubernetes management and deployment automation. | GitLab |
+| GitLab agent server for Kubernetes (`kas`) | The GitLab-side component of GitLab that handles operations and logic for the Kubernetes agent integration. Manages the connection and communication between GitLab and Kubernetes clusters. | GitLab |
+| Pull-based deployment | A deployment method where Flux checks for changes in a Git repository and automatically applies these changes to the cluster. | GitLab, Kubernetes |
+| Push-based deployment | A deployment method where updates are sent from GitLab CI/CD pipelines to the Kubernetes cluster. | GitLab |
+| Flux | An open-source GitOps tool that integrates with the agent for pull-based deployments. | GitOps, Kubernetes |
+| GitOps | A set of practices that involve using Git for version control and collaboration in the management and automation of cloud and Kubernetes resources. | DevOps, Kubernetes |
+| Kubernetes namespace | A logical partition in a Kubernetes cluster that divides cluster resources between multiple users or environments. | Kubernetes |
+
 ## Related topics
 
 - [GitOps workflow](gitops.md)
diff --git a/doc/user/clusters/agent/kas_glossary.md b/doc/user/clusters/agent/kas_glossary.md
index d2d4065f3fb..b21f8590d5e 100644
--- a/doc/user/clusters/agent/kas_glossary.md
+++ b/doc/user/clusters/agent/kas_glossary.md
@@ -1,20 +1,11 @@
 ---
-stage: Deploy
-group: Environments
-info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://handbook.gitlab.com/handbook/product/ux/technical-writing/#assignments
+redirect_to: 'index.md#kubernetes-integration-glossary'
+remove_date: '2024-04-17'
 ---
 
-# Kubernetes integration glossary **(FREE ALL)**
+This document was moved to [another location](index.md#kubernetes-integration-glossary).
 
-This glossary provides definitions for terms related to the GitLab Kubernetes integration.
-
-| Term | Definition | Scope |
-| --- | --- | --- |
-| GitLab agent for Kubernetes | The overall offering, including related features and the underlying components `agentk` and `kas`. | GitLab, Kubernetes, Flux |
-| `agentk` | The cluster-side component that maintains a secure connection to GitLab for Kubernetes management and deployment automation. | GitLab |
-| GitLab agent server for Kubernetes (`kas`) | The GitLab-side component of GitLab that handles operations and logic for the Kubernetes agent integration. Manages the connection and communication between GitLab and Kubernetes clusters. | GitLab |
-| Pull-based deployment | A deployment method where Flux checks for changes in a Git repository and automatically applies these changes to the cluster. | GitLab, Kubernetes |
-| Push-based deployment | A deployment method where updates are sent from GitLab CI/CD pipelines to the Kubernetes cluster. | GitLab |
-| Flux | An open-source GitOps tool that integrates with the agent for pull-based deployments. | GitOps, Kubernetes |
-| GitOps | A set of practices that involve using Git for version control and collaboration in the management and automation of cloud and Kubernetes resources. | DevOps, Kubernetes |
-| Kubernetes namespace | A logical partition in a Kubernetes cluster that divides cluster resources between multiple users or environments. | Kubernetes |
+<!-- This redirect file can be deleted after <2024-04-17>. -->
+<!-- Redirects that point to other docs in the same project expire in three months. -->
+<!-- Redirects that point to docs in a different project or site (for example, link is not relative and starts with `https:`) expire in one year. -->
+<!-- Before deletion, see: https://docs.gitlab.com/ee/development/documentation/redirects.html -->
diff --git a/doc/user/group/import/index.md b/doc/user/group/import/index.md
index 2c26b3cf38d..42a3ce32e89 100644
--- a/doc/user/group/import/index.md
+++ b/doc/user/group/import/index.md
@@ -59,8 +59,8 @@ groups are in the same GitLab instance. Transferring groups is a faster and more
 
 ## Known issues
 
-See [epic 6629](https://gitlab.com/groups/gitlab-org/-/epics/6629) for a list of known issues for migrating by direct
-transfer.
+- Because of [issue 406685](https://gitlab.com/gitlab-org/gitlab/-/issues/406685), files with a file name longer than 255 characters are not migrated.
+- For a list of other known issues, see [epic 6629](https://gitlab.com/groups/gitlab-org/-/epics/6629).
 
 ## Estimating migration duration
 
diff --git a/doc/user/index.md b/doc/user/index.md
index dc75d801330..858173a40a8 100644
--- a/doc/user/index.md
+++ b/doc/user/index.md
@@ -9,15 +9,9 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 Get to know the GitLab end-to-end workflow. Configure permissions,
 organize your work, create and secure your application, and analyze its performance. Report on team productivity throughout the process.
 
-- [Learn Git](../topics/git/index.md)
-- [Set up your organization](../topics/set_up_organization.md)
-- [Organize work with projects](../user/project/organize_work_with_projects.md)
-- [Plan and track work](../topics/plan_and_track.md)
-- [Manage your code](../topics/manage_code.md)
-- [Use CI/CD to build your application](../topics/build_your_application.md)
-- [Secure your application](../user/application_security/secure_your_application.md)
-- [Deploy and release your application](../topics/release_your_application.md)
-- [Monitor application performance](../operations/index.md)
-- [Monitor runner performance](https://docs.gitlab.com/runner/monitoring/index.html)
-- [Manage your infrastructure](../user/infrastructure/index.md)
-- [Analyze GitLab usage](../user/analytics/index.md)
+| | | |
+|--|--|--|
+| [**Learn Git**](../topics/git/index.md) **{chevron-right}**<br><br>Common commands and workflows. | [**Set up your organization**](../topics/set_up_organization.md) **{chevron-right}**<br><br>Users, groups, namespaces, SSH keys.| [**Organize work with projects**](../user/project/organize_work_with_projects.md) **{chevron-right}**<br><br>Project visibility, search, badges, layout.|
+| [**Plan and track work**](../topics/plan_and_track.md) **{chevron-right}**<br><br>Epics, issues, milestones, labels.| [**Manage your code**](../topics/manage_code.md) **{chevron-right}**<br><br>Repositories, merge requests, remote development. | [**Use CI/CD to build your application**](../topics/build_your_application.md) **{chevron-right}**<br><br>Runners, jobs, pipelines, variables. |
+| [**Secure your application**](../user/application_security/secure_your_application.md) **{chevron-right}**<br><br>Container, dependency, and vulnerability scans. | [**Deploy and release your application**](../topics/release_your_application.md) **{chevron-right}**<br><br>Environments, packages, review apps, GitLab Pages. | [**Monitor application performance**](../operations/index.md) **{chevron-right}**<br><br>Error tracking, incident management. |
+| [**Monitor runner usage**](https://docs.gitlab.com/runner/monitoring/index.html) **{chevron-right}**<br><br>Prometheus metrics | [**Manage your infrastructure**](../user/infrastructure/index.md) **{chevron-right}**<br><br>Terraform and Kubernetes deployments.| [**Analyze GitLab usage**](../user/analytics/index.md) **{chevron-right}**<br><br>Instance, group, and project analytics. |
diff --git a/spec/frontend/usage_quotas/storage/components/container_registry_usage_spec.js b/spec/frontend/usage_quotas/storage/components/container_registry_usage_spec.js
new file mode 100644
index 00000000000..f1d6adbc65c
--- /dev/null
+++ b/spec/frontend/usage_quotas/storage/components/container_registry_usage_spec.js
@@ -0,0 +1,51 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ContainerRegistryUsage from '~/usage_quotas/storage/components/container_registry_usage.vue';
+import StorageTypeWarning from '~/usage_quotas/storage/components/storage_type_warning.vue';
+
+describe('Container registry usage component', () => {
+  let wrapper;
+
+  const defaultProps = {
+    containerRegistrySize: 512,
+    containerRegistrySizeIsEstimated: false,
+  };
+
+  const findTotalSizeSection = () => wrapper.findByTestId('total-size-section');
+  const findWarningIcon = () => wrapper.findComponent(StorageTypeWarning);
+
+  const createComponent = (props) => {
+    wrapper = shallowMountExtended(ContainerRegistryUsage, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      stubs: {
+        StorageTypeWarning,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('displays the total size section when prop is provided', () => {
+    expect(findTotalSizeSection().props('value')).toBe(defaultProps.containerRegistrySize);
+  });
+
+  describe('estimated value indication', () => {
+    it('hides warning icon', () => {
+      createComponent({
+        containerRegistrySizeIsEstimated: false,
+      });
+      expect(findWarningIcon().exists()).toBe(false);
+    });
+
+    it('displays warning icon', () => {
+      createComponent({
+        containerRegistrySizeIsEstimated: true,
+      });
+      expect(findWarningIcon().exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js b/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js
index 27fbfbe6c2c..544666ddc5d 100644
--- a/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js
@@ -3,6 +3,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import NamespaceStorageApp from '~/usage_quotas/storage/components/namespace_storage_app.vue';
 import StorageUsageStatistics from '~/usage_quotas/storage/components/storage_usage_statistics.vue';
 import DependencyProxyUsage from '~/usage_quotas/storage/components/dependency_proxy_usage.vue';
+import ContainerRegistryUsage from '~/usage_quotas/storage/components/container_registry_usage.vue';
 import { defaultNamespaceProvideValues } from '../mock_data';
 
 const defaultProps = {
@@ -13,6 +14,8 @@ const defaultProps = {
   namespace: {
     rootStorageStatistics: {
       storageSize: 1234,
+      containerRegistrySize: 111,
+      containerRegistrySizeIsEstimated: false,
     },
   },
 };
@@ -23,6 +26,7 @@ describe('NamespaceStorageApp', () => {
 
   const findStorageUsageStatistics = () => wrapper.findComponent(StorageUsageStatistics);
   const findDependencyProxy = () => wrapper.findComponent(DependencyProxyUsage);
+  const findContainerRegistry = () => wrapper.findComponent(ContainerRegistryUsage);
   const findBreakdownSubtitle = () => wrapper.findByTestId('breakdown-subtitle');
 
   const createComponent = ({ provide = {}, props = {} } = {}) => {
@@ -75,5 +79,29 @@ describe('NamespaceStorageApp', () => {
         expect(findDependencyProxy().exists()).toBe(false);
       });
     });
+
+    describe('ContainerRegistryUsage', () => {
+      beforeEach(async () => {
+        createComponent();
+        await waitForPromises();
+      });
+
+      it('will be rendered', () => {
+        expect(findContainerRegistry().exists()).toBe(true);
+      });
+
+      it('will receive relevant props', () => {
+        const {
+          containerRegistrySize,
+          containerRegistrySizeIsEstimated,
+        } = defaultProps.namespace.rootStorageStatistics;
+
+        expect(findContainerRegistry().props()).toEqual({
+          containerRegistrySize,
+          containerRegistrySizeIsEstimated,
+          loading: false,
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/usage_quotas/storage/components/storage_type_warning_spec.js b/spec/frontend/usage_quotas/storage/components/storage_type_warning_spec.js
new file mode 100644
index 00000000000..c77a9ddbb95
--- /dev/null
+++ b/spec/frontend/usage_quotas/storage/components/storage_type_warning_spec.js
@@ -0,0 +1,36 @@
+import { nextTick } from 'vue';
+import { GlPopover } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import StorageTypeWarning from '~/usage_quotas/storage/components/storage_type_warning.vue';
+
+let wrapper;
+
+const createComponent = ({ content }) => {
+  wrapper = shallowMount(StorageTypeWarning, {
+    slots: {
+      default: content,
+    },
+    stubs: {
+      GlPopover,
+    },
+  });
+};
+
+const findGlPopover = () => wrapper.findComponent(GlPopover);
+
+describe('StorageTypeWarning', () => {
+  const content = 'Bucha';
+
+  beforeEach(async () => {
+    createComponent({ content });
+    await nextTick();
+  });
+
+  it('will display a popover', () => {
+    expect(findGlPopover().exists()).toBe(true);
+  });
+
+  it('will pass through content to popover', () => {
+    expect(findGlPopover().html()).toContain(content);
+  });
+});