Refactor update failed strings to remove nesting

_locales/en/messages.json

@@ -1108,10 +1108,18 @@
   },
   "icu:cannotUpdateDetail": {
     "messageformat": "Signal couldn't update. {retry} or visit {url} to install it manually. Then, {support} about this problem",
+    "description": "(Deleted 2024/07/23) Shown if a general error happened while trying to install update package"
+  },
+  "icu:cannotUpdateDetail-v2": {
+    "messageformat": "Signal couldn't update. <retryUpdateButton>Retry update</retryUpdateButton> or visit {url} to install it manually. Then, <contactSupportLink>contact support</contactSupportLink> about this problem",
     "description": "Shown if a general error happened while trying to install update package"
   },
   "icu:cannotUpdateRequireManualDetail": {
     "messageformat": "Signal couldn't update. Visit {url} to install it manually. Then, {support} about this problem",
+    "description": "(Deleted 2024/07/23) Shown if a general error happened while trying to install update package and manual update is required"
+  },
+  "icu:cannotUpdateRequireManualDetail-v2": {
+    "messageformat": "Signal couldn't update. Visit {url} to install it manually. Then, <contactSupportLink>contact support</contactSupportLink> about this problem",
     "description": "Shown if a general error happened while trying to install update package and manual update is required"
   },
   "icu:readOnlyVolume": {
@@ -2436,7 +2444,8 @@
     "messageformat": "Retry update"
   },
   "icu:autoUpdateContactSupport": {
-    "messageformat": "contact support"
+    "messageformat": "contact support",
+    "description": "(Deleted 2024/07/23)"
   },
   "icu:autoUpdateNewVersionMessage": {
     "messageformat": "Click to restart Signal"

ts/components/DialogUpdate.tsx

@@ -1,8 +1,8 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
-
+import type { ReactNode } from 'react';
+import React, { useCallback } from 'react';
 import { isBeta } from '../util/version';
 import { DialogType } from '../types/Dialogs';
 import type { LocalizerType } from '../types/Util';
@@ -12,6 +12,19 @@ import { LeftPaneDialog } from './LeftPaneDialog';
 import type { WidthBreakpoint } from './_util';
 import { formatFileSize } from '../util/formatFileSize';
 
+function contactSupportLink(parts: ReactNode): JSX.Element {
+  return (
+    <a
+      key="signal-support"
+      href="https://support.signal.org/hc/en-us/requests/new?desktop"
+      rel="noreferrer"
+      target="_blank"
+    >
+      {parts}
+    </a>
+  );
+}
+
 export type PropsType = {
   containerWidthBreakpoint: WidthBreakpoint;
   dialogType: DialogType;
@@ -37,6 +50,22 @@ export function DialogUpdate({
   version,
   currentVersion,
 }: PropsType): JSX.Element | null {
+  const retryUpdateButton = useCallback(
+    (parts: ReactNode): JSX.Element => {
+      return (
+        <button
+          className="LeftPaneDialog__retry"
+          key="signal-retry"
+          onClick={startUpdate}
+          type="button"
+        >
+          {parts}
+        </button>
+      );
+    },
+    [startUpdate]
+  );
+
   if (dialogType === DialogType.Cannot_Update) {
     const url = isBeta(currentVersion)
       ? BETA_DOWNLOAD_URL
@@ -50,16 +79,7 @@ export function DialogUpdate({
         <span>
           <I18n
             components={{
-              retry: (
-                <button
-                  className="LeftPaneDialog__retry"
-                  key="signal-retry"
-                  onClick={startUpdate}
-                  type="button"
-                >
-                  {i18n('icu:autoUpdateRetry')}
-                </button>
-              ),
+              retryUpdateButton,
               url: (
                 <a
                   key="signal-download"
@@ -70,19 +90,10 @@ export function DialogUpdate({
                   {url}
                 </a>
               ),
-              support: (
-                <a
-                  key="signal-support"
-                  href="https://support.signal.org/hc/en-us/requests/new?desktop"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  {i18n('icu:autoUpdateContactSupport')}
-                </a>
-              ),
+              contactSupportLink,
             }}
             i18n={i18n}
-            id="icu:cannotUpdateDetail"
+            id="icu:cannotUpdateDetail-v2"
           />
         </span>
       </LeftPaneDialog>
@@ -112,19 +123,10 @@ export function DialogUpdate({
                   {url}
                 </a>
               ),
-              support: (
-                <a
-                  key="signal-support"
-                  href="https://support.signal.org/hc/en-us/requests/new?desktop"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  {i18n('icu:autoUpdateContactSupport')}
-                </a>
-              ),
+              contactSupportLink,
             }}
             i18n={i18n}
-            id="icu:cannotUpdateRequireManualDetail"
+            id="icu:cannotUpdateRequireManualDetail-v2"
           />
         </span>
       </LeftPaneDialog>

ts/components/conversation/ProfileChangeNotification.stories.tsx

@@ -73,3 +73,24 @@ export function FromContactWithLongNamesBeforeAndAfter(): JSX.Element {
     />
   );
 }
+
+export function WithNickname(): JSX.Element {
+  return (
+    <ProfileChangeNotification
+      i18n={i18n}
+      changedContact={getDefaultConversation({
+        id: 'some-guid',
+        type: 'direct',
+        title: 'Mr. Fire 🔥',
+        nicknameFamilyName: 'test',
+        nicknameGivenName: 'test',
+      })}
+      change={{
+        type: 'name',
+        oldName: 'Mr. Fire 🔥 Old',
+        newName: 'Mr. Fire 🔥 New',
+      }}
+      onOpenEditNicknameAndNoteModal={action('onOpenEditNicknameAndNoteModal')}
+    />
+  );
+}