Add Webhook Documentation Links to UI (#3294)

* working on formField file * webhook documentation link * delete id from url * removed changes to the forms files * Update web/src/app/escalation-policies/PolicyStepForm.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * remove more innecesary changes from form conversion work * extra line web/src/app/util/NumberField.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * extra line web/src/app/util/MountWatcher.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * extra line web/src/app/users/UserContactMethodForm.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * extra line web/src/app/forms/Form.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * extra line web/src/app/forms/FormContainer.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * extra line web/src/app/forms/FormField.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * extra line web/src/app/forms/context.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * remove id * open in new tab * support linking to doc section * link directly to webhook section in new tab * fix comment --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Nathaniel Caza <[email protected]>
target · Oct 10, 2023 · 41754c3 · 41754c3
1 parent 47b35fc
commit 41754c3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/web/src/app/documentation/Documentation.tsx b/web/src/app/documentation/Documentation.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
@@ -23,25 +23,36 @@ export default function Documentation(): JSX.Element {
   const classes = useStyles()
 
   // NOTE list markdown documents here
-  let markdownDocs = [integrationKeys]
+  let markdownDocs = [{ doc: integrationKeys, id: 'integration-keys' }]
   if (webhookEnabled) {
-    markdownDocs.push(webhooks)
+    markdownDocs.push({ doc: webhooks, id: 'webhooks' })
   }
 
-  markdownDocs = markdownDocs.map((md) =>
-    md.replaceAll(
+  markdownDocs = markdownDocs.map((md) => ({
+    id: md.id,
+    doc: md.doc.replaceAll(
       'https://<example.goalert.me>',
       publicURL || `${window.location.origin}${pathPrefix}`,
     ),
-  )
+  }))
+
+  // useEffect to ensure that the page scrolls to the correct section after rendering
+  useEffect(() => {
+    const hash = window.location.hash
+    if (!hash) return
+    const el = document.getElementById(hash.slice(1))
+    if (!el) return
+
+    el.scrollIntoView()
+  }, [webhookEnabled, publicURL])
 
   return (
     <React.Fragment>
-      {markdownDocs.map((doc, i) => (
-        <Card key={i} className={classes.mBottom}>
+      {markdownDocs.map((md, i) => (
+        <Card key={i} className={classes.mBottom} id={md.id}>
           <CardContent>
             <Typography variant='body1' component='div'>
-              <Markdown value={doc} />
+              <Markdown value={md.doc} />
             </Typography>
           </CardContent>
         </Card>

diff --git a/web/src/app/escalation-policies/PolicyStepForm.js b/web/src/app/escalation-policies/PolicyStepForm.js
@@ -26,6 +26,7 @@ import {
 import { SlackBW as SlackIcon } from '../icons/components/Icons'
 import { Config } from '../util/RequireConfig'
 import NumberField from '../util/NumberField'
+import AppLink from '../util/AppLink'
 
 const useStyles = makeStyles({
   badge: {
@@ -252,6 +253,11 @@ function PolicyStepForm(props) {
                         name='webhooks'
                         mapValue={getTargetsByType('chanWebhook')}
                         mapOnChangeValue={setTargetType('chanWebhook')}
+                        hint={
+                          <AppLink newTab to='/docs#webhooks'>
+                            Webhook Documentation
+                          </AppLink>
+                        }
                       />
                     </StepContent>
                   </Step>

diff --git a/web/src/app/users/UserContactMethodForm.tsx b/web/src/app/users/UserContactMethodForm.tsx
@@ -11,6 +11,7 @@ import {
 import { useConfigValue } from '../util/RequireConfig'
 import TelTextField from '../util/TelTextField'
 import { FieldError } from '../util/errutil'
+import AppLink from '../util/AppLink'
 
 type Value = {
   name: string
@@ -73,6 +74,11 @@ function renderURLField(edit: boolean): JSX.Element {
       type='url'
       component={TextField}
       disabled={edit}
+      hint={
+        <AppLink newTab to='/docs#webhooks'>
+          Webhook Documentation
+        </AppLink>
+      }
     />
   )
 }