diff options
Diffstat (limited to 'app/assets/javascripts/create_cluster/gke_cluster')
3 files changed, 44 insertions, 38 deletions
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue index b0bec10f64d..979628d683d 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue @@ -1,12 +1,16 @@ <script> -import { escape } from 'lodash'; import { mapState, mapGetters, mapActions } from 'vuex'; -import { s__, sprintf } from '~/locale'; +import { GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; import gkeDropdownMixin from './gke_dropdown_mixin'; export default { name: 'GkeProjectIdDropdown', + components: { + GlSprintf, + GlLink, + }, mixins: [gkeDropdownMixin], props: { docsUrl: { @@ -46,31 +50,23 @@ export default { return s__('ClusterIntegration|Select project'); }, helpText() { - let message; if (this.hasErrors) { return this.errorMessage; } if (!this.items) { - message = - 'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'; + return s__( + 'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.', + ); } - message = - this.items && this.items.length - ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.' - : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'; - - return sprintf( - s__(message), - { - docsLinkEnd: ' <i class="fa fa-external-link" aria-hidden="true"></i></a>', - docsLinkStart: `<a href="${escape( - this.docsUrl, - )}" target="_blank" rel="noopener noreferrer">`, - }, - false, - ); + return this.items.length + ? s__( + 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.', + ) + : s__( + 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.', + ); }, errorMessage() { if (!this.projectHasBillingEnabled) { @@ -80,21 +76,13 @@ export default { ); } - return sprintf( - s__( - 'This project does not have billing enabled. To create a cluster, <a href=%{linkToBilling} target="_blank" rel="noopener noreferrer">enable billing <i class="fa fa-external-link" aria-hidden="true"></i></a> and try again.', - ), - { - linkToBilling: - 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', - }, - false, + return s__( + 'ClusterIntegration|This project does not have billing enabled. To create a cluster, %{linkToBillingStart}enable billing%{linkToBillingEnd} and try again.', ); } - return sprintf( - s__('ClusterIntegration|An error occurred while trying to fetch your projects: %{error}'), - { error: this.gapiError }, + return s__( + 'ClusterIntegration|An error occurred while trying to fetch your projects: %{error}', ); }, }, @@ -182,7 +170,28 @@ export default { 'text-muted': !hasErrors, }" class="form-text" - v-html="helpText" - ></span> + > + <gl-sprintf :message="helpText"> + <template #linkToBilling="{ content }"> + <gl-link + :href=" + 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral' + " + target="_blank" + >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i + ></gl-link> + </template> + + <template #docsLink="{ content }"> + <gl-link :href="docsUrl" target="_blank" + >{{ content }} <i class="fa fa-external-link" aria-hidden="true"></i + ></gl-link> + </template> + + <template #error> + {{ gapiError }} + </template> + </gl-sprintf> + </span> </div> </template> diff --git a/app/assets/javascripts/create_cluster/gke_cluster/index.js b/app/assets/javascripts/create_cluster/gke_cluster/index.js index 5a64eb09cad..b9316353072 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/index.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/index.js @@ -1,6 +1,6 @@ /* global gapi */ import Vue from 'vue'; -import Flash from '~/flash'; +import { deprecatedCreateFlash as Flash } from '~/flash'; import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue'; import GkeZoneDropdown from './components/gke_zone_dropdown.vue'; import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue'; diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js index f05ad7773a2..f0c41d1d230 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js @@ -90,6 +90,3 @@ export const fetchMachineTypes = ({ commit, state }) => mutation: types.SET_MACHINE_TYPES, payloadKey: 'items', }); - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; |