Refactor create cluster component to use GlSprintf

Update the create cluster component to use the recommended GlSprintf
component. Also remove some dead code and properly mark a couple of
strings for translation.

Part of: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38196

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

 <script>
-import { escape } from 'lodash';
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { s__, sprintf } from '~/locale';
+import { s__ } from '~/locale';
+import { GlSprintf, GlLink } from '@gitlab/ui';
 
 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: '&nbsp;<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,23 +76,13 @@ export default {
           );
         }
 
-        return sprintf(
-          s__(
-            'This project does not have billing enabled. To create a cluster, %{linkToBillingStart}enable billing %{linkIcon}%{linkToBillingEnd} and try again.',
-          ),
-          {
-            linkToBillingStart:
-              '<a href="https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral" target="_blank" rel="noopener noreferrer">',
-            linkToBillingEnd: '</a>',
-            linkIcon: '<i class="fa fa-external-link" aria-hidden="true"></i>',
-          },
-          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}',
       );
     },
   },
@@ -184,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>

locale/gitlab.pot

@@ -5909,18 +5909,27 @@ msgstr ""
 msgid "ClusterIntegration|This option will allow you to install applications on RBAC clusters."
 msgstr ""
 
+msgid "ClusterIntegration|This project does not have billing enabled. To create a cluster, %{linkToBillingStart}enable billing%{linkToBillingEnd} and try again."
+msgstr ""
+
 msgid "ClusterIntegration|This will permanently delete the following resources:"
 msgstr ""
 
 msgid "ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint."
 msgstr ""
 
+msgid "ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}."
+msgstr ""
+
 msgid "ClusterIntegration|To remove your integration and resources, type %{clusterName} to confirm:"
 msgstr ""
 
 msgid "ClusterIntegration|To remove your integration, type %{clusterName} to confirm:"
 msgstr ""
 
+msgid "ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}."
+msgstr ""
+
 msgid "ClusterIntegration|Uninstall %{appTitle}"
 msgstr ""
 
@@ -5945,6 +5954,9 @@ msgstr ""
 msgid "ClusterIntegration|We could not verify that one of your projects on GCP has billing enabled. Please try again."
 msgstr ""
 
+msgid "ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}."
+msgstr ""
+
 msgid "ClusterIntegration|With a Kubernetes cluster associated to this project, you can use review apps, deploy your applications, run your pipelines, and much more in an easy way."
 msgstr ""
 
@@ -25169,9 +25181,6 @@ msgstr ""
 msgid "This project does not have a wiki homepage yet"
 msgstr ""
 
-msgid "This project does not have billing enabled. To create a cluster, %{linkToBillingStart}enable billing %{linkIcon}%{linkToBillingEnd} and try again."
-msgstr ""
-
 msgid "This project has no active access tokens."
 msgstr ""