Fix stage dropdown rendering only in English

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.

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"

app/assets/javascripts/jobs/components/stages_dropdown.vue

@@ -22,7 +22,6 @@
         required: true,
       },
     },
-
     computed: {
       hasRef() {
         return !_.isEmpty(this.pipeline.ref);

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;
     }
   },

app/assets/javascripts/jobs/store/state.js

-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: [],
 });

changelogs/unreleased/53133-jobs-list-11-4-backport.yml

+title: Fix stage dropdown not rendering in different languages
+merge_request: 
+author:
+type: other

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();
       });
     });

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');
     });