feat(core): Show domain in account preferences

src/i18n/en-US.json

@@ -1044,6 +1044,7 @@
   "userProfileButtonConnect": "Connect",
   "userProfileButtonIgnore": "Ignore",
   "userProfileButtonUnblock": "Unblock",
+  "userProfileDomain": "Domain",
   "userProfileEmail": "Email",
   "userRemainingTimeHours": "{{time}}h left",
   "userRemainingTimeMinutes": "Less than {{time}}m left",

src/script/components/panel/EnrichedFields.test.ts

@@ -25,13 +25,17 @@ import {RichProfileRepository} from 'src/script/user/RichProfileRepository';
 import TestPage from 'Util/test/TestPage';
 import {createRandomUuid} from 'Util/util';
 import EnrichedFields, {EnrichedFieldsProps} from './EnrichedFields';
+import {Config, Configuration} from '../../Config';
+import type {TypeUtil} from '@wireapp/commons';
 
 class EnrichedFieldsPage extends TestPage<EnrichedFieldsProps> {
   constructor(props?: EnrichedFieldsProps) {
     super(EnrichedFields, props);
   }
 
   getEntries = () => this.get('[data-uie-name="item-enriched-key"]');
+  findByValue = (expectedValue: string) =>
+    this.get(`[data-uie-name="item-enriched-value"][data-uie-value="${expectedValue}"]`);
 }
 
 const richInfo: Partial<RichInfo> = {
@@ -79,6 +83,46 @@ describe('EnrichedFields', () => {
     expect(enrichedFields.getEntries().length).toEqual(3);
   });
 
+  it('displays the domain of a user when the federation feature flag is turned on', async () => {
+    spyOn<{getConfig: () => TypeUtil.RecursivePartial<Configuration>}>(Config, 'getConfig').and.returnValue({
+      FEATURE: {
+        ENABLE_FEDERATION: true,
+      },
+    });
+
+    const richProfileRepository = createRichProfileRepository();
+    const domain = 'wire.com';
+    const user = new User(createRandomUuid(), domain);
+    const enrichedFields = new EnrichedFieldsPage({richProfileRepository, user});
+    await act(() =>
+      waitFor(() => {
+        expect(richProfileRepository.getUserRichProfile).toHaveBeenCalled();
+      }),
+    );
+    enrichedFields.update();
+    expect(enrichedFields.findByValue(domain).length).toBe(1);
+  });
+
+  it('does NOT display the domain of a user when the federation feature flag is turned off', async () => {
+    spyOn<{getConfig: () => TypeUtil.RecursivePartial<Configuration>}>(Config, 'getConfig').and.returnValue({
+      FEATURE: {
+        ENABLE_FEDERATION: false,
+      },
+    });
+
+    const richProfileRepository = createRichProfileRepository();
+    const domain = 'wire.com';
+    const user = new User(createRandomUuid(), domain);
+    const enrichedFields = new EnrichedFieldsPage({richProfileRepository, user});
+    await act(() =>
+      waitFor(() => {
+        expect(richProfileRepository.getUserRichProfile).toHaveBeenCalled();
+      }),
+    );
+    enrichedFields.update();
+    expect(enrichedFields.findByValue(domain).length).toBe(0);
+  });
+
   it('calls the `onFieldsLoaded` function when fields are loaded', async () => {
     const richProfileRepository = createRichProfileRepository();
     const user = new User(createRandomUuid(), null);

src/script/components/panel/EnrichedFields.tsx

@@ -28,6 +28,7 @@ import {noop} from 'Util/util';
 
 import type {User} from '../../entity/User';
 import {RichProfileRepository} from '../../user/RichProfileRepository';
+import {Config} from '../../Config';
 
 export interface EnrichedFieldsProps {
   onFieldsLoaded?: (richFields: RichInfoField[]) => void;
@@ -47,6 +48,15 @@ const EnrichedFields: React.FC<EnrichedFieldsProps> = ({
     let cancel = false;
     const returnFields: RichInfoField[] = email ? [{type: t('userProfileEmail'), value: email}] : [];
 
+    if (Config.getConfig().FEATURE.ENABLE_FEDERATION) {
+      if (user.domain) {
+        returnFields.push({
+          type: t('userProfileDomain'),
+          value: user.domain,
+        });
+      }
+    }
+
     const loadRichFields = async () => {
       try {
         const richProfile = await richProfileRepository.getUserRichProfile(user.id);
@@ -74,7 +84,7 @@ const EnrichedFields: React.FC<EnrichedFieldsProps> = ({
             <div className="enriched-fields__entry__key" data-uie-name="item-enriched-key">
               {type}
             </div>
-            <div className="enriched-fields__entry__value" data-uie-name="item-enriched-value">
+            <div className="enriched-fields__entry__value" data-uie-name="item-enriched-value" data-uie-value={value}>
               {value}
             </div>
           </div>