Merge branch '196254-update-label-text' into 'master'

Update button label in MR widget pipeline footer

See merge request gitlab-org/gitlab!22900

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 import DeploymentInfo from './deployment_info.vue';
 import DeploymentViewButton from './deployment_view_button.vue';
 import DeploymentStopButton from './deployment_stop_button.vue';
@@ -14,9 +14,6 @@ export default {
     DeploymentStopButton,
     DeploymentViewButton,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   props: {
     deployment: {
       type: Object,
@@ -43,6 +40,14 @@ export default {
     },
   },
   computed: {
+    appButtonText() {
+      return {
+        text: this.isCurrent ? s__('Review App|View app') : s__('Review App|View latest app'),
+        tooltip: this.isCurrent
+          ? ''
+          : __('View the latest successful deployment to this environment'),
+      };
+    },
     canBeManuallyDeployed() {
       return this.computedDeploymentStatus === MANUAL_DEPLOY;
     },
@@ -55,9 +60,6 @@ export default {
     hasExternalUrls() {
       return Boolean(this.deployment.external_url && this.deployment.external_url_formatted);
     },
-    hasPreviousDeployment() {
-      return Boolean(!this.isCurrent && this.deployment.deployed_at);
-    },
     isCurrent() {
       return this.computedDeploymentStatus === SUCCESS;
     },
@@ -89,7 +91,7 @@ export default {
             <!-- show appropriate version of review app button  -->
             <deployment-view-button
               v-if="hasExternalUrls"
-              :is-current="isCurrent"
+              :app-button-text="appButtonText"
               :deployment="deployment"
               :show-visual-review-app="showVisualReviewApp"
               :visual-review-app-metadata="visualReviewAppMeta"

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue

@@ -11,12 +11,12 @@ export default {
       import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
   },
   props: {
-    deployment: {
+    appButtonText: {
       type: Object,
       required: true,
     },
-    isCurrent: {
-      type: Boolean,
+    deployment: {
+      type: Object,
       required: true,
     },
     showVisualReviewApp: {
@@ -60,7 +60,7 @@ export default {
     >
       <template slot="mainAction" slot-scope="slotProps">
         <review-app-link
-          :is-current="isCurrent"
+          :display="appButtonText"
           :link="deploymentExternalUrl"
           :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
         />
@@ -85,7 +85,7 @@ export default {
     </filtered-search-dropdown>
     <template v-else>
       <review-app-link
-        :is-current="isCurrent"
+        :display="appButtonText"
         :link="deploymentExternalUrl"
         css-class="js-deploy-url deploy-link btn btn-default btn-sm inline"
       />

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

 <script>
-import { __ } from '~/locale';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     Icon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     cssClass: {
       type: String,
       required: true,
     },
-    isCurrent: {
-      type: Boolean,
+    display: {
+      type: Object,
       required: true,
     },
     link: {
@@ -20,15 +23,12 @@ export default {
       required: true,
     },
   },
-  computed: {
-    linkText() {
-      return this.isCurrent ? __('View app') : __('View previous app');
-    },
-  },
 };
 </script>
 <template>
   <a
+    v-gl-tooltip
+    :title="display.tooltip"
     :href="link"
     target="_blank"
     rel="noopener noreferrer nofollow"
@@ -36,6 +36,6 @@ export default {
     data-track-event="open_review_app"
     data-track-label="review_app"
   >
-    {{ linkText }} <icon class="fgray" name="external-link" />
+    {{ display.text }} <icon class="fgray" name="external-link" />
   </a>
 </template>

changelogs/unreleased/196254-update-label-text.yml

+---
+title: Update button label in MR widget pipeline footer
+merge_request: 22900
+author:
+type: changed

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue

@@ -30,9 +30,6 @@ export default {
       default: false,
     },
   },
-  tooltips: {
-    information: s__('EnviornmentDashboard|You are looking at the last updated environment'),
-  },
   computed: {
     headerClasses() {
       return {
@@ -42,6 +39,13 @@ export default {
       };
     },
   },
+  reviewButtonText: {
+    text: s__('Review App|View app'),
+    tooltip: '',
+  },
+  tooltips: {
+    information: s__('EnvironmentDashboard|You are looking at the last updated environment'),
+  },
 };
 </script>
 
@@ -70,7 +74,7 @@ export default {
     <review-app-link
       v-else-if="environment.external_url"
       :link="environment.external_url"
-      :is-current="true"
+      :display="$options.reviewButtonText"
       css-class="btn btn-default btn-sm"
     />
   </div>

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -24,7 +24,7 @@ exports[`Environment Header has a failed pipeline matches the snapshot 1`] = `
    
   <review-app-link-stub
     cssclass="btn btn-default btn-sm"
-    iscurrent="true"
+    display="[object Object]"
     link="http://example.com"
   />
 </div>
@@ -54,7 +54,7 @@ exports[`Environment Header has errors matches the snapshot 1`] = `
    
   <review-app-link-stub
     cssclass="btn btn-default btn-sm"
-    iscurrent="true"
+    display="[object Object]"
     link="http://example.com"
   />
 </div>
@@ -67,8 +67,8 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
   <div
     class="flex-grow-1 block-truncated"
   >
-    <gl-link-stub
-      class="js-environment-link cgray"
+    <a
+      class="gl-link js-environment-link cgray"
       href="/enivronment/1"
       title="staging"
     >
@@ -77,16 +77,31 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
       >
          staging
       </span>
-    </gl-link-stub>
+    </a>
      
     <!---->
   </div>
    
-  <review-app-link-stub
-    cssclass="btn btn-default btn-sm"
-    iscurrent="true"
-    link="http://example.com"
+  <a
+    class="btn btn-default btn-sm"
+    data-track-event="open_review_app"
+    data-track-label="review_app"
+    href="http://example.com"
+    rel="noopener noreferrer nofollow"
+    target="_blank"
+    title=""
+  >
+    
+  View app 
+    <svg
+      aria-hidden="true"
+      class="fgray s16 ic-external-link"
+    >
+      <use
+        xlink:href="#external-link"
       />
+    </svg>
+  </a>
 </div>
 `;
 

ee/spec/frontend/environments_dashboard/components/environment_header_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { GlLink, GlBadge } from '@gitlab/ui';
 import component from 'ee/environments_dashboard/components/dashboard/environment_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -24,7 +24,7 @@ describe('Environment Header', () => {
 
   describe('renders name and link to app', () => {
     beforeEach(() => {
-      wrapper = shallowMount(component, {
+      wrapper = mount(component, {
         attachToDocument: true,
         propsData,
       });
@@ -43,7 +43,7 @@ describe('Environment Header', () => {
     });
 
     it('renders a link to the external app', () => {
-      expect(wrapper.find(ReviewAppLink).attributes('link')).toBe(
+      expect(wrapper.find(ReviewAppLink).attributes('href')).toBe(
         propsData.environment.external_url,
       );
     });

locale/gitlab.pot

@@ -6930,9 +6930,6 @@ msgstr ""
 msgid "Enter zen mode"
 msgstr ""
 
-msgid "EnviornmentDashboard|You are looking at the last updated environment"
-msgstr ""
-
 msgid "Environment"
 msgstr ""
 
@@ -6951,6 +6948,9 @@ msgstr ""
 msgid "EnvironmentDashboard|Created through the Deployment API"
 msgstr ""
 
+msgid "EnvironmentDashboard|You are looking at the last updated environment"
+msgstr ""
+
 msgid "Environments"
 msgstr ""
 
@@ -15728,6 +15728,12 @@ msgstr ""
 msgid "Review"
 msgstr ""
 
+msgid "Review App|View app"
+msgstr ""
+
+msgid "Review App|View latest app"
+msgstr ""
+
 msgid "Review the process for configuring service providers in your identity provider — in this case, GitLab is the \"service provider\" or \"relying party\"."
 msgstr ""
 
@@ -20485,9 +20491,6 @@ msgstr ""
 msgid "View Documentation"
 msgstr ""
 
-msgid "View app"
-msgstr ""
-
 msgid "View blame prior to this change"
 msgstr ""
 
@@ -20547,9 +20550,6 @@ msgstr ""
 msgid "View open merge request"
 msgstr ""
 
-msgid "View previous app"
-msgstr ""
-
 msgid "View project"
 msgstr ""
 
@@ -20562,6 +20562,9 @@ msgstr ""
 msgid "View the documentation"
 msgstr ""
 
+msgid "View the latest successful deployment to this environment"
+msgstr ""
+
 msgid "Viewing commit"
 msgstr ""
 

spec/frontend/vue_mr_widget/deployment/deployment_spec.js

@@ -134,7 +134,7 @@ describe('Deployment component', () => {
             if (status === SUCCESS) {
               expect(wrapper.find(DeploymentViewButton).text()).toContain('View app');
             } else {
-              expect(wrapper.find(DeploymentViewButton).text()).toContain('View previous app');
+              expect(wrapper.find(DeploymentViewButton).text()).toContain('View latest app');
             }
           });
         }

spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js

@@ -3,6 +3,11 @@ import DeploymentViewButton from '~/vue_merge_request_widget/components/deployme
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 import deploymentMockData from './deployment_mock_data';
 
+const appButtonText = {
+  text: 'View app',
+  tooltip: 'View the latest successful deployment to this environment',
+};
+
 describe('Deployment View App button', () => {
   let wrapper;
 
@@ -16,7 +21,7 @@ describe('Deployment View App button', () => {
     factory({
       propsData: {
         deployment: deploymentMockData,
-        isCurrent: true,
+        appButtonText,
       },
     });
   });
@@ -26,25 +31,8 @@ describe('Deployment View App button', () => {
   });
 
   describe('text', () => {
-    describe('when app is current', () => {
-      it('shows View app', () => {
-        expect(wrapper.find(ReviewAppLink).text()).toContain('View app');
-      });
-    });
-
-    describe('when app is not current', () => {
-      beforeEach(() => {
-        factory({
-          propsData: {
-            deployment: deploymentMockData,
-            isCurrent: false,
-          },
-        });
-      });
-
-      it('shows View Previous app', () => {
-        expect(wrapper.find(ReviewAppLink).text()).toContain('View previous app');
-      });
+    it('renders text as passed', () => {
+      expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text);
     });
   });
 
@@ -53,7 +41,7 @@ describe('Deployment View App button', () => {
       factory({
         propsData: {
           deployment: { ...deploymentMockData, changes: null },
-          isCurrent: false,
+          appButtonText,
         },
       });
     });
@@ -68,7 +56,7 @@ describe('Deployment View App button', () => {
       factory({
         propsData: {
           deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
-          isCurrent: false,
+          appButtonText,
         },
       });
     });
@@ -91,7 +79,7 @@ describe('Deployment View App button', () => {
       factory({
         propsData: {
           deployment: deploymentMockData,
-          isCurrent: false,
+          appButtonText,
         },
       });
     });

spec/javascripts/vue_mr_widget/components/review_app_link_spec.js

@@ -8,7 +8,10 @@ describe('review app link', () => {
   const props = {
     link: '/review',
     cssClass: 'js-link',
-    isCurrent: true,
+    display: {
+      text: 'View app',
+      tooltip: '',
+    },
   };
   let vm;
   let el;