MM-70623 Fix GitHub team-sidebar layout after React 19 migration

README.md

@@ -65,3 +65,7 @@ To trigger a release, follow these steps:
 ### Playwright e2e tests
 
 In order to get your environment set up to run [Playwright](https://playwright.dev) tests, please see the setup guide at [e2e/playwright](/e2e/playwright#readme).
+
+### React 19 compatibility
+
+This plugin requires Mattermost 12.0 or later with the MM-70687 host JSX runtime exports. Webpack externalizes React, ReactDOM (including `react-dom/client`), and both JSX runtimes to the host globals. These mappings also cover runtime imports from dependencies. Rebuild the plugin after changing its configuration.

plugin.json

@@ -5,7 +5,7 @@
     "homepage_url": "https://github.com/mattermost/mattermost-plugin-github",
     "support_url": "https://github.com/mattermost/mattermost-plugin-github/issues",
     "icon_path": "assets/icon.svg",
-    "min_server_version": "10.7.0",
+    "min_server_version": "12.0.0",
     "server": {
       "executables": {
           "linux-amd64": "server/dist/plugin-linux-amd64",

webapp/package.json

@@ -3,7 +3,7 @@
   "scripts": {
     "build": "webpack --mode=production",
     "build:watch": "webpack --mode=production --watch",
-    "debug": "webpack --mode=none",
+    "debug": "webpack --mode=development",
     "debug:watch": "webpack --mode=development --watch",
     "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --cache",
     "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --fix --cache",

webapp/src/components/link_tooltip/link_tooltip.jsx

@@ -175,7 +175,20 @@ export const LinkTooltip = ({href, connected, show, theme, enterpriseURL}) => {
                                 </p>
                             )}
                             <div className='markdown-text mt-1 mb-1'>
-                                <ReactMarkdown linkTarget='_blank'>{description}</ReactMarkdown>
+                                <ReactMarkdown
+                                    components={{a: ({href: url, children, title}) => (
+                                        <a
+                                            href={url}
+                                            title={title}
+                                            target='_blank'
+                                            rel='noopener noreferrer'
+                                        >
+                                            {children}
+                                        </a>
+                                    )}}
+                                >
+                                    {description}
+                                </ReactMarkdown>
                             </div>
 
                             {/* base <- head */}

webapp/src/components/sidebar_buttons/sidebar_buttons.jsx

@@ -268,7 +268,12 @@ const getStyle = makeStyleFromTheme((theme) => {
             justifyContent: 'space-around',
             padding: '0 10px',
         },
+
+        // OverlayTrigger may wrap each button, so stack the controls at the
+        // container level instead of relying on the anchors' display style.
         containerTeam: {
+            display: 'flex',
+            flexDirection: 'column',
         },
     };
 });

webapp/webpack.config.js

@@ -89,6 +89,9 @@ module.exports = {
     externals: {
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react-dom/client': 'ReactDOM',
+        'react/jsx-runtime': 'ReactJSXRuntime',
+        'react/jsx-dev-runtime': 'ReactJSXDevRuntime',
         redux: 'Redux',
         'react-redux': 'ReactRedux',
         'prop-types': 'PropTypes',