Making Compose's Placeholder Dynamic (#11016)

app/javascript/chat/__tests__/compose.test.jsx

@@ -117,7 +117,7 @@ describe('<Compose />', () => {
 
       expect(input.textContent).toEqual('');
       expect(input.getAttribute('maxLength')).toEqual('1000');
-      expect(input.getAttribute('placeholder')).toEqual('Write message...');
+      expect(input.getAttribute('placeholder')).toContain('Write message to');
 
       // Ensure send button is pressent
       getByText(/send/i);

app/javascript/chat/chat.jsx

@@ -1467,7 +1467,9 @@ export default class Chat extends Component {
   }
   renderActiveChatChannel = (channelHeader) => {
     const { state, props } = this;
-
+    const channelName = state.activeChannel
+      ? state.activeChannel.channel_name
+      : ' ';
     return (
       <div className="activechatchannel">
         <div className="activechatchannel__conversation">
@@ -1522,6 +1524,7 @@ export default class Chat extends Component {
               handleKeyUp={this.handleKeyUp}
               handleKeyDownEdit={this.handleKeyDownEdit}
               activeChannelId={state.activeChannelId}
+              activeChannelName={channelName}
               startEditing={state.startEditing}
               markdownEdited={state.markdownEdited}
               editMessageMarkdown={state.activeEditMessage.markdown}

app/javascript/chat/compose.jsx

@@ -15,6 +15,7 @@ const Compose = ({
   editMessageMarkdown,
   handleEditMessageClose,
   handleFilePaste,
+  activeChannelName,
 }) => {
   const [value, setValue] = useState('');
 
@@ -36,8 +37,9 @@ const Compose = ({
   };
 
   const placeholder = useMemo(
-    () => (startEditing ? "Let's connect" : 'Write message...'),
-    [startEditing],
+    () =>
+      startEditing ? "Let's connect" : `Write message to ${activeChannelName}`,
+    [startEditing, activeChannelName],
   );
   const label = useMemo(
     () => (startEditing ? "Let's connect" : 'Compose a message'),
@@ -119,6 +121,7 @@ Compose.propTypes = {
   editMessageMarkdown: PropTypes.string.isRequired,
   handleEditMessageClose: PropTypes.func.isRequired,
   handleFilePaste: PropTypes.func.isRequired,
+  activeChannelName: PropTypes.string.isRequired,
 };
 
 export default Compose;