Adds an edit message entry point in message details screen

_locales/en/messages.json

@@ -5150,6 +5150,10 @@
     "messageformat": "Disappears in",
     "description": "In the message details screen, shown as a label of how long it will be before the message disappears"
   },
+  "icu:MessageDetail__view-edits": {
+    "messageformat": "View edit history",
+    "description": "Link to view a message's edit history"
+  },
   "icu:ProfileEditor--about": {
     "messageformat": "About",
     "description": "Default text for about field"

stylesheets/components/CompositionInput.scss

@@ -424,6 +424,7 @@
     }
 
     &__attachment img {
+      border-radius: 4px;
       height: 18px;
       position: absolute;
       inset-inline-end: 8px;

stylesheets/components/ConversationDetails.scss

@@ -253,6 +253,12 @@
         }
       }
 
+      &--edit {
+        &::after {
+          @include details-icon('../images/icons/v3/edit/edit.svg');
+        }
+      }
+
       &--down {
         border-radius: 18px;
         @include light-theme {

stylesheets/components/EditHistoryMessagesModal.scss

@@ -3,7 +3,16 @@
 
 .EditHistoryMessagesModal {
   &__divider {
+    border-style: solid;
     margin-block: 24px;
+
+    @include light-theme {
+      border-color: $color-gray-15;
+    }
+
+    @include dark-theme {
+      border-color: $color-gray-75;
+    }
   }
 
   &__title {

stylesheets/components/MessageDetail.scss

@@ -39,18 +39,6 @@
   }
 }
 
-.module-message-detail__contact-container {
-  border-top: 1px solid $color-gray-15;
-  margin-top: 36px;
-
-  @include light-theme {
-    border-top-color: $color-gray-15;
-  }
-  @include dark-theme {
-    border-top-color: $color-gray-75;
-  }
-}
-
 .module-message-detail__contact-group__header {
   @include font-body-1-bold;
   align-items: center;

ts/components/conversation/MessageDetail.tsx

@@ -27,6 +27,12 @@ import { formatDateTimeLong } from '../../util/timestamp';
 import { DurationInSeconds } from '../../util/durations';
 import { format as formatRelativeTime } from '../../util/expirationTimer';
 import { missingCaseError } from '../../util/missingCaseError';
+import { PanelRow } from './conversation-details/PanelRow';
+import { PanelSection } from './conversation-details/PanelSection';
+import {
+  ConversationDetailsIcon,
+  IconType,
+} from './conversation-details/ConversationDetailsIcon';
 
 export type Contact = Pick<
   ConversationType,
@@ -88,6 +94,7 @@ export type PropsReduxActions = Pick<
   | 'saveAttachment'
   | 'showContactModal'
   | 'showConversation'
+  | 'showEditHistoryModal'
   | 'showExpiredIncomingTapToViewToast'
   | 'showExpiredOutgoingTapToViewToast'
   | 'showLightbox'
@@ -131,6 +138,7 @@ export function MessageDetail({
   saveAttachment,
   showContactModal,
   showConversation,
+  showEditHistoryModal,
   showExpiredIncomingTapToViewToast,
   showExpiredOutgoingTapToViewToast,
   showLightbox,
@@ -321,6 +329,7 @@ export function MessageDetail({
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     <div className="module-message-detail" tabIndex={0} ref={focusRef}>
+      <PanelSection>
         <div
           className="module-message-detail__message-container"
           ref={messageContainerRef}
@@ -359,8 +368,12 @@ export function MessageDetail({
               log.warn('MessageDetail: scrollToQuotedMessage called!');
             }}
             showContactModal={showContactModal}
-          showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast}
+            showExpiredIncomingTapToViewToast={
-          showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast}
+              showExpiredIncomingTapToViewToast
+            }
+            showExpiredOutgoingTapToViewToast={
+              showExpiredOutgoingTapToViewToast
+            }
             showLightbox={showLightbox}
             startConversation={startConversation}
             theme={theme}
@@ -383,7 +396,9 @@ export function MessageDetail({
               </tr>
             ))}
             <tr>
-            <td className="module-message-detail__label">{i18n('icu:sent')}</td>
+              <td className="module-message-detail__label">
+                {i18n('icu:sent')}
+              </td>
               <td>
                 <ContextMenu
                   i18n={i18n}
@@ -392,7 +407,9 @@ export function MessageDetail({
                       icon: 'StoryDetailsModal__copy-icon',
                       label: i18n('icu:StoryDetailsModal__copy-timestamp'),
                       onClick: () => {
-                      void window.navigator.clipboard.writeText(String(sentAt));
+                        void window.navigator.clipboard.writeText(
+                          String(sentAt)
+                        );
                       },
                     },
                   ]}
@@ -437,7 +454,25 @@ export function MessageDetail({
             )}
           </tbody>
         </table>
-      {renderContacts()}
+      </PanelSection>
+      {message.isEditedMessage && (
+        <PanelSection>
+          <PanelRow
+            icon={
+              <ConversationDetailsIcon
+                ariaLabel={i18n('icu:MessageDetail__view-edits')}
+                icon={IconType.edit}
+              />
+            }
+            label={i18n('icu:MessageDetail__view-edits')}
+            onClick={() => {
+              showEditHistoryModal?.(message.id);
+            }}
+          />
+        </PanelSection>
+      )}
+
+      <PanelSection>{renderContacts()}</PanelSection>
     </div>
   );
 }

ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx

@@ -9,6 +9,7 @@ import { bemGenerator } from './util';
 
 export enum IconType {
   'block' = 'block',
+  'edit' = 'edit',
   'unblock' = 'unblock',
   'color' = 'color',
   'down' = 'down',

ts/state/smart/MessageDetail.tsx

@@ -54,7 +54,8 @@ export function SmartMessageDetail(): JSX.Element | null {
     showSpoiler,
     startConversation,
   } = useConversationsActions();
-  const { showContactModal, toggleSafetyNumberModal } = useGlobalModalActions();
+  const { showContactModal, showEditHistoryModal, toggleSafetyNumberModal } =
+    useGlobalModalActions();
   const { showLightbox, showLightboxForViewOnceMedia } = useLightboxActions();
   const { viewStory } = useStoriesActions();
 
@@ -100,6 +101,7 @@ export function SmartMessageDetail(): JSX.Element | null {
       sentAt={message.timestamp}
       showContactModal={showContactModal}
       showConversation={showConversation}
+      showEditHistoryModal={showEditHistoryModal}
       showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast}
       showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast}
       showLightbox={showLightbox}