feat: enable contact details to be set through configuration

Fixes #23 Fixes #49

api/src/app.ts

@@ -37,6 +37,7 @@ import { initSentry } from "./util/sentry.js";
 import { retryReviewApproval } from "./resources/gram/v1/admin/retryReviewApproval.js";
 import { config } from "@gram/core/dist/config/index.js";
 import cookieParser from "cookie-parser";
+import { getContact } from "./resources/gram/v1/contact/get.js";
 
 export async function createApp(dal: DataAccessLayer) {
   // Start constructing the app.
@@ -73,6 +74,7 @@ export async function createApp(dal: DataAccessLayer) {
   const unauthenticatedRoutes = express.Router();
   unauthenticatedRoutes.get("/banners", errorWrap(getBanner(dal)));
   unauthenticatedRoutes.get("/menu", errorWrap(getMenu));
+  unauthenticatedRoutes.get("/contact", errorWrap(getContact));
 
   const tokenRoutes = tokenV1(dal);
   unauthenticatedRoutes.get("/auth/token", errorWrap(tokenRoutes.get));

api/src/resources/gram/v1/contact/get.ts

@@ -0,0 +1,6 @@
+import { Request, Response } from "express";
+import { config } from "@gram/core/dist/config/index.js";
+
+export const getContact = async (req: Request, res: Response) => {
+  res.json({ contact: config.contact });
+};

app/src/api/gram/contact.js

@@ -0,0 +1,12 @@
+import { api } from "./api";
+
+const contactApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getContact: build.query({
+      query: () => `/contact`,
+      transformResponse: (response) => response.contact,
+    }),
+  }),
+});
+
+export const { useGetContactQuery } = contactApi;

app/src/components/elements/ContactChip.js

@@ -0,0 +1,42 @@
+import { Chip, IconButton } from "@mui/material";
+import EmailIcon from "@mui/icons-material/Email";
+import ChatIcon from "@mui/icons-material/Chat";
+import { useGetContactQuery } from "../../api/gram/contact";
+
+export function ContactChip(props) {
+  const { data: contact } = useGetContactQuery();
+
+  return (
+    <Chip
+      variant="outlined"
+      label={contact?.name || "Your Gram Admins"}
+      icon={
+        <>
+          {contact?.slackUrl && (
+            <IconButton
+              href={contact?.slackUrl}
+              target="_blank"
+              rel="noreferrer"
+              color="inherit"
+              size="small"
+            >
+              <ChatIcon />
+            </IconButton>
+          )}
+          {contact?.mail && (
+            <IconButton
+              href={`mailto:${contact?.mail}`}
+              target="_blank"
+              rel="noreferrer"
+              color="inherit"
+              size="small"
+            >
+              <EmailIcon />
+            </IconButton>
+          )}
+        </>
+      }
+      {...props}
+    />
+  );
+}

app/src/components/model/tutorial/Tutorial.js

@@ -35,17 +35,16 @@ import suggestions from "./img/suggestions.gif";
 import indicatorUnknownImg from "./img/unknown.svg";
 import indicatorVulnerableImg from "./img/vulnerable.svg";
 import actionItemImg from "./img/actionItem.gif";
+import { ContactChip } from "../../elements/ContactChip";
 
 const Introduction = () => (
   <>
     <Typography>
       This tutorial will show you how to use the diagramming interface of Gram.
-      {/* //TODO replace contact blurb */}
-      If you have any questions or feedback, feel free to reach out to us in{" "}
-      <Link target="_none" to="">
-        #team-ea-secure-development
-      </Link>{" "}
-      on slack.
+    </Typography>
+    <Typography>
+      If you have any questions or feedback, feel free to reach out to{" "}
+      <ContactChip />
     </Typography>
   </>
 );
@@ -468,12 +467,8 @@ const FinalWindow = () => (
     <Typography>
       This concludes the basic tutorial. We hope it was useful!
     </Typography>
-    {/* //TODO replace contact blurb */}
     <Typography>
-      If you have questions, feel free to reach out us in{" "}
-      <Link target="_none" to="">
-        #team-ea-secure-development
-      </Link>
+      If you have questions, feel free to reach out to <ContactChip />
     </Typography>
   </>
 );

config/default.ts

@@ -86,6 +86,12 @@ export const defaultConfig: GramConfiguration = {
     },
   ],
 
+  contact: {
+    name: "Security Team",
+    email: undefined,
+    slackUrl: undefined,
+  },
+
   additionalMigrations: [MagicLinkMigrations],
 
   bootstrapProviders: async function (

core/src/config/GramConfiguration.ts

@@ -90,6 +90,16 @@ export interface GramConfiguration {
     };
   };
 
+  /**
+   * Optional contact details to the team or person managing this Gram installation.
+   * See it as the support email for your security team in your org.
+   */
+  contact?: {
+    name: string;
+    email?: string;
+    slackUrl?: string;
+  };
+
   /**
    * Used for CSP policy.
    */