OAuth integration

.eslintrc.json

@@ -1,3 +1,11 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(useSignaledEffect)"
+      }
+    ]
+  }
 }

app/actions/ModActionPanel/QuickAction.tsx

@@ -1,5 +1,5 @@
 // TODO: This is badly named so that we can rebuild this component without breaking the old one
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   ComAtprotoModerationDefs,
   ToolsOzoneModerationDefs,
@@ -10,9 +10,7 @@
 import { ButtonPrimary, ButtonSecondary } from '@/common/buttons'
 import { Checkbox, FormLabel, Input, Textarea } from '@/common/forms'
 import { PropsOf } from '@/lib/types'
-import client from '@/lib/client'
 import { BlobList } from './BlobList'
-import { queryClient } from 'components/QueryClient'
 import {
   LabelChip,
   LabelList,
@@ -38,8 +36,8 @@
 import { MOD_EVENTS } from '@/mod-event/constants'
 import { ModEventList } from '@/mod-event/EventList'
 import { ModEventSelectorButton } from '@/mod-event/SelectorButton'
-import { createSubjectFromId } from '@/reports/helpers/subject'
 import { SubjectReviewStateBadge } from '@/subject/ReviewStateMarker'
+import { useCreateSubjectFromId } from '@/reports/helpers/subject'
 import { getProfileUriForDid } from '@/reports/helpers/subject'
 import { Dialog } from '@headlessui/react'
 import { SubjectSwitchButton } from '@/common/SubjectSwitchButton'
@@ -50,7 +48,7 @@
 import { MessageActorMeta } from '@/dms/MessageActorMeta'
 import { ModEventDetailsPopover } from '@/mod-event/DetailsPopover'
 import { LockClosedIcon } from '@heroicons/react/24/solid'
-import { checkPermission } from '@/lib/server-config'
+import { useLabelerAgent, usePermission } from '@/shell/ConfigurationContext'
 
 const FORM_ID = 'mod-action-panel'
 const useBreakpoint = createBreakpoint({ xs: 340, sm: 640 })
@@ -144,7 +142,10 @@
 const getDeactivatedAt = ({
   repo,
   record,
-}: Awaited<ReturnType<typeof getSubject>>) => {
+}: {
+  repo?: ToolsOzoneModerationDefs.RepoViewDetail
+  record?: ToolsOzoneModerationDefs.RecordViewDetail
+}) => {
   const deactivatedAt = repo?.deactivatedAt || record?.repo?.deactivatedAt
 
   if (!deactivatedAt) {
@@ -160,6 +161,10 @@
     replaceFormWithEvents: boolean
   } & Pick<Props, 'setSubject' | 'subject' | 'subjectOptions' | 'onSubmit'>,
 ) {
+  const queryClient = useQueryClient()
+  const labelerAgent = useLabelerAgent()
+  const accountDid = labelerAgent.assertDid
+
   const {
     subject,
     setSubject,
@@ -173,16 +178,13 @@
     isSubmitting: boolean
     error: string
   }>({ isSubmitting: false, error: '' })
-  const { data: subjectStatus, refetch: refetchSubjectStatus } = useQuery({
-    // subject of the report
-    queryKey: ['modSubjectStatus', { subject }],
-    queryFn: () => getSubjectStatus(subject),
-  })
-  const { data: { record, repo } = {}, refetch: refetchSubject } = useQuery({
-    // subject of the report
-    queryKey: ['modActionSubject', { subject }],
-    queryFn: () => getSubject(subject),
-  })
+
+  const { data: subjectStatus, refetch: refetchSubjectStatus } =
+    useSubjectStatusQuery(subject)
+
+  const { data: { record, repo } = {}, refetch: refetchSubject } =
+    useSubjectQuery(subject)
+
   const isSubjectDid = subject.startsWith('did:')
   const isReviewClosed =
     subjectStatus?.reviewState === ToolsOzoneModerationDefs.REVIEWCLOSED
@@ -207,7 +209,7 @@
   const deactivatedAt = getDeactivatedAt(
     repo ? { repo } : record ? { record } : {},
   )
-  const canManageChat = checkPermission('canManageChat')
+  const canManageChat = usePermission('canManageChat')
 
   // navigate to next or prev report
   const navigateQueue = (delta: 1 | -1) => {
@@ -253,6 +255,9 @@
       window.removeEventListener('keydown', downHandler)
     }
   }, [])
+
+  const createSubjectFromId = useCreateSubjectFromId()
+
   // on form submit
   const onFormSubmit = async (
     ev: FormEvent<HTMLFormElement> & { target: HTMLFormElement },
@@ -380,7 +385,7 @@
           labelSubmissions.push(
             onSubmit({
               subject: { ...subjectInfo, cid: labelCid },
-              createdBy: client.session.did,
+              createdBy: accountDid,
               subjectBlobCids: formData
                 .getAll('subjectBlobCids')
                 .map((cid) => String(cid)),
@@ -402,7 +407,7 @@
           labelSubmissions.push(
             onSubmit({
               subject: subjectInfo,
-              createdBy: client.session.did,
+              createdBy: accountDid,
               subjectBlobCids: formData
                 .getAll('subjectBlobCids')
                 .map((cid) => String(cid)),
@@ -415,7 +420,7 @@
       } else {
         await onSubmit({
           subject: subjectInfo,
-          createdBy: client.session.did,
+          createdBy: accountDid,
           subjectBlobCids,
           event: coreEvent,
         })
@@ -424,7 +429,7 @@
       if (formData.get('additionalAcknowledgeEvent')) {
         await onSubmit({
           subject: subjectInfo,
-          createdBy: client.session.did,
+          createdBy: accountDid,
           subjectBlobCids: formData
             .getAll('subjectBlobCids')
             .map((cid) => String(cid)),
@@ -680,7 +685,7 @@
                       name="labels"
                       formId={FORM_ID}
                       defaultLabels={currentLabels.filter((label) => {
                         const serviceDid = client.getServiceDid()?.split('#')[0]
                         const isExternalLabel = allLabels.some((l) => {
                           return l.val === label && l.src !== serviceDid
                         })
@@ -830,41 +835,48 @@
   )
 }
 
-async function getSubject(subject: string) {
-  if (subject.startsWith('did:')) {
-    const { data: repo } = await client.api.tools.ozone.moderation.getRepo(
-      {
-        did: subject,
-      },
-      { headers: client.proxyHeaders() },
-    )
-    return { repo }
-  } else if (subject.startsWith('at://')) {
-    const { data: record } = await client.api.tools.ozone.moderation.getRecord(
-      {
-        uri: subject,
-      },
-      { headers: client.proxyHeaders() },
-    )
-
-    return { record }
-  } else {
-    return {}
-  }
+function useSubjectQuery(subject: string) {
+  const labelerAgent = useLabelerAgent()
+
+  return useQuery({
+    // subject of the report
+    queryKey: ['modActionSubject', { subject }],
+    queryFn: async () => {
+      if (subject.startsWith('did:')) {
+        const { data: repo } =
+          await labelerAgent.api.tools.ozone.moderation.getRepo({
+            did: subject,
+          })
+        return { repo }
+      } else if (subject.startsWith('at://')) {
+        const { data: record } =
+          await labelerAgent.api.tools.ozone.moderation.getRecord({
+            uri: subject,
+          })
+        return { record }
+      } else {
+        return {}
+      }
+    },
+  })
 }
 
-async function getSubjectStatus(subject: string) {
-  const {
-    data: { subjectStatuses },
-  } = await client.api.tools.ozone.moderation.queryStatuses(
-    {
-      subject,
-      includeMuted: true,
-      limit: 1,
+function useSubjectStatusQuery(subject: string) {
+  const labelerAgent = useLabelerAgent()
+  return useQuery({
+    // subject of the report
+    queryKey: ['modSubjectStatus', { subject }],
+    queryFn: async () => {
+      const {
+        data: { subjectStatuses },
+      } = await labelerAgent.api.tools.ozone.moderation.queryStatuses({
+        subject,
+        includeMuted: true,
+        limit: 1,
+      })
+      return subjectStatuses.at(0) || null
     },
-    { headers: client.proxyHeaders() },
-  )
-  return subjectStatuses.at(0) || null
+  })
 }
 
 function isMultiPress(ev: KeyboardEvent) {

app/actions/[id]/page.tsx

@@ -1,21 +1,19 @@
 'use client'
 import { useQuery } from '@tanstack/react-query'
-import client from '@/lib/client'
 import { Loading, LoadingFailed } from '@/common/Loader'
 import { EventView } from '@/mod-event/View'
+import { useLabelerAgent } from '@/shell/ConfigurationContext'
 
 export default function Action({ params }: { params: { id: string } }) {
+  const labelerAgent = useLabelerAgent()
   const id = decodeURIComponent(params.id)
 
   const { data: action, error } = useQuery({
     queryKey: ['action', { id }],
     queryFn: async () => {
-      const { data } = await client.api.tools.ozone.moderation.getEvent(
-        {
-          id: parseInt(id, 10),
-        },
-        { headers: client.proxyHeaders() },
-      )
+      const { data } = await labelerAgent.api.tools.ozone.moderation.getEvent({
+        id: parseInt(id, 10),
+      })
       return data
     },
   })

app/communication-template/page.tsx

@@ -11,9 +11,8 @@ import { Loading, LoadingFailed } from '@/common/Loader'
 import { useCommunicationTemplateList } from 'components/communication-template/hooks'
 import { CommunicationTemplateDeleteConfirmationModal } from 'components/communication-template/delete-confirmation-modal'
 import { ActionButton, LinkButton } from '@/common/buttons'
-import client from '@/lib/client'
 import { ErrorInfo } from '@/common/ErrorInfo'
-import { checkPermission } from '@/lib/server-config'
+import { usePermission } from '@/shell/ConfigurationContext'
 
 export default function CommunicationTemplatePage() {
   const { data, error, isLoading } = useCommunicationTemplateList({})
@@ -25,7 +24,9 @@ export default function CommunicationTemplatePage() {
     : []
   useTitle(`Communication Templates`)
 
-  if (!checkPermission('canManageTemplates')) {
+  const canManageTemplates = usePermission('canManageTemplates')
+
+  if (!canManageTemplates) {
     return (
       <ErrorInfo type="warn">
         Sorry, you don{"'"}t have permission to manage communication templates.

app/configure/page-content.tsx

@@ -1,14 +1,13 @@
 import { useEffect } from 'react'
 import { useTitle } from 'react-use'
-import client from '@/lib/client'
-import { useSession } from '@/lib/useSession'
 import { Tabs, TabView } from '@/common/Tabs'
 import { LabelerConfig } from 'components/config/Labeler'
 import { MemberConfig } from 'components/config/Member'
 import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
 import { ToolsOzoneModerationEmitEvent } from '@atproto/api'
-import { emitEvent } from '@/mod-event/helpers/emitEvent'
+import { useEmitEvent } from '@/mod-event/helpers/emitEvent'
 import { usePathname, useSearchParams, useRouter } from 'next/navigation'
+import { useConfigurationContext } from '@/shell/ConfigurationContext'
 import { WorkspacePanel } from '@/workspace/Panel'
 import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
 
@@ -24,11 +23,12 @@ const TabKeys = {
 
 export default function ConfigurePageContent() {
   useTitle('Configure')
-  const session = useSession()
-  useEffect(() => {
-    client.reconfigure() // Ensure config is up to date
-  }, [])
-  const isServiceAccount = !!session && session?.did === session?.config.did
+
+  const { reconfigure } = useConfigurationContext()
+  useEffect(() => void reconfigure(), [reconfigure]) // Ensure config is up to date
+
+  const emitEvent = useEmitEvent()
+
   const searchParams = useSearchParams()
   const router = useRouter()
   const pathname = usePathname()
@@ -54,7 +54,6 @@ export default function ConfigurePageContent() {
     router.push((pathname ?? '') + '?' + newParams.toString())
   }
 
-  if (!session) return null
   const views: TabView<Views>[] = [
     {
       view: Views.Configure,
@@ -74,9 +73,7 @@ export default function ConfigurePageContent() {
         views={views}
         fullWidth
       />
-      {currentView === Views.Configure && (
-        <LabelerConfig session={session} isServiceAccount={isServiceAccount} />
-      )}
+      {currentView === Views.Configure && <LabelerConfig />}
       {currentView === Views.Members && <MemberConfig />}
 
       <ModActionPanelQuick

app/events/[id]/page.tsx

@@ -1,22 +1,21 @@
 'use client'
 import { useQuery } from '@tanstack/react-query'
 import { useTitle } from 'react-use'
-import client from '@/lib/client'
+
 import { Loading, LoadingFailed } from '@/common/Loader'
 import { EventView } from '@/mod-event/View'
 import { MOD_EVENT_TITLES } from '@/mod-event/constants'
+import { useLabelerAgent } from '@/shell/ConfigurationContext'
 
 export default function EventViewPage({ params }: { params: { id: string } }) {
   const id = decodeURIComponent(params.id)
+  const labelerAgent = useLabelerAgent()
   const { data: event, error } = useQuery({
     queryKey: ['event', { id }],
     queryFn: async () => {
-      const { data } = await client.api.tools.ozone.moderation.getEvent(
-        {
-          id: parseInt(id, 10),
-        },
-        { headers: client.proxyHeaders() },
-      )
+      const { data } = await labelerAgent.api.tools.ozone.moderation.getEvent({
+        id: parseInt(id, 10),
+      })
       return data
     },
   })

app/events/page-content.tsx

@@ -1,13 +1,14 @@
 import { useTitle } from 'react-use'
 import { ModEventList } from '@/mod-event/EventList'
-import { emitEvent } from '@/mod-event/helpers/emitEvent'
+import { useEmitEvent } from '@/mod-event/helpers/emitEvent'
 import { ToolsOzoneModerationEmitEvent } from '@atproto/api'
 import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { WorkspacePanel } from '@/workspace/Panel'
 import { useWorkspaceOpener } from '@/common/useWorkspaceOpener'
 
 export default function EventListPageContent() {
+  const emitEvent = useEmitEvent()
   const searchParams = useSearchParams()
   const router = useRouter()
   const pathname = usePathname()