refactor(dashboard): tenant cookie -> dynamic route slug (#1139)

- Added `[tenantId]` dynamic route
- Moved file directories
- Updated broken imports
- New `LinkWithTenant` component to prepend `tenantId` to the passed `href` prop.
- Ensuring every `redirect` & `router.push` is accounted for with the new route to maintain functionality
- Removed use of cookie for holding tenant info

---------

Co-authored-by: Hazim Arafa <[email protected]>

dashboard/src/app/(authenticated)/(diagram)/components/Diagram.tsx → dashboard/src/app/[tenantId]/(diagram)/components/Diagram.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { ThreadRunWithNodeRuns } from '@/app/(authenticated)/(diagram)/wfRun/[...ids]/getWfRun'
+import { ThreadRunWithNodeRuns } from '@/app/[tenantId]/(diagram)/wfRun/[...ids]/getWfRun'
 import { NodeRun, WfRun, WfSpec } from 'littlehorse-client/proto'
 import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation'
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'

dashboard/src/app/(authenticated)/(diagram)/components/Layouter.tsx → dashboard/src/app/[tenantId]/(diagram)/components/Layouter.tsx

@@ -52,7 +52,7 @@ export const Layouter: FC<{ nodeRuns?: NodeRun[]; nodeRunNameToBeHighlighted?: s
       setNodes(layoutedNodes)
       fitView()
     },
-    [fitView, nodeRuns, setNodes]
+    [fitView, nodeRuns, setNodes, nodeRunNameToBeHighlighted]
   )
 
   useEffect(() => {

dashboard/src/app/(authenticated)/(diagram)/components/Modals/ExecuteWorkflowRun.tsx → dashboard/src/app/[tenantId]/(diagram)/components/Modals/ExecuteWorkflowRun.tsx

@@ -1,4 +1,3 @@
-import { FormValues, WfRunForm } from '@/app/(authenticated)/(diagram)/components/Forms/WfRunForm'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
@@ -9,18 +8,19 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import { ThreadVarDef, VariableType, WfSpec } from 'littlehorse-client/proto'
-import { useRouter } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import { FC, useRef } from 'react'
 import { toast } from 'sonner'
 import { Modal } from '../../context'
 import { useModal } from '../../hooks/useModal'
 import { runWfSpec } from '../../wfSpec/[...props]/actions/runWfSpec'
+import { FormValues, WfRunForm } from '../Forms/WfRunForm'
+
 export const ExecuteWorkflowRun: FC<Modal> = ({ data }) => {
   const { showModal, setShowModal } = useModal()
   const lhWorkflowSpec = data as WfSpec
-  const { tenantId } = useWhoAmI()
+  const tenantId = useParams().tenantId as string
   const router = useRouter()
   const formRef = useRef<HTMLFormElement | null>(null)
   const wfSpecVariables = lhWorkflowSpec.threadSpecs?.entrypoint?.variableDefs
@@ -62,7 +62,6 @@ export const ExecuteWorkflowRun: FC<Modal> = ({ data }) => {
         wfSpecName: lhWorkflowSpec.id.name,
         majorVersion: lhWorkflowSpec.id.majorVersion,
         revision: lhWorkflowSpec.id.revision,
-
         id: customWfRunId || undefined,
         variables: formatVariablesPayload(values),
       })

dashboard/src/app/(authenticated)/(diagram)/components/Modals/NodeRun/AccordionContent.ts → dashboard/src/app/[tenantId]/(diagram)/components/Modals/NodeRun/AccordionContent.ts

@@ -1,4 +1,5 @@
 import { NodeRun, UserTaskNode } from 'littlehorse-client/proto'
+import { FC } from 'react'
 import { NodeType } from '../../NodeTypes/extractNodes'
 import {
   ExternalEventDefDetail,
@@ -9,7 +10,6 @@ import {
   WaitForThreadDefDetail,
   WorkflowEventDefDetail,
 } from './'
-import { FC } from 'react'
 
 export type AccordionNode = { nodeRun: NodeRun; userTaskNode?: UserTaskNode }
 type AccordionNodes = {

dashboard/src/app/(authenticated)/(diagram)/components/Modals/NodeRun/AccordionItem.tsx → dashboard/src/app/[tenantId]/(diagram)/components/Modals/NodeRun/AccordionItem.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react'
-import { AccordionComponents } from './AccordionContent'
-import { NodeRun, UserTaskNode } from 'littlehorse-client/proto'
 import * as AccordionRedux from '@radix-ui/react-accordion'
+import { NodeRun, UserTaskNode } from 'littlehorse-client/proto'
 import { ChevronDownIcon } from 'lucide-react'
+import { FC } from 'react'
 import { statusColors } from '../../../wfRun/[...ids]/components/Details'
 import { getNodeType } from '../../NodeTypes/extractNodes'
+import { AccordionComponents } from './AccordionContent'
 
 export const AccordionItem: FC<{ node: NodeRun; userTaskNode?: UserTaskNode }> = ({ node, userTaskNode }) => {
   const nodeType = getNodeType(node)

dashboard/src/app/(authenticated)/(diagram)/components/Modals/NodeRun/UserTaskDefDetail.tsx → dashboard/src/app/[tenantId]/(diagram)/components/Modals/NodeRun/UserTaskDefDetail.tsx

@@ -1,10 +1,10 @@
-import { FC } from 'react'
-import { RefreshCwIcon, ClipboardIcon } from 'lucide-react'
+import { getVariable, getVariableValue, utcToLocalDateTime } from '@/app/utils'
 import { useQuery } from '@tanstack/react-query'
-import { UserTaskRunStatus, UserTaskRun as LHUserTaskRun } from 'littlehorse-client/proto'
+import { UserTaskRun as LHUserTaskRun, UserTaskRunStatus } from 'littlehorse-client/proto'
+import { ClipboardIcon, RefreshCwIcon } from 'lucide-react'
+import { FC } from 'react'
+import { getUserTaskRun } from '../../NodeTypes/UserTask/getUserTaskRun'
 import { AccordionNode } from './AccordionContent'
-import { getVariableValue, getVariable, utcToLocalDateTime } from '@/app/utils'
-import { getUserTaskRun } from '@/app/(authenticated)/(diagram)/components/NodeTypes/UserTask/getUserTaskRun'
 
 export const UserTaskDefDetail: FC<AccordionNode> = ({ nodeRun, userTaskNode }) => {
   const taskId = nodeRun?.userTask?.userTaskRunId?.userTaskGuid

dashboard/src/app/(authenticated)/(diagram)/components/Modals/NodeRun/WorkflowEventDefDetail.tsx → dashboard/src/app/[tenantId]/(diagram)/components/Modals/NodeRun/WorkflowEventDefDetail.tsx

@@ -1,19 +1,18 @@
-import { FC } from 'react'
-import { useWhoAmI } from '@/contexts/WhoAmIContext'
-import { RefreshCwIcon, ClipboardIcon } from 'lucide-react'
-import { NodeRun } from 'littlehorse-client/proto'
-import { useQuery } from '@tanstack/react-query'
-
-import { cn } from '@/components/utils'
 import { getVariableValue, utcToLocalDateTime } from '@/app/utils'
-import { getWorkflowEvent } from '@/app/(authenticated)/(diagram)/components/NodeTypes/ThrowEvent/getWorkflowEvent'
+import { cn } from '@/components/utils'
+import { useQuery } from '@tanstack/react-query'
+import { NodeRun } from 'littlehorse-client/proto'
+import { ClipboardIcon, RefreshCwIcon } from 'lucide-react'
+import { useParams } from 'next/navigation'
+import { FC } from 'react'
+import { getWorkflowEvent } from '../../NodeTypes/ThrowEvent/getWorkflowEvent'
 
 export const WorkflowEventDefDetail: FC<{ nodeRun: NodeRun }> = ({ nodeRun }) => {
-  const { tenantId } = useWhoAmI()
+  const tenantId = useParams().tenantId as string
   const wfRunId = nodeRun?.throwEvent?.workflowEventId?.wfRunId?.id
   const workflowEventDefId = nodeRun?.throwEvent?.workflowEventId
   const { data, isLoading } = useQuery({
-    queryKey: ['taskRun', wfRunId, workflowEventDefId],
+    queryKey: ['taskRun', wfRunId, workflowEventDefId, tenantId],
     queryFn: async () => {
       if (!wfRunId) return
       if (!workflowEventDefId) return

dashboard/src/app/(authenticated)/(diagram)/components/NodeRunsList.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeRunsList.tsx

@@ -1,7 +1,7 @@
 import { NodeRun, TaskNode, UserTaskNode } from 'littlehorse-client/proto'
-import { FC, useCallback } from 'react'
 import { EyeIcon } from 'lucide-react'
-import { useModal } from '@/app/(authenticated)/(diagram)/hooks/useModal'
+import { FC, useCallback } from 'react'
+import { useModal } from '../hooks/useModal'
 
 type Prop = {
   nodeRuns: [NodeRun]
@@ -14,7 +14,7 @@ export const NodeRunsList: FC<Prop> = ({ nodeRuns, taskNode, userTaskNode, nodeR
   const showNodeRuns = useCallback(() => {
     setModal({ type: 'nodeRunList', data: { nodeRunsList: nodeRuns, taskNode, nodeRun, userTaskNode } })
     setShowModal(true)
-  }, [nodeRuns, setModal, setShowModal, taskNode])
+  }, [nodeRun, nodeRuns, setModal, setShowModal, taskNode, userTaskNode])
 
   if (!nodeRuns?.length) return
 

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/ExternalEvent/ExternalEvent.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/ExternalEvent/ExternalEvent.tsx

@@ -1,7 +1,6 @@
 import { formatTime, getVariableValue } from '@/app/utils'
 import { Node as NodeProto } from 'littlehorse-client/proto'
 import { ExternalLinkIcon, MailOpenIcon } from 'lucide-react'
-import Link from 'next/link'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
 import { NodeProps } from '..'
@@ -10,6 +9,7 @@ import { Fade } from '../Fade'
 import { NodeDetails } from '../NodeDetails'
 
 import { NodeRunsList } from '../../NodeRunsList'
+import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
 
 const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
   if (!data.externalEvent) return null
@@ -22,13 +22,13 @@ const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
           <div>
             <div className="flex items-center gap-1 text-nowrap">
               <h3 className="font-bold">ExternalEventDef</h3>
-              <Link
+              <LinkWithTenant
                 className="flex items-center justify-center gap-1 text-blue-500 hover:underline"
                 target="_blank"
                 href={`/externalEventDef/${externalEventNode.externalEventDefId?.name}`}
               >
                 {externalEventNode.externalEventDefId?.name} <ExternalLinkIcon className="h-4 w-4" />
-              </Link>
+              </LinkWithTenant>
             </div>
             {
               <div className="flex gap-2 text-nowrap">

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Sleep/SleepDetails.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/Sleep/SleepDetails.tsx

@@ -1,8 +1,8 @@
+import { formatTime, getVariable } from '@/app/utils'
 import { NodeRun, SleepNode } from 'littlehorse-client/proto'
 import { FC } from 'react'
-import { NodeDetails } from '../NodeDetails'
-import { getVariable, formatTime } from '@/app/utils'
 import { NodeRunsList } from '../../NodeRunsList'
+import { NodeDetails } from '../NodeDetails'
 export const SleepDetails: FC<{ sleepNode?: SleepNode; nodeRunsList: [NodeRun] }> = ({ sleepNode, nodeRunsList }) => {
   if (!sleepNode) return
 

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/StartThread.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/StartThread.tsx

@@ -4,9 +4,10 @@ import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
 import { NodeProps } from '.'
 import { useThread } from '../../hooks/useThread'
+import { NodeRunsList } from '../NodeRunsList'
 import { Fade } from './Fade'
 import { NodeDetails } from './NodeDetails'
-import { NodeRunsList } from '@/app/(authenticated)/(diagram)/components/NodeRunsList'
+
 const Node: FC<NodeProps> = ({ data }) => {
   const { fade, nodeRunsList } = data
   const { setThread } = useThread()

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/Task/TaskDetails.tsx

@@ -1,10 +1,10 @@
-import { getTaskDef } from '@/app/(authenticated)/taskDef/[name]/getTaskDef'
+import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
+import { getTaskDef } from '@/app/[tenantId]/taskDef/[name]/getTaskDef'
 import { getVariable, getVariableValue } from '@/app/utils'
-import { useWhoAmI } from '@/contexts/WhoAmIContext'
 import { useQuery } from '@tanstack/react-query'
 import { NodeRun, TaskNode } from 'littlehorse-client/proto'
 import { ExternalLinkIcon } from 'lucide-react'
-import Link from 'next/link'
+import { useParams } from 'next/navigation'
 import { FC } from 'react'
 import { NodeRunsList } from '../../NodeRunsList'
 import { NodeDetails } from '../NodeDetails'
@@ -16,7 +16,7 @@ export const TaskDetails: FC<{
   selected: boolean
   nodeRunsList: [NodeRun]
 }> = ({ taskNode, nodeRun, selected, nodeRunsList }) => {
-  const { tenantId } = useWhoAmI()
+  const tenantId = useParams().tenantId as string
   const { data } = useQuery({
     queryKey: ['taskRun', nodeRun, tenantId],
     queryFn: async () => {
@@ -31,7 +31,7 @@ export const TaskDetails: FC<{
       if (!taskNode?.taskDefId?.name) return null
       if (nodeRun?.task?.taskRunId) return null
       if (!selected) return null
-      const taskDef = await getTaskDef({
+      const taskDef = await getTaskDef(tenantId, {
         name: taskNode?.taskDefId?.name,
       })
       return taskDef
@@ -95,12 +95,12 @@ export const TaskDetails: FC<{
 
 export const TaskLink: FC<{ taskName?: string }> = ({ taskName }) => {
   return (
-    <Link
+    <LinkWithTenant
       className="flex items-center justify-center gap-1 text-blue-500 hover:underline"
       target="_blank"
       href={`/taskDef/${taskName}`}
     >
       {taskName} <ExternalLinkIcon className="h-4 w-4" />
-    </Link>
+    </LinkWithTenant>
   )
 }

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/ThrowEvent/ThrowEvent.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/ThrowEvent/ThrowEvent.tsx

@@ -1,10 +1,10 @@
 import { Node as NodeProto } from 'littlehorse-client/proto'
 import { CircleArrowOutUpRightIcon, ExternalLinkIcon } from 'lucide-react'
-import Link from 'next/link'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
 import { NodeProps } from '..'
 
+import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
 import { Fade } from '../Fade'
 import { NodeDetails } from '../NodeDetails'
 
@@ -21,13 +21,13 @@ const Node: FC<NodeProps<NodeProto>> = ({ data }) => {
           <div>
             <div className="flex items-center gap-1 text-nowrap">
               <h3 className="font-bold">WorkflowEventDef</h3>
-              <Link
+              <LinkWithTenant
                 className="flex items-center justify-center gap-1 text-blue-500 hover:underline"
                 target="_blank"
                 href={`/workflowEventDef/${throwEventNode.eventDefId?.name}`}
               >
                 {throwEventNode.eventDefId?.name} <ExternalLinkIcon className="h-4 w-4" />
-              </Link>
+              </LinkWithTenant>
             </div>
           </div>
 

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/UserTask/UserTask.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTask.tsx

@@ -1,12 +1,12 @@
-import { UserTaskDefDetails } from '@/app/(authenticated)/(diagram)/components/NodeTypes/UserTask/UserTaskDefDetails'
+import { UserTaskDefDetails } from '@/app/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTaskDefDetails'
+import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
 import { ExternalLinkIcon, UserIcon } from 'lucide-react'
-import Link from 'next/link'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
+import { NodeRunsList } from '../../NodeRunsList'
 import { Fade } from '../Fade'
 import { NodeProps } from '../index'
 import { NodeDetails } from '../NodeDetails'
-import { NodeRunsList } from '../../NodeRunsList'
 
 const Node: FC<NodeProps> = ({ data, selected }) => {
   if (!data.userTask) return null
@@ -18,13 +18,13 @@ const Node: FC<NodeProps> = ({ data, selected }) => {
         <div className="">
           <div className="flex items-center gap-1 text-nowrap">
             <h3 className="font-bold">UserTask</h3>
-            <Link
+            <LinkWithTenant
               className="flex items-center justify-center gap-1 text-blue-500 hover:underline"
               target="_blank"
               href={`/userTaskDef/${userTask.userTaskDefName}`}
             >
               {userTask.userTaskDefName} <ExternalLinkIcon className="h-4 w-4" />
-            </Link>
+            </LinkWithTenant>
           </div>
           {nodeRun ? (
             <NodeRunsList nodeRuns={nodeRunsList} userTaskNode={userTask} nodeRun={nodeRun} />

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/UserTask/UserTaskDefDetails.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserTaskDefDetails.tsx

@@ -1,4 +1,4 @@
-import { UserAndGroupAssignmentInfo } from '@/app/(authenticated)/(diagram)/components/NodeTypes/UserTask/UserAndGroupAssignmentInfo'
+import { UserAndGroupAssignmentInfo } from '@/app/[tenantId]/(diagram)/components/NodeTypes/UserTask/UserAndGroupAssignmentInfo'
 import { getVariable } from '@/app/utils'
 import { UserTaskNode } from 'littlehorse-client/proto'
 import { FC } from 'react'

dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/WaitForThreads.tsx → dashboard/src/app/[tenantId]/(diagram)/components/NodeTypes/WaitForThreads.tsx

@@ -3,9 +3,9 @@ import { PlusIcon } from 'lucide-react'
 import { FC, memo } from 'react'
 import { Handle, Position } from 'reactflow'
 import { NodeProps } from '.'
+import { NodeRunsList } from '../NodeRunsList'
 import { Fade } from './Fade'
 import { NodeDetails } from './NodeDetails'
-import { NodeRunsList } from '@/app/(authenticated)/(diagram)/components/NodeRunsList'
 
 const Node: FC<NodeProps> = ({ data }) => {
   const { fade, nodeRunsList } = data

dashboard/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/Details.tsx → dashboard/src/app/[tenantId]/(diagram)/wfRun/[...ids]/components/Details.tsx

@@ -1,7 +1,7 @@
 'use client'
+import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
 import { concatWfRunIds, formatDate } from '@/app/utils'
 import { WfRun } from 'littlehorse-client/proto'
-import Link from 'next/link'
 import { FC } from 'react'
 
 type DetailsProps = WfRun
@@ -25,20 +25,18 @@ export const Details: FC<DetailsProps> = ({ id, status, wfSpecId, startTime }) =
       {id?.parentWfRunId && (
         <div className="flex items-center gap-2">
           Parent WfRun:
-          <Link href={`/wfRun/${concatWfRunIds(id?.parentWfRunId)}`} className="text-blue-500 underline">
-            {id?.parentWfRunId?.id}
-          </Link>
+          <LinkWithTenant href={`/wfRun/${concatWfRunIds(id?.parentWfRunId)}`}>{id?.parentWfRunId?.id}</LinkWithTenant>
         </div>
       )}
       <div className="flex flex-row gap-2 text-sm text-gray-500">
         <div className="flex items-center gap-2">
           WfSpec:
-          <Link
+          <LinkWithTenant
             href={`/wfSpec/${wfSpecId?.name}/${wfSpecId?.majorVersion}/${wfSpecId?.revision}`}
             className="flex items-center gap-2 text-blue-500 underline"
           >
             {`${wfSpecId?.name} ${wfSpecId?.majorVersion}.${wfSpecId?.revision}`}
-          </Link>
+          </LinkWithTenant>
         </div>
         <div className="flex items-center">
           Status: <span className={`ml-2 rounded px-2 ${statusColors[status]}`}>{`${status}`}</span>

dashboard/src/app/(authenticated)/(diagram)/wfRun/[...ids]/components/WfRun.tsx → dashboard/src/app/[tenantId]/(diagram)/wfRun/[...ids]/components/WfRun.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { Diagram } from '@/app/(authenticated)/(diagram)/components/Diagram'
-import { Navigation } from '@/app/(authenticated)/components/Navigation'
+import { Diagram } from '@/app/[tenantId]/(diagram)/components/Diagram'
+import { Navigation } from '@/app/[tenantId]/components/Navigation'
 import { useSearchParams } from 'next/navigation'
 import { FC } from 'react'
 import { Modals } from '../../../components/Modals'