Fix stage dropdown rendering only in English53133-jobs-list-11-4-backport

The default value of the selected stage was a translated string.
This commit removes the string and uses a flag property instead.
The stage dropdown is now only rendered after the stages endpoint
is received.

7 files changed, 13 insertions, 10 deletions

diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index f2d98b08933..78ec11ab201 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -36,7 +36,7 @@
       },
     },
     computed: {
-      ...mapState(['job', 'isLoading', 'stages', 'jobs', 'selectedStage']),
+      ...mapState(['job', 'isLoading', 'stages', 'jobs', 'selectedStage', 'isLoadingStages']),
       coverage() {
         return `${this.job.coverage}%`;
       },
@@ -274,6 +274,7 @@
           />
 
           <stages-dropdown
+            v-if="!isLoadingStages"
             :stages="stages"
             :pipeline="job.pipeline"
             :selected-stage="selectedStage"
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 4b0900a75cc..55324d92176 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -22,7 +22,6 @@
         required: true,
       },
     },
-
     computed: {
       hasRef() {
         return !_.isEmpty(this.pipeline.ref);
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index f00e06e1a6c..b9c932f83e9 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -60,7 +60,7 @@ export default {
      * after the first request,
      * and we do not want to hijack that
      */
-    if (state.selectedStage === 'More' && job.stage) {
+    if (state.selectedStage === '' && job.stage) {
       state.selectedStage = job.stage;
     }
   },
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index afbc959bb71..331809834c4 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -1,5 +1,3 @@
-import { __ } from '~/locale';
-
 export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
@@ -36,7 +34,7 @@ export default () => ({
   // sidebar dropdown
   isLoadingStages: false,
   isLoadingJobs: false,
-  selectedStage: __('More'),
+  selectedStage: '',
   stages: [],
   jobs: [],
 });
diff --git a/changelogs/unreleased/53133-jobs-list-11-4-backport.yml b/changelogs/unreleased/53133-jobs-list-11-4-backport.yml
new file mode 100644
index 00000000000..a442e1703cb
--- /dev/null
+++ b/changelogs/unreleased/53133-jobs-list-11-4-backport.yml
@@ -0,0 +1,4 @@
+title: Fix stage dropdown not rendering in different languages
+merge_request: 
+author:
+type: other
diff --git a/spec/javascripts/jobs/components/sidebar_spec.js b/spec/javascripts/jobs/components/sidebar_spec.js
index a113377b19f..f7d8a45a17e 100644
--- a/spec/javascripts/jobs/components/sidebar_spec.js
+++ b/spec/javascripts/jobs/components/sidebar_spec.js
@@ -148,10 +148,11 @@ describe('Sidebar details block', () => {
     });
 
     describe('while fetching stages', () => {
-      it('renders dropdown with More label', () => {
+      it('it does not render dropdown', () => {
+        store.dispatch('requestStages');
         vm = mountComponentWithStore(SidebarComponent, { store });
 
-        expect(vm.$el.querySelector('.js-selected-stage').textContent.trim()).toEqual('More');
+        expect(vm.$el.querySelector('.js-selected-stage')).toBeNull();
       });
     });
 
diff --git a/spec/javascripts/jobs/store/mutations_spec.js b/spec/javascripts/jobs/store/mutations_spec.js
index d857c116180..a274c477e9c 100644
--- a/spec/javascripts/jobs/store/mutations_spec.js
+++ b/spec/javascripts/jobs/store/mutations_spec.js
@@ -123,8 +123,8 @@ describe('Jobs Store Mutations', () => {
       expect(stateCopy.job).toEqual({ id: 1312321 });
     });
 
-    it('sets selectedStage when the selectedStage is More', () => {
-      expect(stateCopy.selectedStage).toEqual('More');
+    it('sets selectedStage when the selectedStage is empty', () => {
+      expect(stateCopy.selectedStage).toEqual('');
       mutations[types.RECEIVE_JOB_SUCCESS](stateCopy, { id: 1312321, stage: 'deploy' });
       expect(stateCopy.selectedStage).toEqual('deploy');
     });