diff --git a/app/assets/javascripts/ci/runner/admin_new_runner/index.js b/app/assets/javascripts/ci/runner/admin_new_runner/index.js index 7aca19572b357a0be5c3f3c9167e5105539ac0be..502d9d33b4d4aa95a5cfef7698111b8b57d606ad 100644 --- a/app/assets/javascripts/ci/runner/admin_new_runner/index.js +++ b/app/assets/javascripts/ci/runner/admin_new_runner/index.js @@ -12,7 +12,7 @@ export const initAdminNewRunner = (selector = '#js-admin-new-runner') => { return null; } - const { legacyRegistrationToken, awsImgPath, dockerImgPath, kubernetesImgPath } = el.dataset; + const { legacyRegistrationToken } = el.dataset; const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(), @@ -21,11 +21,6 @@ export const initAdminNewRunner = (selector = '#js-admin-new-runner') => { return new Vue({ el, apolloProvider, - provide: { - awsImgPath, - dockerImgPath, - kubernetesImgPath, - }, render(h) { return h(AdminNewRunnerApp, { props: { diff --git a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue index 304fdadbca23ead106a29b9b5de5e3041fbf1207..273226141d2c71fe20393bd7f5c9104e0df97bc0 100644 --- a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue +++ b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue @@ -1,5 +1,9 @@ <script> +import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg?url'; +import DOCKER_LOGO_URL from '@gitlab/svgs/dist/illustrations/third-party-logos/ci_cd-template-logos/docker.png'; +import KUBERNETES_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/kubernetes.svg?url'; import { GlFormRadioGroup, GlIcon, GlLink } from '@gitlab/ui'; + import { LINUX_PLATFORM, MACOS_PLATFORM, @@ -18,7 +22,6 @@ export default { GlIcon, RunnerPlatformsRadio, }, - inject: ['awsImgPath', 'dockerImgPath', 'kubernetesImgPath'], props: { value: { type: String, @@ -39,9 +42,13 @@ export default { LINUX_PLATFORM, MACOS_PLATFORM, WINDOWS_PLATFORM, + AWS_PLATFORM, + AWS_LOGO_URL, DOCKER_HELP_URL, + DOCKER_LOGO_URL, KUBERNETES_HELP_URL, + KUBERNETES_LOGO_URL, }; </script> @@ -68,7 +75,11 @@ export default { <label>{{ s__('Runners|Cloud templates') }}</label> <!-- eslint-disable @gitlab/vue-require-i18n-strings --> <div class="gl-display-flex gl-flex-wrap gl-gap-5"> - <runner-platforms-radio v-model="model" :image="awsImgPath" :value="$options.AWS_PLATFORM"> + <runner-platforms-radio + v-model="model" + :image="$options.AWS_LOGO_URL" + :value="$options.AWS_PLATFORM" + > AWS </runner-platforms-radio> </div> @@ -79,13 +90,13 @@ export default { <div class="gl-display-flex gl-flex-wrap gl-gap-5"> <!-- eslint-disable @gitlab/vue-require-i18n-strings --> - <runner-platforms-radio :image="dockerImgPath"> + <runner-platforms-radio :image="$options.DOCKER_LOGO_URL"> <gl-link :href="$options.DOCKER_HELP_URL" target="_blank"> Docker <gl-icon name="external-link" /> </gl-link> </runner-platforms-radio> - <runner-platforms-radio :image="kubernetesImgPath"> + <runner-platforms-radio :image="$options.KUBERNETES_LOGO_URL"> <gl-link :href="$options.KUBERNETES_HELP_URL" target="_blank"> Kubernetes <gl-icon name="external-link" /> diff --git a/app/views/admin/runners/new.html.haml b/app/views/admin/runners/new.html.haml index cf5638d0294e0615a4b10d0733dcc5b2275c2024..12a569862e6e814e0e0db19b9bbb2b5d77d1ca96 100644 --- a/app/views/admin/runners/new.html.haml +++ b/app/views/admin/runners/new.html.haml @@ -2,8 +2,4 @@ - breadcrumb_title s_('Runner|New') - page_title s_('Runners|Create an instance runner') -#js-admin-new-runner{ data: { - legacy_registration_token: Gitlab::CurrentSettings.runners_registration_token, - aws_img_path: image_path('illustrations/logos/aws.svg'), - kubernetes_img_path: image_path('illustrations/logos/kubernetes.svg'), - docker_img_path: image_path('illustrations/third-party-logos/ci_cd-template-logos/docker.png') } } +#js-admin-new-runner{ data: { legacy_registration_token: Gitlab::CurrentSettings.runners_registration_token } } diff --git a/config/webpack.config.js b/config/webpack.config.js index fd58e22bb996c535eeda7363ca6ca651c5eeb7d6..8ae803ca738f2520096c79e66a0cdefae248f5a9 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -380,7 +380,19 @@ module.exports = { { test: /\.svg$/, exclude: /icons\.svg$/, - loader: 'raw-loader', + oneOf: [ + { + resourceQuery: /url/, + loader: 'file-loader', + options: { + name: '[name].[contenthash:8].[ext]', + esModule: false, + }, + }, + { + loader: 'raw-loader', + }, + ], }, { test: /\.(gif|png|mp4)$/, diff --git a/jest.config.base.js b/jest.config.base.js index 05967b51b88d51e5286c069d7c0416dd2c9ddb3d..26e7c8e8d182587a85aa8da57d060f5b64334117 100644 --- a/jest.config.base.js +++ b/jest.config.base.js @@ -60,6 +60,7 @@ module.exports = (path, options = {}) => { [TEST_FIXTURES_PATTERN]: '<rootDir>/tmp/tests/frontend/fixtures$1', '^test_fixtures_static(/.*)$': '<rootDir>/spec/frontend/fixtures/static$1', '\\.(jpg|jpeg|png|svg|css)$': '<rootDir>/spec/frontend/__mocks__/file_mock.js', + '\\.svg\\?url$': '<rootDir>/spec/frontend/__mocks__/file_mock.js', '^public(/.*)$': '<rootDir>/public$1', 'emojis(/.*).json': '<rootDir>/fixtures/emojis$1.json', '^spec/test_constants$': '<rootDir>/spec/frontend/__helpers__/test_constants', diff --git a/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js b/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js index 12c9afe97583da40e7b2d8d0deb8a8271918607a..db6fd2c369bd828f423f213d3c07bd655a0b365f 100644 --- a/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js +++ b/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js @@ -51,9 +51,9 @@ describe('RunnerPlatformsRadioGroup', () => { ['Linux', null], ['macOS', null], ['Windows', null], - ['AWS', mockProvide.awsImgPath], - ['Docker', mockProvide.dockerImgPath], - ['Kubernetes', mockProvide.kubernetesImgPath], + ['AWS', expect.any(String)], + ['Docker', expect.any(String)], + ['Kubernetes', expect.any(String)], ]); });