Fix external issues sidebar avatar sub-label error

ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue

@@ -21,6 +21,11 @@ export default {
       required: false,
       default: null,
     },
+    avatarSubLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     tooltipTitle() {
@@ -60,7 +65,7 @@ export default {
           :alt="assignee.name"
           :entity-name="assignee.name"
           :label="assignee.name"
-          :sub-label="__('Jira user')"
+          :sub-label="avatarSubLabel"
         />
       </gl-avatar-link>
       <span v-else class="gl-text-gray-500" data-testid="no-assignee-text">{{ __('None') }}</span>

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

@@ -83,6 +83,7 @@ export default {
     statusDropdownEmpty: s__('JiraService|No available statuses'),
     statusDropdownTitle: __('Change status'),
     referenceName: __('Reference'),
+    avatarSubLabel: __('Jira user'),
   },
   mounted() {
     this.sidebarEl = document.querySelector('aside.right-sidebar');
@@ -131,7 +132,7 @@ export default {
 
 <template>
   <div>
-    <assignee class="block" :assignee="assignee" />
+    <assignee class="block" :assignee="assignee" :avatar-sub-label="$options.i18n.avatarSubLabel" />
     <issue-due-date :due-date="issue.dueDate" />
     <issue-field
       icon="progress"

ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue

@@ -31,13 +31,14 @@ export default {
   i18n: {
     statusTitle: __('Status'),
     referenceName: __('Reference'),
+    avatarSubLabel: __('Zentao user'),
   },
 };
 </script>
 
 <template>
   <div>
-    <assignee class="block" :assignee="assignee" />
+    <assignee class="block" :assignee="assignee" :avatar-sub-label="$options.i18n.avatarSubLabel" />
     <issue-due-date :due-date="issue.dueDate" />
     <issue-field icon="progress" :title="$options.i18n.statusTitle" :value="issue.status" />
     <labels-select

ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap

@@ -21,7 +21,6 @@ exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar com
         labellink=""
         size="32"
         src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
-        sublabel="Jira user"
         sublabellink=""
       />
     </gl-avatar-link-stub>

ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js

@@ -14,27 +14,24 @@ describe('ExternalIssuesSidebarAssignee', () => {
 
   const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
   const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text');
-  const findAvatar = () => wrapper.find(GlAvatar);
-  const findAvatarLabeled = () => wrapper.find(GlAvatarLabeled);
-  const findAvatarLink = () => wrapper.find(GlAvatarLink);
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findAvatarLabeled = () => wrapper.findComponent(GlAvatarLabeled);
+  const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
   const findSidebarCollapsedIconWrapper = () =>
     wrapper.findByTestId('sidebar-collapsed-icon-wrapper');
 
-  const createComponent = ({ assignee } = {}) => {
+  const createComponent = (props) => {
     wrapper = extendedWrapper(
       shallowMount(Assignee, {
         propsData: {
-          assignee,
+          ...props,
         },
       }),
     );
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
   describe('with assignee', () => {
@@ -102,6 +99,18 @@ describe('ExternalIssuesSidebarAssignee', () => {
     });
   });
 
+  describe('with assignee and avatarSubLabel', () => {
+    it('renders avatar with sub-label', () => {
+      const mockSubLabel = 'Another Sub Label';
+      createComponent({
+        assignee: mockAssignee,
+        avatarSubLabel: mockSubLabel,
+      });
+
+      expect(findAvatarLabeled().props('subLabel')).toBe(mockSubLabel);
+    });
+  });
+
   describe('with no assignee', () => {
     beforeEach(() => {
       createComponent({ assignee: undefined });

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js

@@ -46,6 +46,7 @@ describe('JiraIssuesSidebar', () => {
     const assignee = findAssignee();
 
     expect(assignee.props('assignee')).toBe(mockJiraIssue.assignees[0]);
+    expect(assignee.props('avatarSubLabel')).toBe('Jira user');
   });
 
   it('renders IssueDueDate', () => {

ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js

@@ -44,6 +44,7 @@ describe('ZentaoIssuesSidebar', () => {
     const assignee = findAssignee();
 
     expect(assignee.props('assignee')).toBe(mockZentaoIssue.assignees[0]);
+    expect(assignee.props('avatarSubLabel')).toBe('Zentao user');
   });
 
   it('renders IssueDueDate', () => {

locale/gitlab.pot

@@ -39681,6 +39681,9 @@ msgstr ""
 msgid "Zentao issues"
 msgstr ""
 
+msgid "Zentao user"
+msgstr ""
+
 msgid "ZentaoIntegration|An error occurred while requesting data from the ZenTao service."
 msgstr ""