feat(studio): add dedicated workflow logs run page

apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx

@@ -1,141 +0,0 @@
-import { useState } from 'react'
-
-import AlertError from 'components/ui/AlertError'
-import { useWorkflowRunLogsQuery } from 'data/workflow-runs/workflow-run-logs-query'
-import { useWorkflowRunsQuery } from 'data/workflow-runs/workflow-runs-query'
-import dayjs from 'dayjs'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
-import {
-  Button,
-  cn,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogSection,
-  DialogSectionSeparator,
-  DialogTitle,
-  DialogTrigger,
-} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
-import BranchStatusBadge from './BranchStatusBadge'
-
-interface WorkflowLogsProps {
-  projectRef: string
-}
-
-const WorkflowLogs = ({ projectRef }: WorkflowLogsProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const {
-    data: workflowRuns,
-    isSuccess: isWorkflowRunsSuccess,
-    isLoading: isWorkflowRunsLoading,
-    isError: isWorkflowRunsError,
-    error: workflowRunsError,
-  } = useWorkflowRunsQuery(
-    {
-      projectRef,
-    },
-    {
-      enabled: isOpen,
-    }
-  )
-
-  const [selectedWorkflowRunId, setSelectedWorkflowRunId] = useState<string | undefined>(undefined)
-
-  const {
-    data: workflowRunLogs,
-    isSuccess: isWorkflowRunLogsSuccess,
-    isLoading: isWorkflowRunLogsLoading,
-    isError: isWorkflowRunLogsError,
-    error: workflowRunLogsError,
-  } = useWorkflowRunLogsQuery(
-    {
-      workflowRunId: selectedWorkflowRunId,
-    },
-    {
-      enabled: isOpen && selectedWorkflowRunId !== undefined,
-    }
-  )
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button type="default">View Logs</Button>
-      </DialogTrigger>
-
-      <DialogContent size="xlarge">
-        <DialogHeader>
-          <DialogTitle>Workflow Logs</DialogTitle>
-
-          <DialogDescription>Select a workflow run to view logs</DialogDescription>
-        </DialogHeader>
-
-        <DialogSectionSeparator />
-
-        <DialogSection className={cn('px-0', isWorkflowRunLogsSuccess ? 'py-0 pt-2' : '!py-0')}>
-          {selectedWorkflowRunId === undefined ? (
-            <>
-              {isWorkflowRunsLoading && <GenericSkeletonLoader className="py-2 px-5" />}
-              {isWorkflowRunsError && <AlertError error={workflowRunsError} />}
-              {isWorkflowRunsSuccess &&
-                (workflowRuns.length > 0 ? (
-                  <ul className="divide-y">
-                    {workflowRuns.map((workflowRun) => (
-                      <li key={workflowRun.id} className="py-3 px-5">
-                        <button
-                          type="button"
-                          onClick={() => setSelectedWorkflowRunId(workflowRun.id)}
-                          className="flex items-center gap-2 w-full justify-between"
-                        >
-                          <div className="flex items-center gap-4">
-                            <BranchStatusBadge status={workflowRun.status} />
-                            <span className="text-sm">
-                              {dayjs(workflowRun.created_at).format('DD MMM, YYYY HH:mm')}
-                            </span>
-                          </div>
-                          <ArrowRight size={16} />
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                ) : (
-                  <p className="text-center text-sm text-foreground-light py-4">
-                    No workflow runs found.
-                  </p>
-                ))}
-            </>
-          ) : (
-            <div className="flex flex-col gap-2 py-2">
-              <Button
-                onClick={() => setSelectedWorkflowRunId(undefined)}
-                type="text"
-                icon={<ArrowLeft />}
-                className="self-start mx-5"
-              >
-                Back to workflow runs
-              </Button>
-
-              {isWorkflowRunLogsLoading && <GenericSkeletonLoader className="py-2 px-5" />}
-              {isWorkflowRunLogsError && (
-                <AlertError
-                  className="rounded-none"
-                  subject="Failed to retrieve workflow logs"
-                  error={workflowRunLogsError}
-                />
-              )}
-              {isWorkflowRunLogsSuccess && (
-                <pre className="whitespace-pre max-h-[500px] overflow-scroll px-5 pb-5">
-                  {workflowRunLogs}
-                </pre>
-              )}
-            </div>
-          )}
-        </DialogSection>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default WorkflowLogs

apps/studio/components/interfaces/BranchManagement/WorkflowLogs/WorkflowLogsContent.tsx

@@ -0,0 +1,103 @@
+import AlertError from "components/ui/AlertError"
+import { Button, cn } from "ui"
+import { GenericSkeletonLoader } from "ui-patterns"
+import BranchStatusBadge from "../BranchStatusBadge"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import dayjs from "dayjs"
+import { UseWorkflowLogsType } from "./useWorkflowLogs"
+
+interface WorkflowLogsContentProps {
+    workflowRuns: UseWorkflowLogsType['workflowRuns']
+    isWorkflowRunsSuccess: boolean
+    isWorkflowRunsLoading: boolean
+    isWorkflowRunsError: boolean
+    workflowRunsError: UseWorkflowLogsType['workflowRunsError']
+    workflowRunLogs: string | undefined
+    isWorkflowRunLogsSuccess: boolean
+    isWorkflowRunLogsLoading: boolean
+    isWorkflowRunLogsError: boolean
+    workflowRunLogsError: UseWorkflowLogsType['workflowRunLogsError']
+    selectedWorkflowRunId: string | undefined
+    onSelectWorkflowRun: (id: string | undefined) => void
+    onBack: () => void
+    maxHeight?: boolean
+  }
+  
+  export const WorkflowLogsContent = ({
+    workflowRuns = [],
+    isWorkflowRunsSuccess,
+    isWorkflowRunsLoading,
+    isWorkflowRunsError,
+    workflowRunsError,
+    workflowRunLogs = '',
+    isWorkflowRunLogsSuccess,
+    isWorkflowRunLogsLoading,
+    isWorkflowRunLogsError,
+    workflowRunLogsError,
+    selectedWorkflowRunId,
+    onSelectWorkflowRun,
+    onBack,
+    maxHeight
+  }: WorkflowLogsContentProps) => {
+    return (
+      <div className={cn('px-0', isWorkflowRunLogsSuccess ? 'py-0 pt-2' : '!py-0')}>
+        {selectedWorkflowRunId === undefined ? (
+          <>
+            {isWorkflowRunsLoading && <GenericSkeletonLoader className="py-2 px-5" />}
+            {isWorkflowRunsError && <AlertError error={workflowRunsError} />}
+            {isWorkflowRunsSuccess &&
+              (workflowRuns.length > 0 ? (
+                <ul className="divide-y">
+                  {workflowRuns.map((workflowRun) => (
+                    <li key={workflowRun.id} className="py-3 px-5">
+                      <button
+                        type="button"
+                        onClick={() => onSelectWorkflowRun(workflowRun.id)}
+                        className="flex items-center gap-2 w-full justify-between"
+                      >
+                        <div className="flex items-center gap-4">
+                          <BranchStatusBadge status={workflowRun.status} />
+                          <span className="text-sm">
+                            {dayjs(workflowRun.created_at).format('DD MMM, YYYY HH:mm')}
+                          </span>
+                        </div>
+                        <ArrowRight size={16} />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-center text-sm text-foreground-light py-4">
+                  No workflow runs found.
+                </p>
+              ))}
+          </>
+        ) : (
+          <div className="flex flex-col gap-2 py-2">
+            <Button
+              onClick={onBack}
+              type="text"
+              icon={<ArrowLeft />}
+              className="self-start mx-5"
+            >
+              Back to workflow runs
+            </Button>
+  
+            {isWorkflowRunLogsLoading && <GenericSkeletonLoader className="py-2 px-5" />}
+            {isWorkflowRunLogsError && (
+              <AlertError
+                className="rounded-none"
+                subject="Failed to retrieve workflow logs"
+                error={workflowRunLogsError}
+              />
+            )}
+            {isWorkflowRunLogsSuccess && (
+              <pre className={`whitespace-pre ${maxHeight ? "max-h-[500px]" : ''} overflow-scroll px-5 pb-5`}>
+                {workflowRunLogs}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }

apps/studio/components/interfaces/BranchManagement/WorkflowLogs/WorkflowLogsDialog.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogSection,
+    DialogSectionSeparator,
+    DialogTitle,
+    DialogTrigger,
+} from 'ui'
+import { useWorkflowLogs } from "./useWorkflowLogs"
+import { WorkflowLogsContent } from "./WorkflowLogsContent"
+
+interface WorkflowLogsDialogProps {
+    projectRef: string
+}
+  
+
+export const WorkflowLogsDialog = ({ projectRef }: WorkflowLogsDialogProps) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const workflowLogs = useWorkflowLogs(projectRef, isOpen)
+  
+    return (
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>
+          <Button type="default">View Logs</Button>
+        </DialogTrigger>
+  
+        <DialogContent size="xlarge">
+          <DialogHeader>
+            <DialogTitle>Workflow Logs</DialogTitle>
+            <DialogDescription>Select a workflow run to view logs</DialogDescription>
+          </DialogHeader>
+  
+          <DialogSectionSeparator />
+  
+          <DialogSection>
+            <WorkflowLogsContent
+              {...workflowLogs}
+              maxHeight={true}
+              onSelectWorkflowRun={workflowLogs.setSelectedWorkflowRunId}
+              onBack={() => workflowLogs.setSelectedWorkflowRunId(undefined)}
+            />
+          </DialogSection>
+        </DialogContent>
+      </Dialog>
+    )
+  }

apps/studio/components/interfaces/BranchManagement/WorkflowLogs/WorkflowLogsPage.tsx

@@ -0,0 +1,29 @@
+import { useRouter } from "next/router"
+import { useWorkflowLogs } from "./useWorkflowLogs"
+import { WorkflowLogsContent } from "./WorkflowLogsContent"
+
+interface WorkflowLogsPageProps {
+    projectRef: string
+    workflowRunId?: string
+}
+  
+
+export const WorkflowLogsPage = ({ projectRef, workflowRunId }: WorkflowLogsPageProps) => {
+    const router = useRouter()
+    const workflowLogs = useWorkflowLogs(projectRef, true, workflowRunId)
+  
+    return (
+      <div className="flex flex-col p-5">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-sm text-foreground">Workflow Logs</h3>
+        <p className="text-sm text-foreground-light">Select a workflow run to view its execution logs</p>
+      </div>
+      <div className="border-t my-4" />
+        <WorkflowLogsContent
+          {...workflowLogs}
+          onSelectWorkflowRun={(id) => router.push(`/project/${projectRef}/branches/logs/workflow/${id}`)}
+          onBack={() => router.push(`/project/${projectRef}/branches/logs/workflow`)}
+        />
+      </div>
+    )
+  }

apps/studio/components/interfaces/BranchManagement/WorkflowLogs/index.tsx

@@ -0,0 +1,7 @@
+
+import { WorkflowLogsDialog } from './WorkflowLogsDialog';
+import { WorkflowLogsPage } from './WorkflowLogsPage';
+
+export { WorkflowLogsPage };
+
+export default WorkflowLogsDialog

apps/studio/components/interfaces/BranchManagement/WorkflowLogs/useWorkflowLogs.ts

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { useWorkflowRunLogsQuery } from 'data/workflow-runs/workflow-run-logs-query'
+import { useWorkflowRunsQuery } from 'data/workflow-runs/workflow-runs-query'
+
+export const useWorkflowLogs = (projectRef: string, isOpen: boolean, workflowRunId?: string) => {
+  const [selectedWorkflowRunId, setSelectedWorkflowRunId] = useState<string | undefined>(workflowRunId)
+
+  const {
+    data: workflowRuns,
+    isSuccess: isWorkflowRunsSuccess,
+    isLoading: isWorkflowRunsLoading,
+    isError: isWorkflowRunsError,
+    error: workflowRunsError,
+  } = useWorkflowRunsQuery(
+    {
+      projectRef,
+    },
+    {
+      enabled: isOpen,
+    }
+  )
+
+  const {
+    data: workflowRunLogs,
+    isSuccess: isWorkflowRunLogsSuccess,
+    isLoading: isWorkflowRunLogsLoading,
+    isError: isWorkflowRunLogsError,
+    error: workflowRunLogsError,
+  } = useWorkflowRunLogsQuery(
+    {
+      workflowRunId: selectedWorkflowRunId,
+    },
+    {
+      enabled: isOpen && selectedWorkflowRunId !== undefined,
+    }
+  )
+
+  return {
+    workflowRuns,
+    isWorkflowRunsSuccess,
+    isWorkflowRunsLoading,
+    isWorkflowRunsError,
+    workflowRunsError,
+    workflowRunLogs,
+    isWorkflowRunLogsSuccess,
+    isWorkflowRunLogsLoading,
+    isWorkflowRunLogsError,
+    workflowRunLogsError,
+    selectedWorkflowRunId,
+    setSelectedWorkflowRunId,
+  }
+}
+
+export type UseWorkflowLogsType = ReturnType<typeof useWorkflowLogs>

apps/studio/pages/project/[ref]/branches/logs/workflow/[workflow_run_id]/index.tsx

@@ -0,0 +1,18 @@
+import { useParams } from 'common'
+import { WorkflowLogsPage } from 'components/interfaces/BranchManagement/WorkflowLogs'
+import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectLayout'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import type { NextPageWithLayout } from 'types'
+
+const WorkflowRunIdLogs: NextPageWithLayout = () => {
+  const project = useSelectedProject()
+  const { workflow_run_id } = useParams()
+  if (!project?.ref) {
+    return null
+  }
+  return <WorkflowLogsPage projectRef={project?.ref} workflowRunId={workflow_run_id} />
+}
+
+WorkflowRunIdLogs.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
+
+export default WorkflowRunIdLogs

apps/studio/pages/project/[ref]/branches/logs/workflow/index.tsx

@@ -0,0 +1,16 @@
+import { useParams } from 'common'
+import { WorkflowLogsPage } from 'components/interfaces/BranchManagement/WorkflowLogs'
+import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectLayout'
+import type { NextPageWithLayout } from 'types'
+
+const WorkflowRunLogs: NextPageWithLayout = () => {
+  const { ref } = useParams()
+  if (!ref) {
+    return null
+  }
+  return <WorkflowLogsPage projectRef={ref} />
+}
+
+WorkflowRunLogs.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
+
+export default WorkflowRunLogs