diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer')
5 files changed, 13 insertions, 110 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue index 4fda4058711..7659ba5f9ea 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue @@ -7,6 +7,7 @@ import RegistryList from '~/packages_and_registries/shared/components/registry_l import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; +import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue'; import { REMOVE_TAGS_BUTTON_TITLE, TAGS_LIST_TITLE, @@ -20,7 +21,6 @@ import { } from '../../constants/index'; import getContainerRepositoryTagsQuery from '../../graphql/queries/get_container_repository_tags.query.graphql'; import TagsListRow from './tags_list_row.vue'; -import TagsLoader from './tags_loader.vue'; export default { name: 'TagsList', diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue deleted file mode 100644 index b7afa5fba33..00000000000 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue +++ /dev/null @@ -1,34 +0,0 @@ -<script> -import { GlSkeletonLoader } from '@gitlab/ui'; - -export default { - components: { - GlSkeletonLoader, - }, - loader: { - repeat: 10, - width: 1000, - height: 40, - }, -}; -</script> - -<template> - <div> - <gl-skeleton-loader - v-for="index in $options.loader.repeat" - :key="index" - :width="$options.loader.width" - :height="$options.loader.height" - preserve-aspect-ratio="xMinYMax meet" - > - <rect width="15" x="0" y="12.5" height="15" rx="4" /> - <rect width="250" x="25" y="10" height="20" rx="4" /> - <circle cx="290" cy="20" r="10" /> - <rect width="100" x="315" y="10" height="20" rx="4" /> - <rect width="100" x="500" y="10" height="20" rx="4" /> - <rect width="100" x="630" y="10" height="20" rx="4" /> - <rect x="960" y="0" width="40" height="40" rx="4" /> - </gl-skeleton-loader> - </div> -</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue deleted file mode 100644 index 07ee3c6083b..00000000000 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue +++ /dev/null @@ -1,71 +0,0 @@ -<script> -import { GlDropdown } from '@gitlab/ui'; -import Tracking from '~/tracking'; -import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; -import { - QUICK_START, - LOGIN_COMMAND_LABEL, - COPY_LOGIN_TITLE, - BUILD_COMMAND_LABEL, - COPY_BUILD_TITLE, - PUSH_COMMAND_LABEL, - COPY_PUSH_TITLE, -} from '../../constants/index'; - -const trackingLabel = 'quickstart_dropdown'; - -export default { - components: { - GlDropdown, - CodeInstruction, - }, - mixins: [Tracking.mixin({ label: trackingLabel })], - inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'], - trackingLabel, - i18n: { - QUICK_START, - LOGIN_COMMAND_LABEL, - COPY_LOGIN_TITLE, - BUILD_COMMAND_LABEL, - COPY_BUILD_TITLE, - PUSH_COMMAND_LABEL, - COPY_PUSH_TITLE, - }, -}; -</script> -<template> - <gl-dropdown - :text="$options.i18n.QUICK_START" - variant="info" - right - @shown="track('click_dropdown')" - > - <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form --> - <li role="presentation" class="px-2 py-1"> - <code-instruction - :label="$options.i18n.LOGIN_COMMAND_LABEL" - :instruction="dockerLoginCommand" - :copy-text="$options.i18n.COPY_LOGIN_TITLE" - tracking-action="click_copy_login" - :tracking-label="$options.trackingLabel" - /> - - <code-instruction - :label="$options.i18n.BUILD_COMMAND_LABEL" - :instruction="dockerBuildCommand" - :copy-text="$options.i18n.COPY_BUILD_TITLE" - tracking-action="click_copy_build" - :tracking-label="$options.trackingLabel" - /> - - <code-instruction - class="mb-0" - :label="$options.i18n.PUSH_COMMAND_LABEL" - :instruction="dockerPushCommand" - :copy-text="$options.i18n.COPY_PUSH_TITLE" - tracking-action="click_copy_push" - :tracking-label="$options.trackingLabel" - /> - </li> - </gl-dropdown> -</template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue index bb687ffdb89..931849c9918 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue @@ -5,6 +5,7 @@ import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { joinPaths } from '~/lib/utils/url_utility'; import Tracking from '~/tracking'; +import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue'; import DeleteImage from '../components/delete_image.vue'; import DeleteAlert from '../components/details_page/delete_alert.vue'; import DeleteModal from '../components/details_page/delete_modal.vue'; @@ -12,7 +13,6 @@ import DetailsHeader from '../components/details_page/details_header.vue'; import PartialCleanupAlert from '../components/details_page/partial_cleanup_alert.vue'; import StatusAlert from '../components/details_page/status_alert.vue'; import TagsList from '../components/details_page/tags_list.vue'; -import TagsLoader from '../components/details_page/tags_loader.vue'; import { ALERT_SUCCESS_TAG, diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index 3274de05803..e2acebf39d6 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -52,7 +52,7 @@ export default { ), CliCommands: () => import( - /* webpackChunkName: 'container_registry_components' */ '../components/list_page/cli_commands.vue' + /* webpackChunkName: 'container_registry_components' */ '~/packages_and_registries/shared/components/cli_commands.vue' ), GlModal, GlSprintf, @@ -68,7 +68,7 @@ export default { GlTooltip: GlTooltipDirective, }, mixins: [Tracking.mixin()], - inject: ['config'], + inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'], loader: { repeat: 10, width: 1000, @@ -96,6 +96,9 @@ export default { return data[this.graphqlResource]?.containerRepositories.nodes; }, result({ data }) { + if (!data) { + return; + } this.pageInfo = data[this.graphqlResource]?.containerRepositories?.pageInfo; this.containerRepositoriesCount = data[this.graphqlResource]?.containerRepositoriesCount; }, @@ -321,7 +324,12 @@ export default { :hide-expiration-policy-data="config.isGroupPage" > <template #commands> - <cli-commands v-if="showCommands" /> + <cli-commands + v-if="showCommands" + :docker-build-command="dockerBuildCommand" + :docker-push-command="dockerPushCommand" + :docker-login-command="dockerLoginCommand" + /> </template> </registry-header> |