diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/dependency_proxy')
4 files changed, 75 insertions, 35 deletions
diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue index e18e6f7ed1a..6bb4a8797df 100644 --- a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue @@ -2,8 +2,8 @@ import { GlAlert, GlButton, - GlDropdown, - GlDropdownItem, + GlDisclosureDropdown, + GlDisclosureDropdownItem, GlFormGroup, GlFormInputGroup, GlSkeletonLoader, @@ -18,6 +18,8 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import ManifestsList from '~/packages_and_registries/dependency_proxy/components/manifests_list.vue'; import { GRAPHQL_PAGE_SIZE } from '~/packages_and_registries/dependency_proxy/constants'; +import { getPageParams } from '~/packages_and_registries/dependency_proxy/utils'; +import { extractPageInfo } from '~/packages_and_registries/shared/utils'; import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql'; @@ -25,8 +27,8 @@ export default { components: { GlAlert, GlButton, - GlDropdown, - GlDropdownItem, + GlDisclosureDropdown, + GlDisclosureDropdownItem, GlSkeletonLoader, GlFormGroup, GlFormInputGroup, @@ -79,11 +81,15 @@ export default { }, computed: { queryVariables() { - return { fullPath: this.groupPath, first: GRAPHQL_PAGE_SIZE }; + return { fullPath: this.groupPath, first: GRAPHQL_PAGE_SIZE, ...this.pageParams }; }, pageInfo() { return this.group.dependencyProxyManifests?.pageInfo; }, + pageParams() { + const pageInfo = extractPageInfo(this.$route.query); + return getPageParams(pageInfo); + }, manifests() { return this.group.dependencyProxyManifests?.nodes ?? []; }, @@ -123,25 +129,10 @@ export default { }, methods: { fetchNextPage() { - this.fetchMore({ - first: GRAPHQL_PAGE_SIZE, - after: this.pageInfo?.endCursor, - }); + this.$router.push({ query: { after: this.pageInfo?.endCursor } }); }, fetchPreviousPage() { - this.fetchMore({ - first: null, - last: GRAPHQL_PAGE_SIZE, - before: this.pageInfo?.startCursor, - }); - }, - fetchMore(variables) { - this.$apollo.queries.group.fetchMore({ - variables: { ...this.queryVariables, ...variables }, - updateQuery(_, { fetchMoreResult }) { - return fetchMoreResult; - }, - }); + this.$router.push({ query: { before: this.pageInfo?.startCursor } }); }, async submit() { try { @@ -165,20 +156,23 @@ export default { </gl-alert> <title-area :title="$options.i18n.pageTitle"> <template #right-actions> - <gl-dropdown + <gl-disclosure-dropdown v-if="showDeleteDropdown" icon="ellipsis_v" - text="More actions" + :toggle-text="__('More actions')" :text-sr-only="true" category="tertiary" + placement="right" no-caret > - <gl-dropdown-item - v-gl-modal-directive="$options.confirmClearCacheModal" - variant="danger" - >{{ $options.i18n.clearCache }}</gl-dropdown-item - > - </gl-dropdown> + <gl-disclosure-dropdown-item v-gl-modal-directive="$options.confirmClearCacheModal"> + <template #list-item> + <span class="gl-text-red-500"> + {{ $options.i18n.clearCache }} + </span> + </template> + </gl-disclosure-dropdown-item> + </gl-disclosure-dropdown> <gl-button v-if="canClearCache" v-gl-tooltip="$options.i18n.settingsText" @@ -198,14 +192,14 @@ export default { <gl-form-input-group id="proxy-url" readonly - :value="group.dependencyProxyImagePrefix" + :value="dependencyProxyImagePrefix" select-on-click class="gl-layout-w-limited" data-testid="proxy-url" > <template #append> <clipboard-button - :text="group.dependencyProxyImagePrefix" + :text="dependencyProxyImagePrefix" :title="$options.i18n.copyImagePrefixText" /> </template> diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/index.js b/app/assets/javascripts/packages_and_registries/dependency_proxy/index.js index 74444d2c7ec..c115898c75b 100644 --- a/app/assets/javascripts/packages_and_registries/dependency_proxy/index.js +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/index.js @@ -1,8 +1,8 @@ import Vue from 'vue'; import { parseBoolean } from '~/lib/utils/common_utils'; -import app from '~/packages_and_registries/dependency_proxy/app.vue'; import { apolloProvider } from '~/packages_and_registries/dependency_proxy/graphql'; import Translate from '~/vue_shared/translate'; +import createRouter from './router'; Vue.use(Translate); @@ -11,10 +11,18 @@ export const initDependencyProxyApp = () => { if (!el) { return null; } - const { groupPath, groupId, noManifestsIllustration, canClearCache, settingsPath } = el.dataset; + const { + endpoint, + groupPath, + groupId, + noManifestsIllustration, + canClearCache, + settingsPath, + } = el.dataset; return new Vue({ el, apolloProvider, + router: createRouter(endpoint), provide: { groupPath, groupId, @@ -23,7 +31,7 @@ export const initDependencyProxyApp = () => { settingsPath, }, render(createElement) { - return createElement(app); + return createElement('router-view'); }, }); }; diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/router.js b/app/assets/javascripts/packages_and_registries/dependency_proxy/router.js new file mode 100644 index 00000000000..087d8c189c4 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/router.js @@ -0,0 +1,14 @@ +import Vue from 'vue'; +import VueRouter from 'vue-router'; +import App from '~/packages_and_registries/dependency_proxy/app.vue'; + +Vue.use(VueRouter); + +export default function createRouter(base) { + const routes = [{ path: '/', name: 'dependencyProxyApp', component: App }]; + return new VueRouter({ + mode: 'history', + base, + routes, + }); +} diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/utils.js b/app/assets/javascripts/packages_and_registries/dependency_proxy/utils.js new file mode 100644 index 00000000000..e6b97fac896 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/utils.js @@ -0,0 +1,24 @@ +import { GRAPHQL_PAGE_SIZE } from './constants'; + +const getNextPageParams = (cursor) => ({ + after: cursor, + first: GRAPHQL_PAGE_SIZE, +}); + +const getPreviousPageParams = (cursor) => ({ + first: null, + before: cursor, + last: GRAPHQL_PAGE_SIZE, +}); + +export const getPageParams = (pageInfo = {}) => { + if (pageInfo.before) { + return getPreviousPageParams(pageInfo.before); + } + + if (pageInfo.after) { + return getNextPageParams(pageInfo.after); + } + + return {}; +}; |