Webhooks execution

apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list-store.ts

@@ -31,6 +31,12 @@ export const repoWebhooksListStore: RepoWebhooksListStore = {
       }
     ],
     error: undefined,
+    webhookExecutionPage: 1,
+    setWebhookExecutionPage: (_: number) => {},
+    totalWebhookExecutionPages: 1,
+    executions: [],
+    setExecutions: () => {},
+    setTotalWebhookExecutionPages: (_: Headers) => {},
     setError: noop,
     totalPages: 20,
     webhookLoading: false,

apps/gitness/src/RouteDefinitions.ts

@@ -20,7 +20,8 @@ export const PathProps = {
   pullRequestId: ':pullRequestId',
   gitRef: ':gitRef*',
   resourcePath: ':resourcePath*',
-  diffRefs: ':diffRefs*'
+  diffRefs: ':diffRefs*',
+  webhookId: ':webhookId*'
 }
 
 export type PullRequestRoutePathParams = Omit<PathParams, 'pipelineId' | 'executionId' | 'gitRef'>

apps/gitness/src/framework/routing/types.ts

@@ -73,7 +73,9 @@ export enum RouteConstants {
   toProfileKeys = 'toProfileKeys',
   toProfileGeneral = 'toProfileGeneral',
   toRepoLabels = 'toRepoLabels',
-  toProjectLabels = 'toProjectLabels'
+  toProjectLabels = 'toProjectLabels',
+  toRepoWebhookDetails = 'toRepoWebhookDetails',
+  toRepoWebhookExecutions = 'toRepoWebhookExecutions'
 }
 
 export interface RouteEntry {

apps/gitness/src/pages-v2/webhooks/stores/webhook-store.tsx

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 
-import { CreateWebhookFormFields, WebhookStore } from '@harnessio/ui/views'
+import { CreateWebhookFormFields, WebhookExecutionType, WebhookStore } from '@harnessio/ui/views'
 
 import { timeAgoFromEpochTime } from '../../../pages/pipeline-edit/utils/time-utils'
 import { PageResponseHeader } from '../../../types'
@@ -12,9 +12,15 @@ export const useWebhookStore = create<WebhookStore>(set => ({
   preSetWebhookData: null,
   setError: error => set({ error }),
   page: 1,
+  webhookExecutionPage: 1,
+  totalWebhookExecutionPages: 0,
   setPage: page => set({ page }),
   webhookLoading: false,
+  executions: null,
   setWebhookLoading: (webhookLoading: boolean) => set({ webhookLoading }),
+  setWebhookExecutionPage: page => set({ webhookExecutionPage: page }),
+  setTotalWebhookExecutionPages: headers =>
+    set({ totalWebhookExecutionPages: parseInt(headers.get(PageResponseHeader.xTotalPages) || '0') }),
   setWebhooks: data => {
     const transformedWebhooks = data.map(webhook => ({
       id: webhook.id || 0,
@@ -31,6 +37,9 @@ export const useWebhookStore = create<WebhookStore>(set => ({
       webhooks: transformedWebhooks
     })
   },
+  setExecutions: (data: WebhookExecutionType[]) => {
+    set({ executions: data })
+  },
   setTotalPages: headers => set({ totalPages: parseInt(headers?.get(PageResponseHeader.xTotalPages) || '0') }),
   setPreSetWebhookData: (data: CreateWebhookFormFields | null) => set({ preSetWebhookData: data })
 }))

apps/gitness/src/pages-v2/webhooks/webhook-executions.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+
+import { useListRepoWebhookExecutionsQuery } from '@harnessio/code-service-client'
+import { RepoWebhookExecutionsPage, WebhookExecutionType } from '@harnessio/ui/views'
+
+import { useRoutes } from '../../framework/context/NavigationContext'
+import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath'
+import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store'
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
+import { PathParams } from '../../RouteDefinitions'
+import { useWebhookStore } from './stores/webhook-store'
+
+export const WebhookExecutionsContainer = () => {
+  const repo_ref = useGetRepoRef()
+  const routes = useRoutes()
+  const { webhookId } = useParams<PathParams>()
+  const { webhookExecutionPage, setWebhookExecutionPage, setExecutions, setTotalWebhookExecutionPages } =
+    useWebhookStore()
+
+  const { queryPage } = usePaginationQueryStateWithStore({
+    page: webhookExecutionPage,
+    setPage: setWebhookExecutionPage
+  })
+
+  const { data: { body: executions, headers } = {}, isLoading } = useListRepoWebhookExecutionsQuery(
+    {
+      repo_ref,
+      webhook_identifier: parseInt(webhookId ?? ''),
+      queryParams: {
+        page: queryPage
+      }
+    },
+    { enabled: !!webhookId }
+  )
+
+  useEffect(() => {
+    if (executions && headers) {
+      setExecutions(executions as WebhookExecutionType[])
+      setTotalWebhookExecutionPages(headers)
+    }
+  }, [executions, setExecutions])
+
+  return (
+    <RepoWebhookExecutionsPage
+      useTranslationStore={useTranslationStore}
+      useWebhookStore={useWebhookStore}
+      toRepoWebhooks={() => routes.toRepoWebhooks({ repoId: repo_ref })}
+      repo_ref={repo_ref}
+      isLoading={isLoading}
+    />
+  )
+}

apps/gitness/src/routes.tsx

@@ -1,7 +1,13 @@
 import { Navigate } from 'react-router-dom'
 
 import { Breadcrumb, Text } from '@harnessio/ui/components'
-import { EmptyPage, ProfileSettingsLayout, RepoSettingsLayout, SandboxLayout } from '@harnessio/ui/views'
+import {
+  EmptyPage,
+  ProfileSettingsLayout,
+  RepoSettingsLayout,
+  SandboxLayout,
+  WebhookSettingsLayout
+} from '@harnessio/ui/views'
 
 import { AppShell, AppShellMFE } from './components-v2/app-shell'
 import { ProjectDropdown } from './components-v2/breadcrumbs/project-dropdown'
@@ -52,6 +58,7 @@ import { SignIn } from './pages-v2/signin'
 import { SignUp } from './pages-v2/signup'
 import { UserManagementPageContainer } from './pages-v2/user-management/user-management-container'
 import { CreateWebhookContainer } from './pages-v2/webhooks/create-webhook-container'
+import { WebhookExecutionsContainer } from './pages-v2/webhooks/webhook-executions'
 import WebhookListPage from './pages-v2/webhooks/webhook-list'
 
 enum Page {
@@ -426,13 +433,6 @@ export const repoRoutes: CustomRouteObject[] = [
                     handle: {
                       breadcrumb: () => <Text>Create a webhook</Text>
                     }
-                  },
-                  {
-                    path: ':webhookId',
-                    element: <CreateWebhookContainer />,
-                    handle: {
-                      breadcrumb: ({ webhookId }: { webhookId: string }) => <Text>{webhookId}</Text>
-                    }
                   }
                 ]
               },
@@ -465,6 +465,43 @@ export const repoRoutes: CustomRouteObject[] = [
                 ]
               }
             ]
+          },
+
+          {
+            path: 'settings/webhooks/:webhookId',
+            element: <WebhookSettingsLayout useTranslationStore={useTranslationStore} />,
+            children: [
+              {
+                index: true,
+                element: <Navigate to="details" replace />
+              },
+              {
+                path: 'details',
+                element: <CreateWebhookContainer />,
+                handle: {
+                  breadcrumb: ({ webhookId }: { webhookId: string }) => (
+                    <>
+                      <Text>{webhookId}</Text> <Breadcrumb.Separator />
+                      <Text className="ml-1.5">Details</Text>
+                    </>
+                  ),
+                  routeName: RouteConstants.toRepoWebhookDetails
+                }
+              },
+              {
+                path: 'executions',
+                element: <WebhookExecutionsContainer />,
+                handle: {
+                  breadcrumb: ({ webhookId }: { webhookId: string }) => (
+                    <>
+                      <Text>{webhookId}</Text> <Breadcrumb.Separator />
+                      <Text className="ml-1.5">Executions</Text>
+                    </>
+                  ),
+                  routeName: RouteConstants.toRepoWebhookExecutions
+                }
+              }
+            ]
           }
         ]
       }

packages/ui/locales/en/views.json

@@ -16,6 +16,9 @@
     "saving": "Saving…",
     "save": "Save",
     "cancel": "Cancel",
+    "general": "General",
+    "details": "Details",
+    "executions": "Executions",
     "generalTab": "General",
     "keysTab": "Keys and tokens",
     "tags": "Tags",
@@ -127,7 +130,6 @@
     "security": "Security",
     "secretScanning": "Secret scanning",
     "secretScanningDescription": "Block commits containing secrets like passwords, API keys and tokens.",
-    "general": "General",
     "codeAutomation": "Code and automation",
     "webhooks": "Webhooks",
     "labels": "Labels",
@@ -195,6 +197,8 @@
     "noRepos": "No repositories yet",
     "noReposProject": "There are no repositories in this project yet.",
     "createOrImportRepos": "Create new or import an existing repository.",
+    "noWebhookExecution": "No webhook executions yet",
+    "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
     "commit": "Commit",

packages/ui/locales/es/views.json

@@ -16,6 +16,9 @@
     "saving": "Saving...",
     "save": "Save",
     "cancel": "Cancel",
+    "general": "General",
+    "details": "Details",
+    "executions": "Executions",
     "generalTab": "General",
     "keysTab": "Keys and tokens",
     "tags": "Tags",
@@ -127,7 +130,6 @@
     "security": "Security",
     "secretScanning": "Secret scanning",
     "secretScanningDescription": "Block commits containing secrets like passwords, API keys and tokens.",
-    "general": "General",
     "codeAutomation": "Code and automation",
     "webhooks": "Webhooks",
     "labels": "Labels",
@@ -195,6 +197,8 @@
     "noRepos": "No repositories yet",
     "noReposProject": "There are no repositories in this project yet.",
     "createOrImportRepos": "Create new or import an existing repository.",
+    "noWebhookExecution": "No webhook executions yet",
+    "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
     "commit": "Commit",

packages/ui/locales/fr/views.json

@@ -16,6 +16,9 @@
     "saving": "Enregistrement...",
     "save": "Enregistrer",
     "cancel": "Annuler",
+    "general": "Général",
+    "details": "Details",
+    "executions": "Executions",
     "generalTab": "General",
     "keysTab": "Keys and tokens",
     "tags": "Étiquettes",
@@ -127,7 +130,6 @@
     "security": "Sécurité",
     "secretScanning": "Analyse des secrets",
     "secretScanningDescription": "Empêcher les commits contenant des secrets comme les mots de passe ou jetons API.",
-    "general": "Général",
     "codeAutomation": "Automatisation du code",
     "webhooks": "Webhooks",
     "labels": "Labels",
@@ -195,6 +197,8 @@
     "noRepos": "Pas encore de dépôts",
     "noReposProject": "Il n'y a pas encore de dépôts dans ce projet.",
     "createOrImportRepos": "Créer un nouveau dépôt ou importer un dépôt existant.",
+    "noWebhookExecution": "No webhook executions yet",
+    "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
     "commit": "Validation",

packages/ui/src/views/index.ts

@@ -6,6 +6,7 @@ export * as SandboxLayout from './layouts/SandboxLayout'
 export * from './layouts/Floating1ColumnLayout'
 export * from './layouts/PullRequestLayout'
 export * from './layouts/content-layout-with-sidebar'
+export * from './layouts/webhooks-settings-layout'
 
 // Account
 export * from './account'

packages/ui/src/views/layouts/webhooks-settings-layout.tsx

@@ -0,0 +1,25 @@
+import { Outlet } from 'react-router-dom'
+
+import { ContentLayoutWithSidebar, TranslationStore } from '@/views'
+import { TFunction } from 'i18next'
+
+const getNavItems = (t: TFunction) => [
+  {
+    groupId: 0,
+    title: t('views:repos.general', 'Webhook Settings'),
+    items: [
+      { id: 0, title: t('views:repos.details', 'Details'), to: 'details' },
+      { id: 1, title: t('views:repos.executions', 'Executions'), to: 'executions' }
+    ]
+  }
+]
+
+export function WebhookSettingsLayout({ useTranslationStore }: { useTranslationStore: () => TranslationStore }) {
+  const { t } = useTranslationStore()
+
+  return (
+    <ContentLayoutWithSidebar sidebarMenu={getNavItems(t)} sidebarOffsetTop={100} sidebarViewportClassName="pt-7">
+      <Outlet />
+    </ContentLayoutWithSidebar>
+  )
+}

packages/ui/src/views/repo/webhooks/index.ts

@@ -5,3 +5,6 @@ export * from '@views/repo/webhooks/webhook-list/types'
 // webhook create
 export * from '@views/repo/webhooks/webhook-create/repo-webhook-create-page'
 export * from '@views/repo/webhooks/webhook-create/types'
+
+// webhook executions
+export * from '@views/repo/webhooks/webhook-executions/repo-webhook-executions-page'