Move projectList to CE

app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue

 <script>
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlKeysetPagination } 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';
+import ProjectList from './project_list.vue';
 
 export default {
   name: 'NamespaceStorageApp',
   components: {
     GlAlert,
+    GlKeysetPagination,
     StorageUsageStatistics,
     DependencyProxyUsage,
     ContainerRegistryUsage,
     SearchAndSortBar,
+    ProjectList,
   },
-  inject: ['userNamespace', 'namespaceId'],
+  inject: ['userNamespace', 'namespaceId', 'helpLinks', 'defaultPerPage'],
   props: {
     namespaceLoadingError: {
       type: Boolean,
@@ -31,11 +34,26 @@ export default {
       required: false,
       default: false,
     },
+    isNamespaceProjectsLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     namespace: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    projects: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    initialSortBy: {
+      type: String,
+      required: false,
+      default: 'storage',
+    },
   },
   computed: {
     usedStorage() {
@@ -55,6 +73,27 @@ export default {
     containerRegistrySizeIsEstimated() {
       return this.namespace.rootStorageStatistics?.containerRegistrySizeIsEstimated ?? false;
     },
+    projectList() {
+      return this.projects?.nodes ?? [];
+    },
+    pageInfo() {
+      return this.projects?.pageInfo;
+    },
+    showPagination() {
+      return Boolean(this.pageInfo?.hasPreviousPage || this.pageInfo?.hasNextPage);
+    },
+  },
+  methods: {
+    onPrev(before) {
+      if (this.pageInfo?.hasPreviousPage) {
+        this.$emit('fetch-more-projects', { before, last: this.defaultPerPage, first: undefined });
+      }
+    },
+    onNext(after) {
+      if (this.pageInfo?.hasNextPage) {
+        this.$emit('fetch-more-projects', { after, first: this.defaultPerPage });
+      }
+    },
   },
 };
 </script>
@@ -103,7 +142,26 @@ export default {
           "
         />
       </div>
-      <slot name="ee-storage-app"></slot>
+      <project-list
+        :projects="projectList"
+        :is-loading="isNamespaceProjectsLoading"
+        :help-links="helpLinks"
+        :sort-by="initialSortBy"
+        :sort-desc="true"
+        @sortChanged="
+          ($event) => {
+            $emit('sort-changed', $event);
+          }
+        "
+      />
+      <div class="gl-display-flex gl-justify-content-center gl-mt-5">
+        <gl-keyset-pagination
+          v-if="showPagination"
+          v-bind="pageInfo"
+          @prev="onPrev"
+          @next="onNext"
+        />
+      </div>
     </section>
   </div>
 </template>

ee/app/assets/javascripts/usage_quotas/storage/components/project_list.vue → app/assets/javascripts/usage_quotas/storage/components/project_list.vue

@@ -5,8 +5,8 @@ import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import { containerRegistryPopover } from '~/usage_quotas/storage/constants';
 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 StorageTypeHelpLink from 'ee/usage_quotas/storage/components/storage_type_help_link.vue';
-import StorageTypeWarning from '~/usage_quotas/storage/components/storage_type_warning.vue';
+import StorageTypeHelpLink from './storage_type_help_link.vue';
+import StorageTypeWarning from './storage_type_warning.vue';
 
 export default {
   name: 'ProjectList',

ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue

 <script>
-import { GlKeysetPagination } from '@gitlab/ui';
 import { captureException } from '~/ci/runner/sentry_utils';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import CeNamespaceStorageApp from '~/usage_quotas/storage/components/namespace_storage_app.vue';
 import NamespaceStorageQuery from '../queries/namespace_storage.query.graphql';
 import ProjectListStorageQuery from '../queries/project_list_storage.query.graphql';
 import { parseGetStorageResults } from '../utils';
-import ProjectList from './project_list.vue';
 
 export default {
   name: 'NamespaceStorageApp',
   components: {
-    GlKeysetPagination,
     CeNamespaceStorageApp,
-    ProjectList,
   },
   inject: [
     'namespaceId',
     'namespacePath',
-    'helpLinks',
     'defaultPerPage',
     'userNamespace',
     'isUsingProjectEnforcementWithLimits',
@@ -64,20 +59,8 @@ export default {
       namespaceLoadingError: false,
       projectsLoadingError: false,
       sortKey: this.isUsingProjectEnforcementWithLimits ? 'STORAGE' : 'STORAGE_SIZE_DESC',
-      initialSortBy: this.isUsingProjectEnforcementWithLimits ? null : 'storage',
     };
   },
-  computed: {
-    projectList() {
-      return this.projects?.nodes ?? [];
-    },
-    pageInfo() {
-      return this.projects?.pageInfo;
-    },
-    showPagination() {
-      return Boolean(this.pageInfo?.hasPreviousPage || this.pageInfo?.hasNextPage);
-    },
-  },
   methods: {
     onSearch(searchTerm) {
       if (searchTerm?.length < 3) {
@@ -110,16 +93,6 @@ export default {
         },
       });
     },
-    onPrev(before) {
-      if (this.pageInfo?.hasPreviousPage) {
-        this.fetchMoreProjects({ before, last: this.defaultPerPage, first: undefined });
-      }
-    },
-    onNext(after) {
-      if (this.pageInfo?.hasNextPage) {
-        this.fetchMoreProjects({ after, first: this.defaultPerPage });
-      }
-    },
   },
 };
 </script>
@@ -128,27 +101,12 @@ export default {
     :projects-loading-error="projectsLoadingError"
     :namespace-loading-error="namespaceLoadingError"
     :is-namespace-storage-statistics-loading="$apollo.queries.namespace.loading"
+    :is-namespace-projects-loading="$apollo.queries.projects.loading"
     :namespace="namespace"
-    @search="onSearch($event)"
-  >
-    <template #ee-storage-app>
-      <project-list
-        :projects="projectList"
-        :is-loading="$apollo.queries.projects.loading"
-        :help-links="helpLinks"
-        :sort-by="initialSortBy"
-        :sort-desc="true"
-        @sortChanged="onSortChanged($event)"
-      />
-
-      <div class="gl-display-flex gl-justify-content-center gl-mt-5">
-        <gl-keyset-pagination
-          v-if="showPagination"
-          v-bind="pageInfo"
-          @prev="onPrev"
-          @next="onNext"
-        />
-      </div>
-    </template>
-  </ce-namespace-storage-app>
+    :projects="projects"
+    :initial-sort-by="isUsingProjectEnforcementWithLimits ? null : 'storage'"
+    @search="onSearch"
+    @sort-changed="onSortChanged"
+    @fetch-more-projects="fetchMoreProjects"
+  />
 </template>

ee/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js

@@ -6,7 +6,7 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { captureException } from '~/ci/runner/sentry_utils';
 import NamespaceStorageApp from 'ee/usage_quotas/storage/components/namespace_storage_app.vue';
-import ProjectList from 'ee/usage_quotas/storage/components/project_list.vue';
+import ProjectList from '~/usage_quotas/storage/components/project_list.vue';
 import getNamespaceStorageQuery from 'ee/usage_quotas/storage/queries/namespace_storage.query.graphql';
 import getProjectListStorageQuery from 'ee/usage_quotas/storage/queries/project_list_storage.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';

ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js

 import { GlTable } from '@gitlab/ui';
 import { merge } from 'lodash';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import ProjectList from 'ee/usage_quotas/storage/components/project_list.vue';
+import ProjectList from '~/usage_quotas/storage/components/project_list.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import StorageTypeHelpLink from 'ee/usage_quotas/storage/components/storage_type_help_link.vue';
+import StorageTypeHelpLink from '~/usage_quotas/storage/components/storage_type_help_link.vue';
 import StorageTypeWarning from '~/usage_quotas/storage/components/storage_type_warning.vue';
 import { storageTypeHelpPaths } from '~/usage_quotas/storage/constants';
 import { stubComponent } from 'helpers/stub_component';

ee/spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js → spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js

 import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import StorageTypeHelpLink from 'ee/usage_quotas/storage/components/storage_type_help_link.vue';
+import StorageTypeHelpLink from '~/usage_quotas/storage/components/storage_type_help_link.vue';
 import { storageTypeHelpPaths } from '~/usage_quotas/storage/constants';
 
 let wrapper;

spec/frontend/usage_quotas/storage/mock_data.js

 import mockGetProjectStorageStatisticsGraphQLResponse from 'test_fixtures/graphql/usage_quotas/storage/project_storage.query.graphql.json';
 import mockGetNamespaceStorageGraphQLResponse from 'test_fixtures/graphql/usage_quotas/storage/namespace_storage.query.graphql.json';
 import mockGetProjectListStorageGraphQLResponse from 'test_fixtures/graphql/usage_quotas/storage/project_list_storage.query.graphql.json';
+import { storageTypeHelpPaths } from '~/usage_quotas/storage/constants';
 
 export { mockGetProjectStorageStatisticsGraphQLResponse };
 export { mockGetNamespaceStorageGraphQLResponse };
@@ -15,4 +16,6 @@ export const defaultProjectProvideValues = {
 export const defaultNamespaceProvideValues = {
   userNamespace: false,
   namespaceId: '42',
+  defaultPerPage: 20,
+  helpLinks: storageTypeHelpPaths,
 };