From c1f8516f53d7c5cb38f12f7663393fc81cd800d9 Mon Sep 17 00:00:00 2001
From: Sheldon Led <sheldonled@gitlab.com>
Date: Mon, 22 Jan 2024 19:56:08 +0000
Subject: [PATCH] Move projectList to CE
---
.../components/namespace_storage_app.vue | 64 ++++++++++++++++++-
.../storage/components/project_list.vue | 4 +-
.../components/storage_type_help_link.vue | 0
.../components/namespace_storage_app.vue | 56 ++--------------
.../components/namespace_storage_app_spec.js | 2 +-
.../storage/components/project_list_spec.js | 4 +-
.../components/storage_type_help_link_spec.js | 2 +-
.../usage_quotas/storage/mock_data.js | 3 +
8 files changed, 77 insertions(+), 58 deletions(-)
rename {ee/app => app}/assets/javascripts/usage_quotas/storage/components/project_list.vue (97%)
rename {ee/app => app}/assets/javascripts/usage_quotas/storage/components/storage_type_help_link.vue (100%)
rename {ee/spec => spec}/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js (92%)
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 a812b90e378af..1594e125da356 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,20 +1,23 @@
<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>
diff --git a/ee/app/assets/javascripts/usage_quotas/storage/components/project_list.vue b/app/assets/javascripts/usage_quotas/storage/components/project_list.vue
similarity index 97%
rename from ee/app/assets/javascripts/usage_quotas/storage/components/project_list.vue
rename to app/assets/javascripts/usage_quotas/storage/components/project_list.vue
index 617b3a26acdba..c6f9b1fff0339 100644
--- a/ee/app/assets/javascripts/usage_quotas/storage/components/project_list.vue
+++ b/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',
diff --git a/ee/app/assets/javascripts/usage_quotas/storage/components/storage_type_help_link.vue b/app/assets/javascripts/usage_quotas/storage/components/storage_type_help_link.vue
similarity index 100%
rename from ee/app/assets/javascripts/usage_quotas/storage/components/storage_type_help_link.vue
rename to app/assets/javascripts/usage_quotas/storage/components/storage_type_help_link.vue
diff --git a/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue b/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue
index 51cab8c0dc73f..aefdcac650547 100644
--- a/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue
+++ b/ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue
@@ -1,24 +1,19 @@
<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>
diff --git a/ee/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js b/ee/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js
index e13c55cfdc966..9ecf3bca40b96 100644
--- a/ee/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js
+++ b/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';
diff --git a/ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js b/ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js
index 7341c9d78b6c9..f3ef29a67db3c 100644
--- a/ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js
+++ b/ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js
@@ -1,9 +1,9 @@
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';
diff --git a/ee/spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js b/spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js
similarity index 92%
rename from ee/spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js
rename to spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js
index bbc800076c47c..9c855e4bec1da 100644
--- a/ee/spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/storage_type_help_link_spec.js
@@ -1,6 +1,6 @@
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;
diff --git a/spec/frontend/usage_quotas/storage/mock_data.js b/spec/frontend/usage_quotas/storage/mock_data.js
index e78866145754e..3f615f01e173b 100644
--- a/spec/frontend/usage_quotas/storage/mock_data.js
+++ b/spec/frontend/usage_quotas/storage/mock_data.js
@@ -1,6 +1,7 @@
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,
};
--
GitLab