1 files changed, 17 insertions, 2 deletions
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 efdb1b185d4..a812b90e378 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,6 +1,7 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
 import StorageUsageStatistics from 'ee_else_ce/usage_quotas/storage/components/storage_usage_statistics.vue';
+import SearchAndSortBar from '~/usage_quotas/components/search_and_sort_bar/search_and_sort_bar.vue';
 import DependencyProxyUsage from './dependency_proxy_usage.vue';
 import ContainerRegistryUsage from './container_registry_usage.vue';
 
@@ -11,8 +12,9 @@ export default {
     StorageUsageStatistics,
     DependencyProxyUsage,
     ContainerRegistryUsage,
+    SearchAndSortBar,
   },
-  inject: ['userNamespace'],
+  inject: ['userNamespace', 'namespaceId'],
   props: {
     namespaceLoadingError: {
       type: Boolean,
@@ -89,6 +91,19 @@ export default {
       :loading="isNamespaceStorageStatisticsLoading"
     />
 
-    <slot name="ee-storage-app"></slot>
+    <section class="gl-mt-5">
+      <div class="gl-bg-gray-10 gl-p-5 gl-display-flex">
+        <search-and-sort-bar
+          :namespace="namespaceId"
+          :search-input-placeholder="__('Search')"
+          @onFilter="
+            (searchTerm) => {
+              $emit('search', searchTerm);
+            }
+          "
+        />
+      </div>
+      <slot name="ee-storage-app"></slot>
+    </section>
   </div>
 </template>