Add Contact support button (#45)

README.md

@@ -212,6 +212,16 @@ Example for [mautrix-telegram](https://github.com/mautrix/telegram)
 }
 ```
 
+### Providing support URL
+
+Synapse-Admin provides a support link in the main menu - `Contact support`. By default, the link points to the GitHub issues page of the project. You can change this link by providing a `supportURL` in the `config.json`.
+
+```json
+{
+  "supportURL": "https://example.com/support"
+}
+```
+
 ## Screenshots
 
 ![Screenshots](./screenshots.jpg)

src/App.tsx

@@ -4,6 +4,7 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 import { Admin, CustomRoutes, Resource, resolveBrowserLocale } from "react-admin";
 import { Route } from "react-router-dom";
 
+import { AdminLayout } from "./components/AdminLayout";
 import { ImportFeature } from "./components/ImportFeature";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
@@ -49,6 +50,7 @@ const App = () => (
   <Admin
     disableTelemetry
     requireAuth
+    layout={AdminLayout}
     loginPage={LoginPage}
     authProvider={authProvider}
     dataProvider={dataProvider}

src/AppContext.tsx

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 interface AppContextType {
   restrictBaseUrl: string | string[];
   asManagedUsers: string[];
+  supportURL: string;
 }
 
 export const AppContext = createContext({});

src/components/AdminLayout.tsx

@@ -0,0 +1,26 @@
+import { Layout, Menu } from 'react-admin';
+import LiveHelpIcon from '@mui/icons-material/LiveHelp';
+
+const DEFAULT_SUPPORT_LINK = "https://github.com/etkecc/synapse-admin/issues";
+const supportLink = (): string => {
+    try {
+        new URL(localStorage.getItem("support_url") || ''); // Check if the URL is valid
+        return localStorage.getItem("support_url") || DEFAULT_SUPPORT_LINK;
+    } catch (e) {
+        return DEFAULT_SUPPORT_LINK;
+    }
+};
+
+
+const AdminMenu = () => (
+    <Menu>
+        <Menu.ResourceItems />
+        <Menu.Item to={supportLink()} target="_blank" primaryText="Contact support" leftIcon={<LiveHelpIcon />} />
+    </Menu>
+);
+
+export const AdminLayout = ({ children }) => (
+    <Layout menu={AdminMenu}>
+        {children}
+    </Layout>
+);

src/components/mxid.tsx

@@ -4,8 +4,8 @@
  * @param id The user ID to check
  * @returns Whether the user is managed by an application service
  */
-export const isASManaged = (id: string) => {
-  const managedUsersString = localStorage.getItem("as_managed_users");
+export const isASManaged = (id: string): boolean => {
+  const managedUsersString = localStorage.getItem("as_managed_users") || '';
   try {
     const asManagedUsers = JSON.parse(managedUsersString).map(regex => new RegExp(regex));
     return asManagedUsers.some(regex => regex.test(id));

src/i18n/index.d.ts

@@ -139,6 +139,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
         deactivate: string;
         erase: string;
         erase_admin_error: string;
+        modify_managed_user_error: string;
       };
       action: {
         erase: string;

src/index.tsx

@@ -10,6 +10,7 @@ fetch("config.json")
   .then(res => res.json())
   .then(props => {
     storage.setItem("as_managed_users", JSON.stringify(props.asManagedUsers));
+    storage.setItem("support_url", props.supportURL);
     return createRoot(document.getElementById("root")).render(
       <React.StrictMode>
         <AppContext.Provider value={props}>