Mattermost integration: Upload files

.gitignore

@@ -25,3 +25,4 @@ yarn-error.log*
 _ignore
 
 .parcel-cache
+mm-logs

docker/docker-compose.yml

@@ -0,0 +1,41 @@
+version: "3.9"
+networks:
+  default:
+    name: "mattermost-apps-dev"
+services:
+  mattermost:
+    image: "mattermost/mattermost-enterprise-edition:7.9.0" # https://hub.docker.com/r/mattermost/mattermost-enterprise-edition/tags
+    restart: "unless-stopped"
+    depends_on:
+      - "db"
+    ports:
+      - "8065:8065"
+    # env_file:
+      # - ".docker.env"
+    environment:
+      MM_SQLSETTINGS_DRIVERNAME: "postgres"
+      MM_SQLSETTINGS_DATASOURCE: "postgres://mmuser:mostest@db/mattermost_test?sslmode=disable\u0026connect_timeout=10"
+      MM_SERVICESETTINGS_CORSALLOWCREDENTIALS: true
+      MM_SERVICESETTINGS_CORSEXPOSEDHEADERS: "Access-Control-Allow-Origin,Access-Control-Allow-Methods"
+      MM_SERVICESETTINGS_LISTENADDRESS: ":8065"
+      MM_SERVICESETTINGS_SITEURL: "http://mattermost:8065"
+      MM_SERVICESETTINGS_ENABLEBOTACCOUNTCREATION: "true"
+      MM_SERVICESETTINGS_ENABLEUSERACCESSTOKENS: "true"
+      MM_SERVICESETTINGS_ENABLEOAUTHSERVICEPROVIDER: "true"
+      MM_SERVICESETTINGS_ENABLEDEVELOPER: "true"
+      MM_SERVICESETTINGS_ENABLETESTING: "true"
+      MM_PLUGINSETTINGS_AUTOMATICPREPACKAGEDPLUGINS: "true"
+      MM_EXPERIMENTALSETTINGS_ENABLEAPPBAR: "true"
+      MM_PLUGINSETTINGS_ENABLEUPLOADS: "true"
+      MM_LOGSETTINGS_CONSOLELEVEL: "DEBUG"
+      MM_LOGSETTINGS_FILELEVEL: "DEBUG"
+      MM_FILESETTINGS_MAXFILESIZE: 123524266
+    volumes:
+      - "./mm-logs:/mattermost/logs:rw"
+  db:
+    image: "postgres"
+    restart: "unless-stopped"
+    environment:
+      POSTGRES_PASSWORD: "mostest"
+      POSTGRES_USER: "mmuser"
+      POSTGRES_DB: "mattermost_test"

package.json

@@ -8,6 +8,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mattermost/client": "^9.8.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -21,6 +22,13 @@
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@mattermost/types": "^9.8.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "parcel": "^2.12.0",
+    "process": "^0.11.10",
+    "ts-jest": "^29.1.5"
+  },
   "scripts": {
     "start": "parcel src/index.html --dist-dir build",
     "build": "parcel build src/index.html --dist-dir build",
@@ -29,7 +37,8 @@
     "lint": "eslint src/**/*.ts src/**/*.tsx",
     "fix": "npm run lint -- --fix",
     "check-types": "tsc --noEmit",
-    "ci": "npm run lint && npm run check-types && npm run test:ci && npm run build"
+    "ci": "npm run lint && npm run check-types && npm run test:ci && npm run build",
+    "mattermost": "cd docker && docker-compose up"
   },
   "browserslist": {
     "production": [
@@ -42,11 +51,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "jest-environment-jsdom": "^29.7.0",
-    "parcel": "^2.12.0",
-    "process": "^0.11.10",
-    "ts-jest": "^29.1.5"
   }
 }

src/App.tsx

@@ -10,6 +10,7 @@ import SectionPage from './components/SectionPage';
 import {IClient} from './client/IClient';
 import {ClientProvider} from './hooks/useClient';
 import {useMount} from './hooks/useMount';
+import {MattermostProvider} from './hooks/useMM';
 
 type AppProps = {
     projectId: string;
@@ -58,11 +59,13 @@ const App: React.FC<AppProps> = ({projectId, sectionId, client}) => {
     );
 
     return (
-        <ClientProvider client={client}>
-            <GlobalStoreProvider initialProjectData={initialProjectData}>
-                {pageContent}
-            </GlobalStoreProvider>
-        </ClientProvider>
+        <MattermostProvider>
+            <ClientProvider client={client}>
+                <GlobalStoreProvider initialProjectData={initialProjectData}>
+                    {pageContent}
+                </GlobalStoreProvider>
+            </ClientProvider>
+        </MattermostProvider>
     );
 }
 

src/components/Files.tsx

@@ -1,17 +1,68 @@
 import {useGlobalStore} from '@/hooks/useGlobalStore';
+import {useMattermost} from '@/hooks/useMM';
 import * as types from '@/types/music_sniper_types';
 import {plural} from '@/utils';
+import {useState} from 'react';
 
 type FilesProps = {
     files: types.FileData[]
 }
 
 export const Files: React.FC<FilesProps> = ({files}) => {
     const globalStore = useGlobalStore();
+    const [fileUpload, setFileUpload] = useState<File | null>(null);
+
+    const mm = useMattermost();
+
+    const onFileUploadSubmit = async () => {
+        if (!fileUpload) {
+            return;
+        }
+
+        if (!mm.client4) {
+            alert('Mattermost not configured');
+            return;
+        }
+
+        try {
+            alert(`Uploading file: ${fileUpload.name}`);
+
+            const response = await mm.client4.uploadFile(fileUpload);
+
+            setFileUpload(null);
+        } catch (e) {
+            alert(`Error uploading file: ${(e as Error).message}`);
+        }
+
+        // const newFile: types.FileData = {
+        //     id: 'file-' + Math.random().toString(),
+        //     title: fileUpload.name,
+        //     sectionId: 'section-1',
+        // };
+
+        // globalStore.addFile(newFile);
+    }
+
+
+    const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (files && files.length > 0) {
+            setFileUpload(files[0]);
+        }
+    };
 
     return (
         <div className="files">
-            <span>+ Files</span>
+            <input
+                type='file'
+                onChange={onFileChange}
+            />
+            <button
+                type='button'
+                onClick={onFileUploadSubmit}
+            >
+                Upload
+            </button>
             {files.map((file) => {
                 const numComments = globalStore.getCommentsForFile(file.id).length;
 

src/components/MMConfigButton.tsx

@@ -0,0 +1,110 @@
+import {useGlobalStore} from '@/hooks/useGlobalStore';
+import {makeClient4FromConfig, useMattermost} from '@/hooks/useMM';
+import {Client4} from '@mattermost/client';
+import {useState} from 'react';
+
+export const MMConfigButton = () => {
+    const [showForm, setShowForm] = useState(false);
+
+    const onSubmit = () => {
+        setShowForm(false);
+    }
+
+    const button = (
+        <button
+            onClick={() => {
+                setShowForm(!showForm)}
+            }
+        >
+            Configure Mattermost
+        </button>
+    );
+
+    if (!showForm) {
+        return button;
+    }
+
+    return (
+        <>
+            {button}
+            <MMConfigForm
+                onSubmit={onSubmit}
+            />
+        </>
+    );
+}
+
+type MattermostConfigFormProps = {
+    onSubmit: () => void;
+}
+
+const MMConfigForm = (props: MattermostConfigFormProps) => {
+    const mm = useMattermost();
+
+    const [url, setUrl] = useState(mm.savedConfig?.url || '');
+    const [token, setToken] = useState(mm.savedConfig?.token || '');
+
+    const onSubmit = () => {
+        testConnection().then(() => {
+            mm.setSavedConfig({url, token});
+            props.onSubmit();
+        });
+    };
+
+    const testConnection = async () => {
+        const client4 = makeClient4FromConfig({url, token});
+        return testConnectWithClient(client4);
+    };
+
+    const testSavedConnection = async () => {
+        const client4 = mm.client4;
+        if (!client4) {
+            return;
+        }
+
+        return testConnectWithClient(client4);
+    };
+
+    return (
+        <div>
+            <input
+                type='text'
+                placeholder='URL'
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+            />
+            <input
+                type='text'
+                placeholder='Token'
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+            />
+            <button
+                type='button'
+                onClick={onSubmit}
+            >
+                Submit
+            </button>
+            <button
+                type='button'
+                onClick={testConnection}
+            >
+                Test Connection
+            </button>
+            <button
+                type='button'
+                onClick={testSavedConnection}
+            >
+                Test Saved Connection
+            </button>
+        </div>
+    );
+};
+
+const testConnectWithClient = (client4: Client4) => {
+    return client4.getMe().then((me) => {
+        alert(`Success! Logged in as ${me.username}`);
+    }, (err) => {
+        alert(`Error: ${err.message}`);
+    });
+};

src/components/SectionPage.tsx

@@ -5,6 +5,7 @@ import {Comments} from './Comments';
 import {CreateComment} from './CreateComment';
 import {SectionTitle} from './SectionTitle';
 import {useGlobalStore} from '@/hooks/useGlobalStore';
+import {MMConfigButton} from './MMConfigButton';
 
 type SectionPageProps = {
     projectId: string;
@@ -28,6 +29,7 @@ const SectionPage: React.FC<SectionPageProps> = ({projectId, sectionId}) => {
             <Files files={files} />
             <Comments entityPointer={sectionPointer} />
             <CreateComment entityPointer={sectionPointer} />
+            <MMConfigButton/>
         </div>
     );
 }