New roadmap pages

.env.development

@@ -1,7 +1,3 @@
-GATSBY_POSTHOG_API_KEY=phc_P4qv54s6EwWNh6sUp2xQ2YzC5RwiySE7qM5lWAeKHsT # posthog.com development project
-GATSBY_POSTHOG_API_HOST=https://app.posthog.com
-GATSBY_POSTHOG_UI_HOST=https://app.posthog.com
-
 GATSBY_SQUEAK_API_HOST=https://squeak.posthog.cc
 
 GATSBY_ALGOLIA_APP_ID=7VNQB5W0TX

package.json

@@ -34,7 +34,7 @@
         "@heroicons/react": "^1.0.6",
         "@hubspot/api-client": "^7.1.2",
         "@popperjs/core": "^2.11.2",
-        "@posthog/icons": "0.5.2",
+        "@posthog/icons": "0.6.7",
         "@slack/bolt": "^3.8.1",
         "@supabase/supabase-js": "^1.29.4",
         "@tailwindcss/container-queries": "^0.1.1",

plugins/gatsby-source-squeak/gatsby-node.ts

@@ -459,6 +459,7 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
             eyes: Int
             plus1: Int
             minus1: Int
+            total_count: Int
         }
 
     `)

src/components/Community/useNav.tsx

@@ -18,13 +18,9 @@ export const useNav = () => {
             name: 'Community',
         },
         {
-            name: 'Topics',
+            name: 'Questions',
             url: '/questions',
         },
-        {
-            name: 'Latest questions',
-            url: '/community/latest',
-        },
         ...(user
             ? [
                   {
@@ -37,6 +33,10 @@ export const useNav = () => {
             name: 'Roadmap',
             url: '/roadmap',
         },
+        {
+            name: 'WIP',
+            url: '/wip',
+        },
         {
             name: 'Changelog',
             url: '',
@@ -47,9 +47,5 @@ export const useNav = () => {
                     url: `/changelog/${year}`,
                 })),
         },
-        {
-            name: 'Contributors',
-            url: '/contributors',
-        },
     ]
 }

src/components/PostLayout/Menu.tsx

@@ -33,11 +33,8 @@ const Chevron = ({ open, className = '' }: { open: boolean; className?: string }
 }
 
 const getIcon = (name: string) => {
-    return NewIcons[name]
-        ? NewIcons[name]({ className: 'w-5' })
-        : NotProductIcons[name]
-        ? NotProductIcons[name]({ className: 'w-5' })
-        : null
+    const Icon = NewIcons[name] || NotProductIcons[name]
+    return Icon && <Icon className="w-5" />
 }
 
 export const Icon = ({ color, icon }: { color?: string; icon: string | React.ReactNode }) => {

src/components/Roadmap/InProgress.tsx

@@ -9,10 +9,14 @@ import { useToast } from '../../hooks/toast'
 import useSWR from 'swr'
 import qs from 'qs'
 import usePostHog from 'hooks/usePostHog'
-import Modal from 'components/Modal'
 import { IconInfo, IconX } from '@posthog/icons'
 import Tooltip from 'components/Tooltip'
 import SideModal from 'components/Modal/SideModal'
+import TeamUpdate from 'components/TeamUpdate'
+import { CallToAction } from 'components/CallToAction'
+import RichText from 'components/Squeak/components/RichText'
+import { useFormik } from 'formik'
+import transformValues from 'components/Squeak/util/transformValues'
 
 type RoadmapSubscriptions = {
     data: {
@@ -27,6 +31,68 @@ type RoadmapSubscriptions = {
     }
 }
 
+const Update = ({ body, questionID, fetchUpdates }) => {
+    const { getJwt, user } = useUser()
+    const [editing, setEditing] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const { setFieldValue, values, handleSubmit, submitForm } = useFormik({
+        initialValues: { body: '', images: [] },
+        onSubmit: async ({ body, images }) => {
+            const profileID = user?.profile.id
+            const jwt = await getJwt()
+            if (!profileID || !jwt) return
+            setLoading(true)
+            const transformedValues = await transformValues({ body, images: images ?? [] }, profileID, jwt)
+            await fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/questions/${questionID}`, {
+                body: JSON.stringify({
+                    data: {
+                        body: transformedValues.body,
+                    },
+                }),
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${jwt}`,
+                },
+            })
+            await fetchUpdates()
+            setLoading(false)
+            setEditing(false)
+        },
+    })
+    return (
+        <li>
+            {editing ? (
+                <div>
+                    <form onSubmit={handleSubmit}>
+                        <div className="bg-white dark:bg-accent-dark border border-light dark:border-dark rounded-md overflow-hidden mb-4">
+                            <RichText
+                                onSubmit={submitForm}
+                                autoFocus
+                                setFieldValue={setFieldValue}
+                                initialValue={body}
+                                values={values}
+                            />
+                        </div>
+                        <div className="flex items-center space-x-4">
+                            <CallToAction disabled={loading} onClick={submitForm} size="md">
+                                Update
+                            </CallToAction>
+                            <button onClick={() => setEditing(false)} className="text-red font-bold text-sm">
+                                Cancel
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            ) : (
+                <>
+                    <Question id={questionID} showActions={false} />
+                </>
+            )}
+        </li>
+    )
+}
+
 export function InProgress(
     props: IRoadmap & { className?: string; more?: boolean; stacked?: boolean; modalOpen?: boolean }
 ) {
@@ -36,6 +102,8 @@ export function InProgress(
     const [updates, setUpdates] = useState([])
     const [modalOpen, setModalOpen] = useState(false)
     const [authModalOpen, setAuthModalOpen] = useState(false)
+    const [addingUpdate, setAddingUpdate] = useState(false)
+    const isModerator = user?.role?.type === 'moderator'
 
     const [more, setMore] = useState(props.more ?? false)
     const [loading, setLoading] = useState(false)
@@ -212,7 +280,7 @@ export function InProgress(
         }
     }
 
-    useEffect(() => {
+    const fetchUpdates = async () => {
         const query = qs.stringify(
             {
                 sort: ['createdAt:desc'],
@@ -246,6 +314,10 @@ export function InProgress(
             .then(({ data: updates }) => {
                 setUpdates(updates)
             })
+    }
+
+    useEffect(() => {
+        fetchUpdates()
     }, [])
 
     useEffect(() => {
@@ -400,13 +472,16 @@ export function InProgress(
                                 ({
                                     attributes: {
                                         question: {
-                                            data: { id },
+                                            data: {
+                                                id,
+                                                attributes: { body },
+                                            },
                                         },
                                     },
                                 }) => {
                                     return (
                                         <li className="mb-4 last:mb-0" key={id}>
-                                            <Question showActions={false} id={id} />
+                                            <Update questionID={id} body={body} fetchUpdates={fetchUpdates} />
                                         </li>
                                     )
                                 }
@@ -417,6 +492,14 @@ export function InProgress(
                             No updates yet. Engineers are currently hard at work, so check back soon!
                         </p>
                     )}
+                    {isModerator &&
+                        (addingUpdate ? (
+                            <TeamUpdate roadmapID={squeakId} onSubmit={fetchUpdates} />
+                        ) : (
+                            <CallToAction size="md" onClick={() => setAddingUpdate(true)}>
+                                Add an update
+                            </CallToAction>
+                        ))}
                 </div>
             </li>
         </>

src/components/Roadmap/UpdateWrapper.tsx

@@ -31,12 +31,16 @@ export default function UpdateWrapper({
     status,
     formClassName = '',
     editButtonClassName = '',
+    onSubmit,
+    showSuccessMessage = false,
 }: {
     id: number
     children: JSX.Element
     status: Status
     formClassName?: string
     editButtonClassName?: string
+    onSubmit?: (roadmap: any) => void
+    showSuccessMessage?: boolean
 }) {
     const { user } = useUser()
     const [editing, setEditing] = useState(false)
@@ -54,7 +58,7 @@ export default function UpdateWrapper({
                     body: description,
                     images: [],
                     topic: topic?.data || undefined,
-                    team: teams?.data?.[0]?.id || undefined,
+                    team: teams?.data?.[0] || undefined,
                     featuredImage: image?.data ? { file: null, objectURL: image.data.attributes.url } : undefined,
                     betaAvailable,
                     milestone,
@@ -76,16 +80,19 @@ export default function UpdateWrapper({
                 initialValues={initialValues}
                 buttonText="Update"
                 id={id}
-                onSubmit={() => {
+                onSubmit={(roadmap) => {
                     fetchRoadmapItem()
                     setSuccess(true)
                     setEditing(false)
+                    onSubmit?.(roadmap)
                 }}
             />
         </div>
     ) : (
         <>
-            {success && <RoadmapSuccess description="Roadmap will update on next build" id={id} />}
+            {showSuccessMessage && success && (
+                <RoadmapSuccess description="Roadmap will update on next build" id={id} />
+            )}
             <div className="relative">
                 {initialValues && (
                     <button className={`font-bold text-red ${editButtonClassName}`} onClick={() => setEditing(true)}>