MM-46646 Serve all plugin images via webpack

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap

@@ -129,7 +129,7 @@ exports[`components/rhsChannelBoards renders with empty list of boards 1`] = `
         class="boards-screenshots"
       >
         <img
-          src="undefined/public/boards-screenshots.png"
+          src="test-file-stub"
         />
       </div>
       <button

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardsHeader.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`components/rhsChannelBoardsHeader renders the header 1`] = `
   <div>
     <img
       class="boards-rhs-header-logo"
-      src="undefined/public/app-bar-icon.png"
+      src="test-file-stub"
     />
     <span>
       Boards

mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx

@@ -27,12 +27,12 @@ import Button from '../../../../webapp/src/widgets/buttons/button'
 
 import {WSClient} from '../../../../webapp/src/wsclient'
 
+import boardsScreenshots from '../../../../webapp/static/boards-screenshots.png'
+
 import RHSChannelBoardItem from './rhsChannelBoardItem'
 
 import './rhsChannelBoards.scss'
 
-const boardsScreenshots = (window as any).baseURL + '/public/boards-screenshots.png'
-
 const RHSChannelBoards = () => {
     const boards = useAppSelector(getMySortedBoards)
     const teamId = useAppSelector(getCurrentTeamId)

mattermost-plugin/webapp/src/components/rhsChannelBoardsHeader.tsx

@@ -7,9 +7,11 @@ import {getMessages} from '../../../../webapp/src/i18n'
 import {getLanguage} from '../../../../webapp/src/store/language'
 import {getCurrentChannel} from '../../../../webapp/src/store/channels'
 import {useAppSelector} from '../../../../webapp/src/store/hooks'
+import {Utils} from '../../../../webapp/src/utils'
+
+import appBarIcon from '../../../../webapp/static/app-bar-icon.png'
 
 const RHSChannelBoardsHeader = () => {
-    const appBarIconURL = (window as any).baseURL + '/public/app-bar-icon.png'
     const currentChannel = useAppSelector(getCurrentChannel)
     const language = useAppSelector<string>(getLanguage)
 
@@ -25,7 +27,7 @@ const RHSChannelBoardsHeader = () => {
             <div>
                 <img
                     className='boards-rhs-header-logo'
-                    src={appBarIconURL}
+                    src={Utils.buildURL(appBarIcon, true)}
                 />
                 <span>
                     <FormattedMessage

mattermost-plugin/webapp/src/index.tsx

@@ -40,6 +40,8 @@ import '../../../webapp/src/styles/labels.scss'
 import octoClient from '../../../webapp/src/octoClient'
 import {Constants} from '../../../webapp/src/constants'
 
+import appBarIcon from '../../../webapp/static/app-bar-icon.png'
+
 import BoardsUnfurl from './components/boardsUnfurl/boardsUnfurl'
 import RHSChannelBoards from './components/rhsChannelBoards'
 import RHSChannelBoardsHeader from './components/rhsChannelBoardsHeader'
@@ -318,8 +320,7 @@ export default class Plugin {
             }
 
             if (this.registry.registerAppBarComponent) {
-                const appBarIconURL = windowAny.baseURL + '/public/app-bar-icon.png'
+                this.registry.registerAppBarComponent(Utils.buildURL(appBarIcon, true), () => mmStore.dispatch(toggleRHSPlugin), intl.formatMessage({id: 'AppBar.Tooltip', defaultMessage: 'Toggle Linked Boards'}))
-                this.registry.registerAppBarComponent(appBarIconURL, () => mmStore.dispatch(toggleRHSPlugin), intl.formatMessage({id: 'AppBar.Tooltip', defaultMessage: 'Toggle Linked Boards'}))
             }
 
             this.registry.registerPostWillRenderEmbedComponent(

mattermost-plugin/webapp/webpack.config.js

@@ -117,7 +117,8 @@ const config = {
                 test: /\.(png|eot|tiff|svg|woff2|woff|ttf|jpg|gif)$/,
                 type: 'asset/resource',
                 generator: {
-                    filename: 'static/[name].[ext]',
+                    filename: '[name][ext]',
+                    publicPath: TARGET_IS_PRODUCT ? 'http://localhost:9006/static/' : '/static/',
                 }
             },
         ],
@@ -205,6 +206,10 @@ if (NPM_TARGET === 'start:product') {
         devMiddleware: {
             writeToDisk: false,
         },
+        static: {
+            directory: path.join(__dirname, '../../webapp/static'),
+            publicPath: '/static',
+        },
     };
 }
 

webapp/src/utils.ts

@@ -88,14 +88,14 @@ class Utils {
     }
 
     static getUserDisplayName(user: IUser, configNameFormat: string): string {
-        let nameFormat = configNameFormat    
+        let nameFormat = configNameFormat
         if(UserSettings.nameFormat){
             nameFormat=UserSettings.nameFormat
         }
-    
+
         // default nameFormat = 'username'
         let displayName = user.username
-    
+
         if (nameFormat === ShowNicknameFullName) {
             if( user.nickname != '') {
                 displayName = user.nickname
@@ -574,7 +574,7 @@ class Utils {
     }
 
     static buildURL(path: string, absolute?: boolean): string {
-        if (!Utils.isFocalboardPlugin()) {
+        if (!Utils.isFocalboardPlugin() || process.env.TARGET_IS_PRODUCT) {
             return path
         }