Add latest changes from gitlab-org/gitlab@13-2-stable-ee

1 files changed, 95 insertions, 160 deletions

diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index c78738221f1..9166c13a4fb 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -1,11 +1,15 @@
 <script>
-import { escape, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { sprintf, __ } from '../../locale';
+import { __ } from '../../locale';
+import { GlSprintf, GlLink } from '@gitlab/ui';
 
 export default {
+  creatingEnvironment: 'creating',
   components: {
     CiIcon,
+    GlSprintf,
+    GlLink,
   },
   props: {
     deploymentStatus: {
@@ -31,7 +35,7 @@ export default {
           return this.outOfDateEnvironmentMessage();
         case 'failed':
           return this.failedEnvironmentMessage();
-        case 'creating':
+        case this.$options.creatingEnvironment:
           return this.creatingEnvironmentMessage();
         default:
           return '';
@@ -39,17 +43,12 @@ export default {
     },
     environmentLink() {
       if (this.hasEnvironment) {
-        return sprintf(
-          '%{startLink}%{name}%{endLink}',
-          {
-            startLink: `<a href="${this.deploymentStatus.environment.environment_path}" class="js-environment-link">`,
-            name: escape(this.deploymentStatus.environment.name),
-            endLink: '</a>',
-          },
-          false,
-        );
+        return {
+          link: this.deploymentStatus.environment.environment_path,
+          name: this.deploymentStatus.environment.name,
+        };
       }
-      return '';
+      return {};
     },
     hasLastDeployment() {
       return this.hasEnvironment && this.deploymentStatus.environment.last_deployment;
@@ -74,201 +73,107 @@ export default {
       }
 
       const { name, path } = this.deploymentCluster;
-      const escapedName = escape(name);
-      const escapedPath = escape(path);
-
-      if (!escapedPath) {
-        return escapedName;
-      }
 
-      return sprintf(
-        '%{startLink}%{name}%{endLink}',
-        {
-          startLink: `<a href="${escapedPath}" class="js-job-cluster-link">`,
-          name: escapedName,
-          endLink: '</a>',
-        },
-        false,
-      );
+      return {
+        path,
+        name,
+      };
     },
     kubernetesNamespace() {
       return this.hasCluster ? this.deploymentCluster.kubernetes_namespace : null;
     },
+    deploymentLink() {
+      return {
+        path: this.lastDeploymentPath,
+        name:
+          this.deploymentStatus.status === this.$options.creatingEnvironment
+            ? __('latest deployment')
+            : __('most recent deployment'),
+      };
+    },
   },
   methods: {
-    deploymentLink(name) {
-      return sprintf(
-        '%{startLink}%{name}%{endLink}',
-        {
-          startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`,
-          name,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
     failedEnvironmentMessage() {
-      const { environmentLink } = this;
-
-      return sprintf(
-        __('The deployment of this job to %{environmentLink} did not succeed.'),
-        { environmentLink },
-        false,
-      );
+      return __('The deployment of this job to %{environmentLink} did not succeed.');
     },
     lastEnvironmentMessage() {
-      const { environmentLink, clusterNameOrLink, hasCluster, kubernetesNamespace } = this;
-      if (hasCluster) {
-        if (kubernetesNamespace) {
-          return sprintf(
-            __(
-              'This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.',
-            ),
-            { environmentLink, clusterNameOrLink, kubernetesNamespace },
-            false,
+      if (this.hasCluster) {
+        if (this.kubernetesNamespace) {
+          return __(
+            'This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.',
           );
         }
         // we know the cluster but not the namespace
-        return sprintf(
-          __('This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}.'),
-          { environmentLink, clusterNameOrLink },
-          false,
-        );
+        return __('This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}.');
       }
       // not a cluster deployment
-      return sprintf(__('This job is deployed to %{environmentLink}.'), { environmentLink }, false);
+      return __('This job is deployed to %{environmentLink}.');
     },
     outOfDateEnvironmentMessage() {
-      const {
-        hasLastDeployment,
-        hasCluster,
-        environmentLink,
-        clusterNameOrLink,
-        kubernetesNamespace,
-      } = this;
-
-      if (hasLastDeployment) {
-        const deploymentLink = this.deploymentLink(__('most recent deployment'));
-        if (hasCluster) {
-          if (kubernetesNamespace) {
-            return sprintf(
-              __(
-                'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. View the %{deploymentLink}.',
-              ),
-              { environmentLink, clusterNameOrLink, kubernetesNamespace, deploymentLink },
-              false,
+      if (this.hasLastDeployment) {
+        if (this.hasCluster) {
+          if (this.kubernetesNamespace) {
+            return __(
+              'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. View the %{deploymentLink}.',
             );
           }
           // we know the cluster but not the namespace
-          return sprintf(
-            __(
-              'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}.',
-            ),
-            { environmentLink, clusterNameOrLink, deploymentLink },
-            false,
+          return __(
+            'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}.',
           );
         }
         // not a cluster deployment
-        return sprintf(
-          __(
-            'This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}.',
-          ),
-          { environmentLink, deploymentLink },
-          false,
+        return __(
+          'This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}.',
         );
       }
       // no last deployment, i.e. this is the first deployment
-      if (hasCluster) {
-        if (kubernetesNamespace) {
-          return sprintf(
-            __(
-              'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.',
-            ),
-            { environmentLink, clusterNameOrLink, kubernetesNamespace },
-            false,
+      if (this.hasCluster) {
+        if (this.kubernetesNamespace) {
+          return __(
+            'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.',
           );
         }
         // we know the cluster but not the namespace
-        return sprintf(
-          __(
-            'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}.',
-          ),
-          { environmentLink, clusterNameOrLink },
-          false,
+        return __(
+          'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}.',
         );
       }
       // not a cluster deployment
-      return sprintf(
-        __('This job is an out-of-date deployment to %{environmentLink}.'),
-        { environmentLink },
-        false,
-      );
+      return __('This job is an out-of-date deployment to %{environmentLink}.');
     },
     creatingEnvironmentMessage() {
-      const {
-        hasLastDeployment,
-        hasCluster,
-        environmentLink,
-        clusterNameOrLink,
-        kubernetesNamespace,
-      } = this;
-
-      if (hasLastDeployment) {
-        const deploymentLink = this.deploymentLink(__('latest deployment'));
-        if (hasCluster) {
-          if (kubernetesNamespace) {
-            return sprintf(
-              __(
-                'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. This will overwrite the %{deploymentLink}.',
-              ),
-              { environmentLink, clusterNameOrLink, kubernetesNamespace, deploymentLink },
-              false,
+      if (this.hasLastDeployment) {
+        if (this.hasCluster) {
+          if (this.kubernetesNamespace) {
+            return __(
+              'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}. This will overwrite the %{deploymentLink}.',
             );
           }
           // we know the cluster but not the namespace
-          return sprintf(
-            __(
-              'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}.',
-            ),
-            { environmentLink, clusterNameOrLink, deploymentLink },
-            false,
+          return __(
+            'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}.',
           );
         }
         // not a cluster deployment
-        return sprintf(
-          __(
-            'This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}.',
-          ),
-          { environmentLink, deploymentLink },
-          false,
+        return __(
+          'This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}.',
         );
       }
       // no last deployment, i.e. this is the first deployment
-      if (hasCluster) {
-        if (kubernetesNamespace) {
-          return sprintf(
-            __(
-              'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.',
-            ),
-            { environmentLink, clusterNameOrLink, kubernetesNamespace },
-            false,
+      if (this.hasCluster) {
+        if (this.kubernetesNamespace) {
+          return __(
+            'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink} and namespace %{kubernetesNamespace}.',
           );
         }
         // we know the cluster but not the namespace
-        return sprintf(
-          __(
-            'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}.',
-          ),
-          { environmentLink, clusterNameOrLink },
-          false,
+        return __(
+          'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}.',
         );
       }
       // not a cluster deployment
-      return sprintf(
-        __('This job is creating a deployment to %{environmentLink}.'),
-        { environmentLink },
-        false,
-      );
+      return __('This job is creating a deployment to %{environmentLink}.');
     },
   },
 };
@@ -277,7 +182,37 @@ export default {
   <div class="gl-mt-3 gl-mb-3 js-environment-container">
     <div class="environment-information">
       <ci-icon :status="iconStatus" />
-      <p class="inline gl-mb-0" v-html="environment"></p>
+      <p class="inline gl-mb-0">
+        <gl-sprintf :message="environment">
+          <template #environmentLink>
+            <gl-link
+              v-if="hasEnvironment"
+              :href="environmentLink.link"
+              data-testid="job-environment-link"
+              v-text="environmentLink.name"
+            />
+          </template>
+          <template #clusterNameOrLink>
+            <gl-link
+              v-if="clusterNameOrLink.path"
+              :href="clusterNameOrLink.path"
+              data-testid="job-cluster-link"
+              v-text="clusterNameOrLink.name"
+            />
+            <template v-else>{{ clusterNameOrLink.name }}</template>
+          </template>
+          <template #kubernetesNamespace>
+            <template>{{ kubernetesNamespace }}</template>
+          </template>
+          <template #deploymentLink>
+            <gl-link
+              :href="deploymentLink.path"
+              data-testid="job-deployment-link"
+              v-text="deploymentLink.name"
+            />
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
   </div>
 </template>