From e1f0c8ee5715705891e595ecabf3ec69179e6c91 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <a-rajat.dabade@mattermost.com>
Date: Tue, 6 Aug 2024 19:47:54 +0530
Subject: [PATCH] [MM-59346] Add labels for channel header and purpose in RHS
 channel info view (#27775)

* MM-59346: show channel description header

* refactor: updated inlt using npm and styles

* channel description header persist
---
 .../channel_info_rhs/about_area_channel.tsx     | 17 +++++++++++++++++
 webapp/channels/src/i18n/en.json                |  2 ++
 2 files changed, 19 insertions(+)

diff --git a/webapp/channels/src/components/channel_info_rhs/about_area_channel.tsx b/webapp/channels/src/components/channel_info_rhs/about_area_channel.tsx
index baf1478a8b..194eae5ca3 100644
--- a/webapp/channels/src/components/channel_info_rhs/about_area_channel.tsx
+++ b/webapp/channels/src/components/channel_info_rhs/about_area_channel.tsx
@@ -27,6 +27,17 @@ const ChannelPurpose = styled.div`
     }
 `;
 
+const ChannelDescriptionHeading = styled.div`
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.24px;
+    text-transform: uppercase;
+    padding: 6px 0px;
+`;
+
 const ChannelHeader = styled.div`
     margin-bottom: 12px;
 `;
@@ -47,6 +58,9 @@ const AboutAreaChannel = ({channel, canEditChannelProperties, actions}: Props) =
         <>
             {(channel.purpose || canEditChannelProperties) && (
                 <ChannelPurpose>
+                    <ChannelDescriptionHeading>
+                        {formatMessage({id: 'channel_info_rhs.about_area.channel_purpose.heading', defaultMessage: 'Channel Purpose'})}
+                    </ChannelDescriptionHeading>
                     <EditableArea
                         editable={canEditChannelProperties}
                         content={channel.purpose && (
@@ -67,6 +81,9 @@ const AboutAreaChannel = ({channel, canEditChannelProperties, actions}: Props) =
 
             {(channel.header || canEditChannelProperties) && (
                 <ChannelHeader>
+                    <ChannelDescriptionHeading>
+                        {formatMessage({id: 'channel_info_rhs.about_area.channel_header.heading', defaultMessage: 'Channel Header'})}
+                    </ChannelDescriptionHeading>
                     <EditableArea
                         content={channel.header && (
                             <LineLimiter
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 1d44973b96..09219c7084 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3100,8 +3100,10 @@
   "channel_info_rhs.about_area_id": "ID:",
   "channel_info_rhs.about_area.add_channel_header": "Add a channel header",
   "channel_info_rhs.about_area.add_channel_purpose": "Add a channel purpose",
+  "channel_info_rhs.about_area.channel_header.heading": "Channel Header",
   "channel_info_rhs.about_area.channel_header.line_limiter.less": "less",
   "channel_info_rhs.about_area.channel_header.line_limiter.more": "more",
+  "channel_info_rhs.about_area.channel_purpose.heading": "Channel Purpose",
   "channel_info_rhs.about_area.channel_purpose.line_limiter.less": "less",
   "channel_info_rhs.about_area.channel_purpose.line_limiter.more": "more",
   "channel_info_rhs.edit_link": "Edit",