Merge branch 'extract-container-registry-common-components' into 'master'

Extract container registry page common components

See merge request gitlab-org/gitlab!77833

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',

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

@@ -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/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';
 
 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');

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,
@@ -22,22 +22,14 @@ localVue.use(Vuex);
 describe('cli_commands', () => {
   let wrapper;
 
-  const config = {
-    repositoryUrl: 'foo',
-    registryHostUrlWithPort: 'bar',
-  };
-
   const findDropdownButton = () => wrapper.find(GlDropdown);
   const findCodeInstruction = () => wrapper.findAll(CodeInstruction);
 
   const mountComponent = () => {
     wrapper = mount(QuickstartDropdown, {
       localVue,
-      provide() {
-        return {
-          config,
-          ...dockerCommands,
-        };
+      propsData: {
+        ...dockerCommands,
       },
     });
   };

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,

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

@@ -8,7 +8,7 @@ import getContainerRepositoriesQuery from 'shared_queries/container_registry/get
 import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import DeleteImage from '~/packages_and_registries/container_registry/explorer/components/delete_image.vue';
-import CliCommands from '~/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue';
+import CliCommands from '~/packages_and_registries/shared/components/cli_commands.vue';
 import GroupEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue';
 import ImageList from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue';
 import ProjectEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue';