Added locked status to status box Vue component

app/assets/javascripts/merge_request/components/status_box.vue

@@ -5,12 +5,14 @@ import mrEventHub from '../eventhub';
 
 const CLASSES = {
   opened: 'status-box-open',
+  locked: 'status-box-open',
   closed: 'status-box-mr-closed',
   merged: 'status-box-mr-merged',
 };
 
 const STATUS = {
   opened: [__('Open'), 'issue-open-m'],
+  locked: [__('Open'), 'issue-open-m'],
   closed: [__('Closed'), 'close'],
   merged: [__('Merged'), 'git-merge'],
 };

changelogs/unreleased/ph-mergeRequestLockedStatus.yml

+---
+title: Fixed merge requests locked status not showing
+merge_request: 52078
+author:
+type: fixed

spec/frontend/merge_request/components/status_box_spec.js

@@ -17,6 +17,12 @@ const testCases = [
     class: 'status-box-open',
     icon: 'issue-open-m',
   },
+  {
+    name: 'Open',
+    state: 'locked',
+    class: 'status-box-open',
+    icon: 'issue-open-m',
+  },
   {
     name: 'Closed',
     state: 'closed',