diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js new file mode 100644 index 00000000000..246a6768593 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js @@ -0,0 +1,121 @@ +import { GlToast } from '@gitlab/ui'; +import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import PerformancePlugin from '~/performance/vue_performance_plugin'; +import Translate from '~/vue_shared/translate'; +import RegistryBreadcrumb from './components/registry_breadcrumb.vue'; +import { apolloProvider } from './graphql/index'; +import RegistryExplorer from './pages/index.vue'; +import createRouter from './router'; + +Vue.use(Translate); +Vue.use(GlToast); + +Vue.use(PerformancePlugin, { + components: [ + 'RegistryListPage', + 'ListHeader', + 'ImageListRow', + 'RegistryDetailsPage', + 'DetailsHeader', + 'TagsList', + ], +}); + +export default () => { + const el = document.getElementById('js-container-registry'); + + if (!el) { + return null; + } + + const { + endpoint, + expirationPolicy, + isGroupPage, + isAdmin, + showCleanupPolicyOnAlert, + showUnfinishedTagCleanupCallout, + connectionError, + invalidPathError, + ...config + } = el.dataset; + + // This is a mini state to help the breadcrumb have the correct name in the details page + const breadCrumbState = Vue.observable({ + name: '', + updateName(value) { + this.name = value; + }, + }); + + const router = createRouter(endpoint, breadCrumbState); + + const attachMainComponent = () => + new Vue({ + el, + router, + apolloProvider, + components: { + RegistryExplorer, + }, + provide() { + return { + breadCrumbState, + config: { + ...config, + expirationPolicy: expirationPolicy ? JSON.parse(expirationPolicy) : undefined, + isGroupPage: parseBoolean(isGroupPage), + isAdmin: parseBoolean(isAdmin), + showCleanupPolicyOnAlert: parseBoolean(showCleanupPolicyOnAlert), + showUnfinishedTagCleanupCallout: parseBoolean(showUnfinishedTagCleanupCallout), + connectionError: parseBoolean(connectionError), + invalidPathError: parseBoolean(invalidPathError), + }, + /* eslint-disable @gitlab/require-i18n-strings */ + dockerBuildCommand: `docker build -t ${config.repositoryUrl} .`, + dockerPushCommand: `docker push ${config.repositoryUrl}`, + dockerLoginCommand: `docker login ${config.registryHostUrlWithPort}`, + /* eslint-enable @gitlab/require-i18n-strings */ + }; + }, + render(createElement) { + return createElement('registry-explorer'); + }, + }); + + const attachBreadcrumb = () => { + const breadCrumbEls = document.querySelectorAll('nav .js-breadcrumbs-list li'); + const breadCrumbEl = breadCrumbEls[breadCrumbEls.length - 1]; + const crumbs = [breadCrumbEl.querySelector('h2')]; + const nestedBreadcrumbEl = document.createElement('div'); + breadCrumbEl.replaceChild(nestedBreadcrumbEl, breadCrumbEl.querySelector('h2')); + return new Vue({ + el: nestedBreadcrumbEl, + router, + apolloProvider, + components: { + RegistryBreadcrumb, + }, + render(createElement) { + // FIXME(@tnir): this is a workaround until the MR gets merged: + // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48115 + const parentEl = breadCrumbEl.parentElement.parentElement; + if (parentEl) { + parentEl.classList.remove('breadcrumbs-container'); + parentEl.classList.add('gl-display-flex'); + parentEl.classList.add('w-100'); + } + // End of FIXME(@tnir) + return createElement('registry-breadcrumb', { + class: breadCrumbEl.className, + props: { + crumbs, + }, + }); + }, + }); + }; + + return { attachBreadcrumb, attachMainComponent }; +}; |