Extract container registry page common component

Issue: https://gitlab.com/gitlab-jh/gitlab/-/issues/524
Changelog: changed

app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue

@@ -6,7 +6,8 @@ import { joinPaths } from '~/lib/utils/url_utility';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 
 import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
-import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants/index';
+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',

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,

app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue

@@ -12,7 +12,7 @@ import { get } from 'lodash';
 import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql';
 import createFlash from '~/flash';
 import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
-import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants/index';
 import { extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
 import Tracking from '~/tracking';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.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,
@@ -321,7 +321,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>
 

app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue

@@ -21,7 +21,7 @@ import PackagesListLoader from '~/packages_and_registries/shared/components/pack
 import {
   TRACKING_ACTIONS,
   SHOW_DELETE_SUCCESS_ALERT,
-} from '~/packages_and_registries/shared/constants';
+} from '~/packages_and_registries/shared/constants/index';
 import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registry/shared/constants';
 import PackageFiles from './package_files.vue';
 import PackageHistory from './package_history.vue';

app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue

@@ -3,7 +3,7 @@ import { GlLink, GlSprintf } from '@gitlab/ui';
 import { first } from 'lodash';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, n__ } from '~/locale';
-import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants';
+import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants/index';
 import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 

app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js

@@ -4,7 +4,7 @@ import {
   DELETE_PACKAGE_ERROR_MESSAGE,
   DELETE_PACKAGE_FILE_ERROR_MESSAGE,
   DELETE_PACKAGE_FILE_SUCCESS_MESSAGE,
-} from '~/packages_and_registries/shared/constants';
+} from '~/packages_and_registries/shared/constants/index';
 import { FETCH_PACKAGE_VERSIONS_ERROR } from '../constants';
 import * as types from './mutation_types';
 

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue

@@ -5,7 +5,7 @@ import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
-import { TRACKING_ACTIONS } from '~/packages_and_registries/shared/constants';
+import { TRACKING_ACTIONS } from '~/packages_and_registries/shared/constants/index';
 import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registry/shared/constants';
 
 export default {

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue

@@ -7,7 +7,7 @@ import { s__ } from '~/locale';
 import {
   SHOW_DELETE_SUCCESS_ALERT,
   FILTERED_SEARCH_TERM,
-} from '~/packages_and_registries/shared/constants';
+} from '~/packages_and_registries/shared/constants/index';
 
 import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
 import InfrastructureTitle from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_title.vue';

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js

 import Api from '~/api';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages_and_registries/shared/constants';
+import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages_and_registries/shared/constants/index';
 import {
   FETCH_PACKAGES_LIST_ERROR_MESSAGE,
   DELETE_PACKAGE_SUCCESS_MESSAGE,

app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue

@@ -6,7 +6,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
 import {
   PACKAGE_ERROR_STATUS,
   PACKAGE_DEFAULT_STATUS,
-} from '~/packages_and_registries/shared/constants';
+} from '~/packages_and_registries/shared/constants/index';
 import PackagePath from '~/packages_and_registries/shared/components/package_path.vue';
 import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue';
 import PublishMethod from '~/packages_and_registries/shared/components/publish_method.vue';

app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue

@@ -4,7 +4,7 @@ import { first } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, n__ } from '~/locale';
-import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants';
+import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants/index';
 import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 

app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue

@@ -8,7 +8,7 @@ import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registri
 import {
   FILTERED_SEARCH_TERM,
   FILTERED_SEARCH_TYPE,
-} from '~/packages_and_registries/shared/constants';
+} from '~/packages_and_registries/shared/constants/index';
 import PackageTypeToken from './tokens/package_type_token.vue';
 
 export default {

app/assets/javascripts/packages_and_registries/package_registry/constants.js

@@ -9,7 +9,7 @@ export {
   DELETE_PACKAGE_FILE_TRACKING_ACTION,
   REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION,
   CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION,
-} from '~/packages_and_registries/shared/constants';
+} from '~/packages_and_registries/shared/constants/index';
 
 export const PACKAGE_TYPE_CONAN = 'CONAN';
 export const PACKAGE_TYPE_MAVEN = 'MAVEN';

app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue

@@ -3,7 +3,7 @@ import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
-import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants';
+import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants/index';
 import {
   PROJECT_RESOURCE_TYPE,
   GROUP_RESOURCE_TYPE,

app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue → app/assets/javascripts/packages_and_registries/shared/components/cli_commands.vue

@@ -10,7 +10,7 @@ import {
   COPY_BUILD_TITLE,
   PUSH_COMMAND_LABEL,
   COPY_PUSH_TITLE,
-} from '../../constants/index';
+} from '../constants/index';
 
 const trackingLabel = 'quickstart_dropdown';
 
@@ -20,7 +20,20 @@ export default {
     CodeInstruction,
   },
   mixins: [Tracking.mixin({ label: trackingLabel })],
-  inject: ['config', 'dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand'],
+  props: {
+    dockerBuildCommand: {
+      type: String,
+      required: true,
+    },
+    dockerPushCommand: {
+      type: String,
+      required: true,
+    },
+    dockerLoginCommand: {
+      type: String,
+      required: true,
+    },
+  },
   trackingLabel,
   i18n: {
     QUICK_START,

app/assets/javascripts/packages_and_registries/shared/constants/index.js

+export * from './package_registry';
+export * from './quick_start';

app/assets/javascripts/packages_and_registries/shared/constants/quick_start.js

+import { s__ } from '~/locale';
+
+export const QUICK_START = s__('ContainerRegistry|CLI Commands');
+export const LOGIN_COMMAND_LABEL = s__('ContainerRegistry|Login');
+export const COPY_LOGIN_TITLE = s__('ContainerRegistry|Copy login command');
+export const BUILD_COMMAND_LABEL = s__('ContainerRegistry|Build an image');
+export const COPY_BUILD_TITLE = s__('ContainerRegistry|Copy build command');
+export const PUSH_COMMAND_LABEL = s__('ContainerRegistry|Push an image');
+export const COPY_PUSH_TITLE = s__('ContainerRegistry|Copy push command');

app/assets/javascripts/packages_and_registries/shared/utils.js

 import Vue from 'vue';
 import { queryToObject } from '~/lib/utils/url_utility';
-import { FILTERED_SEARCH_TERM } from './constants';
+import { FILTERED_SEARCH_TERM } from './constants/index';
 
 export const getQueryParams = (query) =>
   queryToObject(query, { gatherArrays: true, legacySpacesDecode: true });

spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js

@@ -8,7 +8,7 @@ import { stripTypenames } from 'helpers/graphql_helpers';
 
 import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue';
 import TagsListRow from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue';
-import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue';
+import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
 import getContainerRepositoryTagsQuery from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql';

spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js

 import { shallowMount } from '@vue/test-utils';
-import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue';
+import component from '~/packages_and_registries/shared/components/tags_loader.vue';
 import { GlSkeletonLoader } from '../../stubs';
 
 describe('TagsLoader component', () => {

spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js

 import { GlDropdown } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import QuickstartDropdown from '~/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue';
+import QuickstartDropdown from '~/packages_and_registries/shared/components/cli_commands.vue';
 import {
   QUICK_START,
   LOGIN_COMMAND_LABEL,

spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js

@@ -11,7 +11,7 @@ import DetailsHeader from '~/packages_and_registries/container_registry/explorer
 import PartialCleanupAlert from '~/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert.vue';
 import StatusAlert from '~/packages_and_registries/container_registry/explorer/components/details_page/status_alert.vue';
 import TagsList from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue';
-import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue';
+import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue';
 
 import {
   UNFINISHED_STATUS,