MM-58502 Error on crossing block limit on client side (#5015)

* refactor: error on crossing block limit

* fix: linter

* chore: updated snapshot

* refactor: updated mysql/mysql-server docker version

* chore: changed blob to text.length

docker-testing/docker-compose-mysql.yml

@@ -1,7 +1,7 @@
 version: '2.4'
 services:
   mysql:
-    image: "mysql/mysql-server:5.7.12"
+    image: "mysql/mysql-server:8.0.32"
     restart: always
     environment:
       MYSQL_ROOT_HOST: "%"

webapp/i18n/en.json

@@ -133,6 +133,7 @@
   "ContentBlock.editCardCheckboxText": "edit card text",
   "ContentBlock.editCardText": "edit card text",
   "ContentBlock.editText": "Edit text...",
+  "ContentBlock.errorText": "You've exceeded the size limit for this content. Please shorten it to avoid losing data.",
   "ContentBlock.image": "image",
   "ContentBlock.insertAbove": "Insert above",
   "ContentBlock.moveBlock": "move card content",

webapp/package.json

@@ -35,6 +35,7 @@
 		"@mattermost/compass-icons": "^0.1.39",
 		"@reduxjs/toolkit": "^1.8.0",
 		"@tippyjs/react": "4.2.6",
+		"classnames": "^2.5.1",
 		"color": "^4.2.1",
 		"draft-js": "^0.11.7",
 		"emoji-mart": "^3.0.1",

webapp/src/components/__snapshots__/contentBlock.test.tsx.snap

@@ -476,12 +476,16 @@ exports[`components/contentBlock should match snapshot with textBlock 1`] = `
         style="flex: 0 0 auto; height: 100%;"
       />
       <div
-        class="MarkdownEditor octo-editor  "
+        class="TextElement"
       >
         <div
-          class="octo-editor-preview"
-          data-testid="preview-element"
-        />
+          class="MarkdownEditor octo-editor  "
+        >
+          <div
+            class="octo-editor-preview"
+            data-testid="preview-element"
+          />
+        </div>
       </div>
     </div>
     <div

webapp/src/components/content/__snapshots__/textElement.test.tsx.snap

@@ -3,12 +3,16 @@
 exports[`components/content/TextElement return a textElement 1`] = `
 <div>
   <div
-    class="MarkdownEditor octo-editor  "
+    class="TextElement"
   >
     <div
-      class="octo-editor-preview octo-placeholder"
-      data-testid="preview-element"
-    />
+      class="MarkdownEditor octo-editor  "
+    >
+      <div
+        class="octo-editor-preview octo-placeholder"
+        data-testid="preview-element"
+      />
+    </div>
   </div>
 </div>
 `;

webapp/src/components/content/textElement.scss

@@ -0,0 +1,13 @@
+.TextElement {
+    display: inline;
+
+    .markdown-editor-error {
+        background-color: rgba(210, 75, 78, 0.08);
+        border: 1px solid var(--error-text);
+    }
+
+    .error-message {
+        color: var(--dnd-indicator, rgba(210, 75, 78, 1));
+        margin: 16px 0;
+    }
+}

webapp/src/components/content/textElement.tsx

@@ -1,8 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState} from 'react'
 import {useIntl} from 'react-intl'
 
+import cx from 'classnames'
+
 import {ContentBlock} from '../../blocks/contentBlock'
 import {createTextBlock} from '../../blocks/textBlock'
 import mutator from '../../mutator'
@@ -11,26 +13,52 @@ import {MarkdownEditor} from '../markdownEditor'
 
 import {contentRegistry} from './contentRegistry'
 
+import './textElement.scss'
+
 type Props = {
     block: ContentBlock
     readonly: boolean
 }
 
-const TextElement = (props: Props): JSX.Element => {
-    const {block, readonly} = props
+const BlockTitleMaxBytes = 65535 // Maximum size of a TEXT column in MySQL
+const BlockTitleMaxRunes = BlockTitleMaxBytes / 4 // Assume a worst-case representation
+
+const TextElement = ({block, readonly}: Props): JSX.Element => {
     const intl = useIntl()
 
+    const [isError, setIsError] = useState<boolean>(false)
+    const [blockTitle, setBlockTitle] = useState(block.title)
+
+    const textChangedHandler = (text: string): void => {
+        setBlockTitle(text)
+        const textSize = text.length
+        setIsError(textSize > BlockTitleMaxRunes)
+    }
+
+    const handleBlur = (text: string): void => {
+        if (text !== block.title || blockTitle !== block.title) {
+            const textSize = new Blob([text]).size
+            if (textSize <= BlockTitleMaxRunes) {
+                mutator.changeBlockTitle(block.boardId, block.id, block.title, text, intl.formatMessage({id: 'ContentBlock.editCardText', defaultMessage: 'edit card text'})).
+                    finally(() => {
+                        setIsError(false)
+                    })
+            }
+        }
+    }
+
     return (
-        <MarkdownEditor
-            text={block.title}
-            placeholderText={intl.formatMessage({id: 'ContentBlock.editText', defaultMessage: 'Edit text...'})}
-            onBlur={(text) => {
-                if (text !== block.title) {
-                    mutator.changeBlockTitle(block.boardId, block.id, block.title, text, intl.formatMessage({id: 'ContentBlock.editCardText', defaultMessage: 'edit card text'}))
-                }
-            }}
-            readonly={readonly}
-        />
+        <div className='TextElement'>
+            <MarkdownEditor
+                className={cx({'markdown-editor-error': isError})}
+                text={blockTitle}
+                placeholderText={intl.formatMessage({id: 'ContentBlock.editText', defaultMessage: 'Edit text...'})}
+                onChange={textChangedHandler}
+                onBlur={handleBlur}
+                readonly={readonly}
+            />
+            {isError && <div className='error-message'>{intl.formatMessage({id: 'ContentBlock.errorText', defaultMessage: 'You\'ve exceeded the size limit for this content. Please shorten it to avoid losing data.'})}</div>}
+        </div>
     )
 }