From c2bf80161446bf36c93ddbc3dc9884e2ef597ab5 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Tue, 29 Aug 2023 13:37:23 +0530
Subject: [PATCH 01/38] init

---
 .../pages/NewPipeline/NewPipeline.module.scss |  6 +++
 .../NewPipeline/NewPipeline.module.scss.d.ts  |  1 +
 web/src/pages/NewPipeline/NewPipeline.tsx     | 42 +++++++++++++++++--
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss b/web/src/pages/NewPipeline/NewPipeline.module.scss
index 2504f965d..4061d4c3b 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss
@@ -1,4 +1,6 @@
 .main {
+  --header-height: 96px;
+  --heading-height: 58px;
   min-height: var(--page-height);
   background-color: var(--primary-bg) !important;
 
@@ -6,3 +8,7 @@
     align-items: center;
   }
 }
+
+.editorContainer {
+  height: calc(100vh - var(--header-height) - var(--heading-height)) !important;
+}
\ No newline at end of file
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
index 02a1a8a7a..7c6df5678 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
@@ -3,5 +3,6 @@
 declare const styles: {
   readonly main: string
   readonly layout: string
+  readonly editorContainer: string
 }
 export default styles
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index ae7dd546c..071331ac6 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,13 +1,47 @@
-import React from 'react'
-import { Container, PageHeader } from '@harnessio/uicore'
+import React, { useCallback } from 'react'
+import { useMutate } from 'restful-react'
+import { Container, PageHeader, PageBody } from '@harnessio/uicore'
+import { Button, Layout, ButtonVariation } from '@harnessio/uicore'
+import type { TypesPipeline, OpenapiCreatePipelineRequest } from 'services/code'
 import { useStrings } from 'framework/strings'
+import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
+
 import css from './NewPipeline.module.scss'
 
-const NewPipeline = () => {
+const NewPipeline = (): JSX.Element => {
+  const { mutate: savePipeline } = useMutate<TypesPipeline>({
+    verb: 'POST',
+    path: `/api/v1/pipelines`
+  })
+
+  const handleSavePipeline = useCallback(async (): Promise<void> => {
+    const payload: OpenapiCreatePipelineRequest = {
+      config_path: 'config_path_4',
+      default_branch: 'main',
+      space_ref: 'test-space',
+      repo_ref: 'test-space/vb-repo',
+      repo_type: 'GITNESS',
+      uid: 'pipeline_uid_4'
+    }
+    const response = await savePipeline(payload)
+    console.log(response)
+  }, [])
+
   const { getString } = useStrings()
   return (
     <Container className={css.main}>
-      <PageHeader title={getString('pipelines.newPipelineButton')} />
+      <PageHeader
+        title={getString('pipelines.newPipelineButton')}
+        content={
+          <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
+            <Button variation={ButtonVariation.PRIMARY} text={getString('save')} onClick={handleSavePipeline} />
+          </Layout.Horizontal>
+        }></PageHeader>
+      <PageBody>
+        <Container className={css.editorContainer}>
+          <SourceCodeEditor language={'yaml'} source={''} onChange={() => {}} autoHeight />
+        </Container>
+      </PageBody>
     </Container>
   )
 }

From 37fc314d960b22083d335a11be9d7c2dead6a7ae Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Tue, 29 Aug 2023 15:06:09 +0530
Subject: [PATCH 02/38] Added Create Pipeline modal

---
 web/src/framework/strings/stringTypes.ts      |  1 +
 web/src/i18n/strings.en.yaml                  |  1 +
 web/src/pages/NewPipeline/NewPipeline.tsx     | 24 +------
 .../pages/NewPipeline/NewPipelineModal.tsx    | 63 +++++++++++++++++++
 web/src/pages/PipelineList/PipelineList.tsx   |  8 ++-
 5 files changed, 73 insertions(+), 24 deletions(-)
 create mode 100644 web/src/pages/NewPipeline/NewPipelineModal.tsx

diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 4854c23ae..6cb1b4be7 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -312,6 +312,7 @@ export interface StringsMap {
   payloadUrl: string
   payloadUrlLabel: string
   pending: string
+  'pipelines.createNewPipeline': string
   'pipelines.name': string
   'pipelines.newPipelineButton': string
   'pipelines.noData': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 1d5dd1418..be6aa224f 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -624,6 +624,7 @@ pipelines:
   noData: There are no pipelines :(
   newPipelineButton: New Pipeline
   name: Pipeline Name
+  createNewPipeline: Create New Pipeline
 executions:
   noData: There are no executions :(
   newExecutionButton: New Execution
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 071331ac6..3ed08b944 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,32 +1,12 @@
-import React, { useCallback } from 'react'
-import { useMutate } from 'restful-react'
+import React from 'react'
 import { Container, PageHeader, PageBody } from '@harnessio/uicore'
 import { Button, Layout, ButtonVariation } from '@harnessio/uicore'
-import type { TypesPipeline, OpenapiCreatePipelineRequest } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
 
 import css from './NewPipeline.module.scss'
 
 const NewPipeline = (): JSX.Element => {
-  const { mutate: savePipeline } = useMutate<TypesPipeline>({
-    verb: 'POST',
-    path: `/api/v1/pipelines`
-  })
-
-  const handleSavePipeline = useCallback(async (): Promise<void> => {
-    const payload: OpenapiCreatePipelineRequest = {
-      config_path: 'config_path_4',
-      default_branch: 'main',
-      space_ref: 'test-space',
-      repo_ref: 'test-space/vb-repo',
-      repo_type: 'GITNESS',
-      uid: 'pipeline_uid_4'
-    }
-    const response = await savePipeline(payload)
-    console.log(response)
-  }, [])
-
   const { getString } = useStrings()
   return (
     <Container className={css.main}>
@@ -34,7 +14,7 @@ const NewPipeline = (): JSX.Element => {
         title={getString('pipelines.newPipelineButton')}
         content={
           <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
-            <Button variation={ButtonVariation.PRIMARY} text={getString('save')} onClick={handleSavePipeline} />
+            <Button variation={ButtonVariation.PRIMARY} text={getString('save')} onClick={() => {}} />
           </Layout.Horizontal>
         }></PageHeader>
       <PageBody>
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/NewPipeline/NewPipelineModal.tsx
new file mode 100644
index 000000000..a97fd7721
--- /dev/null
+++ b/web/src/pages/NewPipeline/NewPipelineModal.tsx
@@ -0,0 +1,63 @@
+import React, { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
+import { useMutate } from 'restful-react'
+import { Button, ButtonVariation, Dialog, Layout } from '@harnessio/uicore'
+import { useModalHook } from 'hooks/useModalHook'
+import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
+import type { OpenapiCreatePipelineRequest, TypesPipeline } from 'services/code'
+import { useStrings } from 'framework/strings'
+import { useAppContext } from 'AppContext'
+
+const useNewPipelineModal = () => {
+  const { routes } = useAppContext()
+  const { getString } = useStrings()
+  const space = useGetSpaceParam()
+  const history = useHistory()
+
+  const { mutate: savePipeline } = useMutate<TypesPipeline>({
+    verb: 'POST',
+    path: `/api/v1/pipelines`
+  })
+
+  const handleSavePipeline = useCallback(async (): Promise<void> => {
+    const randomToken = (Math.random() + 1).toString(36).substring(7)
+
+    const payload: OpenapiCreatePipelineRequest = {
+      config_path: `config_path_${randomToken}`,
+      default_branch: 'main',
+      space_ref: 'test-space',
+      repo_ref: 'test-space/vb-repo',
+      repo_type: 'GITNESS',
+      uid: `pipeline_uid_${randomToken}`
+    }
+    await savePipeline(payload)
+      .then(() => {
+        history.push(routes.toCODEPipelinesNew({ space }))
+        hideModal()
+      })
+      .catch(() => hideModal())
+  }, [])
+
+  const [openModal, hideModal] = useModalHook(() => {
+    const onClose = () => {
+      hideModal()
+    }
+    return (
+      <Dialog isOpen enforceFocus={false} onClose={onClose} title={getString('pipelines.createNewPipeline')}>
+        <Layout.Vertical flex={{ justifyContent: 'center' }}>
+          <Layout.Horizontal spacing="medium" flex={{ justifyContent: 'flex-start' }} width="100%">
+            <Button variation={ButtonVariation.PRIMARY} text={getString('create')} onClick={handleSavePipeline} />
+            <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
+          </Layout.Horizontal>
+        </Layout.Vertical>
+      </Dialog>
+    )
+  }, [])
+
+  return {
+    openModal,
+    hideModal
+  }
+}
+
+export default useNewPipelineModal
diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index f8cd02bb3..41f59c2c5 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -29,6 +29,7 @@ import { ResourceListingPagination } from 'components/ResourceListingPagination/
 import { useAppContext } from 'AppContext'
 import noPipelineImage from '../RepositoriesListing/no-repo.svg'
 import css from './PipelineList.module.scss'
+import useNewPipelineModal from 'pages/NewPipeline/NewPipelineModal'
 
 const PipelineList = () => {
   const { routes } = useAppContext()
@@ -51,14 +52,17 @@ const PipelineList = () => {
     queryParams: { page, limit: LIST_FETCHING_LIMIT, query: searchTerm }
   })
 
+  const { openModal } = useNewPipelineModal()
+
   const NewPipelineButton = (
     <Button
       text={getString('pipelines.newPipelineButton')}
       variation={ButtonVariation.PRIMARY}
       icon="plus"
       onClick={() => {
-        history.push(routes.toCODEPipelinesNew({ space }))
-      }}></Button>
+        openModal()
+      }}
+    />
   )
 
   const columns: Column<TypesPipeline>[] = useMemo(

From fb044789926ddcc22ba80718e6e550c512ca3ccf Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Tue, 29 Aug 2023 17:33:08 +0530
Subject: [PATCH 03/38] form integration

---
 web/src/framework/strings/stringTypes.ts      |   6 ++
 web/src/i18n/strings.en.yaml                  |   6 ++
 .../pages/NewPipeline/NewPipelineModal.tsx    | 102 +++++++++++++-----
 3 files changed, 89 insertions(+), 25 deletions(-)

diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 6cb1b4be7..20f22dc8a 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -206,6 +206,7 @@ export interface StringsMap {
   'homepage.welcomeText': string
   in: string
   inactiveBranches: string
+  isRequired: string
   leaveAComment: string
   license: string
   lineBreaks: string
@@ -312,10 +313,15 @@ export interface StringsMap {
   payloadUrl: string
   payloadUrlLabel: string
   pending: string
+  'pipelines.basedOn': string
   'pipelines.createNewPipeline': string
+  'pipelines.enterPipelineName': string
+  'pipelines.enterYAMLPath': string
+  'pipelines.failedToCreatePipeline': string
   'pipelines.name': string
   'pipelines.newPipelineButton': string
   'pipelines.noData': string
+  'pipelines.yamlPath': string
   'pr.ableToMerge': string
   'pr.addDescription': string
   'pr.authorCommentedPR': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index be6aa224f..83995abcb 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -416,6 +416,7 @@ makeRequired: Make Required
 makeOptional: Make Optional
 remove: Remove
 required: Required
+isRequired: is required
 noneYet: None Yet
 noOptionalReviewers: No Optional Reviewers
 noRequiredReviewers: No Required Reviewers
@@ -625,6 +626,11 @@ pipelines:
   newPipelineButton: New Pipeline
   name: Pipeline Name
   createNewPipeline: Create New Pipeline
+  enterPipelineName: Enter pipeline name
+  basedOn: Based On
+  yamlPath: YAML Path
+  enterYAMLPath: Enter YAML path
+  failedToCreatePipeline: Failed to create pipeline
 executions:
   noData: There are no executions :(
   newExecutionButton: New Execution
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/NewPipeline/NewPipelineModal.tsx
index a97fd7721..03fa62205 100644
--- a/web/src/pages/NewPipeline/NewPipelineModal.tsx
+++ b/web/src/pages/NewPipeline/NewPipelineModal.tsx
@@ -1,42 +1,56 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useMutate } from 'restful-react'
-import { Button, ButtonVariation, Dialog, Layout } from '@harnessio/uicore'
+import * as yup from 'yup'
+import { Button, ButtonVariation, Dialog, FormInput, Formik, FormikForm, Layout, useToaster } from '@harnessio/uicore'
 import { useModalHook } from 'hooks/useModalHook'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import type { OpenapiCreatePipelineRequest, TypesPipeline } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
+import { getErrorMessage } from 'utils/Utils'
+
+interface FormData {
+  name: string
+  branch: string
+  yamlPath: string
+}
 
 const useNewPipelineModal = () => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
   const space = useGetSpaceParam()
   const history = useHistory()
+  const { showError } = useToaster()
 
   const { mutate: savePipeline } = useMutate<TypesPipeline>({
     verb: 'POST',
     path: `/api/v1/pipelines`
   })
 
-  const handleSavePipeline = useCallback(async (): Promise<void> => {
-    const randomToken = (Math.random() + 1).toString(36).substring(7)
-
-    const payload: OpenapiCreatePipelineRequest = {
-      config_path: `config_path_${randomToken}`,
-      default_branch: 'main',
-      space_ref: 'test-space',
-      repo_ref: 'test-space/vb-repo',
-      repo_type: 'GITNESS',
-      uid: `pipeline_uid_${randomToken}`
+  const handleCreatePipeline = (formData: FormData): void => {
+    const { name, branch, yamlPath } = formData
+    try {
+      const payload: OpenapiCreatePipelineRequest = {
+        config_path: yamlPath,
+        default_branch: branch,
+        space_ref: space,
+        repo_ref: `${space}/vb-repo`,
+        repo_type: 'GITNESS',
+        uid: name
+      }
+      savePipeline(payload)
+        .then(() => {
+          history.push(routes.toCODEPipelinesNew({ space }))
+          hideModal()
+        })
+        .catch(_error => {
+          showError(getErrorMessage(_error), 0, 'pipelines.failedToCreatePipeline')
+        })
+    } catch (exception) {
+      showError(getErrorMessage(exception), 0, 'pipelines.failedToCreatePipeline')
     }
-    await savePipeline(payload)
-      .then(() => {
-        history.push(routes.toCODEPipelinesNew({ space }))
-        hideModal()
-      })
-      .catch(() => hideModal())
-  }, [])
+  }
 
   const [openModal, hideModal] = useModalHook(() => {
     const onClose = () => {
@@ -44,12 +58,50 @@ const useNewPipelineModal = () => {
     }
     return (
       <Dialog isOpen enforceFocus={false} onClose={onClose} title={getString('pipelines.createNewPipeline')}>
-        <Layout.Vertical flex={{ justifyContent: 'center' }}>
-          <Layout.Horizontal spacing="medium" flex={{ justifyContent: 'flex-start' }} width="100%">
-            <Button variation={ButtonVariation.PRIMARY} text={getString('create')} onClick={handleSavePipeline} />
-            <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
-          </Layout.Horizontal>
-        </Layout.Vertical>
+        <Formik<FormData>
+          initialValues={{ name: '', branch: '', yamlPath: '' }}
+          formName="createNewPipeline"
+          enableReinitialize={true}
+          validationSchema={yup.object().shape({
+            name: yup
+              .string()
+              .trim()
+              .required(`${getString('name')} ${getString('isRequired')}`),
+            branch: yup
+              .string()
+              .trim()
+              .required(`${getString('branch')} ${getString('isRequired')}`),
+            yamlPath: yup
+              .string()
+              .trim()
+              .required(`${getString('pipelines.yamlPath')} ${getString('isRequired')}`)
+          })}
+          validateOnChange
+          validateOnBlur
+          onSubmit={handleCreatePipeline}>
+          <FormikForm>
+            <Layout.Vertical spacing="small">
+              <Layout.Vertical spacing="small">
+                <FormInput.Text
+                  name="name"
+                  label={getString('name')}
+                  placeholder={getString('pipelines.enterPipelineName')}
+                  inputGroup={{ autoFocus: true }}
+                />
+                <FormInput.Text name="branch" label={getString('pipelines.basedOn')} />
+                <FormInput.Text
+                  name="yamlPath"
+                  label={getString('pipelines.yamlPath')}
+                  placeholder={getString('pipelines.enterYAMLPath')}
+                />
+              </Layout.Vertical>
+              <Layout.Horizontal spacing="medium" width="100%">
+                <Button variation={ButtonVariation.PRIMARY} text={getString('create')} type="submit" />
+                <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
+              </Layout.Horizontal>
+            </Layout.Vertical>
+          </FormikForm>
+        </Formik>
       </Dialog>
     )
   }, [])

From 982a40a3b7d446aae8622af1d2f3e3b9b0034020 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 30 Aug 2023 13:14:35 +0530
Subject: [PATCH 04/38] Committing pipeline on Save

---
 web/src/RouteDefinitions.ts                   |  4 +-
 web/src/RouteDestinations.tsx                 |  2 +-
 web/src/framework/strings/stringTypes.ts      |  2 +
 web/src/i18n/strings.en.yaml                  |  2 +
 web/src/pages/NewPipeline/NewPipeline.tsx     | 48 +++++++++++++++++--
 .../pages/NewPipeline/NewPipelineModal.tsx    | 10 ++--
 6 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/web/src/RouteDefinitions.ts b/web/src/RouteDefinitions.ts
index 3432b60f4..291de2f29 100644
--- a/web/src/RouteDefinitions.ts
+++ b/web/src/RouteDefinitions.ts
@@ -46,7 +46,7 @@ export interface CODERoutes {
   toCODESpaceAccessControl: (args: Required<Pick<CODEProps, 'space'>>) => string
   toCODESpaceSettings: (args: Required<Pick<CODEProps, 'space'>>) => string
   toCODEPipelines: (args: Required<Pick<CODEProps, 'space'>>) => string
-  toCODEPipelinesNew: (args: Required<Pick<CODEProps, 'space'>>) => string
+  toCODEPipelineEdit: (args: Required<Pick<CODEProps, 'space' | 'pipeline'>>) => string
   toCODESecrets: (args: Required<Pick<CODEProps, 'space'>>) => string
 
   toCODEGlobalSettings: () => string
@@ -97,7 +97,7 @@ export const routes: CODERoutes = {
   toCODESpaceAccessControl: ({ space }) => `/access-control/${space}`,
   toCODESpaceSettings: ({ space }) => `/settings/${space}`,
   toCODEPipelines: ({ space }) => `/pipelines/${space}`,
-  toCODEPipelinesNew: ({ space }) => `/pipelines/${space}/new`,
+  toCODEPipelineEdit: ({ space, pipeline }) => `/pipelines/${space}/pipeline/${pipeline}/edit`,
   toCODESecrets: ({ space }) => `/secrets/${space}`,
 
   toCODEGlobalSettings: () => '/settings',
diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index bbcdc33ab..98b5884ca 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -187,7 +187,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
         )}
 
         {OPEN_SOURCE_PIPELINES && (
-          <Route path={routes.toCODEPipelinesNew({ space: pathProps.space })} exact>
+          <Route path={routes.toCODEPipelineEdit({ space: pathProps.space, pipeline: pathProps.pipeline })} exact>
             <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
               <NewPipeline />
             </LayoutWithSideNav>
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 20f22dc8a..6c470add8 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -315,12 +315,14 @@ export interface StringsMap {
   pending: string
   'pipelines.basedOn': string
   'pipelines.createNewPipeline': string
+  'pipelines.editPipeline': string
   'pipelines.enterPipelineName': string
   'pipelines.enterYAMLPath': string
   'pipelines.failedToCreatePipeline': string
   'pipelines.name': string
   'pipelines.newPipelineButton': string
   'pipelines.noData': string
+  'pipelines.saveAndRun': string
   'pipelines.yamlPath': string
   'pr.ableToMerge': string
   'pr.addDescription': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 83995abcb..94ff817da 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -631,6 +631,8 @@ pipelines:
   yamlPath: YAML Path
   enterYAMLPath: Enter YAML path
   failedToCreatePipeline: Failed to create pipeline
+  saveAndRun: Save and Run
+  editPipeline: Edit pipeline {{pipeline}}
 executions:
   noData: There are no executions :(
   newExecutionButton: New Execution
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 3ed08b944..1db10d327 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,25 +1,63 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useMutate } from 'restful-react'
+import { useParams } from 'react-router-dom'
 import { Container, PageHeader, PageBody } from '@harnessio/uicore'
 import { Button, Layout, ButtonVariation } from '@harnessio/uicore'
+import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
+import type { CODEProps } from 'RouteDefinitions'
 
 import css from './NewPipeline.module.scss'
 
 const NewPipeline = (): JSX.Element => {
   const { getString } = useStrings()
+  const { pipeline } = useParams<CODEProps>()
+  const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
+    verb: 'POST',
+    path: `/api/v1/repos/test-space/vb-repo/+/commits`
+  })
+  const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
+
+  const handleSaveAndRun = (): void => {
+    const data: OpenapiCommitFilesRequest = {
+      actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
+      branch: 'main',
+      new_branch: '',
+      title: `Create pipeline ${pipeline}`,
+      message: ''
+    }
+
+    mutate(data)
+      .then(response => console.log(response))
+      .catch(error => console.log(error))
+  }
+
   return (
     <Container className={css.main}>
       <PageHeader
-        title={getString('pipelines.newPipelineButton')}
+        title={getString('pipelines.editPipeline', { pipeline })}
         content={
           <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
-            <Button variation={ButtonVariation.PRIMARY} text={getString('save')} onClick={() => {}} />
+            <Button
+              variation={ButtonVariation.PRIMARY}
+              text={getString('pipelines.saveAndRun')}
+              onClick={handleSaveAndRun}
+              disabled={loading}
+            />
           </Layout.Horizontal>
-        }></PageHeader>
+        }
+      />
       <PageBody>
         <Container className={css.editorContainer}>
-          <SourceCodeEditor language={'yaml'} source={''} onChange={() => {}} autoHeight />
+          <SourceCodeEditor
+            language={'yaml'}
+            source={
+              'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
+            }
+            onChange={(value: string) => setPipelineAsYaml(value)}
+            autoHeight
+          />
         </Container>
       </PageBody>
     </Container>
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/NewPipeline/NewPipelineModal.tsx
index 03fa62205..4060a0f1f 100644
--- a/web/src/pages/NewPipeline/NewPipelineModal.tsx
+++ b/web/src/pages/NewPipeline/NewPipelineModal.tsx
@@ -5,7 +5,7 @@ import * as yup from 'yup'
 import { Button, ButtonVariation, Dialog, FormInput, Formik, FormikForm, Layout, useToaster } from '@harnessio/uicore'
 import { useModalHook } from 'hooks/useModalHook'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
-import type { OpenapiCreatePipelineRequest, TypesPipeline } from 'services/code'
+import type { OpenapiCreatePipelineRequest, TypesPipeline, TypesRepository } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
@@ -23,6 +23,8 @@ const useNewPipelineModal = () => {
   const history = useHistory()
   const { showError } = useToaster()
 
+  const repoMetadata: TypesRepository = { path: `${space}/vb-repo`, default_branch: 'main' }
+
   const { mutate: savePipeline } = useMutate<TypesPipeline>({
     verb: 'POST',
     path: `/api/v1/pipelines`
@@ -35,13 +37,13 @@ const useNewPipelineModal = () => {
         config_path: yamlPath,
         default_branch: branch,
         space_ref: space,
-        repo_ref: `${space}/vb-repo`,
+        repo_ref: repoMetadata.path,
         repo_type: 'GITNESS',
         uid: name
       }
       savePipeline(payload)
         .then(() => {
-          history.push(routes.toCODEPipelinesNew({ space }))
+          history.push(routes.toCODEPipelineEdit({ space, pipeline: name }))
           hideModal()
         })
         .catch(_error => {
@@ -59,7 +61,7 @@ const useNewPipelineModal = () => {
     return (
       <Dialog isOpen enforceFocus={false} onClose={onClose} title={getString('pipelines.createNewPipeline')}>
         <Formik<FormData>
-          initialValues={{ name: '', branch: '', yamlPath: '' }}
+          initialValues={{ name: '', branch: repoMetadata.default_branch || '', yamlPath: '' }}
           formName="createNewPipeline"
           enableReinitialize={true}
           validationSchema={yup.object().shape({

From e8e6d0916677f475f9f303c4a32bb7f2038458bc Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 30 Aug 2023 13:48:28 +0530
Subject: [PATCH 05/38] Render breadcrumb

---
 .../pages/NewPipeline/NewPipeline.module.scss | 13 ++++++++++-
 .../NewPipeline/NewPipeline.module.scss.d.ts  |  2 ++
 web/src/pages/NewPipeline/NewPipeline.tsx     | 23 +++++++++++++++----
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss b/web/src/pages/NewPipeline/NewPipeline.module.scss
index 4061d4c3b..9036d1937 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss
@@ -11,4 +11,15 @@
 
 .editorContainer {
   height: calc(100vh - var(--header-height) - var(--heading-height)) !important;
-}
\ No newline at end of file
+}
+
+.header {
+  a {
+    font-size: var(--font-size-small);
+    color: var(--primary-7);
+  }
+}
+
+.breadcrumb {
+  align-items: center;
+}
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
index 7c6df5678..61a9f2b03 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
@@ -4,5 +4,7 @@ declare const styles: {
   readonly main: string
   readonly layout: string
   readonly editorContainer: string
+  readonly header: string
+  readonly breadcrumb: string
 }
 export default styles
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 1db10d327..89dcc9306 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,23 +1,29 @@
 import React, { useState } from 'react'
 import { useMutate } from 'restful-react'
-import { useParams } from 'react-router-dom'
-import { Container, PageHeader, PageBody } from '@harnessio/uicore'
-import { Button, Layout, ButtonVariation } from '@harnessio/uicore'
+import { Link, useParams } from 'react-router-dom'
+import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text } from '@harnessio/uicore'
+import { Icon } from '@harnessio/icons'
+import { Color } from '@harnessio/design-system'
 import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
 import { useStrings } from 'framework/strings'
+import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
+import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 
 import css from './NewPipeline.module.scss'
 
 const NewPipeline = (): JSX.Element => {
+  const { routes } = useAppContext()
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
+  const space = useGetSpaceParam()
+  const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
+
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
     path: `/api/v1/repos/test-space/vb-repo/+/commits`
   })
-  const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
 
   const handleSaveAndRun = (): void => {
     const data: OpenapiCommitFilesRequest = {
@@ -37,6 +43,15 @@ const NewPipeline = (): JSX.Element => {
     <Container className={css.main}>
       <PageHeader
         title={getString('pipelines.editPipeline', { pipeline })}
+        breadcrumbs={
+          <Container className={css.header}>
+            <Layout.Horizontal spacing="small" className={css.breadcrumb}>
+              <Link to={routes.toCODEPipelines({ space })}>{getString('pageTitle.pipelines')}</Link>
+              <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
+              <Text font={{ size: 'small' }}>{pipeline}</Text>
+            </Layout.Horizontal>
+          </Container>
+        }
         content={
           <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
             <Button

From c90233ff495d7a38a3a2af82e6e7f0a4c0e034b6 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 30 Aug 2023 14:10:15 +0530
Subject: [PATCH 06/38] Added Run pipeline drawer

---
 web/src/framework/strings/stringTypes.ts      |   3 +
 web/src/i18n/strings.en.yaml                  |   3 +
 .../pages/NewPipeline/NewPipeline.module.scss |   4 +
 .../NewPipeline/NewPipeline.module.scss.d.ts  |   1 +
 web/src/pages/NewPipeline/NewPipeline.tsx     | 116 +++++++++++-------
 .../pages/NewPipeline/NewPipelineModal.tsx    |   4 +-
 6 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 6c470add8..d3e42e786 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -184,6 +184,7 @@ export interface StringsMap {
   failedToCreateSpace: string
   failedToDeleteBranch: string
   failedToDeleteWebhook: string
+  failedToSavePipeline: string
   fileDeleted: string
   fileTooLarge: string
   files: string
@@ -322,6 +323,7 @@ export interface StringsMap {
   'pipelines.name': string
   'pipelines.newPipelineButton': string
   'pipelines.noData': string
+  'pipelines.run': string
   'pipelines.saveAndRun': string
   'pipelines.yamlPath': string
   'pr.ableToMerge': string
@@ -456,6 +458,7 @@ export interface StringsMap {
   reviewerNotFound: string
   reviewers: string
   role: string
+  run: string
   running: string
   samplePayloadUrl: string
   save: string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 94ff817da..21d1c03aa 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -587,6 +587,7 @@ spaceMemberships:
   memberAdded: Member added successfully.
 failedToCreateSpace: Failed to create Space. Please try again.
 failedToCreatePipeline: Failed to create Pipeline. Please try again.
+failedToSavePipeline: Failed to save Pipeline. Please try again.
 enterName: Enter the name
 createASpace: Create a space
 createSpace: Create Space
@@ -633,6 +634,7 @@ pipelines:
   failedToCreatePipeline: Failed to create pipeline
   saveAndRun: Save and Run
   editPipeline: Edit pipeline {{pipeline}}
+  run: Run pipeline
 executions:
   noData: There are no executions :(
   newExecutionButton: New Execution
@@ -648,3 +650,4 @@ secrets:
   value: Secret Value
   createSecret: Create Secret
 userUpdateSuccess: 'User updated successfully'
+run: Run
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss b/web/src/pages/NewPipeline/NewPipeline.module.scss
index 9036d1937..14732cf6f 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss
@@ -23,3 +23,7 @@
 .breadcrumb {
   align-items: center;
 }
+
+.drawer {
+  height: calc(100% - 40px);
+}
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
index 61a9f2b03..b2aaad19f 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
@@ -6,5 +6,6 @@ declare const styles: {
   readonly editorContainer: string
   readonly header: string
   readonly breadcrumb: string
+  readonly drawer: string
 }
 export default styles
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 89dcc9306..7a81dd9f3 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
-import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text } from '@harnessio/uicore'
+import { Drawer } from '@blueprintjs/core'
+import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text, useToaster } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
 import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
@@ -10,6 +11,7 @@ import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
 import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
+import { getErrorMessage } from 'utils/Utils'
 
 import css from './NewPipeline.module.scss'
 
@@ -18,7 +20,9 @@ const NewPipeline = (): JSX.Element => {
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
   const space = useGetSpaceParam()
+  const { showError } = useToaster()
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
+  const [showDrawer, setShowDrawer] = useState<boolean>(false)
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
@@ -26,56 +30,78 @@ const NewPipeline = (): JSX.Element => {
   })
 
   const handleSaveAndRun = (): void => {
-    const data: OpenapiCommitFilesRequest = {
-      actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
-      branch: 'main',
-      new_branch: '',
-      title: `Create pipeline ${pipeline}`,
-      message: ''
-    }
+    try {
+      const data: OpenapiCommitFilesRequest = {
+        actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
+        branch: 'main',
+        new_branch: '',
+        title: `Create pipeline ${pipeline}`,
+        message: ''
+      }
 
-    mutate(data)
-      .then(response => console.log(response))
-      .catch(error => console.log(error))
+      mutate(data)
+        .then(() => setShowDrawer(true))
+        .catch(error => {
+          showError(getErrorMessage(error), 0, 'pipelines.failedToSavePipeline')
+        })
+    } catch (exception) {
+      showError(getErrorMessage(exception), 0, 'pipelines.failedToCreatePipeline')
+    }
   }
 
   return (
-    <Container className={css.main}>
-      <PageHeader
-        title={getString('pipelines.editPipeline', { pipeline })}
-        breadcrumbs={
-          <Container className={css.header}>
-            <Layout.Horizontal spacing="small" className={css.breadcrumb}>
-              <Link to={routes.toCODEPipelines({ space })}>{getString('pageTitle.pipelines')}</Link>
-              <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
-              <Text font={{ size: 'small' }}>{pipeline}</Text>
+    <>
+      {showDrawer && (
+        <Drawer isOpen={showDrawer} title={getString('pipelines.run')} onClose={() => setShowDrawer(false)}>
+          <Layout.Vertical padding="xlarge" flex={{ justifyContent: 'flex-end' }} className={css.drawer}>
+            <Layout.Horizontal spacing="medium" flex={{ justifyContent: 'flex-start' }} width="100%">
+              <Button variation={ButtonVariation.PRIMARY} text={getString('run')} />
+              <Button
+                variation={ButtonVariation.SECONDARY}
+                text={getString('cancel')}
+                onClick={() => setShowDrawer(false)}
+              />
             </Layout.Horizontal>
-          </Container>
-        }
-        content={
-          <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
-            <Button
-              variation={ButtonVariation.PRIMARY}
-              text={getString('pipelines.saveAndRun')}
-              onClick={handleSaveAndRun}
-              disabled={loading}
+          </Layout.Vertical>
+        </Drawer>
+      )}
+      <Container className={css.main}>
+        <PageHeader
+          title={getString('pipelines.editPipeline', { pipeline })}
+          breadcrumbs={
+            <Container className={css.header}>
+              <Layout.Horizontal spacing="small" className={css.breadcrumb}>
+                <Link to={routes.toCODEPipelines({ space })}>{getString('pageTitle.pipelines')}</Link>
+                <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
+                <Text font={{ size: 'small' }}>{pipeline}</Text>
+              </Layout.Horizontal>
+            </Container>
+          }
+          content={
+            <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
+              <Button
+                variation={ButtonVariation.PRIMARY}
+                text={getString('pipelines.saveAndRun')}
+                onClick={handleSaveAndRun}
+                disabled={loading}
+              />
+            </Layout.Horizontal>
+          }
+        />
+        <PageBody>
+          <Container className={css.editorContainer}>
+            <SourceCodeEditor
+              language={'yaml'}
+              source={
+                'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
+              }
+              onChange={(value: string) => setPipelineAsYaml(value)}
+              autoHeight
             />
-          </Layout.Horizontal>
-        }
-      />
-      <PageBody>
-        <Container className={css.editorContainer}>
-          <SourceCodeEditor
-            language={'yaml'}
-            source={
-              'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
-            }
-            onChange={(value: string) => setPipelineAsYaml(value)}
-            autoHeight
-          />
-        </Container>
-      </PageBody>
-    </Container>
+          </Container>
+        </PageBody>
+      </Container>
+    </>
   )
 }
 
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/NewPipeline/NewPipelineModal.tsx
index 4060a0f1f..cc098d7db 100644
--- a/web/src/pages/NewPipeline/NewPipelineModal.tsx
+++ b/web/src/pages/NewPipeline/NewPipelineModal.tsx
@@ -46,8 +46,8 @@ const useNewPipelineModal = () => {
           history.push(routes.toCODEPipelineEdit({ space, pipeline: name }))
           hideModal()
         })
-        .catch(_error => {
-          showError(getErrorMessage(_error), 0, 'pipelines.failedToCreatePipeline')
+        .catch(error => {
+          showError(getErrorMessage(error), 0, 'pipelines.failedToCreatePipeline')
         })
     } catch (exception) {
       showError(getErrorMessage(exception), 0, 'pipelines.failedToCreatePipeline')

From 0436628aea58916300a88e57a912b98b20b767f9 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 30 Aug 2023 15:37:59 +0530
Subject: [PATCH 07/38] Schema integration

---
 .../MonacoSourceCodeEditor.tsx                |   20 +-
 web/src/pages/NewPipeline/NewPipeline.tsx     |    8 +-
 .../NewPipeline/schema/pipeline-schema.json   | 2372 +++++++++++++++++
 web/src/utils/Utils.ts                        |    1 +
 4 files changed, 2397 insertions(+), 4 deletions(-)
 create mode 100644 web/src/pages/NewPipeline/schema/pipeline-schema.json

diff --git a/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx b/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
index ae40d3202..d1eddd28d 100644
--- a/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
+++ b/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
@@ -38,7 +38,8 @@ export default function MonacoSourceCodeEditor({
   height,
   autoHeight,
   wordWrap = true,
-  onChange = noop
+  onChange = noop,
+  schema
 }: SourceCodeEditorProps) {
   const [editor, setEditor] = useState<monacoEditor.editor.IStandaloneCodeEditor>()
   const scrollbar = autoHeight ? 'hidden' : 'auto'
@@ -51,6 +52,23 @@ export default function MonacoSourceCodeEditor({
     }
   }, [])
 
+  useEffect(() => {
+    if (window.monaco && language === 'yaml' && schema) {
+      monaco.languages.yaml?.yamlDefaults?.setDiagnosticsOptions?.({
+        validate: true,
+        enableSchemaRequest: false,
+        hover: true,
+        completion: true,
+        schemas: [
+          {
+            fileMatch: ['*'],
+            schema
+          }
+        ]
+      })
+    }
+  }, [language, schema])
+
   useEventListener('resize', () => {
     editor?.layout({ width: 0, height: 0 })
     window.requestAnimationFrame(() => editor?.layout())
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 7a81dd9f3..d90bafca1 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -8,10 +8,11 @@ import { Color } from '@harnessio/design-system'
 import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
-import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
+import MonacoSourceCodeEditor from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
 import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
+import pipelineSchema from './schema/pipeline-schema.json'
 
 import css from './NewPipeline.module.scss'
 
@@ -26,7 +27,7 @@ const NewPipeline = (): JSX.Element => {
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
-    path: `/api/v1/repos/test-space/vb-repo/+/commits`
+    path: `/api/v1/repos/${space}/vb-repo/+/commits`
   })
 
   const handleSaveAndRun = (): void => {
@@ -90,8 +91,9 @@ const NewPipeline = (): JSX.Element => {
         />
         <PageBody>
           <Container className={css.editorContainer}>
-            <SourceCodeEditor
+            <MonacoSourceCodeEditor
               language={'yaml'}
+              schema={pipelineSchema}
               source={
                 'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
               }
diff --git a/web/src/pages/NewPipeline/schema/pipeline-schema.json b/web/src/pages/NewPipeline/schema/pipeline-schema.json
new file mode 100644
index 000000000..5a94510c4
--- /dev/null
+++ b/web/src/pages/NewPipeline/schema/pipeline-schema.json
@@ -0,0 +1,2372 @@
+{
+  "definitions": {
+    "Pipeline": {
+      "title": "Pipeline",
+      "description": "Pipeline defines the pipeline execution.",
+      "type": "object",
+      "properties": {
+        "version": {
+          "description": "Version defines the schema version.",
+          "type": ["string", "number"]
+        },
+        "name": {
+          "description": "Pipeline provides the pipeline name.",
+          "type": "string"
+        },
+        "stages": {
+          "type": "array",
+          "description": "Stages defines a list of pipeline stages.",
+          "items": {
+            "$ref": "#/definitions/Stage"
+          }
+        },
+        "inputs": {
+          "type": "object",
+          "description": "Inputs defines the pipeline input parameters.",
+          "additionalProperties": {
+            "$ref": "#/definitions/Input"
+          }
+        },
+        "options": {
+          "$ref": "#/definitions/Default",
+          "description": "Options defines global configuration options."
+        }
+      },
+      "required": ["version", "stages"],
+      "examples": [
+        {
+          "version": 1,
+          "stages": [
+            {
+              "name": "build",
+              "type": "ci",
+              "spec": {
+                "steps": [
+                  {
+                    "name": "compile",
+                    "type": "script",
+                    "spec": {
+                      "run": "go build\ngo test"
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ],
+      "x-file": "pipeline.yaml"
+    },
+    "Stage": {
+      "title": "Stage",
+      "type": "object",
+      "properties": {
+        "desc": {
+          "description": "The stage description.",
+          "type": "string"
+        },
+        "id": {
+          "description": "The unique stage identifier.",
+          "pattern": "^[a-zA-Z0-9_-]+$",
+          "type": "string"
+        },
+        "name": {
+          "description": "The sage name.",
+          "type": "string"
+        },
+        "strategy": {
+          "$ref": "#/definitions/Strategy",
+          "description": "The stage execution strategy."
+        },
+        "delegate": {
+          "description": "Configures the delegate matching logic.",
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "status": {
+          "$ref": "#/definitions/StatusStage",
+          "description": "Configures the scm status settings."
+        },
+        "type": {
+          "description": "The stage type.",
+          "enum": ["cd", "ci", "custom", "flag", "iacm", "template"],
+          "type": "string"
+        },
+        "when": {
+          "description": "The stage conditional logic.",
+          "$ref": "#/definitions/When"
+        },
+        "on": {
+          "$ref": "#/definitions/On"
+        }
+      },
+      "oneOf": [
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "ci"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StageCI"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "cd"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StageCD"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "custom"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StageCustom"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "iacm"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StageInfra"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "flag"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StageFlag"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "template"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StageTemplate"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "anyOf": [
+        {
+          "required": ["type"]
+        }
+      ],
+      "x-file": "stage.yaml"
+    },
+    "Strategy": {
+      "title": "Strategy",
+      "type": "object",
+      "description": "Strategy defines an optional execution strategy.",
+      "properties": {
+        "type": {
+          "description": "Type defines the execution strategy type.",
+          "type": "string",
+          "enum": ["for", "matrix", "while"]
+        }
+      },
+      "oneOf": [
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "for"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/For"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "matrix"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/Matrix"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "while"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/While"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "x-file": "strategy.yaml"
+    },
+    "For": {
+      "title": "For",
+      "description": "Defines a for loop execution strategy.",
+      "type": "object",
+      "properties": {
+        "concurrency": {
+          "description": "Defines the for loop concurrency.",
+          "type": "number"
+        },
+        "iterations": {
+          "type": "number"
+        }
+      },
+      "x-file": "strategy_for.yaml"
+    },
+    "Matrix": {
+      "title": "Matrix",
+      "type": "object",
+      "description": "Defines a matrix execution strategy.",
+      "properties": {
+        "axis": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "concurrency": {
+          "description": "Defines the matrix concurrency.",
+          "type": "number"
+        },
+        "include": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          }
+        },
+        "exclude": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "x-file": "strategy_matrix.yaml"
+    },
+    "While": {
+      "title": "While",
+      "description": "Defines a while loop execution strategy.",
+      "type": "object",
+      "properties": {
+        "condition": {
+          "type": "string",
+          "description": "Defines the while condition."
+        },
+        "iterations": {
+          "type": "number",
+          "description": "Defines the maximum number of interations."
+        }
+      },
+      "x-file": "strategy_while.yaml"
+    },
+    "StatusStage": {
+      "title": "StatusStage",
+      "type": "object",
+      "properties": {
+        "disabled": {
+          "type": "boolean"
+        },
+        "matrix": {
+          "type": "string",
+          "enum": ["itemize", "summarize"]
+        },
+        "name": {
+          "type": "string"
+        }
+      },
+      "x-file": "status_stage.yaml"
+    },
+    "When": {
+      "title": "When",
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "$ref": "#/definitions/WhenCond"
+        },
+        {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/WhenCond"
+          }
+        }
+      ],
+      "x-go-skip": true,
+      "x-file": "when.yaml"
+    },
+    "WhenCond": {
+      "title": "WhenCond",
+      "type": "object",
+      "additionalProperties": {
+        "$ref": "#/definitions/WhenExpr"
+      },
+      "x-go-skip": true,
+      "x-file": "when_cond.yaml"
+    },
+    "WhenExpr": {
+      "title": "WhenExpr",
+      "type": "object",
+      "properties": {
+        "eq": {
+          "type": "string"
+        },
+        "in": {
+          "type": "array"
+        },
+        "not": {
+          "type": "object",
+          "properties": {
+            "eq": {
+              "type": "string"
+            },
+            "in": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "x-go-skip": true,
+      "x-file": "when_expr.yaml"
+    },
+    "On": {
+      "title": "On",
+      "type": "object",
+      "properties": {
+        "failure": {
+          "oneOf": [
+            {
+              "$ref": "#/definitions/Failure"
+            },
+            {
+              "type": "array",
+              "items": {
+                "$ref": "#/definitions/Failure"
+              }
+            }
+          ]
+        }
+      },
+      "x-go-skip": true,
+      "x-file": "on.yaml"
+    },
+    "Failure": {
+      "title": "Failure",
+      "type": "object",
+      "description": "Failure defines a failure strategy.",
+      "properties": {
+        "type": {
+          "description": "Type defines the failure strategy type.",
+          "type": "string",
+          "enum": [
+            "abort",
+            "ignore",
+            "manual-intervention",
+            "retry",
+            "success",
+            "stage-rollback",
+            "pipeline-rollback",
+            "retry-step-group",
+            "fail"
+          ]
+        },
+        "errors": {
+          "description": "Errors specifies the types of errors.",
+          "type": "array",
+          "items": {
+            "type": "string",
+            "enum": [
+              "all",
+              "approval-rejection",
+              "authentication",
+              "authorization",
+              "connectivity",
+              "delegate-provisioning",
+              "delegate-restart",
+              "input-timeout",
+              "policy-evaluation",
+              "timeout",
+              "unknown",
+              "verification",
+              "user-mark-fail"
+            ]
+          }
+        }
+      },
+      "oneOf": [
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "abort"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/Abort"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "ignore"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/Ignore"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "retry"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/Retry"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "manual-intervention"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/ManualIntervention"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "x-file": "failure.yaml"
+    },
+    "Abort": {
+      "title": "Abort",
+      "type": "object",
+      "properties": {},
+      "x-file": "failure_abort.yaml"
+    },
+    "Ignore": {
+      "title": "Ignore",
+      "type": "object",
+      "properties": {},
+      "x-file": "failure_ignore.yaml"
+    },
+    "Retry": {
+      "title": "Retry",
+      "properties": {
+        "attempts": {
+          "type": "number",
+          "example": 3
+        },
+        "interval": {
+          "anyOf": [
+            {
+              "items": {
+                "type": "string",
+                "format": "duration"
+              },
+              "type": "array",
+              "example": ["5s", "10s", "20s"]
+            },
+            {
+              "type": "string",
+              "example": "1m",
+              "format": "duration"
+            }
+          ]
+        },
+        "on": {
+          "$ref": "#/definitions/On"
+        }
+      },
+      "type": "object",
+      "x-file": "failure_retry.yaml"
+    },
+    "ManualIntervention": {
+      "title": "ManualIntervention",
+      "properties": {
+        "on": {
+          "$ref": "#/definitions/On"
+        },
+        "timeout": {
+          "format": "duration",
+          "type": "string",
+          "example": "30m"
+        }
+      },
+      "type": "object",
+      "x-file": "failure_manual.yaml"
+    },
+    "StageCI": {
+      "properties": {
+        "cache": {
+          "$ref": "#/definitions/Cache",
+          "description": "Configures the cache behavior."
+        },
+        "clone": {
+          "$ref": "#/definitions/CloneStage",
+          "description": "Overrides the clone behavior."
+        },
+        "platform": {
+          "$ref": "#/definitions/Platform",
+          "description": "Configures the target execution platform."
+        },
+        "runtime": {
+          "$ref": "#/definitions/Runtime",
+          "description": "Configures the target runtime engine."
+        },
+        "steps": {
+          "description": "Configures a series of steps to executes.",
+          "items": {
+            "$ref": "#/definitions/Step"
+          },
+          "type": "array"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        },
+        "volumes": {
+          "description": "Configures a container volumes.",
+          "items": {
+            "$ref": "#/definitions/Volume"
+          },
+          "type": "array"
+        }
+      },
+      "type": "object",
+      "title": "StageCI",
+      "x-file": "stage_ci.yaml"
+    },
+    "Cache": {
+      "title": "Cache",
+      "type": "object",
+      "description": "Cache defines caching behavior.",
+      "properties": {
+        "enabled": {
+          "description": "Enabled enables cache intelligence.",
+          "type": "boolean"
+        },
+        "paths": {
+          "description": "Paths provides a list of paths to cache.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "key": {
+          "description": "Key provides a caching key.",
+          "type": "string"
+        },
+        "policy": {
+          "type": "string",
+          "description": "Policy configures the pull and push behavior of the cache.\nBy default, the stage pulls the cache when the stage starts\nand pushes changes to the cache when the stage ends.\n",
+          "default": "pull-push",
+          "enum": ["pull", "pull-push", "push"]
+        }
+      },
+      "examples": [
+        {
+          "cache": {
+            "enabled": true
+          }
+        },
+        {
+          "cache": {
+            "enabled": true,
+            "paths": ["node_modules"]
+          }
+        },
+        {
+          "cache": {
+            "enabled": true,
+            "paths": ["node_modules"],
+            "policy": "pull"
+          }
+        }
+      ],
+      "x-file": "cache.yaml"
+    },
+    "CloneStage": {
+      "title": "CloneStage",
+      "type": "object",
+      "description": "Clone defines the stage clone behavior.",
+      "properties": {
+        "depth": {
+          "description": "Depth defines the clone depth.",
+          "type": "number"
+        },
+        "disabled": {
+          "description": "Disabled disables the default clone step.",
+          "type": "boolean"
+        },
+        "insecure": {
+          "description": "Insecure disables ssl verification.",
+          "type": "boolean"
+        },
+        "strategy": {
+          "description": "Strategy configures the clone strategy.",
+          "type": "string",
+          "enum": ["source-branch", "merge"]
+        },
+        "trace": {
+          "description": "Trace enables trace logging.",
+          "type": "boolean"
+        }
+      },
+      "x-file": "clone_stage.yaml"
+    },
+    "Platform": {
+      "title": "Platform",
+      "description": "Platform defines the target execution environment.",
+      "type": "object",
+      "properties": {
+        "arch": {
+          "$ref": "#/definitions/Arch",
+          "description": "Arch defines the target cpu architecture."
+        },
+        "features": {
+          "description": "Features defines the target platform features.",
+          "items": {
+            "type": "string"
+          },
+          "type": "array"
+        },
+        "os": {
+          "$ref": "#/definitions/OS",
+          "description": "OS defines the target operating system."
+        },
+        "variant": {
+          "description": "Variant defines the target cpu architecture variant.",
+          "type": "string"
+        },
+        "version": {
+          "description": "Version defines the target operating system version.",
+          "type": "string"
+        }
+      },
+      "examples": [
+        {
+          "platform": {
+            "os": "linux"
+          }
+        },
+        {
+          "platform": {
+            "os": "linux",
+            "arch": "amd64"
+          }
+        }
+      ],
+      "x-file": "platform.yaml"
+    },
+    "Arch": {
+      "title": "Arch",
+      "type": "string",
+      "description": "List of cpu architectures.",
+      "enum": [
+        "amd64",
+        "arm",
+        "arm64",
+        "386",
+        "ppc",
+        "ppc64",
+        "ppc64le",
+        "riscv",
+        "riscv64",
+        "s390",
+        "s390x",
+        "sparc",
+        "sparc64"
+      ],
+      "x-file": "enum_arch.yaml"
+    },
+    "OS": {
+      "title": "OS",
+      "type": "string",
+      "description": "List of operating systems.",
+      "enum": ["linux", "windows", "macos", "darwin", "dragonfly", "freebsd", "netbsd", "openbsd", "plan9", "solaris"],
+      "x-file": "enum_os.yaml"
+    },
+    "Runtime": {
+      "title": "Runtime",
+      "description": "Defines the runtime execution engine.",
+      "properties": {
+        "type": {
+          "description": "The runtime type.",
+          "enum": ["cloud", "machine", "kubernetes", "vm"],
+          "type": "string"
+        }
+      },
+      "type": "object",
+      "oneOf": [
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "cloud"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/RuntimeCloud"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "machine"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/RuntimeMachine"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "kubernetes"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/RuntimeKube"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "vm"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/RuntimeVM"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "x-file": "runtime.yaml"
+    },
+    "RuntimeCloud": {
+      "title": "RuntimeCloud",
+      "type": "object",
+      "properties": {
+        "size": {
+          "type": "string"
+        }
+      },
+      "x-file": "runtime_cloud.yaml"
+    },
+    "RuntimeMachine": {
+      "title": "RuntimeMachine",
+      "type": "object",
+      "properties": {},
+      "x-file": "runtime_machine.yaml"
+    },
+    "RuntimeKube": {
+      "title": "RuntimeKube",
+      "type": "object",
+      "properties": {
+        "connector": {
+          "type": "string"
+        },
+        "namespace": {
+          "type": "string"
+        },
+        "annotations": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "labels": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "resources": {
+          "$ref": "#/definitions/Resources"
+        },
+        "mount_service_token": {
+          "type": "boolean"
+        },
+        "service_account": {
+          "type": "string"
+        },
+        "security_context": {
+          "type": "string"
+        },
+        "priority_class": {
+          "type": "string"
+        },
+        "init_timeout": {
+          "format": "duration",
+          "type": "string"
+        },
+        "user": {
+          "type": "string"
+        },
+        "image_pull_secrets": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "node": {
+          "type": "string"
+        },
+        "node_selector": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "tolerations": {
+          "type": "object"
+        }
+      },
+      "x-file": "runtime_kubernetes.yaml"
+    },
+    "Resources": {
+      "title": "Resources",
+      "description": "Defines the container resource request and limits.",
+      "properties": {
+        "limits": {
+          "$ref": "#/definitions/Resource"
+        },
+        "requests": {
+          "$ref": "#/definitions/Resource"
+        }
+      },
+      "type": "object",
+      "x-file": "resources.yaml"
+    },
+    "Resource": {
+      "title": "Resource",
+      "type": "object",
+      "description": "Resource defines the system resources.",
+      "properties": {
+        "cpu": {
+          "type": ["string", "number"]
+        },
+        "memory": {
+          "format": "bytes",
+          "type": ["string", "number"]
+        }
+      },
+      "x-file": "resource.yaml"
+    },
+    "RuntimeVM": {
+      "title": "RuntimeVM",
+      "type": "object",
+      "properties": {
+        "pool": {
+          "type": "string"
+        }
+      },
+      "x-file": "runtime_vm.yaml"
+    },
+    "Step": {
+      "title": "Step",
+      "type": "object",
+      "properties": {
+        "id": {
+          "description": "The unique step identifier.",
+          "type": "string",
+          "pattern": "^[a-zA-Z0-9_-]+$"
+        },
+        "name": {
+          "type": "string",
+          "description": "The step name."
+        },
+        "desc": {
+          "type": "string",
+          "description": "The step description."
+        },
+        "type": {
+          "type": "string",
+          "description": "The step type.",
+          "enum": [
+            "action",
+            "background",
+            "barrier",
+            "bitrise",
+            "script",
+            "group",
+            "parallel",
+            "plugin",
+            "jenkins",
+            "template",
+            "test"
+          ]
+        },
+        "timeout": {
+          "type": "string",
+          "description": "The step timeout."
+        },
+        "strategy": {
+          "$ref": "#/definitions/Strategy",
+          "description": "The stage execution strategy."
+        },
+        "when": {
+          "description": "The stage conditional logic.",
+          "$ref": "#/definitions/When"
+        },
+        "on": {
+          "$ref": "#/definitions/On"
+        }
+      },
+      "oneOf": [
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "action"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepAction"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "background"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepBackground"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "barrier"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepBarrier"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "bitrise"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepBitrise"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "script"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepExec"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "test"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepTest"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "group"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepGroup"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "parallel"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepParallel"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "plugin"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepPlugin"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "template"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepTemplate"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "jenkins"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/StepJenkins"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "x-file": "step.yaml"
+    },
+    "StepAction": {
+      "title": "StepAction",
+      "type": "object",
+      "properties": {
+        "uses": {
+          "type": "string"
+        },
+        "with": {
+          "type": "object"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        },
+        "outputs": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        }
+      },
+      "x-file": "step_action.yaml"
+    },
+    "Mount": {
+      "title": "Mount",
+      "type": "object",
+      "description": "Mount defines a volume mount.",
+      "properties": {
+        "name": {
+          "description": "Name defines the volume name.",
+          "type": "string"
+        },
+        "path": {
+          "description": "Path specifies the target mount path.",
+          "type": "string"
+        }
+      },
+      "x-file": "mount.yaml"
+    },
+    "StepBackground": {
+      "title": "StepBackground",
+      "type": "object",
+      "properties": {
+        "image": {
+          "type": "string"
+        },
+        "user": {
+          "type": "string"
+        },
+        "pull": {
+          "type": "string",
+          "enum": ["always", "never", "if-not-exists"]
+        },
+        "shell": {
+          "type": "string",
+          "enum": ["sh", "bash", "powershell", "pwsh"]
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The step environment variables."
+        },
+        "run": {
+          "type": "string"
+        },
+        "entrypoint": {
+          "type": "string"
+        },
+        "args": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "ports": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "network": {
+          "type": "string"
+        },
+        "privileged": {
+          "type": "boolean"
+        },
+        "resources": {
+          "$ref": "#/definitions/Resources"
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        }
+      },
+      "x-file": "step_background.yaml"
+    },
+    "StepBarrier": {
+      "title": "StepBarrier",
+      "type": "object",
+      "properties": {
+        "ref": {
+          "type": "string"
+        }
+      },
+      "x-file": "step_barrier.yaml"
+    },
+    "StepBitrise": {
+      "title": "StepBitrise",
+      "type": "object",
+      "properties": {
+        "uses": {
+          "type": "string"
+        },
+        "with": {
+          "type": "object"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        },
+        "outputs": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        }
+      },
+      "x-file": "step_bitrise.yaml"
+    },
+    "StepExec": {
+      "title": "StepExec",
+      "type": "object",
+      "properties": {
+        "image": {
+          "type": "string"
+        },
+        "connector": {
+          "type": "string"
+        },
+        "user": {
+          "type": "string"
+        },
+        "group": {
+          "type": "string"
+        },
+        "pull": {
+          "type": "string",
+          "enum": ["always", "never", "if-not-exists"]
+        },
+        "shell": {
+          "type": "string",
+          "enum": ["sh", "bash", "powershell", "pwsh", "python"]
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The step environment variables."
+        },
+        "run": {
+          "type": "string"
+        },
+        "entrypoint": {
+          "type": "string"
+        },
+        "args": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "privileged": {
+          "type": "boolean"
+        },
+        "network": {
+          "type": "string"
+        },
+        "reports": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Report"
+          }
+        },
+        "outputs": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "resources": {
+          "$ref": "#/definitions/Resources"
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        }
+      },
+      "x-file": "step_exec.yaml"
+    },
+    "Report": {
+      "title": "Report",
+      "type": "object",
+      "description": "Report defines a report artifact.",
+      "properties": {
+        "path": {
+          "description": "Path provides the report file path.",
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "type": {
+          "type": "string",
+          "description": "Type provides the report type.",
+          "enum": ["junit", "xunit", "nunit"]
+        }
+      },
+      "required": ["path", "type"],
+      "x-file": "report.yaml"
+    },
+    "StepTest": {
+      "title": "StepTest",
+      "type": "object",
+      "properties": {
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        },
+        "uses": {
+          "type": "string"
+        },
+        "with": {
+          "type": "object"
+        },
+        "splitting": {
+          "$ref": "#/definitions/Splitting"
+        },
+        "reports": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Report"
+          }
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        },
+        "image": {
+          "type": "string"
+        },
+        "connector": {
+          "type": "string"
+        },
+        "user": {
+          "type": "string"
+        },
+        "pull": {
+          "type": "string",
+          "enum": ["always", "never", "if-not-exists"]
+        },
+        "resources": {
+          "$ref": "#/definitions/Resources"
+        }
+      },
+      "examples": [
+        {
+          "type": "test",
+          "spec": {
+            "uses": "maven",
+            "with": {
+              "packages": ["foo", "bar"]
+            },
+            "splitting": {
+              "enabled": true,
+              "concurrency": 3
+            }
+          }
+        }
+      ],
+      "x-file": "step_ti.yaml"
+    },
+    "Splitting": {
+      "title": "Splitting",
+      "type": "object",
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        },
+        "concurrency": {
+          "type": "number"
+        },
+        "strategy": {
+          "type": "string"
+        }
+      },
+      "x-file": "splitting.yaml"
+    },
+    "StepGroup": {
+      "type": "object",
+      "title": "StepGroup",
+      "properties": {
+        "steps": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Step"
+          }
+        }
+      },
+      "x-file": "step_group.yaml"
+    },
+    "StepParallel": {
+      "type": "object",
+      "title": "StepParallel",
+      "properties": {
+        "steps": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Step"
+          }
+        }
+      },
+      "x-file": "step_parallel.yaml"
+    },
+    "StepPlugin": {
+      "title": "StepPlugin",
+      "type": "object",
+      "properties": {
+        "image": {
+          "type": "string"
+        },
+        "uses": {
+          "type": "string"
+        },
+        "connector": {
+          "type": "string"
+        },
+        "pull": {
+          "type": "string",
+          "enum": ["always", "never", "if-not-exists"]
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The step environment variables."
+        },
+        "reports": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Report"
+          }
+        },
+        "privileged": {
+          "type": "boolean"
+        },
+        "user": {
+          "type": "string"
+        },
+        "group": {
+          "type": "string"
+        },
+        "network": {
+          "type": "string"
+        },
+        "with": {
+          "type": "object"
+        },
+        "outputs": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "resources": {
+          "$ref": "#/definitions/Resources"
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        }
+      },
+      "x-file": "step_plugin.yaml"
+    },
+    "StepTemplate": {
+      "type": "object",
+      "title": "StepTemplate",
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Template name."
+        },
+        "inputs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "overlays": {
+          "type": "object"
+        }
+      },
+      "x-file": "step_template.yaml"
+    },
+    "StepJenkins": {
+      "title": "StepJenkins",
+      "type": "object",
+      "properties": {
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        },
+        "path": {
+          "type": "string"
+        },
+        "mirror": {
+          "type": "string"
+        },
+        "plugins": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "mount": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/Mount"
+          }
+        }
+      },
+      "x-file": "step_jenkins.yaml"
+    },
+    "Volume": {
+      "title": "Volume",
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "type": {
+          "type": "string",
+          "enum": ["claim", "config-map", "temp", "host"]
+        }
+      },
+      "required": ["name", "type"],
+      "oneOf": [
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "host"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/VolumeHost"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "claim"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/VolumeClaim"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "temp"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/VolumeTemp"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "allOf": [
+            {
+              "properties": {
+                "type": {
+                  "const": "config-map"
+                }
+              }
+            },
+            {
+              "properties": {
+                "spec": {
+                  "$ref": "#/definitions/VolumeConfigMap"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "x-file": "volume.yaml"
+    },
+    "VolumeHost": {
+      "title": "VolumeHost",
+      "type": "object",
+      "properties": {
+        "path": {
+          "type": "string"
+        }
+      },
+      "required": ["path"],
+      "x-file": "volume_host.yaml"
+    },
+    "VolumeClaim": {
+      "title": "VolumeClaim",
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        }
+      },
+      "required": ["name"],
+      "x-file": "volume_claim.yaml"
+    },
+    "VolumeTemp": {
+      "title": "VolumeTemp",
+      "type": "object",
+      "properties": {
+        "medium": {
+          "type": "string",
+          "enum": ["memory"]
+        },
+        "limit": {
+          "type": ["string", "number"]
+        }
+      },
+      "x-file": "volume_temp.yaml"
+    },
+    "VolumeConfigMap": {
+      "title": "VolumeConfigMap",
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "mode": {
+          "type": "string"
+        },
+        "optional": {
+          "type": "boolean"
+        }
+      },
+      "required": ["name"],
+      "x-file": "volume_config.yaml"
+    },
+    "StageCD": {
+      "properties": {
+        "platform": {
+          "$ref": "#/definitions/Platform",
+          "description": "Configures the target execution platform."
+        },
+        "runtime": {
+          "$ref": "#/definitions/Runtime",
+          "description": "Configures the target runtime engine."
+        },
+        "steps": {
+          "description": "Configures a series of steps to executes.",
+          "items": {
+            "$ref": "#/definitions/Step"
+          },
+          "type": "array"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        }
+      },
+      "type": "object",
+      "title": "StageCD",
+      "x-file": "stage_cd.yaml"
+    },
+    "StageCustom": {
+      "properties": {
+        "platform": {
+          "$ref": "#/definitions/Platform",
+          "description": "Configures the target execution platform."
+        },
+        "runtime": {
+          "$ref": "#/definitions/Runtime",
+          "description": "Configures the target runtime engine."
+        },
+        "steps": {
+          "description": "Configures a series of steps to executes.",
+          "items": {
+            "$ref": "#/definitions/Step"
+          },
+          "type": "array"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        }
+      },
+      "type": "object",
+      "title": "StageCustom",
+      "x-file": "stage_custom.yaml"
+    },
+    "StageInfra": {
+      "properties": {
+        "stack": {
+          "description": "Configures the stack id to be used in the pipeline execution.",
+          "type": "string"
+        },
+        "workflow": {
+          "description": "Configures the workflow to be used in the pipeline execution.",
+          "type": "string",
+          "enum": ["provision", "teardown"]
+        },
+        "clone": {
+          "$ref": "#/definitions/Clone",
+          "description": "Configures the default clone behavior."
+        },
+        "platform": {
+          "$ref": "#/definitions/Platform",
+          "description": "Configures the target execution platform."
+        },
+        "runtime": {
+          "$ref": "#/definitions/Runtime",
+          "description": "Configures the target runtime engine."
+        },
+        "steps": {
+          "description": "Configures a series of steps to executes.",
+          "items": {
+            "$ref": "#/definitions/Step"
+          },
+          "type": "array"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        }
+      },
+      "type": "object",
+      "title": "StageInfra",
+      "x-file": "stage_infra.yaml"
+    },
+    "Clone": {
+      "title": "Clone",
+      "type": "object",
+      "description": "Clone defines the default clone behavior.",
+      "properties": {
+        "depth": {
+          "description": "Depth defines the clone depth.",
+          "type": "number"
+        },
+        "disabled": {
+          "description": "Disabled disables the default clone step.",
+          "type": "boolean"
+        },
+        "insecure": {
+          "description": "Insecure disables ssl verification.",
+          "type": "boolean"
+        },
+        "strategy": {
+          "description": "Strategy configures the clone strategy.",
+          "type": "string",
+          "enum": ["source-branch", "merge"]
+        },
+        "trace": {
+          "description": "Trace enables trace logging.",
+          "type": "boolean"
+        },
+        "ref": {
+          "$ref": "#/definitions/Reference",
+          "description": "Reference defines the clone ref."
+        }
+      },
+      "x-file": "clone.yaml"
+    },
+    "Reference": {
+      "title": "Reference",
+      "description": "Reference defines a git clone reference.",
+      "type": "object",
+      "properties": {
+        "name": {
+          "description": "Name provides ref name.",
+          "type": "string"
+        },
+        "type": {
+          "description": "Type defines the ref type.",
+          "type": "string",
+          "enum": ["branch", "tag", "pr"]
+        },
+        "sha": {
+          "description": "Sha provides the ref sha.",
+          "type": "string"
+        }
+      },
+      "x-file": "reference.yaml"
+    },
+    "StageFlag": {
+      "properties": {
+        "platform": {
+          "$ref": "#/definitions/Platform",
+          "description": "Configures the target execution platform."
+        },
+        "runtime": {
+          "$ref": "#/definitions/Runtime",
+          "description": "Configures the target runtime engine."
+        },
+        "steps": {
+          "description": "Configures a series of steps to executes.",
+          "items": {
+            "$ref": "#/definitions/Step"
+          },
+          "type": "array"
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "The stage environment variables."
+        }
+      },
+      "type": "object",
+      "title": "StageFlag",
+      "x-file": "stage_flag.yaml"
+    },
+    "StageTemplate": {
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Template name."
+        },
+        "inputs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "overlays": {
+          "type": "object"
+        }
+      },
+      "type": "object",
+      "title": "StageTemplate",
+      "x-file": "stage_template.yaml"
+    },
+    "Input": {
+      "title": "Input",
+      "type": "object",
+      "description": "Input defines an input parameter.",
+      "properties": {
+        "type": {
+          "description": "Type defines the input type.",
+          "type": "string",
+          "enum": ["string", "number", "boolean", "array", "map"]
+        },
+        "description": {
+          "type": "string",
+          "description": "Desc defines the input description."
+        },
+        "default": {
+          "type": ["string", "number", "boolean", "array", "object"]
+        },
+        "required": {
+          "type": "boolean",
+          "description": "Required indicates the input is required."
+        },
+        "items": {
+          "$ref": "#/definitions/InputItems",
+          "description": "Items defines an arrat type."
+        },
+        "enum": {
+          "type": "array",
+          "items": {
+            "type": ["string", "number", "boolean"]
+          },
+          "description": "Enum defines a list of accepted input values.",
+          "x-go-type": "[]string"
+        }
+      },
+      "x-file": "input.yaml"
+    },
+    "InputItems": {
+      "title": "InputItems",
+      "type": "object",
+      "description": "InputItems defines an array input type",
+      "properties": {
+        "type": {
+          "description": "Type defines the input type.",
+          "type": "string",
+          "enum": ["string", "number", "boolean"]
+        }
+      },
+      "x-file": "input_items.yaml"
+    },
+    "Default": {
+      "type": "object",
+      "title": "Default",
+      "properties": {
+        "clone": {
+          "$ref": "#/definitions/Clone",
+          "description": "Configures the default clone behavior."
+        },
+        "repository": {
+          "$ref": "#/definitions/Repository",
+          "description": "Configures the default repository."
+        },
+        "registry": {
+          "$ref": "#/definitions/Registry",
+          "description": "Provides the default registry credentials."
+        },
+        "resources": {
+          "$ref": "#/definitions/Resources",
+          "description": "Configures the default stage and step resources."
+        },
+        "delegate": {
+          "description": "Configures the default delegate matching logic.",
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "barriers": {
+          "items": {
+            "$ref": "#/definitions/Barrier"
+          },
+          "type": "array"
+        },
+        "status": {
+          "$ref": "#/definitions/Status",
+          "description": "Configures the scm status checks."
+        },
+        "timeout": {
+          "type": "string",
+          "description": "Configures the pipeline timeout."
+        },
+        "envs": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "Provides the default environment variables."
+        }
+      },
+      "x-file": "default.yaml"
+    },
+    "Repository": {
+      "title": "Repository",
+      "description": "Repository defines a remote git repository.",
+      "type": "object",
+      "properties": {
+        "connector": {
+          "description": "Connector provides the repository connector.",
+          "type": "string"
+        },
+        "name": {
+          "description": "Name provides the repository name.",
+          "type": "string"
+        }
+      },
+      "x-file": "repository.yaml"
+    },
+    "Registry": {
+      "title": "Registry",
+      "description": "Registry provides container registry details.",
+      "type": "object",
+      "properties": {
+        "connector": {
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "array",
+              "items": {
+                "oneOf": [
+                  {
+                    "type": "object",
+                    "$ref": "#/definitions/RegistryConnector"
+                  },
+                  {
+                    "type": "string"
+                  }
+                ]
+              }
+            },
+            {
+              "type": "object",
+              "$ref": "#/definitions/RegistryConnector"
+            }
+          ]
+        },
+        "mirror": {
+          "oneOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          ]
+        }
+      },
+      "x-go-skip": true,
+      "examples": [
+        {
+          "registry": {
+            "connector": "connector.dockerhub"
+          }
+        },
+        {
+          "registry": {
+            "connector": ["connector.dockerhub", "connector.gcr"]
+          }
+        },
+        {
+          "registry": {
+            "connector": [
+              {
+                "name": "connector.dockerhub"
+              },
+              {
+                "name": "connector.gcr",
+                "match": "us.gcr.io"
+              }
+            ]
+          }
+        },
+        {
+          "registry": {
+            "mirror": "mirror.gcr.io"
+          }
+        },
+        {
+          "registry": {
+            "mirror": ["mirror.gcr.io", "mirror.harness.io"]
+          }
+        }
+      ],
+      "x-file": "registry.yaml"
+    },
+    "RegistryConnector": {
+      "title": "RegistryConnector",
+      "description": "RegistryConnector provides a registry connector.",
+      "type": "object",
+      "properties": {
+        "name": {
+          "description": "Name provides the registry connector name.",
+          "type": "string"
+        },
+        "match": {
+          "description": "Match provides the regitry connector endpoint.",
+          "type": "string"
+        }
+      },
+      "x-go-skip": true,
+      "x-file": "registry_conn.yaml"
+    },
+    "Barrier": {
+      "title": "Barrier",
+      "type": "object",
+      "description": "Barrier defines a pipeline barrier.",
+      "properties": {
+        "id": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        }
+      },
+      "x-file": "barrier.yaml"
+    },
+    "Status": {
+      "title": "Status",
+      "type": "object",
+      "properties": {
+        "disabled": {
+          "type": "boolean"
+        },
+        "level": {
+          "type": "string",
+          "enum": ["pipeline", "stage"]
+        },
+        "matrix": {
+          "type": "string",
+          "enum": ["itemize", "summarize"]
+        },
+        "name": {
+          "type": "string"
+        }
+      },
+      "x-file": "status.yaml"
+    }
+  },
+  "oneOf": [
+    {
+      "$ref": "#/definitions/Pipeline"
+    }
+  ]
+}
diff --git a/web/src/utils/Utils.ts b/web/src/utils/Utils.ts
index 043a37397..5e9b1f876 100644
--- a/web/src/utils/Utils.ts
+++ b/web/src/utils/Utils.ts
@@ -88,6 +88,7 @@ export interface SourceCodeEditorProps {
   autoHeight?: boolean
   wordWrap?: boolean
   onChange?: (value: string) => void
+  schema?: Record<string, any>
 }
 
 // Monaco editor has a bug where when its value is set, the value

From de04ff27ec5fe798df343f23d1c60350ad332b0e Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 30 Aug 2023 16:07:45 +0530
Subject: [PATCH 08/38] Added Edit menu

---
 web/src/pages/PipelineList/PipelineList.tsx | 41 ++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index 41f59c2c5..28fd1f670 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react'
+import { Classes, Menu, MenuItem, Popover, Position } from '@blueprintjs/core'
 import {
   Button,
   ButtonVariation,
@@ -69,7 +70,7 @@ const PipelineList = () => {
     () => [
       {
         Header: getString('pipelines.name'),
-        width: 'calc(100% - 180px)',
+        width: 'calc(100% - 210px)',
         Cell: ({ row }: CellProps<TypesPipeline>) => {
           const record = row.original
           return (
@@ -99,6 +100,44 @@ const PipelineList = () => {
           )
         },
         disableSortBy: true
+      },
+      {
+        Header: ' ',
+        width: '30px',
+        Cell: ({ row }: CellProps<TypesPipeline>) => {
+          const [menuOpen, setMenuOpen] = useState(false)
+          const record = row.original
+          const { uid } = record
+          return (
+            <Popover
+              isOpen={menuOpen}
+              onInteraction={nextOpenState => {
+                setMenuOpen(nextOpenState)
+              }}
+              className={Classes.DARK}
+              position={Position.BOTTOM_RIGHT}>
+              <Button
+                variation={ButtonVariation.ICON}
+                icon="Options"
+                data-testid={`menu-${record.uid}`}
+                onClick={e => {
+                  e.stopPropagation()
+                  setMenuOpen(true)
+                }}
+              />
+              <Menu>
+                <MenuItem
+                  icon="edit"
+                  text={getString('edit')}
+                  onClick={e => {
+                    e.stopPropagation()
+                    history.push(routes.toCODEPipelineEdit({ space, pipeline: uid as string }))
+                  }}
+                />
+              </Menu>
+            </Popover>
+          )
+        }
       }
     ],
     [getString, searchTerm]

From d7b556a908ebac3ade5d2f40d93dd6de12168308 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Fri, 1 Sep 2023 15:07:22 +0530
Subject: [PATCH 09/38] Plugins panel integration

---
 .../PluginsPanel/PluginsPanel.module.scss     |  30 +++++
 .../PluginsPanel.module.scss.d.ts             |  11 ++
 .../components/PluginsPanel/PluginsPanel.tsx  | 115 ++++++++++++++++++
 web/src/framework/strings/stringTypes.ts      |   1 +
 web/src/i18n/strings.en.yaml                  |   2 +
 .../pages/NewPipeline/NewPipeline.module.scss |   7 +-
 .../NewPipeline/NewPipeline.module.scss.d.ts  |   1 +
 web/src/pages/NewPipeline/NewPipeline.tsx     |  27 ++--
 8 files changed, 182 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/PluginsPanel/PluginsPanel.module.scss
 create mode 100644 web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
 create mode 100644 web/src/components/PluginsPanel/PluginsPanel.tsx

diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss
new file mode 100644
index 000000000..8644e636b
--- /dev/null
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss
@@ -0,0 +1,30 @@
+.main {
+  height: 100%;
+}
+
+.tabs {
+  width: 100%;
+}
+
+.mainTabPanel {
+  &:global(.bp3-tab-panel[role='tabpanel']) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}
+
+.pluginDetailsPanel {
+  border-top: 1px solid var(--grey-100);
+}
+
+.pluginIcon {
+  background: var(--teal-200) !important;
+  border-radius: 5px;
+}
+
+.plugin {
+  border: 1px solid var(--grey-100);
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
new file mode 100644
index 000000000..c221d1a32
--- /dev/null
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly main: string
+  readonly tabs: string
+  readonly mainTabPanel: string
+  readonly pluginDetailsPanel: string
+  readonly pluginIcon: string
+  readonly plugin: string
+}
+export default styles
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
new file mode 100644
index 000000000..5a1d709f2
--- /dev/null
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react'
+import { Container, Layout, Tab, Tabs, Text } from '@harnessio/uicore'
+import { useStrings } from 'framework/strings'
+
+import css from './PluginsPanel.module.scss'
+import { Color, FontVariation } from '@harnessio/design-system'
+import { Icon, type IconName } from '@harnessio/icons'
+
+enum PluginCategory {
+  Harness,
+  Drone
+}
+
+enum PluginPanelView {
+  Category,
+  Listing
+}
+
+interface PluginInterface {
+  category: PluginCategory
+  name: string
+  description: string
+  icon: IconName
+}
+
+const PluginCategories: PluginInterface[] = [
+  {
+    category: PluginCategory.Harness,
+    name: 'Run',
+    description: 'Run a script on macOS, Linux, or Windows',
+    icon: 'run-step'
+  },
+  { category: PluginCategory.Drone, name: 'Drone', description: 'Run Drone plugins', icon: 'ci-infra' }
+]
+
+export const PluginsPanel = (): JSX.Element => {
+  const { getString } = useStrings()
+  const [category, setCategory] = useState<PluginCategory>()
+  const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Category)
+  const [plugins, setPlugins] = useState<Record<string, any>[]>([])
+
+  useEffect(() => {
+    if (category === PluginCategory.Drone) {
+      setPlugins(plugins)
+    }
+  }, [category])
+
+  const renderPluginCategories = (): JSX.Element => {
+    return (
+      <>
+        {PluginCategories.map((item: PluginInterface) => {
+          const { name, category, description, icon } = item
+          return (
+            <Layout.Horizontal
+              onClick={() => {
+                setCategory(category)
+                if (category === PluginCategory.Drone) {
+                  setPanelView(PluginPanelView.Listing)
+                }
+              }}
+              key={category}
+              padding={{ left: 'medium', right: 'medium', top: 'medium', bottom: 'medium' }}
+              flex={{ justifyContent: 'flex-start' }}
+              className={css.plugin}>
+              <Container padding="small" className={css.pluginIcon}>
+                <Icon name={icon} />
+              </Container>
+              <Layout.Vertical padding={{ left: 'small' }}>
+                <Text color={Color.PRIMARY_7} font={{ variation: FontVariation.BODY2 }}>
+                  {name}
+                </Text>
+                <Text font={{ variation: FontVariation.SMALL }}>{description}</Text>
+              </Layout.Vertical>
+            </Layout.Horizontal>
+          )
+        })}
+      </>
+    )
+  }
+
+  const renderPluginListing = (): JSX.Element => {
+    return <></>
+  }
+
+  const renderPluginsPanel = (): JSX.Element => {
+    switch (panelView) {
+      case PluginPanelView.Category:
+        return renderPluginCategories()
+      case PluginPanelView.Listing:
+        return renderPluginListing()
+      default:
+        return <></>
+    }
+  }
+
+  return (
+    <Container className={css.main}>
+      <Tabs id={'pluginsPanel'} defaultSelectedTabId={'plugins'} className={css.tabs}>
+        <Tab
+          panelClassName={css.mainTabPanel}
+          id="plugins"
+          title={
+            <Text
+              font={{ variation: FontVariation.BODY2 }}
+              padding={{ left: 'small', bottom: 'xsmall', top: 'xsmall' }}
+              color={Color.PRIMARY_7}>
+              {getString('plugins.title')}
+            </Text>
+          }
+          panel={<Container className={css.pluginDetailsPanel}>{renderPluginsPanel()}</Container>}
+        />
+      </Tabs>
+    </Container>
+  )
+}
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index d3e42e786..6a6893752 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -326,6 +326,7 @@ export interface StringsMap {
   'pipelines.run': string
   'pipelines.saveAndRun': string
   'pipelines.yamlPath': string
+  'plugins.title': string
   'pr.ableToMerge': string
   'pr.addDescription': string
   'pr.authorCommentedPR': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 21d1c03aa..c461f1a7a 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -651,3 +651,5 @@ secrets:
   createSecret: Create Secret
 userUpdateSuccess: 'User updated successfully'
 run: Run
+plugins:
+  title: Plugins
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss b/web/src/pages/NewPipeline/NewPipeline.module.scss
index 14732cf6f..7a11fb126 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss
@@ -10,7 +10,12 @@
 }
 
 .editorContainer {
-  height: calc(100vh - var(--header-height) - var(--heading-height)) !important;
+  width: calc(100% - 30vw);
+  height: calc(100vh - var(--header-height)) !important;
+}
+
+.pluginsContainer {
+  width: 30vw;
 }
 
 .header {
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
index b2aaad19f..650bf45af 100644
--- a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
+++ b/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
@@ -4,6 +4,7 @@ declare const styles: {
   readonly main: string
   readonly layout: string
   readonly editorContainer: string
+  readonly pluginsContainer: string
   readonly header: string
   readonly breadcrumb: string
   readonly drawer: string
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index d90bafca1..37e56083d 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -9,6 +9,7 @@ import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'service
 import { useStrings } from 'framework/strings'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import MonacoSourceCodeEditor from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
+import { PluginsPanel } from 'components/PluginsPanel/PluginsPanel'
 import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
@@ -90,17 +91,21 @@ const NewPipeline = (): JSX.Element => {
           }
         />
         <PageBody>
-          <Container className={css.editorContainer}>
-            <MonacoSourceCodeEditor
-              language={'yaml'}
-              schema={pipelineSchema}
-              source={
-                'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
-              }
-              onChange={(value: string) => setPipelineAsYaml(value)}
-              autoHeight
-            />
-          </Container>
+          <Layout.Horizontal>
+            <Container className={css.editorContainer}>
+              <MonacoSourceCodeEditor
+                language={'yaml'}
+                schema={pipelineSchema}
+                source={
+                  'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
+                }
+                onChange={(value: string) => setPipelineAsYaml(value)}
+              />
+            </Container>
+            <Container className={css.pluginsContainer}>
+              <PluginsPanel />
+            </Container>
+          </Layout.Horizontal>
         </PageBody>
       </Container>
     </>

From 89d1eb3626d598ad82a4de5c3c0d3831f52b0b41 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Fri, 1 Sep 2023 17:05:47 +0530
Subject: [PATCH 10/38] Changes for moving pipelines under repos

---
 web/src/RouteDefinitions.ts                   |  2 +-
 web/src/RouteDestinations.tsx                 |  2 +-
 web/src/pages/NewPipeline/NewPipeline.tsx     | 11 ++++----
 .../pages/NewPipeline/NewPipelineModal.tsx    | 27 +++++++++----------
 web/src/pages/PipelineList/PipelineList.tsx   |  7 +++--
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/web/src/RouteDefinitions.ts b/web/src/RouteDefinitions.ts
index d66aa42f9..1d40d7384 100644
--- a/web/src/RouteDefinitions.ts
+++ b/web/src/RouteDefinitions.ts
@@ -97,7 +97,7 @@ export const routes: CODERoutes = {
   toCODESpaceAccessControl: ({ space }) => `/access-control/${space}`,
   toCODESpaceSettings: ({ space }) => `/settings/${space}`,
   toCODEPipelines: ({ repoPath }) => `/${repoPath}/pipelines`,
-  toCODEPipelineEdit: ({ repoPath, pipeline }) => `/${repoPath}/pipeline/${pipeline}/edit`,
+  toCODEPipelineEdit: ({ repoPath, pipeline }) => `/${repoPath}/pipelines/${pipeline}/edit`,
   toCODESecrets: ({ space }) => `/secrets/${space}`,
 
   toCODEGlobalSettings: () => '/settings',
diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index 551941694..06fe973d3 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -187,7 +187,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
         )}
 
         {OPEN_SOURCE_PIPELINES && (
-          <Route path={routes.toCODEPipelineEdit({ space: pathProps.space, pipeline: pathProps.pipeline })} exact>
+          <Route path={routes.toCODEPipelineEdit({ repoPath, pipeline: pathProps.pipeline })} exact>
             <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
               <NewPipeline />
             </LayoutWithSideNav>
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 37e56083d..648f3685b 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
 import { Drawer } from '@blueprintjs/core'
@@ -7,7 +7,7 @@ import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
 import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
 import { useStrings } from 'framework/strings'
-import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
+import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import MonacoSourceCodeEditor from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
 import { PluginsPanel } from 'components/PluginsPanel/PluginsPanel'
 import { useAppContext } from 'AppContext'
@@ -21,14 +21,15 @@ const NewPipeline = (): JSX.Element => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
-  const space = useGetSpaceParam()
+  const { repoMetadata } = useGetRepositoryMetadata()
   const { showError } = useToaster()
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
   const [showDrawer, setShowDrawer] = useState<boolean>(false)
+  const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
-    path: `/api/v1/repos/${space}/vb-repo/+/commits`
+    path: `/api/v1/repos/${repoPath}/+/commits`
   })
 
   const handleSaveAndRun = (): void => {
@@ -73,7 +74,7 @@ const NewPipeline = (): JSX.Element => {
           breadcrumbs={
             <Container className={css.header}>
               <Layout.Horizontal spacing="small" className={css.breadcrumb}>
-                <Link to={routes.toCODEPipelines({ space })}>{getString('pageTitle.pipelines')}</Link>
+                <Link to={routes.toCODEPipelines({ repoPath })}>{getString('pageTitle.pipelines')}</Link>
                 <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
                 <Text font={{ size: 'small' }}>{pipeline}</Text>
               </Layout.Horizontal>
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/NewPipeline/NewPipelineModal.tsx
index cc098d7db..f00019cf1 100644
--- a/web/src/pages/NewPipeline/NewPipelineModal.tsx
+++ b/web/src/pages/NewPipeline/NewPipelineModal.tsx
@@ -1,15 +1,13 @@
-import React from 'react'
+import React, { useMemo, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useMutate } from 'restful-react'
 import * as yup from 'yup'
 import { Button, ButtonVariation, Dialog, FormInput, Formik, FormikForm, Layout, useToaster } from '@harnessio/uicore'
 import { useModalHook } from 'hooks/useModalHook'
-import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import type { OpenapiCreatePipelineRequest, TypesPipeline, TypesRepository } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
-
 interface FormData {
   name: string
   branch: string
@@ -19,15 +17,14 @@ interface FormData {
 const useNewPipelineModal = () => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
-  const space = useGetSpaceParam()
   const history = useHistory()
   const { showError } = useToaster()
-
-  const repoMetadata: TypesRepository = { path: `${space}/vb-repo`, default_branch: 'main' }
+  const [repo, setRepo] = useState<TypesRepository | undefined>()
+  const repoPath = useMemo(() => repo?.path || '', [repo])
 
   const { mutate: savePipeline } = useMutate<TypesPipeline>({
     verb: 'POST',
-    path: `/api/v1/pipelines`
+    path: `/api/v1/repos/${repoPath}/+/pipelines`
   })
 
   const handleCreatePipeline = (formData: FormData): void => {
@@ -36,14 +33,11 @@ const useNewPipelineModal = () => {
       const payload: OpenapiCreatePipelineRequest = {
         config_path: yamlPath,
         default_branch: branch,
-        space_ref: space,
-        repo_ref: repoMetadata.path,
-        repo_type: 'GITNESS',
         uid: name
       }
-      savePipeline(payload)
+      savePipeline(payload, { pathParams: { path: `/api/v1/repos/${repoPath}/+/pipelines` } })
         .then(() => {
-          history.push(routes.toCODEPipelineEdit({ space, pipeline: name }))
+          history.push(routes.toCODEPipelineEdit({ repoPath, pipeline: name }))
           hideModal()
         })
         .catch(error => {
@@ -61,7 +55,7 @@ const useNewPipelineModal = () => {
     return (
       <Dialog isOpen enforceFocus={false} onClose={onClose} title={getString('pipelines.createNewPipeline')}>
         <Formik<FormData>
-          initialValues={{ name: '', branch: repoMetadata.default_branch || '', yamlPath: '' }}
+          initialValues={{ name: '', branch: repo?.default_branch || '', yamlPath: '' }}
           formName="createNewPipeline"
           enableReinitialize={true}
           validationSchema={yup.object().shape({
@@ -106,10 +100,13 @@ const useNewPipelineModal = () => {
         </Formik>
       </Dialog>
     )
-  }, [])
+  }, [repo])
 
   return {
-    openModal,
+    openModal: ({ repoMetadata }: { repoMetadata?: TypesRepository }) => {
+      setRepo(repoMetadata)
+      openModal()
+    },
     hideModal
   }
 }
diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index a2cb40d33..af4ed75ab 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -62,8 +62,9 @@ const PipelineList = () => {
       variation={ButtonVariation.PRIMARY}
       icon="plus"
       onClick={() => {
-        openModal()
+        openModal({ repoMetadata })
       }}
+      disabled={loading}
     />
   )
 
@@ -132,7 +133,9 @@ const PipelineList = () => {
                   text={getString('edit')}
                   onClick={e => {
                     e.stopPropagation()
-                    history.push(routes.toCODEPipelineEdit({ space, pipeline: uid as string }))
+                    history.push(
+                      routes.toCODEPipelineEdit({ repoPath: repoMetadata?.path || '', pipeline: uid as string })
+                    )
                   }}
                 />
               </Menu>

From 7735f2b7a7195c02917de1a966d92cc9f077be21 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Wed, 6 Sep 2023 17:59:38 -0700
Subject: [PATCH 11/38] Plugin panel navigation and form wire up

---
 .../PluginsPanel/PluginsPanel.module.scss     |  31 ++-
 .../PluginsPanel.module.scss.d.ts             |   3 +-
 .../components/PluginsPanel/PluginsPanel.tsx  | 188 ++++++++++++++++--
 web/src/framework/strings/stringTypes.ts      |   2 +
 web/src/i18n/strings.en.yaml                  |   2 +
 5 files changed, 207 insertions(+), 19 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss
index 8644e636b..d5d2232cd 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss
@@ -1,19 +1,23 @@
 .main {
   height: 100%;
-}
-
-.tabs {
-  width: 100%;
+  :global {
+    .bp3-tabs {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .mainTabPanel {
   &:global(.bp3-tab-panel[role='tabpanel']) {
+    height: calc(100% - 30px);
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }
 }
 
 .pluginDetailsPanel {
+  height: 100%;
   border-top: 1px solid var(--grey-100);
 }
 
@@ -28,3 +32,22 @@
     cursor: pointer;
   }
 }
+
+.form {
+  height: 100%;
+  width: 100%;
+  :global {
+    .FormikForm--main {
+      height: 100%;
+      & > div {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.arrow {
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
index c221d1a32..b0469e221 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
@@ -2,10 +2,11 @@
 // this is an auto-generated file
 declare const styles: {
   readonly main: string
-  readonly tabs: string
   readonly mainTabPanel: string
   readonly pluginDetailsPanel: string
   readonly pluginIcon: string
   readonly plugin: string
+  readonly form: string
+  readonly arrow: string
 }
 export default styles
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 5a1d709f2..31701f7d9 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -1,10 +1,15 @@
-import React, { useEffect, useState } from 'react'
-import { Container, Layout, Tab, Tabs, Text } from '@harnessio/uicore'
+import React, { useCallback, useEffect, useState } from 'react'
+import { Formik } from 'formik'
+import { capitalize, get } from 'lodash-es'
+import { useGet } from 'restful-react'
 import { useStrings } from 'framework/strings'
-
-import css from './PluginsPanel.module.scss'
+import { Button, ButtonVariation, Container, FormInput, FormikForm, Layout, Tab, Tabs, Text } from '@harnessio/uicore'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Icon, type IconName } from '@harnessio/icons'
+import { LIST_FETCHING_LIMIT } from 'utils/Utils'
+import type { TypesPlugin } from 'services/code'
+
+import css from './PluginsPanel.module.scss'
 
 enum PluginCategory {
   Harness,
@@ -13,7 +18,8 @@ enum PluginCategory {
 
 enum PluginPanelView {
   Category,
-  Listing
+  Listing,
+  Configuration
 }
 
 interface PluginInterface {
@@ -33,15 +39,54 @@ const PluginCategories: PluginInterface[] = [
   { category: PluginCategory.Drone, name: 'Drone', description: 'Run Drone plugins', icon: 'ci-infra' }
 ]
 
-export const PluginsPanel = (): JSX.Element => {
+const pluginSpecMock = {
+  inputs: {
+    channel: {
+      type: 'string'
+    },
+    token: {
+      type: 'string'
+    }
+  },
+  steps: [
+    {
+      type: 'script',
+      spec: {
+        image: 'plugins/slack'
+      },
+      envs: {
+        PLUGIN_CHANNEL: '<+inputs.channel>'
+      }
+    }
+  ]
+}
+
+export interface PluginsPanelInterface {
+  onPluginAddUpdate?: (isUpdate: boolean, pluginFormData: Record<string, any>) => void
+}
+
+export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
   const { getString } = useStrings()
   const [category, setCategory] = useState<PluginCategory>()
   const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Category)
-  const [plugins, setPlugins] = useState<Record<string, any>[]>([])
+  const [plugin, setPlugin] = useState<TypesPlugin>()
+
+  const {
+    data: plugins,
+    loading,
+    refetch: fetchPlugins
+  } = useGet<TypesPlugin[]>({
+    path: `/api/v1/plugins`,
+    queryParams: {
+      limit: LIST_FETCHING_LIMIT,
+      page: 1
+    },
+    lazy: true
+  })
 
   useEffect(() => {
     if (category === PluginCategory.Drone) {
-      setPlugins(plugins)
+      fetchPlugins()
     }
   }, [category])
 
@@ -78,24 +123,139 @@ export const PluginsPanel = (): JSX.Element => {
     )
   }
 
-  const renderPluginListing = (): JSX.Element => {
-    return <></>
+  const renderPlugins = useCallback((): JSX.Element => {
+    return loading ? (
+      <Container flex={{ justifyContent: 'center' }} padding="large">
+        <Icon name="steps-spinner" color={Color.PRIMARY_7} size={25} />
+      </Container>
+    ) : (
+      <Layout.Vertical spacing="small" padding={{ top: 'small' }}>
+        <Layout.Horizontal
+          flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
+          spacing="small"
+          padding={{ left: 'medium' }}>
+          <Icon
+            name="arrow-left"
+            size={18}
+            onClick={() => {
+              setPanelView(PluginPanelView.Category)
+            }}
+            className={css.arrow}
+          />
+          <Text font={{ variation: FontVariation.H5 }} flex={{ justifyContent: 'center' }}>
+            {getString('plugins.addAPlugin', { category: PluginCategory[category as PluginCategory] })}
+          </Text>
+        </Layout.Horizontal>
+        <Container>
+          {plugins?.map((plugin: TypesPlugin) => {
+            const { uid, description } = plugin
+            return (
+              <Layout.Horizontal
+                flex={{ justifyContent: 'flex-start' }}
+                padding={{ left: 'large', top: 'medium', bottom: 'medium', right: 'large' }}
+                className={css.plugin}
+                onClick={() => {
+                  setPanelView(PluginPanelView.Configuration)
+                  setPlugin(plugin)
+                }}>
+                <Icon name={'gear'} size={25} />
+                <Layout.Vertical padding={{ left: 'small' }}>
+                  <Text font={{ variation: FontVariation.BODY2 }} color={Color.PRIMARY_7}>
+                    {uid}
+                  </Text>
+                  <Text font={{ variation: FontVariation.SMALL }}>{description}</Text>
+                </Layout.Vertical>
+              </Layout.Horizontal>
+            )
+          })}
+        </Container>
+      </Layout.Vertical>
+    )
+  }, [loading, plugins])
+
+  const renderPluginFormField = ({ name, type }: { name: string; type: 'string' }): JSX.Element => {
+    return type === 'string' ? (
+      <FormInput.Text
+        name={name}
+        label={<Text font={{ variation: FontVariation.FORM_INPUT_TEXT }}>{capitalize(name)}</Text>}
+        style={{ width: '100%' }}
+        key={name}
+      />
+    ) : (
+      <></>
+    )
   }
 
-  const renderPluginsPanel = (): JSX.Element => {
+  const renderPluginConfigForm = useCallback((): JSX.Element => {
+    const { uid, spec } = plugin || {}
+    if (spec) {
+      // let specAsObj = {}
+      // try {
+      //   specAsObj = parse(spec)
+      // } catch (e) {
+      //   // ignore error
+      // }
+      const inputs = get(pluginSpecMock, 'inputs', {})
+      return (
+        <Layout.Vertical
+          spacing="medium"
+          margin={{ left: 'xxlarge', top: 'large', right: 'xxlarge', bottom: 'xxlarge' }}
+          height="95%">
+          <Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start' }}>
+            <Icon
+              name="arrow-left"
+              size={18}
+              onClick={() => {
+                setPlugin(undefined)
+                setPanelView(PluginPanelView.Listing)
+              }}
+              className={css.arrow}
+            />
+            <Text font={{ variation: FontVariation.H5 }}>
+              {getString('addLabel')} {uid}
+            </Text>
+          </Layout.Horizontal>
+          <Container className={css.form}>
+            <Formik
+              initialValues={{}}
+              onSubmit={formData => {
+                onPluginAddUpdate?.(false, formData)
+              }}>
+              <FormikForm>
+                <Layout.Vertical flex={{ alignItems: 'flex-start' }} height="100%">
+                  <Layout.Vertical width="100%">
+                    {Object.keys(inputs).map((field: string) => {
+                      const fieldType = get(inputs, `${field}.type`, '') as 'string'
+                      return renderPluginFormField({ name: field, type: fieldType })
+                    })}
+                  </Layout.Vertical>
+                  <Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
+                </Layout.Vertical>
+              </FormikForm>
+            </Formik>
+          </Container>
+        </Layout.Vertical>
+      )
+    }
+    return <></>
+  }, [plugin])
+
+  const renderPluginsPanel = useCallback((): JSX.Element => {
     switch (panelView) {
       case PluginPanelView.Category:
         return renderPluginCategories()
       case PluginPanelView.Listing:
-        return renderPluginListing()
+        return renderPlugins()
+      case PluginPanelView.Configuration:
+        return renderPluginConfigForm()
       default:
         return <></>
     }
-  }
+  }, [loading, plugins, panelView])
 
   return (
     <Container className={css.main}>
-      <Tabs id={'pluginsPanel'} defaultSelectedTabId={'plugins'} className={css.tabs}>
+      <Tabs id={'pluginsPanel'} defaultSelectedTabId={'plugins'}>
         <Tab
           panelClassName={css.mainTabPanel}
           id="plugins"
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 8eb522d35..827b20114 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -11,6 +11,7 @@ export interface StringsMap {
   add: string
   addComment: string
   addGitIgnore: string
+  addLabel: string
   addLicense: string
   addMember: string
   addNewFile: string
@@ -328,6 +329,7 @@ export interface StringsMap {
   'pipelines.run': string
   'pipelines.saveAndRun': string
   'pipelines.yamlPath': string
+  'plugins.addAPlugin': string
   'plugins.title': string
   'pr.ableToMerge': string
   'pr.addDescription': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 5796f3388..2bb51cde2 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -488,6 +488,7 @@ showCommitHistory: Renamed from {file} - Show History
 noReviewers: No Reviewers
 assignPeople: Assign people
 add: Add +
+addLabel: Add
 users: Users
 findAUser: Find a user
 reviewerNotFound: 'Reviewer <strong>{{reviewer}}</strong> not found.'
@@ -655,3 +656,4 @@ userUpdateSuccess: 'User updated successfully'
 run: Run
 plugins:
   title: Plugins
+  addAPlugin: Add a {{category}} plugin

From b0a4946d80351c50f65a35b4760c17b3c8f2a2ff Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 03:27:03 -0700
Subject: [PATCH 12/38] run pipeline integration

---
 .../components/PluginsPanel/PluginsPanel.tsx  | 110 ++++++++++--------
 .../RunPipelineModal/RunPipelineModal.tsx     | 103 ++++++++++++++++
 web/src/framework/strings/stringTypes.ts      |   2 +
 web/src/i18n/strings.en.yaml                  |   2 +
 web/src/pages/NewPipeline/NewPipeline.tsx     |  26 ++---
 .../pages/NewPipeline/NewPipelineModal.tsx    |   1 +
 6 files changed, 176 insertions(+), 68 deletions(-)
 create mode 100644 web/src/components/RunPipelineModal/RunPipelineModal.tsx

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 31701f7d9..58c7cb99a 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -39,7 +39,7 @@ const PluginCategories: PluginInterface[] = [
   { category: PluginCategory.Drone, name: 'Drone', description: 'Run Drone plugins', icon: 'ci-infra' }
 ]
 
-const pluginSpecMock = {
+const dronePluginSpecMock = {
   inputs: {
     channel: {
       type: 'string'
@@ -61,6 +61,14 @@ const pluginSpecMock = {
   ]
 }
 
+const runStepSpec = {
+  inputs: {
+    script: {
+      type: 'string'
+    }
+  }
+}
+
 export interface PluginsPanelInterface {
   onPluginAddUpdate?: (isUpdate: boolean, pluginFormData: Record<string, any>) => void
 }
@@ -101,6 +109,9 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
                 setCategory(category)
                 if (category === PluginCategory.Drone) {
                   setPanelView(PluginPanelView.Listing)
+                } else if (category === PluginCategory.Harness) {
+                  setPlugin({ uid: getString('run') })
+                  setPanelView(PluginPanelView.Configuration)
                 }
               }}
               key={category}
@@ -187,58 +198,57 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
   }
 
   const renderPluginConfigForm = useCallback((): JSX.Element => {
-    const { uid, spec } = plugin || {}
-    if (spec) {
-      // let specAsObj = {}
-      // try {
-      //   specAsObj = parse(spec)
-      // } catch (e) {
-      //   // ignore error
-      // }
-      const inputs = get(pluginSpecMock, 'inputs', {})
-      return (
-        <Layout.Vertical
-          spacing="medium"
-          margin={{ left: 'xxlarge', top: 'large', right: 'xxlarge', bottom: 'xxlarge' }}
-          height="95%">
-          <Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start' }}>
-            <Icon
-              name="arrow-left"
-              size={18}
-              onClick={() => {
-                setPlugin(undefined)
+    // TODO obtain plugin input spec by parsing YAML
+    const inputs = get(category === PluginCategory.Drone ? dronePluginSpecMock : runStepSpec, 'inputs', {})
+    return (
+      <Layout.Vertical
+        spacing="medium"
+        margin={{ left: 'xxlarge', top: 'large', right: 'xxlarge', bottom: 'xxlarge' }}
+        height="95%">
+        <Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start' }}>
+          <Icon
+            name="arrow-left"
+            size={18}
+            onClick={() => {
+              setPlugin(undefined)
+              if (category === PluginCategory.Drone) {
                 setPanelView(PluginPanelView.Listing)
-              }}
-              className={css.arrow}
-            />
+              } else if (category === PluginCategory.Harness) {
+                setPanelView(PluginPanelView.Category)
+              }
+            }}
+            className={css.arrow}
+          />
+          {plugin?.uid ? (
             <Text font={{ variation: FontVariation.H5 }}>
-              {getString('addLabel')} {uid}
+              {getString('addLabel')} {plugin.uid} {getString('plugins.stepLabel')}
             </Text>
-          </Layout.Horizontal>
-          <Container className={css.form}>
-            <Formik
-              initialValues={{}}
-              onSubmit={formData => {
-                onPluginAddUpdate?.(false, formData)
-              }}>
-              <FormikForm>
-                <Layout.Vertical flex={{ alignItems: 'flex-start' }} height="100%">
-                  <Layout.Vertical width="100%">
-                    {Object.keys(inputs).map((field: string) => {
-                      const fieldType = get(inputs, `${field}.type`, '') as 'string'
-                      return renderPluginFormField({ name: field, type: fieldType })
-                    })}
-                  </Layout.Vertical>
-                  <Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
+          ) : (
+            <></>
+          )}
+        </Layout.Horizontal>
+        <Container className={css.form}>
+          <Formik
+            initialValues={{}}
+            onSubmit={formData => {
+              onPluginAddUpdate?.(false, formData)
+            }}>
+            <FormikForm>
+              <Layout.Vertical flex={{ alignItems: 'flex-start' }} height="100%">
+                <Layout.Vertical width="100%">
+                  {Object.keys(inputs).map((field: string) => {
+                    const fieldType = get(inputs, `${field}.type`, '') as 'string'
+                    return renderPluginFormField({ name: field, type: fieldType })
+                  })}
                 </Layout.Vertical>
-              </FormikForm>
-            </Formik>
-          </Container>
-        </Layout.Vertical>
-      )
-    }
-    return <></>
-  }, [plugin])
+                <Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
+              </Layout.Vertical>
+            </FormikForm>
+          </Formik>
+        </Container>
+      </Layout.Vertical>
+    )
+  }, [plugin, category])
 
   const renderPluginsPanel = useCallback((): JSX.Element => {
     switch (panelView) {
@@ -251,7 +261,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
       default:
         return <></>
     }
-  }, [loading, plugins, panelView])
+  }, [loading, plugins, panelView, category])
 
   return (
     <Container className={css.main}>
diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.tsx b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
new file mode 100644
index 000000000..6cc83013b
--- /dev/null
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
@@ -0,0 +1,103 @@
+import React, { useMemo, useState } from 'react'
+import * as yup from 'yup'
+import { FontVariation } from '@harnessio/design-system'
+import {
+  Button,
+  ButtonVariation,
+  Dialog,
+  FormInput,
+  Formik,
+  FormikForm,
+  Layout,
+  Text,
+  useToaster
+} from '@harnessio/uicore'
+import { useStrings } from 'framework/strings'
+import { useModalHook } from 'hooks/useModalHook'
+import type { OpenapiCreateExecutionRequest, TypesExecution, TypesRepository } from 'services/code'
+import { useMutate } from 'restful-react'
+import { getErrorMessage } from 'utils/Utils'
+import { useHistory } from 'react-router'
+import { useAppContext } from 'AppContext'
+
+interface FormData {
+  branch: string
+}
+
+const useRunPipelineModal = () => {
+  const { routes } = useAppContext()
+  const { getString } = useStrings()
+  const { showError } = useToaster()
+  const history = useHistory()
+  const [repo, setRepo] = useState<TypesRepository>()
+  const [pipeline, setPipeline] = useState<string>('')
+  const repoPath = useMemo(() => repo?.path || '', [repo])
+
+  const { mutate: startExecution } = useMutate<TypesExecution>({
+    verb: 'POST',
+    path: `/api/v1/repos/${repoPath}/+/pipelines/${pipeline}/executions`
+  })
+
+  const runPipeline = (_formData: FormData): void => {
+    try {
+      const payload: OpenapiCreateExecutionRequest = {
+        status: ''
+      }
+      startExecution(payload, { pathParams: { path: `/api/v1/repos/${repoPath}/+/pipelines/${pipeline}/executions` } })
+        .then(() => {
+          history.push(routes.toCODEExecutions({ repoPath, pipeline }))
+          hideModal()
+        })
+        .catch(error => {
+          showError(getErrorMessage(error), 0, 'pipelines.failedToRunPipeline')
+        })
+    } catch (exception) {
+      showError(getErrorMessage(exception), 0, 'pipelines.failedToRunPipeline')
+    }
+  }
+
+  const [openModal, hideModal] = useModalHook(() => {
+    const onClose = () => {
+      hideModal()
+    }
+    return (
+      <Dialog isOpen enforceFocus={false} onClose={onClose} title={getString('pipelines.run')}>
+        <Formik
+          formName="run-pipeline-form"
+          initialValues={{ branch: repo?.default_branch || '' }}
+          validationSchema={yup.object().shape({
+            branch: yup
+              .string()
+              .trim()
+              .required(`${getString('branch')} ${getString('isRequired')}`)
+          })}
+          onSubmit={runPipeline}
+          enableReinitialize>
+          <FormikForm>
+            <Layout.Vertical spacing="medium">
+              <FormInput.Text
+                name="branch"
+                label={<Text font={{ variation: FontVariation.FORM_LABEL }}>{getString('branch')}</Text>}
+              />
+              <Layout.Horizontal spacing="medium">
+                <Button variation={ButtonVariation.PRIMARY} type="submit" text={getString('pipelines.run')} />
+                <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
+              </Layout.Horizontal>
+            </Layout.Vertical>
+          </FormikForm>
+        </Formik>
+      </Dialog>
+    )
+  }, [repo?.default_branch, pipeline])
+
+  return {
+    openModal: ({ repoMetadata, pipeline }: { repoMetadata: TypesRepository; pipeline: string }) => {
+      setRepo(repoMetadata)
+      setPipeline(pipeline)
+      openModal()
+    },
+    hideModal
+  }
+}
+
+export default useRunPipelineModal
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 827b20114..42acfa009 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -323,6 +323,7 @@ export interface StringsMap {
   'pipelines.enterPipelineName': string
   'pipelines.enterYAMLPath': string
   'pipelines.failedToCreatePipeline': string
+  'pipelines.failedToRunPipeline': string
   'pipelines.name': string
   'pipelines.newPipelineButton': string
   'pipelines.noData': string
@@ -330,6 +331,7 @@ export interface StringsMap {
   'pipelines.saveAndRun': string
   'pipelines.yamlPath': string
   'plugins.addAPlugin': string
+  'plugins.stepLabel': string
   'plugins.title': string
   'pr.ableToMerge': string
   'pr.addDescription': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 2bb51cde2..6d7405fa4 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -636,6 +636,7 @@ pipelines:
   saveAndRun: Save and Run
   editPipeline: Edit pipeline {{pipeline}}
   run: Run pipeline
+  failedToRunPipeline: Failed to run pipeline
 executions:
   noData: There are no executions :(
   newExecutionButton: Run Pipeline
@@ -657,3 +658,4 @@ run: Run
 plugins:
   title: Plugins
   addAPlugin: Add a {{category}} plugin
+  stepLabel: step
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/NewPipeline/NewPipeline.tsx
index 648f3685b..f03cfc3ef 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/NewPipeline/NewPipeline.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react'
 import { useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
-import { Drawer } from '@blueprintjs/core'
 import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text, useToaster } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
@@ -10,6 +9,7 @@ import { useStrings } from 'framework/strings'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import MonacoSourceCodeEditor from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
 import { PluginsPanel } from 'components/PluginsPanel/PluginsPanel'
+import useRunPipelineModal from 'components/RunPipelineModal/RunPipelineModal'
 import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
@@ -24,7 +24,7 @@ const NewPipeline = (): JSX.Element => {
   const { repoMetadata } = useGetRepositoryMetadata()
   const { showError } = useToaster()
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
-  const [showDrawer, setShowDrawer] = useState<boolean>(false)
+  const { openModal: openRunPipelineModal } = useRunPipelineModal()
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
@@ -36,14 +36,18 @@ const NewPipeline = (): JSX.Element => {
     try {
       const data: OpenapiCommitFilesRequest = {
         actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
-        branch: 'main',
+        branch: repoMetadata?.default_branch,
         new_branch: '',
         title: `Create pipeline ${pipeline}`,
         message: ''
       }
 
       mutate(data)
-        .then(() => setShowDrawer(true))
+        .then(() => {
+          if (repoMetadata && pipeline) {
+            openRunPipelineModal({ repoMetadata, pipeline })
+          }
+        })
         .catch(error => {
           showError(getErrorMessage(error), 0, 'pipelines.failedToSavePipeline')
         })
@@ -54,20 +58,6 @@ const NewPipeline = (): JSX.Element => {
 
   return (
     <>
-      {showDrawer && (
-        <Drawer isOpen={showDrawer} title={getString('pipelines.run')} onClose={() => setShowDrawer(false)}>
-          <Layout.Vertical padding="xlarge" flex={{ justifyContent: 'flex-end' }} className={css.drawer}>
-            <Layout.Horizontal spacing="medium" flex={{ justifyContent: 'flex-start' }} width="100%">
-              <Button variation={ButtonVariation.PRIMARY} text={getString('run')} />
-              <Button
-                variation={ButtonVariation.SECONDARY}
-                text={getString('cancel')}
-                onClick={() => setShowDrawer(false)}
-              />
-            </Layout.Horizontal>
-          </Layout.Vertical>
-        </Drawer>
-      )}
       <Container className={css.main}>
         <PageHeader
           title={getString('pipelines.editPipeline', { pipeline })}
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/NewPipeline/NewPipelineModal.tsx
index f00019cf1..e63c1ee85 100644
--- a/web/src/pages/NewPipeline/NewPipelineModal.tsx
+++ b/web/src/pages/NewPipeline/NewPipelineModal.tsx
@@ -8,6 +8,7 @@ import type { OpenapiCreatePipelineRequest, TypesPipeline, TypesRepository } fro
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
+
 interface FormData {
   name: string
   branch: string

From 1553cce69885e7fc58f5878017da3c5c9ccb64f6 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 04:06:14 -0700
Subject: [PATCH 13/38] Schema integration for Editor

---
 web/config/webpack.common.js                  | 12 ++++
 web/package.json                              |  1 +
 .../MonacoSourceCodeEditor.tsx                |  8 ++-
 web/yarn.lock                                 | 66 +++++++++++++++++++
 4 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/web/config/webpack.common.js b/web/config/webpack.common.js
index e9e6cd9e8..b4561a0e6 100644
--- a/web/config/webpack.common.js
+++ b/web/config/webpack.common.js
@@ -221,6 +221,18 @@ module.exports = {
         'vb',
         'xml',
         'yaml'
+      ],
+      globalAPI: true,
+      filename: '[name].worker.[contenthash:6].js',
+      customLanguages: [
+        {
+          label: 'yaml',
+          entry: 'monaco-yaml',
+          worker: {
+            id: 'monaco-yaml/yamlWorker',
+            entry: 'monaco-yaml/yaml.worker'
+          }
+        }
       ]
     })
   ]
diff --git a/web/package.json b/web/package.json
index aff42ed68..e95495f15 100644
--- a/web/package.json
+++ b/web/package.json
@@ -63,6 +63,7 @@
     "moment": "^2.25.3",
     "monaco-editor": "^0.37.1",
     "monaco-editor-webpack-plugin": "^7.0.1",
+    "monaco-yaml": "^4.0.4",
     "qs": "^6.9.4",
     "react": "^17.0.2",
     "react-complex-tree": "^1.1.11",
diff --git a/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx b/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
index cb6c22f39..a86842a90 100644
--- a/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
+++ b/web/src/components/SourceCodeEditor/MonacoSourceCodeEditor.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import * as monaco from 'monaco-editor'
 import type monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
 import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor'
+import { setDiagnosticsOptions } from 'monaco-yaml'
 import { noop } from 'lodash-es'
 import { SourceCodeEditorProps, PLAIN_TEXT } from 'utils/Utils'
 import { useEventListener } from 'hooks/useEventListener'
@@ -52,8 +53,8 @@ export default function MonacoSourceCodeEditor({
   }, [])
 
   useEffect(() => {
-    if (window.monaco && language === 'yaml' && schema) {
-      monaco.languages.yaml?.yamlDefaults?.setDiagnosticsOptions?.({
+    if (language === 'yaml' && schema) {
+      setDiagnosticsOptions({
         validate: true,
         enableSchemaRequest: false,
         hover: true,
@@ -61,7 +62,8 @@ export default function MonacoSourceCodeEditor({
         schemas: [
           {
             fileMatch: ['*'],
-            schema
+            schema,
+            uri: 'https://github.com/harness/harness-schema'
           }
         ]
       })
diff --git a/web/yarn.lock b/web/yarn.lock
index ada8c1cd1..d41feea7a 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1382,6 +1382,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/json-schema@^7.0.0":
+  version "7.0.12"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
+  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -6610,6 +6615,11 @@ json5@^1.0.1, json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
+jsonc-parser@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -7568,6 +7578,32 @@ monaco-editor@^0.37.1:
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.37.1.tgz#d6f5ffb593e019e74e19bf8a2bdef5a691876f4e"
   integrity sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg==
 
+monaco-marker-data-provider@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/monaco-marker-data-provider/-/monaco-marker-data-provider-1.1.1.tgz#0ca69f367152f5aa12cec2bda95f32b7403e876f"
+  integrity sha512-PGB7TJSZE5tmHzkxv/OEwK2RGNC2A7dcq4JRJnnj31CUAsfmw0Gl+1QTrH0W0deKhcQmQM0YVPaqgQ+0wCt8Mg==
+
+monaco-worker-manager@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz#f67c54dfca34ed4b225d5de84e77b24b4e36de8a"
+  integrity sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==
+
+monaco-yaml@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/monaco-yaml/-/monaco-yaml-4.0.4.tgz#b05283a5539bf109d228982bd25772664651af96"
+  integrity sha512-qbM36fY1twpDUs4lhhxoXDQGUPVyYAFCPJi3E0JKgLioD8wzsD/pawgauFFXSzpMa09z8wbt/DTLXjXEehnVFA==
+  dependencies:
+    "@types/json-schema" "^7.0.0"
+    jsonc-parser "^3.0.0"
+    monaco-marker-data-provider "^1.0.0"
+    monaco-worker-manager "^2.0.0"
+    path-browserify "^1.0.0"
+    prettier "^2.0.0"
+    vscode-languageserver-textdocument "^1.0.0"
+    vscode-languageserver-types "^3.0.0"
+    vscode-uri "^3.0.0"
+    yaml "^2.0.0"
+
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -8183,6 +8219,11 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==
 
+path-browserify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -8386,6 +8427,11 @@ prepend-http@^1.0.1:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==
 
+prettier@^2.0.0:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 prettier@^2.3.2, prettier@^2.6.2:
   version "2.8.7"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
@@ -10744,6 +10790,21 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
+vscode-languageserver-textdocument@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.8.tgz#9eae94509cbd945ea44bca8dcfe4bb0c15bb3ac0"
+  integrity sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==
+
+vscode-languageserver-types@^3.0.0:
+  version "3.17.3"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.3.tgz#72d05e47b73be93acb84d6e311b5786390f13f64"
+  integrity sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==
+
+vscode-uri@^3.0.0:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.7.tgz#6d19fef387ee6b46c479e5fb00870e15e58c1eb8"
+  integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -11182,6 +11243,11 @@ yaml@^1.10.0, yaml@^1.7.2, yaml@^1.8.3:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.0.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+
 yargs-parser@20.x:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"

From bd9245e8ec83be5c40cb7b85c927ad9d86e22043 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 04:13:40 -0700
Subject: [PATCH 14/38] component rename

---
 web/src/RouteDestinations.tsx                       |  4 ++--
 .../AddUpdatePipeline.module.scss}                  |  0
 .../AddUpdatePipeline.module.scss.d.ts}             |  0
 .../AddUpdatePipeline.tsx}                          | 13 +++++++------
 .../NewPipelineModal.tsx                            |  0
 .../schema/pipeline-schema.json                     |  0
 web/src/pages/PipelineList/PipelineList.tsx         |  2 +-
 7 files changed, 10 insertions(+), 9 deletions(-)
 rename web/src/pages/{NewPipeline/NewPipeline.module.scss => AddUpdatePipeline/AddUpdatePipeline.module.scss} (100%)
 rename web/src/pages/{NewPipeline/NewPipeline.module.scss.d.ts => AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts} (100%)
 rename web/src/pages/{NewPipeline/NewPipeline.tsx => AddUpdatePipeline/AddUpdatePipeline.tsx} (92%)
 rename web/src/pages/{NewPipeline => AddUpdatePipeline}/NewPipelineModal.tsx (100%)
 rename web/src/pages/{NewPipeline => AddUpdatePipeline}/schema/pipeline-schema.json (100%)

diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index 06fe973d3..2a6752dcf 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -31,7 +31,7 @@ import { useFeatureFlag } from 'hooks/useFeatureFlag'
 import ExecutionList from 'pages/ExecutionList/ExecutionList'
 import Execution from 'pages/Execution/Execution'
 import Secret from 'pages/Secret/Secret'
-import NewPipeline from 'pages/NewPipeline/NewPipeline'
+import AddUpdatePipeline from 'pages/AddUpdatePipeline/AddUpdatePipeline'
 
 export const RouteDestinations: React.FC = React.memo(function RouteDestinations() {
   const { getString } = useStrings()
@@ -189,7 +189,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
         {OPEN_SOURCE_PIPELINES && (
           <Route path={routes.toCODEPipelineEdit({ repoPath, pipeline: pathProps.pipeline })} exact>
             <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
-              <NewPipeline />
+              <AddUpdatePipeline />
             </LayoutWithSideNav>
           </Route>
         )}
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss
similarity index 100%
rename from web/src/pages/NewPipeline/NewPipeline.module.scss
rename to web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss
diff --git a/web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts
similarity index 100%
rename from web/src/pages/NewPipeline/NewPipeline.module.scss.d.ts
rename to web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts
diff --git a/web/src/pages/NewPipeline/NewPipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
similarity index 92%
rename from web/src/pages/NewPipeline/NewPipeline.tsx
rename to web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index f03cfc3ef..09e891b2a 100644
--- a/web/src/pages/NewPipeline/NewPipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -15,9 +15,12 @@ import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
 import pipelineSchema from './schema/pipeline-schema.json'
 
-import css from './NewPipeline.module.scss'
+import css from './AddUpdatePipeline.module.scss'
 
-const NewPipeline = (): JSX.Element => {
+const starterPipelineAsString =
+  'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
+
+const AddUpdatePipeline = (): JSX.Element => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
@@ -87,9 +90,7 @@ const NewPipeline = (): JSX.Element => {
               <MonacoSourceCodeEditor
                 language={'yaml'}
                 schema={pipelineSchema}
-                source={
-                  'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
-                }
+                source={starterPipelineAsString}
                 onChange={(value: string) => setPipelineAsYaml(value)}
               />
             </Container>
@@ -103,4 +104,4 @@ const NewPipeline = (): JSX.Element => {
   )
 }
 
-export default NewPipeline
+export default AddUpdatePipeline
diff --git a/web/src/pages/NewPipeline/NewPipelineModal.tsx b/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
similarity index 100%
rename from web/src/pages/NewPipeline/NewPipelineModal.tsx
rename to web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
diff --git a/web/src/pages/NewPipeline/schema/pipeline-schema.json b/web/src/pages/AddUpdatePipeline/schema/pipeline-schema.json
similarity index 100%
rename from web/src/pages/NewPipeline/schema/pipeline-schema.json
rename to web/src/pages/AddUpdatePipeline/schema/pipeline-schema.json
diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index 0d6f71aa8..7d1a6936b 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -36,7 +36,7 @@ import { getStatus } from 'utils/PipelineUtils'
 import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import noPipelineImage from '../RepositoriesListing/no-repo.svg'
 import css from './PipelineList.module.scss'
-import useNewPipelineModal from 'pages/NewPipeline/NewPipelineModal'
+import useNewPipelineModal from 'pages/AddUpdatePipeline/NewPipelineModal'
 
 const PipelineList = () => {
   const { routes } = useAppContext()

From 3cde715e5f787540aa340639bfc59eb6128b269c Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 10:56:56 -0700
Subject: [PATCH 15/38] Fix pipeline yaml file open and update

---
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   | 47 ++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 09e891b2a..77a3562fb 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -1,18 +1,22 @@
-import React, { useMemo, useState } from 'react'
-import { useMutate } from 'restful-react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { useGet, useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
+import { isEmpty, isUndefined } from 'lodash'
 import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text, useToaster } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
-import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse } from 'services/code'
+import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse, RepoFileContent, TypesPipeline } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
+import { useGetResourceContent } from 'hooks/useGetResourceContent'
 import MonacoSourceCodeEditor from 'components/SourceCodeEditor/MonacoSourceCodeEditor'
 import { PluginsPanel } from 'components/PluginsPanel/PluginsPanel'
 import useRunPipelineModal from 'components/RunPipelineModal/RunPipelineModal'
+import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
 import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
+import { decodeGitContent } from 'utils/GitUtils'
 import pipelineSchema from './schema/pipeline-schema.json'
 
 import css from './AddUpdatePipeline.module.scss'
@@ -29,19 +33,45 @@ const AddUpdatePipeline = (): JSX.Element => {
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
   const { openModal: openRunPipelineModal } = useRunPipelineModal()
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
+  const [isExistingPipeline, setIsExistingPipeline] = useState<boolean>(false)
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
     path: `/api/v1/repos/${repoPath}/+/commits`
   })
 
+  // Fetch pipeline metadata to fetch pipeline YAML file content
+  const { data: pipelineData, loading: fetchingPipeline } = useGet<TypesPipeline>({
+    path: `/api/v1/repos/${repoPath}/+/pipelines/${pipeline}`,
+    lazy: !repoMetadata
+  })
+
+  const { data: resourceContent, loading: resourceLoading } = useGetResourceContent({
+    repoMetadata,
+    gitRef: pipelineData?.default_branch || '',
+    resourcePath: pipelineData?.config_path || ''
+  })
+
+  useEffect(() => {
+    if (!resourceLoading) {
+      setIsExistingPipeline(!isEmpty(pipelineData) && !isUndefined(pipelineData.id))
+    }
+  }, [resourceContent, resourceLoading])
+
   const handleSaveAndRun = (): void => {
     try {
       const data: OpenapiCommitFilesRequest = {
-        actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
+        actions: [
+          {
+            action: isExistingPipeline ? 'UPDATE' : 'CREATE',
+            path: pipelineData?.config_path,
+            payload: pipelineAsYAML,
+            sha: isExistingPipeline ? resourceContent?.sha : ''
+          }
+        ],
         branch: repoMetadata?.default_branch,
         new_branch: '',
-        title: `Create pipeline ${pipeline}`,
+        title: `${isExistingPipeline ? getString('updated') : getString('created')} pipeline ${pipeline}`,
         message: ''
       }
 
@@ -85,12 +115,17 @@ const AddUpdatePipeline = (): JSX.Element => {
           }
         />
         <PageBody>
+          <LoadingSpinner visible={fetchingPipeline} />
           <Layout.Horizontal>
             <Container className={css.editorContainer}>
               <MonacoSourceCodeEditor
                 language={'yaml'}
                 schema={pipelineSchema}
-                source={starterPipelineAsString}
+                source={
+                  isExistingPipeline
+                    ? decodeGitContent((resourceContent?.content as RepoFileContent)?.data)
+                    : starterPipelineAsString
+                }
                 onChange={(value: string) => setPipelineAsYaml(value)}
               />
             </Container>

From 3848a98570a24b163f4e43e9e4bcb0e338ef76a1 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 11:29:58 -0700
Subject: [PATCH 16/38] Fix commit logic

---
 .../pages/AddUpdatePipeline/AddUpdatePipeline.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 77a3562fb..2b86cd0fb 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -22,7 +22,7 @@ import pipelineSchema from './schema/pipeline-schema.json'
 import css from './AddUpdatePipeline.module.scss'
 
 const starterPipelineAsString =
-  'stages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
+  'version: 1\nstages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
 
 const AddUpdatePipeline = (): JSX.Element => {
   const { routes } = useAppContext()
@@ -46,7 +46,7 @@ const AddUpdatePipeline = (): JSX.Element => {
     lazy: !repoMetadata
   })
 
-  const { data: resourceContent, loading: resourceLoading } = useGetResourceContent({
+  const { data: pipelineYAMLFileContent, loading: resourceLoading } = useGetResourceContent({
     repoMetadata,
     gitRef: pipelineData?.default_branch || '',
     resourcePath: pipelineData?.config_path || ''
@@ -54,9 +54,9 @@ const AddUpdatePipeline = (): JSX.Element => {
 
   useEffect(() => {
     if (!resourceLoading) {
-      setIsExistingPipeline(!isEmpty(pipelineData) && !isUndefined(pipelineData.id))
+      setIsExistingPipeline(!isEmpty(pipelineYAMLFileContent) && !isUndefined(pipelineYAMLFileContent.content))
     }
-  }, [resourceContent, resourceLoading])
+  }, [pipelineYAMLFileContent, resourceLoading])
 
   const handleSaveAndRun = (): void => {
     try {
@@ -66,7 +66,7 @@ const AddUpdatePipeline = (): JSX.Element => {
             action: isExistingPipeline ? 'UPDATE' : 'CREATE',
             path: pipelineData?.config_path,
             payload: pipelineAsYAML,
-            sha: isExistingPipeline ? resourceContent?.sha : ''
+            sha: isExistingPipeline ? pipelineYAMLFileContent?.sha : ''
           }
         ],
         branch: repoMetadata?.default_branch,
@@ -122,9 +122,8 @@ const AddUpdatePipeline = (): JSX.Element => {
                 language={'yaml'}
                 schema={pipelineSchema}
                 source={
-                  isExistingPipeline
-                    ? decodeGitContent((resourceContent?.content as RepoFileContent)?.data)
-                    : starterPipelineAsString
+                  decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data) ||
+                  starterPipelineAsString
                 }
                 onChange={(value: string) => setPipelineAsYaml(value)}
               />

From 423587822b541f58739c1834399c8f0110fc9d17 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 14:54:33 -0700
Subject: [PATCH 17/38] Plugin insertion basic integration

---
 .../components/PluginsPanel/PluginsPanel.tsx  | 14 ++++-
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   | 61 ++++++++++++++++---
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 58c7cb99a..a27843e58 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -70,7 +70,7 @@ const runStepSpec = {
 }
 
 export interface PluginsPanelInterface {
-  onPluginAddUpdate?: (isUpdate: boolean, pluginFormData: Record<string, any>) => void
+  onPluginAddUpdate: (isUpdate: boolean, pluginFormData: Record<string, any>) => void
 }
 
 export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
@@ -197,6 +197,16 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
     )
   }
 
+  const constructPayloadForYAMLInsertion = (isUpdate: boolean, pluginFormData: Record<string, any>) => {
+    let constructedPayload = { ...pluginFormData }
+    switch (category) {
+      case PluginCategory.Drone:
+      case PluginCategory.Harness:
+        constructedPayload = { type: 'script', spec: constructedPayload }
+    }
+    onPluginAddUpdate?.(isUpdate, constructedPayload)
+  }
+
   const renderPluginConfigForm = useCallback((): JSX.Element => {
     // TODO obtain plugin input spec by parsing YAML
     const inputs = get(category === PluginCategory.Drone ? dronePluginSpecMock : runStepSpec, 'inputs', {})
@@ -231,7 +241,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
           <Formik
             initialValues={{}}
             onSubmit={formData => {
-              onPluginAddUpdate?.(false, formData)
+              constructPayloadForYAMLInsertion(false, formData)
             }}>
             <FormikForm>
               <Layout.Vertical flex={{ alignItems: 'flex-start' }} height="100%">
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 2b86cd0fb..5d5be63a0 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { useGet, useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
-import { isEmpty, isUndefined } from 'lodash'
+import { get, isEmpty, isUndefined, set } from 'lodash'
+import { stringify } from 'yaml'
 import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text, useToaster } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
@@ -21,8 +22,24 @@ import pipelineSchema from './schema/pipeline-schema.json'
 
 import css from './AddUpdatePipeline.module.scss'
 
-const starterPipelineAsString =
-  'version: 1\nstages:\n- type: ci\n  spec:\n    steps:\n    - type: script\n      spec:\n        run: echo hello world'
+const StarterPipeline: Record<string, any> = {
+  version: 1,
+  stages: [
+    {
+      type: 'ci',
+      spec: {
+        steps: [
+          {
+            type: 'script',
+            spec: {
+              run: 'echo hello world'
+            }
+          }
+        ]
+      }
+    }
+  ]
+}
 
 const AddUpdatePipeline = (): JSX.Element => {
   const { routes } = useAppContext()
@@ -30,6 +47,7 @@ const AddUpdatePipeline = (): JSX.Element => {
   const { pipeline } = useParams<CODEProps>()
   const { repoMetadata } = useGetRepositoryMetadata()
   const { showError } = useToaster()
+  const [pipelineAsObj, setPipelineAsObj] = useState<Record<string, any>>(StarterPipeline)
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
   const { openModal: openRunPipelineModal } = useRunPipelineModal()
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
@@ -58,6 +76,16 @@ const AddUpdatePipeline = (): JSX.Element => {
     }
   }, [pipelineYAMLFileContent, resourceLoading])
 
+  useEffect(() => {
+    if (isExistingPipeline) {
+      setPipelineAsYaml(decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data))
+    } else {
+      try {
+        setPipelineAsYaml(stringify(pipelineAsObj))
+      } catch (ex) {}
+    }
+  }, [pipelineYAMLFileContent])
+
   const handleSaveAndRun = (): void => {
     try {
       const data: OpenapiCommitFilesRequest = {
@@ -89,6 +117,26 @@ const AddUpdatePipeline = (): JSX.Element => {
     }
   }
 
+  const updatePipeline = (payload: Record<string, any>): Record<string, any> => {
+    const pipelineAsObjClone = { ...pipelineAsObj }
+    let existingSteps: [unknown] = get(pipelineAsObjClone, 'stages.0.spec.steps', [])
+    if (existingSteps.length > 0) {
+      existingSteps.push(payload)
+    } else {
+      existingSteps = [payload]
+    }
+    set(pipelineAsObjClone, 'stages.0.spec.steps', existingSteps)
+    return pipelineAsObjClone
+  }
+
+  const addUpdatePluginToPipelineYAML = (_isUpdate: boolean, pluginFormData: Record<string, any>): void => {
+    try {
+      const updatedPipelineAsObj = updatePipeline(pluginFormData)
+      setPipelineAsObj(updatedPipelineAsObj)
+      setPipelineAsYaml(stringify(updatedPipelineAsObj))
+    } catch (ex) {}
+  }
+
   return (
     <>
       <Container className={css.main}>
@@ -121,15 +169,12 @@ const AddUpdatePipeline = (): JSX.Element => {
               <MonacoSourceCodeEditor
                 language={'yaml'}
                 schema={pipelineSchema}
-                source={
-                  decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data) ||
-                  starterPipelineAsString
-                }
+                source={pipelineAsYAML}
                 onChange={(value: string) => setPipelineAsYaml(value)}
               />
             </Container>
             <Container className={css.pluginsContainer}>
-              <PluginsPanel />
+              <PluginsPanel onPluginAddUpdate={addUpdatePluginToPipelineYAML} />
             </Container>
           </Layout.Horizontal>
         </PageBody>

From 661e2d7db6bcc9fbe78626c69e5402f438a6bf81 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 17:05:47 -0700
Subject: [PATCH 18/38] Create pipeline execution api update

---
 .../RunPipelineModal/RunPipelineModal.tsx     | 16 +++++---
 web/src/services/code/index.tsx               | 39 ++++++++++++-------
 web/src/services/code/swagger.yaml            | 35 ++++++++++-------
 3 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.tsx b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
index 6cc83013b..2349d3c95 100644
--- a/web/src/components/RunPipelineModal/RunPipelineModal.tsx
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
@@ -14,7 +14,7 @@ import {
 } from '@harnessio/uicore'
 import { useStrings } from 'framework/strings'
 import { useModalHook } from 'hooks/useModalHook'
-import type { OpenapiCreateExecutionRequest, TypesExecution, TypesRepository } from 'services/code'
+import type { CreateExecutionQueryParams, TypesExecution, TypesRepository } from 'services/code'
 import { useMutate } from 'restful-react'
 import { getErrorMessage } from 'utils/Utils'
 import { useHistory } from 'react-router'
@@ -38,12 +38,16 @@ const useRunPipelineModal = () => {
     path: `/api/v1/repos/${repoPath}/+/pipelines/${pipeline}/executions`
   })
 
-  const runPipeline = (_formData: FormData): void => {
+  const runPipeline = (formData: FormData): void => {
+    const { branch } = formData
     try {
-      const payload: OpenapiCreateExecutionRequest = {
-        status: ''
-      }
-      startExecution(payload, { pathParams: { path: `/api/v1/repos/${repoPath}/+/pipelines/${pipeline}/executions` } })
+      startExecution(
+        {},
+        {
+          pathParams: { path: `/api/v1/repos/${repoPath}/+/pipelines/${pipeline}/executions` },
+          queryParams: { branch } as CreateExecutionQueryParams
+        }
+      )
         .then(() => {
           history.push(routes.toCODEExecutions({ repoPath, pipeline }))
           hideModal()
diff --git a/web/src/services/code/index.tsx b/web/src/services/code/index.tsx
index 57d954a64..21f27d384 100644
--- a/web/src/services/code/index.tsx
+++ b/web/src/services/code/index.tsx
@@ -108,6 +108,12 @@ export interface GitrpcSignature {
   when?: string
 }
 
+export interface LivelogLine {
+  out?: string
+  pos?: number
+  time?: number
+}
+
 export interface OpenapiAdminUsersCreateRequest {
   display_name?: string
   email?: string
@@ -179,10 +185,6 @@ export interface OpenapiCreateConnectorRequest {
   uid?: string
 }
 
-export interface OpenapiCreateExecutionRequest {
-  status?: string
-}
-
 export interface OpenapiCreatePathRequest {
   path?: string
 }
@@ -790,7 +792,7 @@ export interface TypesSpace {
 
 export interface TypesStage {
   arch?: string
-  depends_on?: string[] | null
+  depends_on?: string[]
   errignore?: boolean
   error?: string
   execution_id?: number
@@ -807,6 +809,7 @@ export interface TypesStage {
   on_failure?: boolean
   on_success?: boolean
   os?: string
+  repo_id?: number
   started?: number
   status?: string
   steps?: TypesStep[]
@@ -817,7 +820,7 @@ export interface TypesStage {
 }
 
 export interface TypesStep {
-  depends_on?: string[] | null
+  depends_on?: string[]
   detached?: boolean
   errignore?: boolean
   error?: string
@@ -2459,19 +2462,26 @@ export const useListExecutions = ({ repo_ref, pipeline_uid, ...props }: UseListE
     { base: getConfig('code/api/v1'), pathParams: { repo_ref, pipeline_uid }, ...props }
   )
 
+export interface CreateExecutionQueryParams {
+  /**
+   * Branch to run the execution for.
+   */
+  branch?: string
+}
+
 export interface CreateExecutionPathParams {
   repo_ref: string
   pipeline_uid: string
 }
 
 export type CreateExecutionProps = Omit<
-  MutateProps<TypesExecution, UsererrorError, void, OpenapiCreateExecutionRequest, CreateExecutionPathParams>,
+  MutateProps<TypesExecution, UsererrorError, CreateExecutionQueryParams, void, CreateExecutionPathParams>,
   'path' | 'verb'
 > &
   CreateExecutionPathParams
 
 export const CreateExecution = ({ repo_ref, pipeline_uid, ...props }: CreateExecutionProps) => (
-  <Mutate<TypesExecution, UsererrorError, void, OpenapiCreateExecutionRequest, CreateExecutionPathParams>
+  <Mutate<TypesExecution, UsererrorError, CreateExecutionQueryParams, void, CreateExecutionPathParams>
     verb="POST"
     path={`/repos/${repo_ref}/pipelines/${pipeline_uid}/executions`}
     base={getConfig('code/api/v1')}
@@ -2480,13 +2490,13 @@ export const CreateExecution = ({ repo_ref, pipeline_uid, ...props }: CreateExec
 )
 
 export type UseCreateExecutionProps = Omit<
-  UseMutateProps<TypesExecution, UsererrorError, void, OpenapiCreateExecutionRequest, CreateExecutionPathParams>,
+  UseMutateProps<TypesExecution, UsererrorError, CreateExecutionQueryParams, void, CreateExecutionPathParams>,
   'path' | 'verb'
 > &
   CreateExecutionPathParams
 
 export const useCreateExecution = ({ repo_ref, pipeline_uid, ...props }: UseCreateExecutionProps) =>
-  useMutate<TypesExecution, UsererrorError, void, OpenapiCreateExecutionRequest, CreateExecutionPathParams>(
+  useMutate<TypesExecution, UsererrorError, CreateExecutionQueryParams, void, CreateExecutionPathParams>(
     'POST',
     (paramsInPath: CreateExecutionPathParams) =>
       `/repos/${paramsInPath.repo_ref}/pipelines/${paramsInPath.pipeline_uid}/executions`,
@@ -2600,7 +2610,8 @@ export interface ViewLogsPathParams {
   step_number: string
 }
 
-export type ViewLogsProps = Omit<GetProps<void, UsererrorError, void, ViewLogsPathParams>, 'path'> & ViewLogsPathParams
+export type ViewLogsProps = Omit<GetProps<LivelogLine[], UsererrorError, void, ViewLogsPathParams>, 'path'> &
+  ViewLogsPathParams
 
 export const ViewLogs = ({
   repo_ref,
@@ -2610,14 +2621,14 @@ export const ViewLogs = ({
   step_number,
   ...props
 }: ViewLogsProps) => (
-  <Get<void, UsererrorError, void, ViewLogsPathParams>
+  <Get<LivelogLine[], UsererrorError, void, ViewLogsPathParams>
     path={`/repos/${repo_ref}/pipelines/${pipeline_uid}/executions/${execution_number}/logs/${stage_number}/${step_number}`}
     base={getConfig('code/api/v1')}
     {...props}
   />
 )
 
-export type UseViewLogsProps = Omit<UseGetProps<void, UsererrorError, void, ViewLogsPathParams>, 'path'> &
+export type UseViewLogsProps = Omit<UseGetProps<LivelogLine[], UsererrorError, void, ViewLogsPathParams>, 'path'> &
   ViewLogsPathParams
 
 export const useViewLogs = ({
@@ -2628,7 +2639,7 @@ export const useViewLogs = ({
   step_number,
   ...props
 }: UseViewLogsProps) =>
-  useGet<void, UsererrorError, void, ViewLogsPathParams>(
+  useGet<LivelogLine[], UsererrorError, void, ViewLogsPathParams>(
     (paramsInPath: ViewLogsPathParams) =>
       `/repos/${paramsInPath.repo_ref}/pipelines/${paramsInPath.pipeline_uid}/executions/${paramsInPath.execution_number}/logs/${paramsInPath.stage_number}/${paramsInPath.step_number}`,
     {
diff --git a/web/src/services/code/swagger.yaml b/web/src/services/code/swagger.yaml
index 84eb98c18..bcf65cb46 100644
--- a/web/src/services/code/swagger.yaml
+++ b/web/src/services/code/swagger.yaml
@@ -2294,6 +2294,12 @@ paths:
     post:
       operationId: createExecution
       parameters:
+        - description: Branch to run the execution for.
+          in: query
+          name: branch
+          required: false
+          schema:
+            type: string
         - in: path
           name: repo_ref
           required: true
@@ -2304,11 +2310,6 @@ paths:
           required: true
           schema:
             type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/OpenapiCreateExecutionRequest'
       responses:
         '201':
           content:
@@ -2535,9 +2536,11 @@ paths:
       responses:
         '200':
           content:
-            text/plain:
+            application/json:
               schema:
-                type: string
+                items:
+                  $ref: '#/components/schemas/LivelogLine'
+                type: array
           description: OK
         '401':
           content:
@@ -6370,6 +6373,15 @@ components:
           format: date-time
           type: string
       type: object
+    LivelogLine:
+      properties:
+        out:
+          type: string
+        pos:
+          type: integer
+        time:
+          type: integer
+      type: object
     OpenapiAdminUsersCreateRequest:
       properties:
         display_name:
@@ -6497,11 +6509,6 @@ components:
         uid:
           type: string
       type: object
-    OpenapiCreateExecutionRequest:
-      properties:
-        status:
-          type: string
-      type: object
     OpenapiCreatePathRequest:
       properties:
         path:
@@ -7539,7 +7546,6 @@ components:
         depends_on:
           items:
             type: string
-          nullable: true
           type: array
         errignore:
           type: boolean
@@ -7571,6 +7577,8 @@ components:
           type: boolean
         os:
           type: string
+        repo_id:
+          type: integer
         started:
           type: integer
         status:
@@ -7593,7 +7601,6 @@ components:
         depends_on:
           items:
             type: string
-          nullable: true
           type: array
         detached:
           type: boolean

From 1f8f7cf1c32ba23800431c322eefe96b91f463af Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 17:30:51 -0700
Subject: [PATCH 19/38] show success toaster and added dirtiness check

---
 .../RunPipelineModal/RunPipelineModal.tsx       |  7 ++++---
 web/src/framework/strings/stringTypes.ts        |  5 ++++-
 web/src/i18n/strings.en.yaml                    |  5 ++++-
 .../AddUpdatePipeline/AddUpdatePipeline.tsx     | 17 ++++++++++++++---
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.tsx b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
index 2349d3c95..bfb1f3098 100644
--- a/web/src/components/RunPipelineModal/RunPipelineModal.tsx
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
@@ -27,7 +27,7 @@ interface FormData {
 const useRunPipelineModal = () => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
-  const { showError } = useToaster()
+  const { showSuccess, showError } = useToaster()
   const history = useHistory()
   const [repo, setRepo] = useState<TypesRepository>()
   const [pipeline, setPipeline] = useState<string>('')
@@ -49,14 +49,15 @@ const useRunPipelineModal = () => {
         }
       )
         .then(() => {
+          showSuccess(getString('pipelines.executionStarted'))
           history.push(routes.toCODEExecutions({ repoPath, pipeline }))
           hideModal()
         })
         .catch(error => {
-          showError(getErrorMessage(error), 0, 'pipelines.failedToRunPipeline')
+          showError(getErrorMessage(error), 0, 'pipelines.executionCouldNotStart')
         })
     } catch (exception) {
-      showError(getErrorMessage(exception), 0, 'pipelines.failedToRunPipeline')
+      showError(getErrorMessage(exception), 0, 'pipelines.executionCouldNotStart')
     }
   }
 
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 6d33562f6..d1c4e897b 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -319,11 +319,13 @@ export interface StringsMap {
   pending: string
   'pipelines.basedOn': string
   'pipelines.createNewPipeline': string
+  'pipelines.created': string
   'pipelines.editPipeline': string
   'pipelines.enterPipelineName': string
   'pipelines.enterYAMLPath': string
+  'pipelines.executionCouldNotStart': string
+  'pipelines.executionStarted': string
   'pipelines.failedToCreatePipeline': string
-  'pipelines.failedToRunPipeline': string
   'pipelines.lastExecution': string
   'pipelines.name': string
   'pipelines.newPipelineButton': string
@@ -331,6 +333,7 @@ export interface StringsMap {
   'pipelines.run': string
   'pipelines.saveAndRun': string
   'pipelines.time': string
+  'pipelines.updated': string
   'pipelines.yamlPath': string
   'plugins.addAPlugin': string
   'plugins.stepLabel': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 4968fec2a..7a517ebe8 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -636,9 +636,12 @@ pipelines:
   saveAndRun: Save and Run
   editPipeline: Edit pipeline {{pipeline}}
   run: Run pipeline
-  failedToRunPipeline: Failed to run pipeline
   time: Time
   lastExecution: Last Execution
+  created: Pipeline created successfully
+  updated: Pipeline updated successfully
+  executionStarted: Pipeline execution started successfully
+  executionCouldNotStart: Failure while starting Pipeline execution
 executions:
   noData: There are no executions :(
   newExecutionButton: Run Pipeline
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 5d5be63a0..03af6a001 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -46,12 +46,13 @@ const AddUpdatePipeline = (): JSX.Element => {
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
   const { repoMetadata } = useGetRepositoryMetadata()
-  const { showError } = useToaster()
+  const { showError, showSuccess } = useToaster()
   const [pipelineAsObj, setPipelineAsObj] = useState<Record<string, any>>(StarterPipeline)
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
   const { openModal: openRunPipelineModal } = useRunPipelineModal()
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
   const [isExistingPipeline, setIsExistingPipeline] = useState<boolean>(false)
+  const [isDirty, setIsDirty] = useState<boolean>(false)
 
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
@@ -86,6 +87,15 @@ const AddUpdatePipeline = (): JSX.Element => {
     }
   }, [pipelineYAMLFileContent])
 
+  useEffect(() => {
+    if (isExistingPipeline) {
+      const originalContent = decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data)
+      setIsDirty(originalContent !== pipelineAsYAML)
+    } else {
+      setIsDirty(true)
+    }
+  }, [isExistingPipeline, pipelineAsYAML, pipelineYAMLFileContent])
+
   const handleSaveAndRun = (): void => {
     try {
       const data: OpenapiCommitFilesRequest = {
@@ -105,6 +115,7 @@ const AddUpdatePipeline = (): JSX.Element => {
 
       mutate(data)
         .then(() => {
+          showSuccess(getString(isExistingPipeline ? 'pipelines.updated' : 'pipelines.created'))
           if (repoMetadata && pipeline) {
             openRunPipelineModal({ repoMetadata, pipeline })
           }
@@ -113,7 +124,7 @@ const AddUpdatePipeline = (): JSX.Element => {
           showError(getErrorMessage(error), 0, 'pipelines.failedToSavePipeline')
         })
     } catch (exception) {
-      showError(getErrorMessage(exception), 0, 'pipelines.failedToCreatePipeline')
+      showError(getErrorMessage(exception), 0, 'pipelines.failedToSavePipeline')
     }
   }
 
@@ -157,7 +168,7 @@ const AddUpdatePipeline = (): JSX.Element => {
                 variation={ButtonVariation.PRIMARY}
                 text={getString('pipelines.saveAndRun')}
                 onClick={handleSaveAndRun}
-                disabled={loading}
+                disabled={loading || !isDirty}
               />
             </Layout.Horizontal>
           }

From 0ad18462e13e852dd73e2c1fd1f12f36e9e4a4ba Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Thu, 7 Sep 2023 17:38:30 -0700
Subject: [PATCH 20/38] refetch content on save

---
 .../pages/AddUpdatePipeline/AddUpdatePipeline.tsx    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 03af6a001..4e5caf278 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -65,18 +65,24 @@ const AddUpdatePipeline = (): JSX.Element => {
     lazy: !repoMetadata
   })
 
-  const { data: pipelineYAMLFileContent, loading: resourceLoading } = useGetResourceContent({
+  const {
+    data: pipelineYAMLFileContent,
+    loading: resourceLoading,
+    refetch: fetchPipelineYAMLFileContent
+  } = useGetResourceContent({
     repoMetadata,
     gitRef: pipelineData?.default_branch || '',
     resourcePath: pipelineData?.config_path || ''
   })
 
+  // check if file exists and has some content
   useEffect(() => {
     if (!resourceLoading) {
       setIsExistingPipeline(!isEmpty(pipelineYAMLFileContent) && !isUndefined(pipelineYAMLFileContent.content))
     }
   }, [pipelineYAMLFileContent, resourceLoading])
 
+  // to load initial content on the editor
   useEffect(() => {
     if (isExistingPipeline) {
       setPipelineAsYaml(decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data))
@@ -85,8 +91,9 @@ const AddUpdatePipeline = (): JSX.Element => {
         setPipelineAsYaml(stringify(pipelineAsObj))
       } catch (ex) {}
     }
-  }, [pipelineYAMLFileContent])
+  }, [isExistingPipeline, pipelineYAMLFileContent])
 
+  // find if editor content was modified
   useEffect(() => {
     if (isExistingPipeline) {
       const originalContent = decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data)
@@ -115,6 +122,7 @@ const AddUpdatePipeline = (): JSX.Element => {
 
       mutate(data)
         .then(() => {
+          fetchPipelineYAMLFileContent()
           showSuccess(getString(isExistingPipeline ? 'pipelines.updated' : 'pipelines.created'))
           if (repoMetadata && pipeline) {
             openRunPipelineModal({ repoMetadata, pipeline })

From 7fb900c42e0a840baad742e1f03073ec11383b01 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Fri, 8 Sep 2023 00:30:16 -0700
Subject: [PATCH 21/38] adding yaml version specific logic

---
 .../components/PluginsPanel/PluginsPanel.tsx  |  9 ++++--
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   | 28 +++++++++++++++----
 web/src/pages/AddUpdatePipeline/Constants.ts  |  4 +++
 3 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 web/src/pages/AddUpdatePipeline/Constants.ts

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index a27843e58..c8a7dbf83 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -8,6 +8,7 @@ import { Color, FontVariation } from '@harnessio/design-system'
 import { Icon, type IconName } from '@harnessio/icons'
 import { LIST_FETCHING_LIMIT } from 'utils/Utils'
 import type { TypesPlugin } from 'services/code'
+import { YamlVersion } from 'pages/AddUpdatePipeline/Constants'
 
 import css from './PluginsPanel.module.scss'
 
@@ -70,10 +71,11 @@ const runStepSpec = {
 }
 
 export interface PluginsPanelInterface {
+  version?: YamlVersion
   onPluginAddUpdate: (isUpdate: boolean, pluginFormData: Record<string, any>) => void
 }
 
-export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
+export const PluginsPanel = ({ version = YamlVersion.V0, onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
   const { getString } = useStrings()
   const [category, setCategory] = useState<PluginCategory>()
   const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Category)
@@ -202,7 +204,10 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
     switch (category) {
       case PluginCategory.Drone:
       case PluginCategory.Harness:
-        constructedPayload = { type: 'script', spec: constructedPayload }
+        constructedPayload =
+          version === YamlVersion.V1
+            ? { type: 'script', spec: constructedPayload }
+            : { name: 'run step', commands: [get(constructedPayload, 'script', '')] }
     }
     onPluginAddUpdate?.(isUpdate, constructedPayload)
   }
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 4e5caf278..4a92056e6 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -19,10 +19,11 @@ import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
 import { decodeGitContent } from 'utils/GitUtils'
 import pipelineSchema from './schema/pipeline-schema.json'
+import { YamlVersion } from './Constants'
 
 import css from './AddUpdatePipeline.module.scss'
 
-const StarterPipeline: Record<string, any> = {
+const StarterPipelineV1: Record<string, any> = {
   version: 1,
   stages: [
     {
@@ -41,13 +42,29 @@ const StarterPipeline: Record<string, any> = {
   ]
 }
 
+const StarterPipelineV0: Record<string, any> = {
+  kind: 'pipeline',
+  type: 'docker',
+  name: 'default',
+  steps: [
+    {
+      name: 'test',
+      image: 'alpine',
+      commands: ['echo hello world']
+    }
+  ]
+}
+
 const AddUpdatePipeline = (): JSX.Element => {
+  const version = YamlVersion.V0
   const { routes } = useAppContext()
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
   const { repoMetadata } = useGetRepositoryMetadata()
   const { showError, showSuccess } = useToaster()
-  const [pipelineAsObj, setPipelineAsObj] = useState<Record<string, any>>(StarterPipeline)
+  const [pipelineAsObj, setPipelineAsObj] = useState<Record<string, any>>(
+    version === YamlVersion.V0 ? StarterPipelineV0 : StarterPipelineV1
+  )
   const [pipelineAsYAML, setPipelineAsYaml] = useState<string>('')
   const { openModal: openRunPipelineModal } = useRunPipelineModal()
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
@@ -138,13 +155,14 @@ const AddUpdatePipeline = (): JSX.Element => {
 
   const updatePipeline = (payload: Record<string, any>): Record<string, any> => {
     const pipelineAsObjClone = { ...pipelineAsObj }
-    let existingSteps: [unknown] = get(pipelineAsObjClone, 'stages.0.spec.steps', [])
+    const stepInsertPath = version === YamlVersion.V0 ? 'steps' : 'stages.0.spec.steps'
+    let existingSteps: [unknown] = get(pipelineAsObjClone, stepInsertPath, [])
     if (existingSteps.length > 0) {
       existingSteps.push(payload)
     } else {
       existingSteps = [payload]
     }
-    set(pipelineAsObjClone, 'stages.0.spec.steps', existingSteps)
+    set(pipelineAsObjClone, stepInsertPath, existingSteps)
     return pipelineAsObjClone
   }
 
@@ -187,7 +205,7 @@ const AddUpdatePipeline = (): JSX.Element => {
             <Container className={css.editorContainer}>
               <MonacoSourceCodeEditor
                 language={'yaml'}
-                schema={pipelineSchema}
+                schema={version === YamlVersion.V0 ? {} : pipelineSchema}
                 source={pipelineAsYAML}
                 onChange={(value: string) => setPipelineAsYaml(value)}
               />
diff --git a/web/src/pages/AddUpdatePipeline/Constants.ts b/web/src/pages/AddUpdatePipeline/Constants.ts
new file mode 100644
index 000000000..4c1da545f
--- /dev/null
+++ b/web/src/pages/AddUpdatePipeline/Constants.ts
@@ -0,0 +1,4 @@
+export enum YamlVersion {
+  V0,
+  V1
+}

From 376d7ed5f321221e628a24d2fed16c54364a2020 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Fri, 8 Sep 2023 08:47:36 -0700
Subject: [PATCH 22/38] adding V0 schema for demo

---
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   |  5 +-
 .../schema/pipeline-schema-v0.json            | 72 +++++++++++++++++++
 ...ne-schema.json => pipeline-schema-v1.json} |  0
 3 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 web/src/pages/AddUpdatePipeline/schema/pipeline-schema-v0.json
 rename web/src/pages/AddUpdatePipeline/schema/{pipeline-schema.json => pipeline-schema-v1.json} (100%)

diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 4a92056e6..0d3df9715 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -18,7 +18,8 @@ import { useAppContext } from 'AppContext'
 import type { CODEProps } from 'RouteDefinitions'
 import { getErrorMessage } from 'utils/Utils'
 import { decodeGitContent } from 'utils/GitUtils'
-import pipelineSchema from './schema/pipeline-schema.json'
+import pipelineSchemaV1 from './schema/pipeline-schema-v1.json'
+import pipelineSchemaV0 from './schema/pipeline-schema-v0.json'
 import { YamlVersion } from './Constants'
 
 import css from './AddUpdatePipeline.module.scss'
@@ -205,7 +206,7 @@ const AddUpdatePipeline = (): JSX.Element => {
             <Container className={css.editorContainer}>
               <MonacoSourceCodeEditor
                 language={'yaml'}
-                schema={version === YamlVersion.V0 ? {} : pipelineSchema}
+                schema={version === YamlVersion.V0 ? pipelineSchemaV0 : pipelineSchemaV1}
                 source={pipelineAsYAML}
                 onChange={(value: string) => setPipelineAsYaml(value)}
               />
diff --git a/web/src/pages/AddUpdatePipeline/schema/pipeline-schema-v0.json b/web/src/pages/AddUpdatePipeline/schema/pipeline-schema-v0.json
new file mode 100644
index 000000000..d2cf3f667
--- /dev/null
+++ b/web/src/pages/AddUpdatePipeline/schema/pipeline-schema-v0.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "kind": {
+      "type": "string",
+      "enum": ["pipeline"]
+    },
+    "name": {
+      "type": "string"
+    },
+    "trigger": {
+      "type": "object",
+      "properties": {
+        "event": {
+          "type": "string"
+        },
+        "branch": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "path": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "required": ["event"]
+    },
+    "steps": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "image": {
+            "type": "string"
+          },
+          "commands": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "when": {
+            "type": "string",
+            "enum": ["on_success", "on_failure", "always"]
+          },
+          "depends_on": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "environment": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          }
+        },
+        "required": ["name", "commands"]
+      }
+    }
+  },
+  "required": ["kind", "name", "steps"]
+}
diff --git a/web/src/pages/AddUpdatePipeline/schema/pipeline-schema.json b/web/src/pages/AddUpdatePipeline/schema/pipeline-schema-v1.json
similarity index 100%
rename from web/src/pages/AddUpdatePipeline/schema/pipeline-schema.json
rename to web/src/pages/AddUpdatePipeline/schema/pipeline-schema-v1.json

From 67eb12460bc0870a365eb486b7a88a4513c10391 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Fri, 8 Sep 2023 09:40:48 -0700
Subject: [PATCH 23/38] re-route to actual execution on running

---
 web/src/components/RunPipelineModal/RunPipelineModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.tsx b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
index bfb1f3098..51c806081 100644
--- a/web/src/components/RunPipelineModal/RunPipelineModal.tsx
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
@@ -48,9 +48,11 @@ const useRunPipelineModal = () => {
           queryParams: { branch } as CreateExecutionQueryParams
         }
       )
-        .then(() => {
+        .then(response => {
           showSuccess(getString('pipelines.executionStarted'))
-          history.push(routes.toCODEExecutions({ repoPath, pipeline }))
+          if (response?.number && !isNaN(response.number)) {
+            history.push(routes.toCODEExecution({ repoPath, pipeline, execution: response.number.toString() }))
+          }
           hideModal()
         })
         .catch(error => {

From 37bfe73da8aa05b7f4782cd5f760e313b730101e Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 11:00:06 -0700
Subject: [PATCH 24/38] Save and run implemented

---
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   | 183 ++++++++++++++----
 1 file changed, 141 insertions(+), 42 deletions(-)

diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 0d3df9715..f9d9caf46 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -1,11 +1,22 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useGet, useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
 import { get, isEmpty, isUndefined, set } from 'lodash'
 import { stringify } from 'yaml'
-import { Container, PageHeader, PageBody, Button, Layout, ButtonVariation, Text, useToaster } from '@harnessio/uicore'
+import { Menu, PopoverPosition } from '@blueprintjs/core'
+import {
+  Container,
+  PageHeader,
+  PageBody,
+  Layout,
+  ButtonVariation,
+  Text,
+  useToaster,
+  SplitButton,
+  Button
+} from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
-import { Color } from '@harnessio/design-system'
+import { Color, FontVariation } from '@harnessio/design-system'
 import type { OpenapiCommitFilesRequest, RepoCommitFilesResponse, RepoFileContent, TypesPipeline } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
@@ -56,6 +67,17 @@ const StarterPipelineV0: Record<string, any> = {
   ]
 }
 
+enum PipelineSaveAndRunAction {
+  SAVE,
+  RUN,
+  SAVE_AND_RUN
+}
+
+interface PipelineSaveAndRunOption {
+  title: string
+  action: PipelineSaveAndRunAction
+}
+
 const AddUpdatePipeline = (): JSX.Element => {
   const version = YamlVersion.V0
   const { routes } = useAppContext()
@@ -72,6 +94,25 @@ const AddUpdatePipeline = (): JSX.Element => {
   const [isExistingPipeline, setIsExistingPipeline] = useState<boolean>(false)
   const [isDirty, setIsDirty] = useState<boolean>(false)
 
+  const pipelineSaveOption: PipelineSaveAndRunOption = {
+    title: getString('save'),
+    action: PipelineSaveAndRunAction.SAVE
+  }
+
+  const pipelineRunOption: PipelineSaveAndRunOption = {
+    title: getString('run'),
+    action: PipelineSaveAndRunAction.RUN
+  }
+
+  const pipelineSaveAndRunOption: PipelineSaveAndRunOption = {
+    title: getString('pipelines.saveAndRun'),
+    action: PipelineSaveAndRunAction.SAVE_AND_RUN
+  }
+
+  const pipelineSaveAndRunOptions: PipelineSaveAndRunOption[] = [pipelineSaveAndRunOption, pipelineSaveOption]
+
+  const [selectedOption, setSelectedOption] = useState<PipelineSaveAndRunOption>()
+
   const { mutate, loading } = useMutate<RepoCommitFilesResponse>({
     verb: 'POST',
     path: `/api/v1/repos/${repoPath}/+/commits`
@@ -121,36 +162,43 @@ const AddUpdatePipeline = (): JSX.Element => {
     }
   }, [isExistingPipeline, pipelineAsYAML, pipelineYAMLFileContent])
 
-  const handleSaveAndRun = (): void => {
-    try {
-      const data: OpenapiCommitFilesRequest = {
-        actions: [
-          {
-            action: isExistingPipeline ? 'UPDATE' : 'CREATE',
-            path: pipelineData?.config_path,
-            payload: pipelineAsYAML,
-            sha: isExistingPipeline ? pipelineYAMLFileContent?.sha : ''
-          }
-        ],
-        branch: repoMetadata?.default_branch,
-        new_branch: '',
-        title: `${isExistingPipeline ? getString('updated') : getString('created')} pipeline ${pipeline}`,
-        message: ''
-      }
+  useEffect(() => {
+    if (isDirty) {
+      // enable "Save" option if pipeline is edited
+      setSelectedOption(pipelineSaveOption)
+    }
+  }, [isDirty])
 
-      mutate(data)
-        .then(() => {
-          fetchPipelineYAMLFileContent()
-          showSuccess(getString(isExistingPipeline ? 'pipelines.updated' : 'pipelines.created'))
-          if (repoMetadata && pipeline) {
-            openRunPipelineModal({ repoMetadata, pipeline })
-          }
-        })
-        .catch(error => {
-          showError(getErrorMessage(error), 0, 'pipelines.failedToSavePipeline')
-        })
-    } catch (exception) {
-      showError(getErrorMessage(exception), 0, 'pipelines.failedToSavePipeline')
+  const handleSaveAndRun = (option: PipelineSaveAndRunOption): void => {
+    if ([PipelineSaveAndRunAction.SAVE_AND_RUN, PipelineSaveAndRunAction.SAVE].includes(option?.action)) {
+      try {
+        const data: OpenapiCommitFilesRequest = {
+          actions: [
+            {
+              action: isExistingPipeline ? 'UPDATE' : 'CREATE',
+              path: pipelineData?.config_path,
+              payload: pipelineAsYAML,
+              sha: isExistingPipeline ? pipelineYAMLFileContent?.sha : ''
+            }
+          ],
+          branch: repoMetadata?.default_branch,
+          new_branch: '',
+          title: `${isExistingPipeline ? getString('updated') : getString('created')} pipeline ${pipeline}`,
+          message: ''
+        }
+
+        mutate(data)
+          .then(() => {
+            fetchPipelineYAMLFileContent()
+            showSuccess(getString(isExistingPipeline ? 'pipelines.updated' : 'pipelines.created'))
+            setSelectedOption(pipelineRunOption)
+          })
+          .catch(error => {
+            showError(getErrorMessage(error), 0, 'pipelines.failedToSavePipeline')
+          })
+      } catch (exception) {
+        showError(getErrorMessage(exception), 0, 'pipelines.failedToSavePipeline')
+      }
     }
   }
 
@@ -175,6 +223,66 @@ const AddUpdatePipeline = (): JSX.Element => {
     } catch (ex) {}
   }
 
+  const renderCTA = useCallback(() => {
+    switch (selectedOption?.action) {
+      case PipelineSaveAndRunAction.SAVE:
+        return (
+          <Button
+            variation={ButtonVariation.PRIMARY}
+            text={getString('save')}
+            onClick={() => {
+              handleSaveAndRun(pipelineSaveOption)
+            }}
+            disabled={loading || !isDirty}
+          />
+        )
+      case PipelineSaveAndRunAction.RUN:
+        return (
+          <Button
+            variation={ButtonVariation.PRIMARY}
+            text={getString('run')}
+            onClick={() => {
+              if (repoMetadata && pipeline) {
+                openRunPipelineModal({ repoMetadata, pipeline })
+              }
+            }}
+          />
+        )
+      case PipelineSaveAndRunAction.SAVE_AND_RUN:
+        return (
+          <SplitButton
+            text={selectedOption?.title}
+            disabled={loading || !isDirty}
+            variation={ButtonVariation.PRIMARY}
+            popoverProps={{
+              interactionKind: 'click',
+              usePortal: true,
+              position: PopoverPosition.BOTTOM_RIGHT,
+              transitionDuration: 1000
+            }}
+            intent="primary">
+            {pipelineSaveAndRunOptions.map(option => {
+              return (
+                <Menu.Item
+                  key={option.title}
+                  text={
+                    <Text color={Color.BLACK} font={{ variation: FontVariation.SMALL_BOLD }}>
+                      {option.title}
+                    </Text>
+                  }
+                  onClick={() => {
+                    handleSaveAndRun(option)
+                  }}
+                />
+              )
+            })}
+          </SplitButton>
+        )
+      default:
+        return <></>
+    }
+  }, [loading, fetchingPipeline, isDirty, repoMetadata, pipeline, selectedOption])
+
   return (
     <>
       <Container className={css.main}>
@@ -189,16 +297,7 @@ const AddUpdatePipeline = (): JSX.Element => {
               </Layout.Horizontal>
             </Container>
           }
-          content={
-            <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
-              <Button
-                variation={ButtonVariation.PRIMARY}
-                text={getString('pipelines.saveAndRun')}
-                onClick={handleSaveAndRun}
-                disabled={loading || !isDirty}
-              />
-            </Layout.Horizontal>
-          }
+          content={<Layout.Horizontal flex={{ justifyContent: 'space-between' }}>{renderCTA()}</Layout.Horizontal>}
         />
         <PageBody>
           <LoadingSpinner visible={fetchingPipeline} />

From ed4faeb8d78288dfb716e2094eb2210c76caa2e7 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 15:13:05 -0700
Subject: [PATCH 25/38] fix some corner cases

---
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   | 78 ++++++++++---------
 web/src/pages/AddUpdatePipeline/Constants.ts  |  3 +
 .../AddUpdatePipeline/NewPipelineModal.tsx    | 61 +++++++++------
 3 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index f9d9caf46..299d36558 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -126,7 +126,7 @@ const AddUpdatePipeline = (): JSX.Element => {
 
   const {
     data: pipelineYAMLFileContent,
-    loading: resourceLoading,
+    loading: fetchingPipelineYAMLFileContent,
     refetch: fetchPipelineYAMLFileContent
   } = useGetResourceContent({
     repoMetadata,
@@ -134,39 +134,38 @@ const AddUpdatePipeline = (): JSX.Element => {
     resourcePath: pipelineData?.config_path || ''
   })
 
-  // check if file exists and has some content
-  useEffect(() => {
-    if (!resourceLoading) {
-      setIsExistingPipeline(!isEmpty(pipelineYAMLFileContent) && !isUndefined(pipelineYAMLFileContent.content))
-    }
-  }, [pipelineYAMLFileContent, resourceLoading])
+  const originalPipelineYAMLFileContent = useMemo(
+    (): string => decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data),
+    [pipelineYAMLFileContent?.content]
+  )
 
-  // to load initial content on the editor
+  // check if file already exists and has some content
+  useEffect(() => {
+    setIsExistingPipeline(!isEmpty(originalPipelineYAMLFileContent) && !isUndefined(originalPipelineYAMLFileContent))
+  }, [originalPipelineYAMLFileContent])
+
+  // load initial content on the editor
   useEffect(() => {
     if (isExistingPipeline) {
-      setPipelineAsYaml(decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data))
+      setPipelineAsYaml(originalPipelineYAMLFileContent)
     } else {
+      // load with starter pipeline
       try {
         setPipelineAsYaml(stringify(pipelineAsObj))
-      } catch (ex) {}
+      } catch (ex) {
+        // ignore exception
+      }
     }
-  }, [isExistingPipeline, pipelineYAMLFileContent])
+  }, [isExistingPipeline, originalPipelineYAMLFileContent, pipelineAsObj])
 
   // find if editor content was modified
   useEffect(() => {
-    if (isExistingPipeline) {
-      const originalContent = decodeGitContent((pipelineYAMLFileContent?.content as RepoFileContent)?.data)
-      setIsDirty(originalContent !== pipelineAsYAML)
-    } else {
-      setIsDirty(true)
-    }
-  }, [isExistingPipeline, pipelineAsYAML, pipelineYAMLFileContent])
+    setIsDirty(originalPipelineYAMLFileContent !== pipelineAsYAML)
+  }, [originalPipelineYAMLFileContent, pipelineAsYAML])
 
+  // set initial CTA title
   useEffect(() => {
-    if (isDirty) {
-      // enable "Save" option if pipeline is edited
-      setSelectedOption(pipelineSaveOption)
-    }
+    setSelectedOption(isDirty ? pipelineSaveAndRunOption : pipelineRunOption)
   }, [isDirty])
 
   const handleSaveAndRun = (option: PipelineSaveAndRunOption): void => {
@@ -191,6 +190,9 @@ const AddUpdatePipeline = (): JSX.Element => {
           .then(() => {
             fetchPipelineYAMLFileContent()
             showSuccess(getString(isExistingPipeline ? 'pipelines.updated' : 'pipelines.created'))
+            if (option?.action === PipelineSaveAndRunAction.SAVE_AND_RUN && repoMetadata && pipeline) {
+              openRunPipelineModal({ repoMetadata, pipeline })
+            }
             setSelectedOption(pipelineRunOption)
           })
           .catch(error => {
@@ -225,17 +227,6 @@ const AddUpdatePipeline = (): JSX.Element => {
 
   const renderCTA = useCallback(() => {
     switch (selectedOption?.action) {
-      case PipelineSaveAndRunAction.SAVE:
-        return (
-          <Button
-            variation={ButtonVariation.PRIMARY}
-            text={getString('save')}
-            onClick={() => {
-              handleSaveAndRun(pipelineSaveOption)
-            }}
-            disabled={loading || !isDirty}
-          />
-        )
       case PipelineSaveAndRunAction.RUN:
         return (
           <Button
@@ -248,8 +239,18 @@ const AddUpdatePipeline = (): JSX.Element => {
             }}
           />
         )
+      case PipelineSaveAndRunAction.SAVE:
       case PipelineSaveAndRunAction.SAVE_AND_RUN:
-        return (
+        return isExistingPipeline ? (
+          <Button
+            variation={ButtonVariation.PRIMARY}
+            text={getString('save')}
+            onClick={() => {
+              handleSaveAndRun(pipelineSaveOption)
+            }}
+            disabled={loading || !isDirty}
+          />
+        ) : (
           <SplitButton
             text={selectedOption?.title}
             disabled={loading || !isDirty}
@@ -260,7 +261,8 @@ const AddUpdatePipeline = (): JSX.Element => {
               position: PopoverPosition.BOTTOM_RIGHT,
               transitionDuration: 1000
             }}
-            intent="primary">
+            intent="primary"
+            onClick={() => handleSaveAndRun(selectedOption)}>
             {pipelineSaveAndRunOptions.map(option => {
               return (
                 <Menu.Item
@@ -271,7 +273,7 @@ const AddUpdatePipeline = (): JSX.Element => {
                     </Text>
                   }
                   onClick={() => {
-                    handleSaveAndRun(option)
+                    setSelectedOption(option)
                   }}
                 />
               )
@@ -281,7 +283,7 @@ const AddUpdatePipeline = (): JSX.Element => {
       default:
         return <></>
     }
-  }, [loading, fetchingPipeline, isDirty, repoMetadata, pipeline, selectedOption])
+  }, [loading, fetchingPipeline, isDirty, repoMetadata, pipeline, selectedOption, isExistingPipeline, pipelineAsYAML])
 
   return (
     <>
@@ -300,7 +302,7 @@ const AddUpdatePipeline = (): JSX.Element => {
           content={<Layout.Horizontal flex={{ justifyContent: 'space-between' }}>{renderCTA()}</Layout.Horizontal>}
         />
         <PageBody>
-          <LoadingSpinner visible={fetchingPipeline} />
+          <LoadingSpinner visible={fetchingPipeline || fetchingPipelineYAMLFileContent} />
           <Layout.Horizontal>
             <Container className={css.editorContainer}>
               <MonacoSourceCodeEditor
diff --git a/web/src/pages/AddUpdatePipeline/Constants.ts b/web/src/pages/AddUpdatePipeline/Constants.ts
index 4c1da545f..818dba710 100644
--- a/web/src/pages/AddUpdatePipeline/Constants.ts
+++ b/web/src/pages/AddUpdatePipeline/Constants.ts
@@ -2,3 +2,6 @@ export enum YamlVersion {
   V0,
   V1
 }
+
+export const DEFAULT_YAML_PATH_PREFIX = '.harness/'
+export const DEFAULT_YAML_PATH_SUFFIX = '.yaml'
diff --git a/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx b/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
index e63c1ee85..1b10509dc 100644
--- a/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
+++ b/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
@@ -8,6 +8,7 @@ import type { OpenapiCreatePipelineRequest, TypesPipeline, TypesRepository } fro
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
+import { DEFAULT_YAML_PATH_PREFIX, DEFAULT_YAML_PATH_SUFFIX } from './Constants'
 
 interface FormData {
   name: string
@@ -76,28 +77,44 @@ const useNewPipelineModal = () => {
           validateOnChange
           validateOnBlur
           onSubmit={handleCreatePipeline}>
-          <FormikForm>
-            <Layout.Vertical spacing="small">
-              <Layout.Vertical spacing="small">
-                <FormInput.Text
-                  name="name"
-                  label={getString('name')}
-                  placeholder={getString('pipelines.enterPipelineName')}
-                  inputGroup={{ autoFocus: true }}
-                />
-                <FormInput.Text name="branch" label={getString('pipelines.basedOn')} />
-                <FormInput.Text
-                  name="yamlPath"
-                  label={getString('pipelines.yamlPath')}
-                  placeholder={getString('pipelines.enterYAMLPath')}
-                />
-              </Layout.Vertical>
-              <Layout.Horizontal spacing="medium" width="100%">
-                <Button variation={ButtonVariation.PRIMARY} text={getString('create')} type="submit" />
-                <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
-              </Layout.Horizontal>
-            </Layout.Vertical>
-          </FormikForm>
+          {formik => {
+            return (
+              <FormikForm>
+                <Layout.Vertical spacing="small">
+                  <Layout.Vertical spacing="small">
+                    <FormInput.Text
+                      name="name"
+                      label={getString('name')}
+                      placeholder={getString('pipelines.enterPipelineName')}
+                      inputGroup={{ autoFocus: true }}
+                      onChange={event => {
+                        const input = (event.target as HTMLInputElement)?.value
+                        formik?.setFieldValue('name', input)
+                        if (input) {
+                          // Keeping minimal validation for now, this could be much more exhaustive
+                          const path = input.trim().replace(/\s/g, '')
+                          formik?.setFieldValue(
+                            'yamlPath',
+                            DEFAULT_YAML_PATH_PREFIX.concat(path).concat(DEFAULT_YAML_PATH_SUFFIX)
+                          )
+                        }
+                      }}
+                    />
+                    <FormInput.Text name="branch" label={getString('pipelines.basedOn')} />
+                    <FormInput.Text
+                      name="yamlPath"
+                      label={getString('pipelines.yamlPath')}
+                      placeholder={getString('pipelines.enterYAMLPath')}
+                    />
+                  </Layout.Vertical>
+                  <Layout.Horizontal spacing="medium" width="100%">
+                    <Button variation={ButtonVariation.PRIMARY} text={getString('create')} type="submit" />
+                    <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
+                  </Layout.Horizontal>
+                </Layout.Vertical>
+              </FormikForm>
+            )
+          }}
         </Formik>
       </Dialog>
     )

From 36746608849bb192677bbec4b1d20a4201ef76ec Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 15:15:30 -0700
Subject: [PATCH 26/38] 'Based On' field renamed

---
 web/src/i18n/strings.en.yaml                         | 1 -
 web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 3917a2840..24f57b4c1 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -629,7 +629,6 @@ pipelines:
   name: Pipeline Name
   createNewPipeline: Create New Pipeline
   enterPipelineName: Enter pipeline name
-  basedOn: Based On
   yamlPath: YAML Path
   enterYAMLPath: Enter YAML path
   failedToCreatePipeline: Failed to create pipeline
diff --git a/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx b/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
index 1b10509dc..9833eedf6 100644
--- a/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
+++ b/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
@@ -100,7 +100,7 @@ const useNewPipelineModal = () => {
                         }
                       }}
                     />
-                    <FormInput.Text name="branch" label={getString('pipelines.basedOn')} />
+                    <FormInput.Text name="branch" label={getString('branch')} />
                     <FormInput.Text
                       name="yamlPath"
                       label={getString('pipelines.yamlPath')}

From 6713b98061801f2dae154016472511d9cd28c143 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 15:48:23 -0700
Subject: [PATCH 27/38] Integrate branch select on Create Pipeline modal

---
 .../NewPipelineModal.module.scss              | 17 +++++++++
 .../NewPipelineModal.module.scss.d.ts         |  6 ++++
 .../NewPipelineModal}/NewPipelineModal.tsx    | 36 +++++++++++++++++--
 web/src/framework/strings/stringTypes.ts      |  1 -
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   |  3 +-
 web/src/pages/PipelineList/PipelineList.tsx   |  2 +-
 6 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 web/src/components/NewPipelineModal/NewPipelineModal.module.scss
 create mode 100644 web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts
 rename web/src/{pages/AddUpdatePipeline => components/NewPipelineModal}/NewPipelineModal.tsx (79%)

diff --git a/web/src/components/NewPipelineModal/NewPipelineModal.module.scss b/web/src/components/NewPipelineModal/NewPipelineModal.module.scss
new file mode 100644
index 000000000..23d8222cf
--- /dev/null
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.module.scss
@@ -0,0 +1,17 @@
+.branchSelect {
+  :global {
+    .bp3-popover-wrapper {
+      width: 100% !important;
+      .bp3-popover-target {
+        width: 100% !important;
+      }
+    }
+    .bp3-button {
+      justify-content: start;
+      width: 100%;
+    }
+    .bp3-icon-chevron-down {
+      margin-left: auto;
+    }
+  }
+}
diff --git a/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts b/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts
new file mode 100644
index 000000000..a3f9c8a82
--- /dev/null
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly branchSelect: string
+}
+export default styles
diff --git a/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
similarity index 79%
rename from web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
rename to web/src/components/NewPipelineModal/NewPipelineModal.tsx
index 9833eedf6..2fcd4a193 100644
--- a/web/src/pages/AddUpdatePipeline/NewPipelineModal.tsx
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
@@ -2,13 +2,29 @@ import React, { useMemo, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useMutate } from 'restful-react'
 import * as yup from 'yup'
-import { Button, ButtonVariation, Dialog, FormInput, Formik, FormikForm, Layout, useToaster } from '@harnessio/uicore'
+import {
+  Button,
+  ButtonVariation,
+  Container,
+  Dialog,
+  FormInput,
+  Formik,
+  FormikForm,
+  Layout,
+  Text,
+  useToaster
+} from '@harnessio/uicore'
 import { useModalHook } from 'hooks/useModalHook'
 import type { OpenapiCreatePipelineRequest, TypesPipeline, TypesRepository } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
-import { DEFAULT_YAML_PATH_PREFIX, DEFAULT_YAML_PATH_SUFFIX } from './Constants'
+import { DEFAULT_YAML_PATH_PREFIX, DEFAULT_YAML_PATH_SUFFIX } from '../../pages/AddUpdatePipeline/Constants'
+import { BranchTagSelect } from 'components/BranchTagSelect/BranchTagSelect'
+import { FontVariation } from '@harnessio/design-system'
+import { capitalize } from 'lodash'
+
+import css from './NewPipelineModal.module.scss'
 
 interface FormData {
   name: string
@@ -100,7 +116,21 @@ const useNewPipelineModal = () => {
                         }
                       }}
                     />
-                    <FormInput.Text name="branch" label={getString('branch')} />
+                    <Layout.Vertical spacing="xsmall" padding={{ bottom: 'medium' }}>
+                      <Text font={{ variation: FontVariation.BODY }}>{capitalize(getString('branch'))}</Text>
+                      <Container className={css.branchSelect}>
+                        <BranchTagSelect
+                          gitRef={formik?.values?.branch || repo?.default_branch || ''}
+                          onSelect={(ref: string) => {
+                            formik?.setFieldValue('branch', ref)
+                          }}
+                          repoMetadata={repo || {}}
+                          disableBranchCreation
+                          disableViewAllBranches
+                          forBranchesOnly
+                        />
+                      </Container>
+                    </Layout.Vertical>
                     <FormInput.Text
                       name="yamlPath"
                       label={getString('pipelines.yamlPath')}
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 841b77fd8..2c9fd5e2b 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -318,7 +318,6 @@ export interface StringsMap {
   payloadUrl: string
   payloadUrlLabel: string
   pending: string
-  'pipelines.basedOn': string
   'pipelines.createNewPipeline': string
   'pipelines.created': string
   'pipelines.editPipeline': string
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 299d36558..d0d800660 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -180,8 +180,7 @@ const AddUpdatePipeline = (): JSX.Element => {
               sha: isExistingPipeline ? pipelineYAMLFileContent?.sha : ''
             }
           ],
-          branch: repoMetadata?.default_branch,
-          new_branch: '',
+          branch: pipelineData?.default_branch || '',
           title: `${isExistingPipeline ? getString('updated') : getString('created')} pipeline ${pipeline}`,
           message: ''
         }
diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index e48bdaefc..43fcb2ac2 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -34,9 +34,9 @@ import { RepositoryPageHeader } from 'components/RepositoryPageHeader/Repository
 import { ExecutionStatus, ExecutionState } from 'components/ExecutionStatus/ExecutionStatus'
 import { getStatus } from 'utils/PipelineUtils'
 import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
+import useNewPipelineModal from 'components/NewPipelineModal/NewPipelineModal'
 import noPipelineImage from '../RepositoriesListing/no-repo.svg'
 import css from './PipelineList.module.scss'
-import useNewPipelineModal from 'pages/AddUpdatePipeline/NewPipelineModal'
 
 const PipelineList = () => {
   const { routes } = useAppContext()

From a7c2092d3881247b9326ec0766ae1ce165fbec53 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 15:56:08 -0700
Subject: [PATCH 28/38] Integrate branch select on Run Pipeline modal

---
 .../NewPipelineModal/NewPipelineModal.tsx     |  6 +--
 .../RunPipelineModal.module.scss              | 17 ++++++
 .../RunPipelineModal.module.scss.d.ts         |  6 +++
 .../RunPipelineModal/RunPipelineModal.tsx     | 52 +++++++++++++------
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   |  3 +-
 5 files changed, 64 insertions(+), 20 deletions(-)
 create mode 100644 web/src/components/RunPipelineModal/RunPipelineModal.module.scss
 create mode 100644 web/src/components/RunPipelineModal/RunPipelineModal.module.scss.d.ts

diff --git a/web/src/components/NewPipelineModal/NewPipelineModal.tsx b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
index 2fcd4a193..316020ee6 100644
--- a/web/src/components/NewPipelineModal/NewPipelineModal.tsx
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useMutate } from 'restful-react'
 import * as yup from 'yup'
+import { capitalize } from 'lodash'
 import {
   Button,
   ButtonVariation,
@@ -14,15 +15,14 @@ import {
   Text,
   useToaster
 } from '@harnessio/uicore'
+import { FontVariation } from '@harnessio/design-system'
 import { useModalHook } from 'hooks/useModalHook'
 import type { OpenapiCreatePipelineRequest, TypesPipeline, TypesRepository } from 'services/code'
 import { useStrings } from 'framework/strings'
+import { BranchTagSelect } from 'components/BranchTagSelect/BranchTagSelect'
 import { useAppContext } from 'AppContext'
 import { getErrorMessage } from 'utils/Utils'
 import { DEFAULT_YAML_PATH_PREFIX, DEFAULT_YAML_PATH_SUFFIX } from '../../pages/AddUpdatePipeline/Constants'
-import { BranchTagSelect } from 'components/BranchTagSelect/BranchTagSelect'
-import { FontVariation } from '@harnessio/design-system'
-import { capitalize } from 'lodash'
 
 import css from './NewPipelineModal.module.scss'
 
diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.module.scss b/web/src/components/RunPipelineModal/RunPipelineModal.module.scss
new file mode 100644
index 000000000..23d8222cf
--- /dev/null
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.module.scss
@@ -0,0 +1,17 @@
+.branchSelect {
+  :global {
+    .bp3-popover-wrapper {
+      width: 100% !important;
+      .bp3-popover-target {
+        width: 100% !important;
+      }
+    }
+    .bp3-button {
+      justify-content: start;
+      width: 100%;
+    }
+    .bp3-icon-chevron-down {
+      margin-left: auto;
+    }
+  }
+}
diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.module.scss.d.ts b/web/src/components/RunPipelineModal/RunPipelineModal.module.scss.d.ts
new file mode 100644
index 000000000..a3f9c8a82
--- /dev/null
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.module.scss.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly branchSelect: string
+}
+export default styles
diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.tsx b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
index 51c806081..3ad1c9768 100644
--- a/web/src/components/RunPipelineModal/RunPipelineModal.tsx
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
@@ -1,11 +1,14 @@
 import React, { useMemo, useState } from 'react'
+import { useHistory } from 'react-router'
+import { useMutate } from 'restful-react'
 import * as yup from 'yup'
+import { capitalize } from 'lodash'
 import { FontVariation } from '@harnessio/design-system'
 import {
   Button,
   ButtonVariation,
+  Container,
   Dialog,
-  FormInput,
   Formik,
   FormikForm,
   Layout,
@@ -15,10 +18,11 @@ import {
 import { useStrings } from 'framework/strings'
 import { useModalHook } from 'hooks/useModalHook'
 import type { CreateExecutionQueryParams, TypesExecution, TypesRepository } from 'services/code'
-import { useMutate } from 'restful-react'
 import { getErrorMessage } from 'utils/Utils'
-import { useHistory } from 'react-router'
 import { useAppContext } from 'AppContext'
+import { BranchTagSelect } from 'components/BranchTagSelect/BranchTagSelect'
+
+import css from './RunPipelineModal.module.scss'
 
 interface FormData {
   branch: string
@@ -27,7 +31,7 @@ interface FormData {
 const useRunPipelineModal = () => {
   const { routes } = useAppContext()
   const { getString } = useStrings()
-  const { showSuccess, showError } = useToaster()
+  const { showSuccess, showError, clear: clearToaster } = useToaster()
   const history = useHistory()
   const [repo, setRepo] = useState<TypesRepository>()
   const [pipeline, setPipeline] = useState<string>('')
@@ -49,6 +53,7 @@ const useRunPipelineModal = () => {
         }
       )
         .then(response => {
+          clearToaster()
           showSuccess(getString('pipelines.executionStarted'))
           if (response?.number && !isNaN(response.number)) {
             history.push(routes.toCODEExecution({ repoPath, pipeline, execution: response.number.toString() }))
@@ -80,18 +85,33 @@ const useRunPipelineModal = () => {
           })}
           onSubmit={runPipeline}
           enableReinitialize>
-          <FormikForm>
-            <Layout.Vertical spacing="medium">
-              <FormInput.Text
-                name="branch"
-                label={<Text font={{ variation: FontVariation.FORM_LABEL }}>{getString('branch')}</Text>}
-              />
-              <Layout.Horizontal spacing="medium">
-                <Button variation={ButtonVariation.PRIMARY} type="submit" text={getString('pipelines.run')} />
-                <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
-              </Layout.Horizontal>
-            </Layout.Vertical>
-          </FormikForm>
+          {formik => {
+            return (
+              <FormikForm>
+                <Layout.Vertical spacing="medium">
+                  <Layout.Vertical spacing="xsmall" padding={{ bottom: 'medium' }}>
+                    <Text font={{ variation: FontVariation.BODY }}>{capitalize(getString('branch'))}</Text>
+                    <Container className={css.branchSelect}>
+                      <BranchTagSelect
+                        gitRef={formik?.values?.branch || repo?.default_branch || ''}
+                        onSelect={(ref: string) => {
+                          formik?.setFieldValue('branch', ref)
+                        }}
+                        repoMetadata={repo || {}}
+                        disableBranchCreation
+                        disableViewAllBranches
+                        forBranchesOnly
+                      />
+                    </Container>
+                  </Layout.Vertical>
+                  <Layout.Horizontal spacing="medium">
+                    <Button variation={ButtonVariation.PRIMARY} type="submit" text={getString('pipelines.run')} />
+                    <Button variation={ButtonVariation.SECONDARY} text={getString('cancel')} onClick={onClose} />
+                  </Layout.Horizontal>
+                </Layout.Vertical>
+              </FormikForm>
+            )
+          }}
         </Formik>
       </Dialog>
     )
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index d0d800660..29d5b23b2 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -84,7 +84,7 @@ const AddUpdatePipeline = (): JSX.Element => {
   const { getString } = useStrings()
   const { pipeline } = useParams<CODEProps>()
   const { repoMetadata } = useGetRepositoryMetadata()
-  const { showError, showSuccess } = useToaster()
+  const { showError, showSuccess, clear: clearToaster } = useToaster()
   const [pipelineAsObj, setPipelineAsObj] = useState<Record<string, any>>(
     version === YamlVersion.V0 ? StarterPipelineV0 : StarterPipelineV1
   )
@@ -188,6 +188,7 @@ const AddUpdatePipeline = (): JSX.Element => {
         mutate(data)
           .then(() => {
             fetchPipelineYAMLFileContent()
+            clearToaster()
             showSuccess(getString(isExistingPipeline ? 'pipelines.updated' : 'pipelines.created'))
             if (option?.action === PipelineSaveAndRunAction.SAVE_AND_RUN && repoMetadata && pipeline) {
               openRunPipelineModal({ repoMetadata, pipeline })

From b9b4db1df2e931d9df0451fe2c1ba9847fd51885 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 16:03:42 -0700
Subject: [PATCH 29/38] css build changes

---
 .../NewPipelineModal.module.scss.d.ts         |  7 ++-----
 .../PluginsPanel.module.scss.d.ts             | 19 ++++++++-----------
 .../AddUpdatePipeline.module.scss.d.ts        | 19 ++++++++-----------
 3 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts b/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts
index a3f9c8a82..f9139a9e7 100644
--- a/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.module.scss.d.ts
@@ -1,6 +1,3 @@
 /* eslint-disable */
-// this is an auto-generated file
-declare const styles: {
-  readonly branchSelect: string
-}
-export default styles
+// This is an auto-generated file
+export declare const branchSelect: string
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
index b0469e221..cc220df9e 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
@@ -1,12 +1,9 @@
 /* eslint-disable */
-// this is an auto-generated file
-declare const styles: {
-  readonly main: string
-  readonly mainTabPanel: string
-  readonly pluginDetailsPanel: string
-  readonly pluginIcon: string
-  readonly plugin: string
-  readonly form: string
-  readonly arrow: string
-}
-export default styles
+// This is an auto-generated file
+export declare const arrow: string
+export declare const form: string
+export declare const main: string
+export declare const mainTabPanel: string
+export declare const plugin: string
+export declare const pluginDetailsPanel: string
+export declare const pluginIcon: string
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts
index 650bf45af..cb9195c04 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts
@@ -1,12 +1,9 @@
 /* eslint-disable */
-// this is an auto-generated file
-declare const styles: {
-  readonly main: string
-  readonly layout: string
-  readonly editorContainer: string
-  readonly pluginsContainer: string
-  readonly header: string
-  readonly breadcrumb: string
-  readonly drawer: string
-}
-export default styles
+// This is an auto-generated file
+export declare const breadcrumb: string
+export declare const drawer: string
+export declare const editorContainer: string
+export declare const header: string
+export declare const layout: string
+export declare const main: string
+export declare const pluginsContainer: string

From c4a211f5f592d74378c94857f8035d011e10c31c Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 16:10:57 -0700
Subject: [PATCH 30/38] minor revert

---
 web/package.json | 2 +-
 web/yarn.lock    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/package.json b/web/package.json
index 299eb9d49..adab8327c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -64,7 +64,7 @@
     "masonry-layout": "^4.2.2",
     "moment": "^2.25.3",
     "monaco-editor": "^0.40.0",
-    "monaco-editor-webpack-plugin": "^7.0.1",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "monaco-yaml": "^4.0.4",
     "qs": "^6.9.4",
     "react": "^17.0.2",
diff --git a/web/yarn.lock b/web/yarn.lock
index c1d6eb1c1..df9318466 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -7726,7 +7726,7 @@ moment@^2.25.3:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-monaco-editor-webpack-plugin@^7.0.1:
+monaco-editor-webpack-plugin@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
   integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==

From c2c49522d37a5a4d4db8ea80d9fd367846b30ec2 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 16:24:49 -0700
Subject: [PATCH 31/38] review comment fixed

---
 web/src/components/NewPipelineModal/NewPipelineModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/NewPipelineModal/NewPipelineModal.tsx b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
index 316020ee6..5bfb5807b 100644
--- a/web/src/components/NewPipelineModal/NewPipelineModal.tsx
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
@@ -55,8 +55,8 @@ const useNewPipelineModal = () => {
       }
       savePipeline(payload, { pathParams: { path: `/api/v1/repos/${repoPath}/+/pipelines` } })
         .then(() => {
-          history.push(routes.toCODEPipelineEdit({ repoPath, pipeline: name }))
           hideModal()
+          history.push(routes.toCODEPipelineEdit({ repoPath, pipeline: name }))
         })
         .catch(error => {
           showError(getErrorMessage(error), 0, 'pipelines.failedToCreatePipeline')

From 6a08c491e9d9c6de0698a9f13e2c107aa593dbd0 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Mon, 11 Sep 2023 16:27:16 -0700
Subject: [PATCH 32/38] review comment fixed - part 2

---
 web/src/components/PluginsPanel/PluginsPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index c8a7dbf83..29e16c50c 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -40,7 +40,7 @@ const PluginCategories: PluginInterface[] = [
   { category: PluginCategory.Drone, name: 'Drone', description: 'Run Drone plugins', icon: 'ci-infra' }
 ]
 
-const dronePluginSpecMock = {
+const dronePluginSpecMockData = {
   inputs: {
     channel: {
       type: 'string'
@@ -214,7 +214,7 @@ export const PluginsPanel = ({ version = YamlVersion.V0, onPluginAddUpdate }: Pl
 
   const renderPluginConfigForm = useCallback((): JSX.Element => {
     // TODO obtain plugin input spec by parsing YAML
-    const inputs = get(category === PluginCategory.Drone ? dronePluginSpecMock : runStepSpec, 'inputs', {})
+    const inputs = get(category === PluginCategory.Drone ? dronePluginSpecMockData : runStepSpec, 'inputs', {})
     return (
       <Layout.Vertical
         spacing="medium"

From c7ef132cbce98d4fe804e4b8570643a5d55ac114 Mon Sep 17 00:00:00 2001
From: Vistaar Juneja <vistaar.juneja@harness.io>
Date: Tue, 12 Sep 2023 09:08:38 +0000
Subject: [PATCH 33/38] add support for triggered builds (#428)

---
 cmd/gitness/wire_gen.go                       |   8 +-
 internal/api/controller/execution/create.go   |   1 -
 .../api/controller/pipeline/controller.go     |   3 +
 internal/api/controller/pipeline/create.go    |  23 ++++
 internal/api/controller/pipeline/wire.go      |   4 +-
 internal/api/controller/repo/move.go          |   2 +-
 internal/api/controller/space/events.go       |   1 +
 internal/api/controller/trigger/common.go     |  58 ++++++++
 internal/api/controller/trigger/controller.go |   4 +
 internal/api/controller/trigger/create.go     |  35 ++++-
 internal/api/controller/trigger/update.go     |  57 +++++++-
 internal/api/controller/trigger/wire.go       |   4 +-
 internal/api/handler/space/events_stream.go   |   1 +
 internal/pipeline/commit/gitness.go           |  21 +++
 internal/pipeline/commit/service.go           |   3 +
 internal/pipeline/manager/manager.go          |   2 -
 internal/pipeline/triggerer/skip.go           |  23 ----
 internal/pipeline/triggerer/trigger.go        |  91 ++++++-------
 internal/services/trigger/handler_branch.go   |  63 ++++++++-
 internal/services/trigger/handler_pullreq.go  |  63 ++++++++-
 internal/services/trigger/handler_tag.go      |  33 ++++-
 internal/services/trigger/service.go          |  68 +++++++++-
 internal/services/trigger/wire.go             |  12 +-
 internal/store/database.go                    |   4 +
 .../database/migrate/ci/ci_migrations.sql     |  15 ++-
 internal/store/database/trigger.go            | 127 ++++++++++++++++--
 types/enum/trigger_actions.go                 |  60 +++++++++
 types/enum/trigger_events.go                  |   7 +-
 types/trigger.go                              |  21 ++-
 29 files changed, 695 insertions(+), 119 deletions(-)
 create mode 100644 internal/api/controller/trigger/common.go
 create mode 100644 types/enum/trigger_actions.go

diff --git a/cmd/gitness/wire_gen.go b/cmd/gitness/wire_gen.go
index 1a970f498..44d295df0 100644
--- a/cmd/gitness/wire_gen.go
+++ b/cmd/gitness/wire_gen.go
@@ -144,14 +144,14 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 	connectorStore := database.ProvideConnectorStore(db)
 	templateStore := database.ProvideTemplateStore(db)
 	spaceController := space.ProvideController(db, provider, eventsStreamer, pathUID, authorizer, pathStore, pipelineStore, secretStore, connectorStore, templateStore, spaceStore, repoStore, principalStore, repoController, membershipStore, repository)
-	pipelineController := pipeline.ProvideController(db, pathUID, pathStore, repoStore, authorizer, pipelineStore)
+	triggerStore := database.ProvideTriggerStore(db)
+	pipelineController := pipeline.ProvideController(db, pathUID, pathStore, repoStore, triggerStore, authorizer, pipelineStore)
 	encrypter, err := encrypt.ProvideEncrypter(config)
 	if err != nil {
 		return nil, err
 	}
 	secretController := secret.ProvideController(db, pathUID, pathStore, encrypter, secretStore, authorizer, spaceStore)
-	triggerStore := database.ProvideTriggerStore(db)
-	triggerController := trigger.ProvideController(db, authorizer, triggerStore, pipelineStore, repoStore)
+	triggerController := trigger.ProvideController(db, authorizer, triggerStore, pathUID, pipelineStore, repoStore)
 	connectorController := connector.ProvideController(db, pathUID, connectorStore, authorizer, spaceStore)
 	templateController := template.ProvideController(db, pathUID, templateStore, authorizer, spaceStore)
 	pluginStore := database.ProvidePluginStore(db)
@@ -235,7 +235,7 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 		return nil, err
 	}
 	triggerConfig := server.ProvideTriggerConfig(config)
-	triggerService, err := trigger2.ProvideService(ctx, triggerConfig, readerFactory, eventsReaderFactory)
+	triggerService, err := trigger2.ProvideService(ctx, triggerConfig, triggerStore, commitService, pullReqStore, repoStore, pipelineStore, triggererTriggerer, readerFactory, eventsReaderFactory)
 	if err != nil {
 		return nil, err
 	}
diff --git a/internal/api/controller/execution/create.go b/internal/api/controller/execution/create.go
index f529184bd..d8a1ab197 100644
--- a/internal/api/controller/execution/create.go
+++ b/internal/api/controller/execution/create.go
@@ -70,7 +70,6 @@ func (c *Controller) Create(
 		Sender:      session.Principal.UID,
 		Source:      branch,
 		Target:      branch,
-		Action:      enum.TriggerEventCustom,
 		Params:      map[string]string{},
 		Timestamp:   commit.Author.When.UnixMilli(),
 	}
diff --git a/internal/api/controller/pipeline/controller.go b/internal/api/controller/pipeline/controller.go
index 5168d28d3..2d4b2248e 100644
--- a/internal/api/controller/pipeline/controller.go
+++ b/internal/api/controller/pipeline/controller.go
@@ -18,6 +18,7 @@ type Controller struct {
 	uidCheck      check.PathUID
 	pathStore     store.PathStore
 	repoStore     store.RepoStore
+	triggerStore  store.TriggerStore
 	authorizer    authz.Authorizer
 	pipelineStore store.PipelineStore
 }
@@ -28,6 +29,7 @@ func NewController(
 	authorizer authz.Authorizer,
 	pathStore store.PathStore,
 	repoStore store.RepoStore,
+	triggerStore store.TriggerStore,
 	pipelineStore store.PipelineStore,
 ) *Controller {
 	return &Controller{
@@ -35,6 +37,7 @@ func NewController(
 		uidCheck:      uidCheck,
 		pathStore:     pathStore,
 		repoStore:     repoStore,
+		triggerStore:  triggerStore,
 		authorizer:    authorizer,
 		pipelineStore: pipelineStore,
 	}
diff --git a/internal/api/controller/pipeline/create.go b/internal/api/controller/pipeline/create.go
index 4405b0037..503e90155 100644
--- a/internal/api/controller/pipeline/create.go
+++ b/internal/api/controller/pipeline/create.go
@@ -16,6 +16,8 @@ import (
 	"github.com/harness/gitness/types"
 	"github.com/harness/gitness/types/check"
 	"github.com/harness/gitness/types/enum"
+
+	"github.com/rs/zerolog/log"
 )
 
 var (
@@ -69,6 +71,27 @@ func (c *Controller) Create(
 		return nil, fmt.Errorf("pipeline creation failed: %w", err)
 	}
 
+	// Try to create a default trigger on pipeline creation.
+	// Default trigger operations are set on pull request created, reopened or updated.
+	// We log an error on failure but don't fail the op.
+	trigger := &types.Trigger{
+		Description: "auto-created trigger on pipeline creation",
+		Created:     now,
+		Updated:     now,
+		PipelineID:  pipeline.ID,
+		RepoID:      pipeline.RepoID,
+		CreatedBy:   session.Principal.ID,
+		UID:         "default",
+		Actions: []enum.TriggerAction{enum.TriggerActionPullReqCreated,
+			enum.TriggerActionPullReqReopened, enum.TriggerActionPullReqBranchUpdated},
+		Enabled: true,
+		Version: 0,
+	}
+	err = c.triggerStore.Create(ctx, trigger)
+	if err != nil {
+		log.Ctx(ctx).Err(err).Msg("failed to create auto trigger on pipeline creation")
+	}
+
 	return pipeline, nil
 }
 
diff --git a/internal/api/controller/pipeline/wire.go b/internal/api/controller/pipeline/wire.go
index 6dfcd0fc0..4d953f8d0 100644
--- a/internal/api/controller/pipeline/wire.go
+++ b/internal/api/controller/pipeline/wire.go
@@ -22,8 +22,10 @@ func ProvideController(db *sqlx.DB,
 	uidCheck check.PathUID,
 	pathStore store.PathStore,
 	repoStore store.RepoStore,
+	triggerStore store.TriggerStore,
 	authorizer authz.Authorizer,
 	pipelineStore store.PipelineStore,
 ) *Controller {
-	return NewController(db, uidCheck, authorizer, pathStore, repoStore, pipelineStore)
+	return NewController(db, uidCheck, authorizer, pathStore,
+		repoStore, triggerStore, pipelineStore)
 }
diff --git a/internal/api/controller/repo/move.go b/internal/api/controller/repo/move.go
index e4edbcfa8..635db3069 100644
--- a/internal/api/controller/repo/move.go
+++ b/internal/api/controller/repo/move.go
@@ -7,12 +7,12 @@ package repo
 import (
 	"context"
 	"fmt"
-	"github.com/harness/gitness/internal/api/usererror"
 	"strconv"
 	"strings"
 	"time"
 
 	apiauth "github.com/harness/gitness/internal/api/auth"
+	"github.com/harness/gitness/internal/api/usererror"
 	"github.com/harness/gitness/internal/auth"
 	"github.com/harness/gitness/internal/paths"
 	"github.com/harness/gitness/store/database/dbtx"
diff --git a/internal/api/controller/space/events.go b/internal/api/controller/space/events.go
index d3b2ee000..5094d82c4 100644
--- a/internal/api/controller/space/events.go
+++ b/internal/api/controller/space/events.go
@@ -15,6 +15,7 @@ import (
 	"github.com/harness/gitness/internal/auth"
 	"github.com/harness/gitness/internal/writer"
 	"github.com/harness/gitness/types/enum"
+
 	"github.com/rs/zerolog/log"
 )
 
diff --git a/internal/api/controller/trigger/common.go b/internal/api/controller/trigger/common.go
new file mode 100644
index 000000000..95c71df0e
--- /dev/null
+++ b/internal/api/controller/trigger/common.go
@@ -0,0 +1,58 @@
+// Copyright 2022 Harness Inc. All rights reserved.
+// Use of this source code is governed by the Polyform Free Trial License
+// that can be found in the LICENSE.md file for this repository.
+
+package trigger
+
+import (
+	"github.com/harness/gitness/types/check"
+	"github.com/harness/gitness/types/enum"
+)
+
+const (
+	// triggerMaxSecretLength defines the max allowed length of a trigger secret.
+	// TODO: Check whether this is sufficient for other SCM providers once we
+	// add support. For now it's good to have a limit and increase if needed.
+	triggerMaxSecretLength = 4096
+)
+
+// checkSecret validates the secret of a trigger.
+func checkSecret(secret string) error {
+	if len(secret) > triggerMaxSecretLength {
+		return check.NewValidationErrorf("The secret of a trigger can be at most %d characters long.",
+			triggerMaxSecretLength)
+	}
+
+	return nil
+}
+
+// checkActions validates the trigger actions.
+func checkActions(actions []enum.TriggerAction) error {
+	// ignore duplicates here, should be deduplicated later
+	for _, action := range actions {
+		if _, ok := action.Sanitize(); !ok {
+			return check.NewValidationErrorf("The provided trigger action '%s' is invalid.", action)
+		}
+	}
+
+	return nil
+}
+
+// deduplicateActions de-duplicates the actions provided by in the trigger.
+func deduplicateActions(in []enum.TriggerAction) []enum.TriggerAction {
+	if len(in) == 0 {
+		return []enum.TriggerAction{}
+	}
+
+	actionSet := make(map[enum.TriggerAction]struct{})
+	out := make([]enum.TriggerAction, 0, len(in))
+	for _, action := range in {
+		if _, ok := actionSet[action]; ok {
+			continue
+		}
+		actionSet[action] = struct{}{}
+		out = append(out, action)
+	}
+
+	return out
+}
diff --git a/internal/api/controller/trigger/controller.go b/internal/api/controller/trigger/controller.go
index 304974bbc..601b45efe 100644
--- a/internal/api/controller/trigger/controller.go
+++ b/internal/api/controller/trigger/controller.go
@@ -7,6 +7,7 @@ package trigger
 import (
 	"github.com/harness/gitness/internal/auth/authz"
 	"github.com/harness/gitness/internal/store"
+	"github.com/harness/gitness/types/check"
 
 	"github.com/jmoiron/sqlx"
 )
@@ -15,6 +16,7 @@ type Controller struct {
 	db            *sqlx.DB
 	authorizer    authz.Authorizer
 	triggerStore  store.TriggerStore
+	uidCheck      check.PathUID
 	pipelineStore store.PipelineStore
 	repoStore     store.RepoStore
 }
@@ -23,6 +25,7 @@ func NewController(
 	db *sqlx.DB,
 	authorizer authz.Authorizer,
 	triggerStore store.TriggerStore,
+	uidCheck check.PathUID,
 	pipelineStore store.PipelineStore,
 	repoStore store.RepoStore,
 ) *Controller {
@@ -30,6 +33,7 @@ func NewController(
 		db:            db,
 		authorizer:    authorizer,
 		triggerStore:  triggerStore,
+		uidCheck:      uidCheck,
 		pipelineStore: pipelineStore,
 		repoStore:     repoStore,
 	}
diff --git a/internal/api/controller/trigger/create.go b/internal/api/controller/trigger/create.go
index 8d95174a5..60a8451d4 100644
--- a/internal/api/controller/trigger/create.go
+++ b/internal/api/controller/trigger/create.go
@@ -12,13 +12,17 @@ import (
 	apiauth "github.com/harness/gitness/internal/api/auth"
 	"github.com/harness/gitness/internal/auth"
 	"github.com/harness/gitness/types"
+	"github.com/harness/gitness/types/check"
 	"github.com/harness/gitness/types/enum"
 )
 
 // TODO: Add more as needed.
 type CreateInput struct {
-	Description string `json:"description"`
-	UID         string `json:"uid"`
+	Description string               `json:"description"`
+	UID         string               `json:"uid"`
+	Secret      string               `json:"secret"`
+	Enabled     bool                 `json:"enabled"`
+	Actions     []enum.TriggerAction `json:"actions"`
 }
 
 func (c *Controller) Create(
@@ -39,6 +43,11 @@ func (c *Controller) Create(
 		return nil, fmt.Errorf("failed to authorize pipeline: %w", err)
 	}
 
+	err = c.checkCreateInput(in)
+	if err != nil {
+		return nil, fmt.Errorf("invalid input: %w", err)
+	}
+
 	pipeline, err := c.pipelineStore.FindByUID(ctx, repo.ID, pipelineUID)
 	if err != nil {
 		return nil, fmt.Errorf("failed to find pipeline: %w", err)
@@ -47,6 +56,11 @@ func (c *Controller) Create(
 	now := time.Now().UnixMilli()
 	trigger := &types.Trigger{
 		Description: in.Description,
+		Enabled:     in.Enabled,
+		Secret:      in.Secret,
+		CreatedBy:   session.Principal.ID,
+		RepoID:      repo.ID,
+		Actions:     deduplicateActions(in.Actions),
 		UID:         in.UID,
 		PipelineID:  pipeline.ID,
 		Created:     now,
@@ -60,3 +74,20 @@ func (c *Controller) Create(
 
 	return trigger, nil
 }
+
+func (c *Controller) checkCreateInput(in *CreateInput) error {
+	if err := check.Description(in.Description); err != nil {
+		return err
+	}
+	if err := checkSecret(in.Secret); err != nil {
+		return err
+	}
+	if err := checkActions(in.Actions); err != nil {
+		return err
+	}
+	if err := c.uidCheck(in.UID, false); err != nil {
+		return err
+	}
+
+	return nil
+}
diff --git a/internal/api/controller/trigger/update.go b/internal/api/controller/trigger/update.go
index adef2f668..282d2978c 100644
--- a/internal/api/controller/trigger/update.go
+++ b/internal/api/controller/trigger/update.go
@@ -11,13 +11,17 @@ import (
 	apiauth "github.com/harness/gitness/internal/api/auth"
 	"github.com/harness/gitness/internal/auth"
 	"github.com/harness/gitness/types"
+	"github.com/harness/gitness/types/check"
 	"github.com/harness/gitness/types/enum"
 )
 
 // UpdateInput is used for updating a trigger.
 type UpdateInput struct {
-	Description string `json:"description"`
-	UID         string `json:"uid"`
+	Description *string              `json:"description"`
+	UID         *string              `json:"uid"`
+	Actions     []enum.TriggerAction `json:"actions"`
+	Secret      *string              `json:"secret"`
+	Enabled     *bool                `json:"enabled"` // can be nil, so keeping it a pointer
 }
 
 func (c *Controller) Update(
@@ -38,6 +42,11 @@ func (c *Controller) Update(
 		return nil, fmt.Errorf("failed to authorize pipeline: %w", err)
 	}
 
+	err = c.checkUpdateInput(in)
+	if err != nil {
+		return nil, fmt.Errorf("invalid input: %w", err)
+	}
+
 	pipeline, err := c.pipelineStore.FindByUID(ctx, repo.ID, pipelineUID)
 	if err != nil {
 		return nil, fmt.Errorf("failed to find pipeline: %w", err)
@@ -51,12 +60,48 @@ func (c *Controller) Update(
 	return c.triggerStore.UpdateOptLock(ctx,
 		trigger, func(original *types.Trigger) error {
 			// update values only if provided
-			if in.Description != "" {
-				original.Description = in.Description
+			if in.Description != nil {
+				original.Description = *in.Description
 			}
-			if in.UID != "" {
-				original.UID = in.UID
+			if in.UID != nil {
+				original.UID = *in.UID
 			}
+			if in.Actions != nil {
+				original.Actions = deduplicateActions(in.Actions)
+			}
+			if in.Secret != nil {
+				original.Secret = *in.Secret
+			}
+			if in.Enabled != nil {
+				original.Enabled = *in.Enabled
+			}
+
 			return nil
 		})
 }
+
+func (c *Controller) checkUpdateInput(in *UpdateInput) error {
+	if in.Description != nil {
+		if err := check.Description(*in.Description); err != nil {
+			return err
+		}
+	}
+	if in.Secret != nil {
+		if err := checkSecret(*in.Secret); err != nil {
+			return err
+		}
+	}
+	if in.Actions != nil {
+		if err := checkActions(in.Actions); err != nil {
+			return err
+		}
+	}
+
+	if in.UID != nil {
+		if err := c.uidCheck(*in.UID, false); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
diff --git a/internal/api/controller/trigger/wire.go b/internal/api/controller/trigger/wire.go
index 8fb3ab6f7..09a04b578 100644
--- a/internal/api/controller/trigger/wire.go
+++ b/internal/api/controller/trigger/wire.go
@@ -7,6 +7,7 @@ package trigger
 import (
 	"github.com/harness/gitness/internal/auth/authz"
 	"github.com/harness/gitness/internal/store"
+	"github.com/harness/gitness/types/check"
 
 	"github.com/google/wire"
 	"github.com/jmoiron/sqlx"
@@ -20,8 +21,9 @@ var WireSet = wire.NewSet(
 func ProvideController(db *sqlx.DB,
 	authorizer authz.Authorizer,
 	triggerStore store.TriggerStore,
+	uidCheck check.PathUID,
 	pipelineStore store.PipelineStore,
 	repoStore store.RepoStore,
 ) *Controller {
-	return NewController(db, authorizer, triggerStore, pipelineStore, repoStore)
+	return NewController(db, authorizer, triggerStore, uidCheck, pipelineStore, repoStore)
 }
diff --git a/internal/api/handler/space/events_stream.go b/internal/api/handler/space/events_stream.go
index 1af9e053d..0abebbd33 100644
--- a/internal/api/handler/space/events_stream.go
+++ b/internal/api/handler/space/events_stream.go
@@ -11,6 +11,7 @@ import (
 	"github.com/harness/gitness/internal/api/render"
 	"github.com/harness/gitness/internal/api/request"
 	"github.com/harness/gitness/internal/writer"
+
 	"github.com/rs/zerolog/log"
 )
 
diff --git a/internal/pipeline/commit/gitness.go b/internal/pipeline/commit/gitness.go
index 7701b8906..83400ff8d 100644
--- a/internal/pipeline/commit/gitness.go
+++ b/internal/pipeline/commit/gitness.go
@@ -42,3 +42,24 @@ func (f *service) FindRef(
 	// convert the RPC commit output to a types.Commit.
 	return controller.MapCommit(branchOutput.Branch.Commit)
 }
+
+// FindCommit finds information about a commit in gitness for the git SHA
+func (f *service) FindCommit(
+	ctx context.Context,
+	repo *types.Repository,
+	sha string,
+) (*types.Commit, error) {
+	readParams := gitrpc.ReadParams{
+		RepoUID: repo.GitUID,
+	}
+	commitOutput, err := f.gitRPCClient.GetCommit(ctx, &gitrpc.GetCommitParams{
+		ReadParams: readParams,
+		SHA:        sha,
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	// convert the RPC commit output to a types.Commit.
+	return controller.MapCommit(&commitOutput.Commit)
+}
diff --git a/internal/pipeline/commit/service.go b/internal/pipeline/commit/service.go
index 37359ce00..bcadbe829 100644
--- a/internal/pipeline/commit/service.go
+++ b/internal/pipeline/commit/service.go
@@ -17,5 +17,8 @@ type (
 	CommitService interface {
 		// ref is the ref to fetch the commit from, eg refs/heads/master
 		FindRef(ctx context.Context, repo *types.Repository, ref string) (*types.Commit, error)
+
+		// FindCommit returns information about a commit in a repo.
+		FindCommit(ctx context.Context, repo *types.Repository, sha string) (*types.Commit, error)
 	}
 )
diff --git a/internal/pipeline/manager/manager.go b/internal/pipeline/manager/manager.go
index 182529fdf..bb4919349 100644
--- a/internal/pipeline/manager/manager.go
+++ b/internal/pipeline/manager/manager.go
@@ -9,7 +9,6 @@ import (
 	"errors"
 	"fmt"
 	"io"
-	"time"
 
 	"github.com/harness/gitness/internal/pipeline/events"
 	"github.com/harness/gitness/internal/pipeline/file"
@@ -202,7 +201,6 @@ func (m *Manager) Accept(ctx context.Context, id int64, machine string) (*types.
 
 	stage.Machine = machine
 	stage.Status = enum.CIStatusPending
-	stage.Updated = time.Now().Unix()
 	err = m.Stages.Update(noContext, stage)
 	if errors.Is(err, gitness_store.ErrVersionConflict) {
 		log.Debug().Err(err).Msg("manager: stage processed by another agent")
diff --git a/internal/pipeline/triggerer/skip.go b/internal/pipeline/triggerer/skip.go
index 1821abf38..c952bb831 100644
--- a/internal/pipeline/triggerer/skip.go
+++ b/internal/pipeline/triggerer/skip.go
@@ -7,8 +7,6 @@ package triggerer
 import (
 	"strings"
 
-	"github.com/harness/gitness/types/enum"
-
 	"github.com/drone/drone-yaml/yaml"
 )
 
@@ -44,27 +42,6 @@ func skipCron(document *yaml.Pipeline, cron string) bool {
 	return !document.Trigger.Cron.Match(cron)
 }
 
-func skipMessage(hook *Hook) bool {
-	switch {
-	case hook.Event == enum.TriggerEventTag:
-		return false
-	case hook.Event == enum.TriggerEventCron:
-		return false
-	case hook.Event == enum.TriggerEventCustom:
-		return false
-	case hook.Event == enum.TriggerEventPromote:
-		return false
-	case hook.Event == enum.TriggerEventRollback:
-		return false
-	case skipMessageEval(hook.Message):
-		return true
-	case skipMessageEval(hook.Title):
-		return true
-	default:
-		return false
-	}
-}
-
 func skipMessageEval(str string) bool {
 	lower := strings.ToLower(str)
 	switch {
diff --git a/internal/pipeline/triggerer/trigger.go b/internal/pipeline/triggerer/trigger.go
index 8ef3e425b..e8c1c70ad 100644
--- a/internal/pipeline/triggerer/trigger.go
+++ b/internal/pipeline/triggerer/trigger.go
@@ -23,42 +23,35 @@ import (
 	"github.com/rs/zerolog/log"
 )
 
-// Trigger types
-const (
-	TriggerHook = "@hook"
-	TriggerCron = "@cron"
-)
-
 var _ Triggerer = (*triggerer)(nil)
 
 // Hook represents the payload of a post-commit hook.
 type Hook struct {
-	Parent       int64             `json:"parent"`
-	Trigger      string            `json:"trigger"`
-	Event        string            `json:"event"`
-	Action       string            `json:"action"`
-	Link         string            `json:"link"`
-	Timestamp    int64             `json:"timestamp"`
-	Title        string            `json:"title"`
-	Message      string            `json:"message"`
-	Before       string            `json:"before"`
-	After        string            `json:"after"`
-	Ref          string            `json:"ref"`
-	Fork         string            `json:"fork"`
-	Source       string            `json:"source"`
-	Target       string            `json:"target"`
-	AuthorLogin  string            `json:"author_login"`
-	AuthorName   string            `json:"author_name"`
-	AuthorEmail  string            `json:"author_email"`
-	AuthorAvatar string            `json:"author_avatar"`
-	Debug        bool              `json:"debug"`
-	Cron         string            `json:"cron"`
-	Sender       string            `json:"sender"`
-	Params       map[string]string `json:"params"`
+	Parent       int64              `json:"parent"`
+	Trigger      string             `json:"trigger"`
+	Action       enum.TriggerAction `json:"action"`
+	Link         string             `json:"link"`
+	Timestamp    int64              `json:"timestamp"`
+	Title        string             `json:"title"`
+	Message      string             `json:"message"`
+	Before       string             `json:"before"`
+	After        string             `json:"after"`
+	Ref          string             `json:"ref"`
+	Fork         string             `json:"fork"`
+	Source       string             `json:"source"`
+	Target       string             `json:"target"`
+	AuthorLogin  string             `json:"author_login"`
+	AuthorName   string             `json:"author_name"`
+	AuthorEmail  string             `json:"author_email"`
+	AuthorAvatar string             `json:"author_avatar"`
+	Debug        bool               `json:"debug"`
+	Cron         string             `json:"cron"`
+	Sender       string             `json:"sender"`
+	Params       map[string]string  `json:"params"`
 }
 
 // Triggerer is responsible for triggering a Execution from an
-// incoming drone. If an execution is skipped a nil value is
+// incoming hook (could be manual or webhook). If an execution is skipped a nil value is
 // returned.
 type Triggerer interface {
 	Trigger(ctx context.Context, pipeline *types.Pipeline, hook *Hook) (*types.Execution, error)
@@ -115,16 +108,14 @@ func (t *triggerer) Trigger(
 		}
 	}()
 
+	event := string(base.Action.GetTriggerEvent())
+
 	repo, err := t.repoStore.Find(ctx, pipeline.RepoID)
 	if err != nil {
 		log.Error().Err(err).Msg("could not find repo")
 		return nil, err
 	}
 
-	// if skipMessage(base) {
-	// 	logger.Infoln("trigger: skipping hook. found skip directive")
-	// 	return nil, nil
-	// }
 	// if base.Event == core.TriggerEventPullRequest {
 	// 	if repo.IgnorePulls {
 	// 		logger.Infoln("trigger: skipping hook. project ignores pull requests")
@@ -251,9 +242,9 @@ func (t *triggerer) Trigger(
 
 		if skipBranch(pipeline, base.Target) {
 			log.Info().Str("pipeline", pipeline.Name).Msg("trigger: skipping pipeline, does not match branch")
-		} else if skipEvent(pipeline, base.Event) {
+		} else if skipEvent(pipeline, event) {
 			log.Info().Str("pipeline", pipeline.Name).Msg("trigger: skipping pipeline, does not match event")
-		} else if skipAction(pipeline, base.Action) {
+		} else if skipAction(pipeline, string(base.Action)) {
 			log.Info().Str("pipeline", pipeline.Name).Msg("trigger: skipping pipeline, does not match action")
 		} else if skipRef(pipeline, base.Ref) {
 			log.Info().Str("pipeline", pipeline.Name).Msg("trigger: skipping pipeline, does not match ref")
@@ -282,6 +273,8 @@ func (t *triggerer) Trigger(
 		return nil, err
 	}
 
+	now := time.Now().UnixMilli()
+
 	execution := &types.Execution{
 		RepoID:     repo.ID,
 		PipelineID: pipeline.ID,
@@ -289,8 +282,8 @@ func (t *triggerer) Trigger(
 		Number:     pipeline.Seq,
 		Parent:     base.Parent,
 		Status:     enum.CIStatusPending,
-		Event:      base.Event,
-		Action:     base.Action,
+		Event:      event,
+		Action:     string(base.Action),
 		Link:       base.Link,
 		// Timestamp:    base.Timestamp,
 		Title:        trunc(base.Title, 2000),
@@ -309,8 +302,8 @@ func (t *triggerer) Trigger(
 		Debug:        base.Debug,
 		Sender:       base.Sender,
 		Cron:         base.Cron,
-		Created:      time.Now().Unix(),
-		Updated:      time.Now().Unix(),
+		Created:      now,
+		Updated:      now,
 	}
 
 	stages := make([]*types.Stage, len(matched))
@@ -321,6 +314,8 @@ func (t *triggerer) Trigger(
 			onFailure = false
 		}
 
+		now := time.Now().UnixMilli()
+
 		stage := &types.Stage{
 			RepoID:    repo.ID,
 			Number:    int64(i + 1),
@@ -337,8 +332,8 @@ func (t *triggerer) Trigger(
 			OnSuccess: onSuccess,
 			OnFailure: onFailure,
 			Labels:    match.Node,
-			Created:   time.Now().Unix(),
-			Updated:   time.Now().Unix(),
+			Created:   now,
+			Updated:   now,
 		}
 		if stage.Kind == "pipeline" && stage.Type == "" {
 			stage.Type = "docker"
@@ -454,14 +449,16 @@ func (t *triggerer) createExecutionWithError(
 		return nil, err
 	}
 
+	now := time.Now().UnixMilli()
+
 	execution := &types.Execution{
 		RepoID:       pipeline.RepoID,
 		Number:       pipeline.Seq,
 		Parent:       base.Parent,
 		Status:       enum.CIStatusError,
 		Error:        message,
-		Event:        base.Event,
-		Action:       base.Action,
+		Event:        string(base.Action.GetTriggerEvent()),
+		Action:       string(base.Action),
 		Link:         base.Link,
 		Title:        base.Title,
 		Message:      base.Message,
@@ -477,10 +474,10 @@ func (t *triggerer) createExecutionWithError(
 		AuthorAvatar: base.AuthorAvatar,
 		Debug:        base.Debug,
 		Sender:       base.Sender,
-		Created:      time.Now().Unix(),
-		Updated:      time.Now().Unix(),
-		Started:      time.Now().Unix(),
-		Finished:     time.Now().Unix(),
+		Created:      now,
+		Updated:      now,
+		Started:      now,
+		Finished:     now,
 	}
 
 	err = t.executionStore.Create(ctx, execution)
diff --git a/internal/services/trigger/handler_branch.go b/internal/services/trigger/handler_branch.go
index ff9207ef5..07b54dcd0 100644
--- a/internal/services/trigger/handler_branch.go
+++ b/internal/services/trigger/handler_branch.go
@@ -6,17 +6,76 @@ package trigger
 
 import (
 	"context"
+	"fmt"
+	"strings"
 
 	"github.com/harness/gitness/events"
 	gitevents "github.com/harness/gitness/internal/events/git"
+	"github.com/harness/gitness/internal/pipeline/triggerer"
+	"github.com/harness/gitness/types/enum"
 )
 
+// TODO: This can be moved to SCM library
+func ExtractBranch(ref string) string {
+	return strings.TrimPrefix(ref, "refs/heads/")
+}
+
 func (s *Service) handleEventBranchCreated(ctx context.Context,
 	event *events.Event[*gitevents.BranchCreatedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionBranchCreated,
+		Ref:     event.Payload.Ref,
+		Source:  ExtractBranch(event.Payload.Ref),
+		Target:  ExtractBranch(event.Payload.Ref),
+		After:   event.Payload.SHA,
+	}
+	err := s.augmentCommitInfo(ctx, hook, event.Payload.RepoID, event.Payload.SHA)
+	if err != nil {
+		return fmt.Errorf("could not augment commit info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.RepoID, enum.TriggerActionBranchCreated, hook)
 }
 
 func (s *Service) handleEventBranchUpdated(ctx context.Context,
 	event *events.Event[*gitevents.BranchUpdatedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionBranchUpdated,
+		Ref:     event.Payload.Ref,
+		Before:  event.Payload.OldSHA,
+		After:   event.Payload.NewSHA,
+		Source:  ExtractBranch(event.Payload.Ref),
+		Target:  ExtractBranch(event.Payload.Ref),
+	}
+	err := s.augmentCommitInfo(ctx, hook, event.Payload.RepoID, event.Payload.NewSHA)
+	if err != nil {
+		return fmt.Errorf("could not augment commit info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.RepoID, enum.TriggerActionBranchUpdated, hook)
+}
+
+// augmentCommitInfo adds information about the commit to the hook by interacting with
+// the commit service.
+func (s *Service) augmentCommitInfo(
+	ctx context.Context,
+	hook *triggerer.Hook,
+	repoID int64,
+	sha string,
+) error {
+	repo, err := s.repoStore.Find(ctx, repoID)
+	if err != nil {
+		return fmt.Errorf("could not find repo: %w", err)
+	}
+	commit, err := s.commitSvc.FindCommit(ctx, repo, sha)
+	if err != nil {
+		return fmt.Errorf("could not find commit info")
+	}
+	hook.AuthorName = commit.Author.Identity.Name
+	hook.Title = commit.Title
+	hook.Timestamp = commit.Committer.When.UnixMilli()
+	hook.AuthorLogin = commit.Author.Identity.Name
+	hook.AuthorEmail = commit.Author.Identity.Email
+	hook.Message = commit.Message
+	return nil
 }
diff --git a/internal/services/trigger/handler_pullreq.go b/internal/services/trigger/handler_pullreq.go
index 7f209d85a..fd65444de 100644
--- a/internal/services/trigger/handler_pullreq.go
+++ b/internal/services/trigger/handler_pullreq.go
@@ -6,22 +6,79 @@ package trigger
 
 import (
 	"context"
+	"fmt"
 
 	"github.com/harness/gitness/events"
 	pullreqevents "github.com/harness/gitness/internal/events/pullreq"
+	"github.com/harness/gitness/internal/pipeline/triggerer"
+	"github.com/harness/gitness/types/enum"
+
+	"github.com/drone/go-scm/scm"
 )
 
 func (s *Service) handleEventPullReqCreated(ctx context.Context,
 	event *events.Event[*pullreqevents.CreatedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionPullReqCreated,
+		After:   event.Payload.SourceSHA,
+	}
+	err := s.augmentPullReqInfo(ctx, hook, event.Payload.PullReqID)
+	if err != nil {
+		return fmt.Errorf("could not augment pull request info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.SourceRepoID, enum.TriggerActionPullReqCreated, hook)
 }
 
 func (s *Service) handleEventPullReqReopened(ctx context.Context,
 	event *events.Event[*pullreqevents.ReopenedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionPullReqReopened,
+		After:   event.Payload.SourceSHA,
+	}
+	err := s.augmentPullReqInfo(ctx, hook, event.Payload.PullReqID)
+	if err != nil {
+		return fmt.Errorf("could not augment pull request info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.SourceRepoID, enum.TriggerActionPullReqReopened, hook)
 }
 
 func (s *Service) handleEventPullReqBranchUpdated(ctx context.Context,
 	event *events.Event[*pullreqevents.BranchUpdatedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionPullReqBranchUpdated,
+		After:   event.Payload.NewSHA,
+	}
+	err := s.augmentPullReqInfo(ctx, hook, event.Payload.PullReqID)
+	if err != nil {
+		return fmt.Errorf("could not augment pull request info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.SourceRepoID, enum.TriggerActionPullReqBranchUpdated, hook)
+}
+
+// augmentPullReqInfo adds in information into the hook pertaining to the pull request
+// by querying the database.
+func (s *Service) augmentPullReqInfo(
+	ctx context.Context,
+	hook *triggerer.Hook,
+	pullReqID int64,
+) error {
+	pullreq, err := s.pullReqStore.Find(ctx, pullReqID)
+	if err != nil {
+		return fmt.Errorf("could not find pull request: %w", err)
+	}
+	hook.Title = pullreq.Title
+	hook.Timestamp = pullreq.Created
+	hook.AuthorLogin = pullreq.Author.UID
+	hook.AuthorName = pullreq.Author.DisplayName
+	hook.AuthorEmail = pullreq.Author.Email
+	hook.Message = pullreq.Description
+	hook.Before = pullreq.MergeBaseSHA
+	hook.Target = pullreq.TargetBranch
+	hook.Source = pullreq.SourceBranch
+	// expand the branch to a git reference.
+	hook.Ref = scm.ExpandRef(pullreq.SourceBranch, "refs/heads")
+	return nil
 }
diff --git a/internal/services/trigger/handler_tag.go b/internal/services/trigger/handler_tag.go
index c69c76809..b96c523fb 100644
--- a/internal/services/trigger/handler_tag.go
+++ b/internal/services/trigger/handler_tag.go
@@ -6,17 +6,46 @@ package trigger
 
 import (
 	"context"
+	"fmt"
 
 	"github.com/harness/gitness/events"
 	gitevents "github.com/harness/gitness/internal/events/git"
+	"github.com/harness/gitness/internal/pipeline/triggerer"
+	"github.com/harness/gitness/types/enum"
 )
 
 func (s *Service) handleEventTagCreated(ctx context.Context,
 	event *events.Event[*gitevents.TagCreatedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionTagCreated,
+		Ref:     event.Payload.Ref,
+		Before:  event.Payload.SHA,
+		After:   event.Payload.SHA,
+		Source:  event.Payload.Ref,
+		Target:  event.Payload.Ref,
+	}
+	err := s.augmentCommitInfo(ctx, hook, event.Payload.RepoID, event.Payload.SHA)
+	if err != nil {
+		return fmt.Errorf("could not augment commit info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.RepoID, enum.TriggerActionTagCreated, hook)
 }
 
 func (s *Service) handleEventTagUpdated(ctx context.Context,
 	event *events.Event[*gitevents.TagUpdatedPayload]) error {
-	return events.NewDiscardEventErrorf("not implemented")
+	hook := &triggerer.Hook{
+		Trigger: enum.TriggerHook,
+		Action:  enum.TriggerActionTagUpdated,
+		Ref:     event.Payload.Ref,
+		Before:  event.Payload.OldSHA,
+		After:   event.Payload.NewSHA,
+		Source:  event.Payload.Ref,
+		Target:  event.Payload.Ref,
+	}
+	err := s.augmentCommitInfo(ctx, hook, event.Payload.RepoID, event.Payload.NewSHA)
+	if err != nil {
+		return fmt.Errorf("could not augment commit info: %w", err)
+	}
+	return s.trigger(ctx, event.Payload.RepoID, enum.TriggerActionTagUpdated, hook)
 }
diff --git a/internal/services/trigger/service.go b/internal/services/trigger/service.go
index c2e58a5a6..4a89155a9 100644
--- a/internal/services/trigger/service.go
+++ b/internal/services/trigger/service.go
@@ -13,7 +13,14 @@ import (
 	"github.com/harness/gitness/events"
 	gitevents "github.com/harness/gitness/internal/events/git"
 	pullreqevents "github.com/harness/gitness/internal/events/pullreq"
+	"github.com/harness/gitness/internal/pipeline/commit"
+	"github.com/harness/gitness/internal/pipeline/triggerer"
+	"github.com/harness/gitness/internal/store"
 	"github.com/harness/gitness/stream"
+	"github.com/harness/gitness/types"
+	"github.com/harness/gitness/types/enum"
+
+	"github.com/hashicorp/go-multierror"
 )
 
 const (
@@ -43,11 +50,24 @@ func (c *Config) Prepare() error {
 	return nil
 }
 
-type Service struct{}
+type Service struct {
+	triggerStore  store.TriggerStore
+	pullReqStore  store.PullReqStore
+	repoStore     store.RepoStore
+	pipelineStore store.PipelineStore
+	triggerSvc    triggerer.Triggerer
+	commitSvc     commit.CommitService
+}
 
 func New(
 	ctx context.Context,
 	config Config,
+	triggerStore store.TriggerStore,
+	pullReqStore store.PullReqStore,
+	repoStore store.RepoStore,
+	pipelineStore store.PipelineStore,
+	triggerSvc triggerer.Triggerer,
+	commitSvc commit.CommitService,
 	gitReaderFactory *events.ReaderFactory[*gitevents.Reader],
 	pullreqEvReaderFactory *events.ReaderFactory[*pullreqevents.Reader],
 ) (*Service, error) {
@@ -55,7 +75,14 @@ func New(
 		return nil, fmt.Errorf("provided trigger service config is invalid: %w", err)
 	}
 
-	service := &Service{}
+	service := &Service{
+		triggerStore:  triggerStore,
+		pullReqStore:  pullReqStore,
+		repoStore:     repoStore,
+		commitSvc:     commitSvc,
+		pipelineStore: pipelineStore,
+		triggerSvc:    triggerSvc,
+	}
 
 	_, err := gitReaderFactory.Launch(ctx, eventsReaderGroupName, config.EventReaderName,
 		func(r *gitevents.Reader) error {
@@ -101,3 +128,40 @@ func New(
 
 	return service, nil
 }
+
+// trigger a build given an action on a repo and a hook.
+// It tries to find all enabled triggers, see if the action is the same
+// as the trigger action - and if so, find the pipeline for the trigger
+// and fire an execution.
+func (s *Service) trigger(ctx context.Context, repoID int64,
+	action enum.TriggerAction, hook *triggerer.Hook) error {
+	// Get all enabled triggers for a repo.
+	ret, err := s.triggerStore.ListAllEnabled(ctx, repoID)
+	if err != nil {
+		return fmt.Errorf("failed to list all enabled triggers: %w", err)
+	}
+	validTriggers := []*types.Trigger{}
+	// Check which triggers are eligible to be fired
+	for _, t := range ret {
+		for _, a := range t.Actions {
+			if a == action {
+				validTriggers = append(validTriggers, t)
+				break
+			}
+		}
+	}
+
+	var errs error
+	for _, t := range validTriggers {
+		pipeline, err := s.pipelineStore.Find(ctx, t.PipelineID)
+		if err != nil {
+			errs = multierror.Append(errs, err)
+		}
+
+		_, err = s.triggerSvc.Trigger(ctx, pipeline, hook)
+		if err != nil {
+			errs = multierror.Append(errs, err)
+		}
+	}
+	return errs
+}
diff --git a/internal/services/trigger/wire.go b/internal/services/trigger/wire.go
index fab566b95..3c11aface 100644
--- a/internal/services/trigger/wire.go
+++ b/internal/services/trigger/wire.go
@@ -10,6 +10,9 @@ import (
 	"github.com/harness/gitness/events"
 	gitevents "github.com/harness/gitness/internal/events/git"
 	pullreqevents "github.com/harness/gitness/internal/events/pullreq"
+	"github.com/harness/gitness/internal/pipeline/commit"
+	"github.com/harness/gitness/internal/pipeline/triggerer"
+	"github.com/harness/gitness/internal/store"
 
 	"github.com/google/wire"
 )
@@ -21,8 +24,15 @@ var WireSet = wire.NewSet(
 func ProvideService(
 	ctx context.Context,
 	config Config,
+	triggerStore store.TriggerStore,
+	commitSvc commit.CommitService,
+	pullReqStore store.PullReqStore,
+	repoStore store.RepoStore,
+	pipelineStore store.PipelineStore,
+	triggerSvc triggerer.Triggerer,
 	gitReaderFactory *events.ReaderFactory[*gitevents.Reader],
 	pullReqEvFactory *events.ReaderFactory[*pullreqevents.Reader],
 ) (*Service, error) {
-	return New(ctx, config, gitReaderFactory, pullReqEvFactory)
+	return New(ctx, config, triggerStore, pullReqStore, repoStore, pipelineStore, triggerSvc,
+		commitSvc, gitReaderFactory, pullReqEvFactory)
 }
diff --git a/internal/store/database.go b/internal/store/database.go
index 954c5b0dc..d9058cc0e 100644
--- a/internal/store/database.go
+++ b/internal/store/database.go
@@ -694,6 +694,10 @@ type (
 
 		// Count the number of triggers in a pipeline.
 		Count(ctx context.Context, pipelineID int64, filter types.ListQueryFilter) (int64, error)
+
+		// ListAllEnabled lists all enabled triggers for a given repo without pagination.
+		// It's used only internally to trigger builds.
+		ListAllEnabled(ctx context.Context, repoID int64) ([]*types.Trigger, error)
 	}
 
 	PluginStore interface {
diff --git a/internal/store/database/migrate/ci/ci_migrations.sql b/internal/store/database/migrate/ci/ci_migrations.sql
index c580d0059..8ccd773d3 100644
--- a/internal/store/database/migrate/ci/ci_migrations.sql
+++ b/internal/store/database/migrate/ci/ci_migrations.sql
@@ -261,8 +261,13 @@ CREATE TABLE templates (
 CREATE TABLE triggers (
     trigger_id INTEGER PRIMARY KEY AUTOINCREMENT
     ,trigger_uid TEXT NOT NULL
-    ,trigger_description TEXT NOT NULL
     ,trigger_pipeline_id INTEGER NOT NULL
+    ,trigger_repo_id INTEGER NOT NULL
+    ,trigger_secret TEXT NOT NULL
+    ,trigger_description TEXT NOT NULL
+    ,trigger_enabled BOOLEAN NOT NULL
+    ,trigger_created_by INTEGER NOT NULL
+    ,trigger_actions TEXT NOT NULL
     ,trigger_created INTEGER NOT NULL
     ,trigger_updated INTEGER NOT NULL
     ,trigger_version INTEGER NOT NULL
@@ -270,11 +275,17 @@ CREATE TABLE triggers (
     -- Ensure unique combination of pipeline ID and UID
     ,UNIQUE (trigger_pipeline_id, trigger_uid)
 
-    -- Foreign key to spaces table
+    -- Foreign key to pipelines table
     ,CONSTRAINT fk_triggers_pipeline_id FOREIGN KEY (trigger_pipeline_id)
         REFERENCES pipelines (pipeline_id) MATCH SIMPLE
         ON UPDATE NO ACTION
         ON DELETE CASCADE
+
+    -- Foreign key to repositories table
+    ,CONSTRAINT fk_triggers_repo_id FOREIGN KEY (trigger_repo_id)
+        REFERENCES repositories (repo_id) MATCH SIMPLE
+        ON UPDATE NO ACTION
+        ON DELETE CASCADE
 );
 
 CREATE TABLE plugins (
diff --git a/internal/store/database/trigger.go b/internal/store/database/trigger.go
index f7a3164e8..b0c61c39a 100644
--- a/internal/store/database/trigger.go
+++ b/internal/store/database/trigger.go
@@ -6,6 +6,7 @@ package database
 
 import (
 	"context"
+	"encoding/json"
 	"fmt"
 	"strings"
 	"time"
@@ -15,13 +16,82 @@ import (
 	"github.com/harness/gitness/store/database"
 	"github.com/harness/gitness/store/database/dbtx"
 	"github.com/harness/gitness/types"
+	"github.com/harness/gitness/types/enum"
 
 	"github.com/jmoiron/sqlx"
+	sqlxtypes "github.com/jmoiron/sqlx/types"
 	"github.com/pkg/errors"
 )
 
 var _ store.TriggerStore = (*triggerStore)(nil)
 
+type trigger struct {
+	ID          int64              `db:"trigger_id"`
+	UID         string             `db:"trigger_uid"`
+	Description string             `db:"trigger_description"`
+	Secret      string             `db:"trigger_secret"`
+	PipelineID  int64              `db:"trigger_pipeline_id"`
+	RepoID      int64              `db:"trigger_repo_id"`
+	CreatedBy   int64              `db:"trigger_created_by"`
+	Enabled     bool               `db:"trigger_enabled"`
+	Actions     sqlxtypes.JSONText `db:"trigger_actions"`
+	Created     int64              `db:"trigger_created"`
+	Updated     int64              `db:"trigger_updated"`
+	Version     int64              `db:"trigger_version"`
+}
+
+func mapInternalToTrigger(trigger *trigger) (*types.Trigger, error) {
+	var actions []enum.TriggerAction
+	err := json.Unmarshal(trigger.Actions, &actions)
+	if err != nil {
+		return nil, errors.Wrap(err, "could not unmarshal trigger.actions")
+	}
+
+	return &types.Trigger{
+		ID:          trigger.ID,
+		Description: trigger.Description,
+		Secret:      trigger.Secret,
+		PipelineID:  trigger.PipelineID,
+		RepoID:      trigger.RepoID,
+		CreatedBy:   trigger.CreatedBy,
+		Enabled:     trigger.Enabled,
+		Actions:     actions,
+		UID:         trigger.UID,
+		Created:     trigger.Created,
+		Updated:     trigger.Updated,
+		Version:     trigger.Version,
+	}, nil
+}
+
+func mapInternalToTriggerList(triggers []*trigger) ([]*types.Trigger, error) {
+	ret := make([]*types.Trigger, len(triggers))
+	for i, t := range triggers {
+		trigger, err := mapInternalToTrigger(t)
+		if err != nil {
+			return nil, err
+		}
+		ret[i] = trigger
+	}
+	return ret, nil
+}
+
+func mapTriggerToInternal(t *types.Trigger) *trigger {
+	return &trigger{
+		ID:          t.ID,
+		UID:         t.UID,
+		Description: t.Description,
+		PipelineID:  t.PipelineID,
+		Secret:      t.Secret,
+		RepoID:      t.RepoID,
+		CreatedBy:   t.CreatedBy,
+		Enabled:     t.Enabled,
+		Actions:     EncodeToSQLXJSON(t.Actions),
+		Created:     t.Created,
+		Updated:     t.Updated,
+		Version:     t.Version,
+	}
+}
+
 // NewTriggerStore returns a new TriggerStore.
 func NewTriggerStore(db *sqlx.DB) *triggerStore {
 	return &triggerStore{
@@ -37,6 +107,8 @@ const (
 	triggerColumns = `
 		trigger_id
 		,trigger_uid
+		,trigger_enabled
+		,trigger_actions
 		,trigger_description
 		,trigger_pipeline_id
 		,trigger_created
@@ -53,33 +125,44 @@ func (s *triggerStore) FindByUID(ctx context.Context, pipelineID int64, uid stri
 	WHERE trigger_pipeline_id = $1 AND trigger_uid = $2`
 	db := dbtx.GetAccessor(ctx, s.db)
 
-	dst := new(types.Trigger)
+	dst := new(trigger)
 	if err := db.GetContext(ctx, dst, findQueryStmt, pipelineID, uid); err != nil {
 		return nil, database.ProcessSQLErrorf(err, "Failed to find trigger")
 	}
-	return dst, nil
+	return mapInternalToTrigger(dst)
 }
 
 // Create creates a new trigger in the datastore.
-func (s *triggerStore) Create(ctx context.Context, trigger *types.Trigger) error {
+func (s *triggerStore) Create(ctx context.Context, t *types.Trigger) error {
 	const triggerInsertStmt = `
 	INSERT INTO triggers (
 		trigger_uid
 		,trigger_description
+		,trigger_actions
+		,trigger_enabled
+		,trigger_secret
+		,trigger_created_by
 		,trigger_pipeline_id
+		,trigger_repo_id
 		,trigger_created
 		,trigger_updated
 		,trigger_version
 	) VALUES (
 		:trigger_uid
 		,:trigger_description
+		,:trigger_actions
+		,:trigger_enabled
+		,:trigger_secret
+		,:trigger_created_by
 		,:trigger_pipeline_id
+		,:trigger_repo_id
 		,:trigger_created
 		,:trigger_updated
 		,:trigger_version
 	) RETURNING trigger_id`
 	db := dbtx.GetAccessor(ctx, s.db)
 
+	trigger := mapTriggerToInternal(t)
 	query, arg, err := db.BindNamed(triggerInsertStmt, trigger)
 	if err != nil {
 		return database.ProcessSQLErrorf(err, "Failed to bind trigger object")
@@ -93,17 +176,18 @@ func (s *triggerStore) Create(ctx context.Context, trigger *types.Trigger) error
 }
 
 // Update tries to update an trigger in the datastore with optimistic locking.
-func (s *triggerStore) Update(ctx context.Context, e *types.Trigger) error {
+func (s *triggerStore) Update(ctx context.Context, t *types.Trigger) error {
 	const triggerUpdateStmt = `
 	UPDATE triggers
 	SET
 		trigger_uid = :trigger_uid
 		,trigger_description = :trigger_description
 		,trigger_updated = :trigger_updated
+		,trigger_actions = :trigger_actions
 		,trigger_version = :trigger_version
 	WHERE trigger_id = :trigger_id AND trigger_version = :trigger_version - 1`
 	updatedAt := time.Now()
-	trigger := *e
+	trigger := mapTriggerToInternal(t)
 
 	trigger.Version++
 	trigger.Updated = updatedAt.UnixMilli()
@@ -129,8 +213,8 @@ func (s *triggerStore) Update(ctx context.Context, e *types.Trigger) error {
 		return gitness_store.ErrVersionConflict
 	}
 
-	e.Version = trigger.Version
-	e.Updated = trigger.Updated
+	t.Version = trigger.Version
+	t.Updated = trigger.Updated
 	return nil
 }
 
@@ -186,12 +270,37 @@ func (s *triggerStore) List(
 
 	db := dbtx.GetAccessor(ctx, s.db)
 
-	dst := []*types.Trigger{}
+	dst := []*trigger{}
 	if err = db.SelectContext(ctx, &dst, sql, args...); err != nil {
 		return nil, database.ProcessSQLErrorf(err, "Failed executing custom list query")
 	}
 
-	return dst, nil
+	return mapInternalToTriggerList(dst)
+}
+
+// ListAllEnabled lists all enabled triggers for a given repo without pagination
+func (s *triggerStore) ListAllEnabled(
+	ctx context.Context,
+	repoID int64,
+) ([]*types.Trigger, error) {
+	stmt := database.Builder.
+		Select(triggerColumns).
+		From("triggers").
+		Where("trigger_repo_id = ? AND trigger_enabled = true", fmt.Sprint(repoID))
+
+	sql, args, err := stmt.ToSql()
+	if err != nil {
+		return nil, errors.Wrap(err, "Failed to convert query to sql")
+	}
+
+	db := dbtx.GetAccessor(ctx, s.db)
+
+	dst := []*trigger{}
+	if err = db.SelectContext(ctx, &dst, sql, args...); err != nil {
+		return nil, database.ProcessSQLErrorf(err, "Failed executing custom list query")
+	}
+
+	return mapInternalToTriggerList(dst)
 }
 
 // Count of triggers under a given pipeline.
diff --git a/types/enum/trigger_actions.go b/types/enum/trigger_actions.go
new file mode 100644
index 000000000..2ab492275
--- /dev/null
+++ b/types/enum/trigger_actions.go
@@ -0,0 +1,60 @@
+package enum
+
+// TriggerAction defines the different actions on triggers will fire.
+type TriggerAction string
+
+// These are similar to enums defined in webhook enum but can diverge
+// as these are different entities.
+const (
+	// TriggerActionBranchCreated gets triggered when a branch gets created.
+	TriggerActionBranchCreated TriggerAction = "branch_created"
+	// TriggerActionBranchUpdated gets triggered when a branch gets updated.
+	TriggerActionBranchUpdated TriggerAction = "branch_updated"
+
+	// TriggerActionTagCreated gets triggered when a tag gets created.
+	TriggerActionTagCreated TriggerAction = "tag_created"
+	// TriggerActionTagUpdated gets triggered when a tag gets updated.
+	TriggerActionTagUpdated TriggerAction = "tag_updated"
+
+	// TriggerActionPullReqCreated gets triggered when a pull request gets created.
+	TriggerActionPullReqCreated TriggerAction = "pullreq_created"
+	// TriggerActionPullReqReopened gets triggered when a pull request gets reopened.
+	TriggerActionPullReqReopened TriggerAction = "pullreq_reopened"
+	// TriggerActionPullReqBranchUpdated gets triggered when a pull request source branch gets updated.
+	TriggerActionPullReqBranchUpdated TriggerAction = "pullreq_branch_updated"
+)
+
+func (TriggerAction) Enum() []interface{}               { return toInterfaceSlice(triggerActions) }
+func (s TriggerAction) Sanitize() (TriggerAction, bool) { return Sanitize(s, GetAllTriggerActions) }
+func (t TriggerAction) GetTriggerEvent() TriggerEvent {
+	if t == TriggerActionPullReqCreated ||
+		t == TriggerActionPullReqBranchUpdated ||
+		t == TriggerActionPullReqReopened {
+		return TriggerEventPullRequest
+	} else if t == TriggerActionTagCreated || t == TriggerActionTagUpdated {
+		return TriggerEventTag
+	} else if t == "" {
+		return TriggerEventManual
+	}
+	return TriggerEventPush
+}
+
+func GetAllTriggerActions() ([]TriggerAction, TriggerAction) {
+	return triggerActions, "" // No default value
+}
+
+var triggerActions = sortEnum([]TriggerAction{
+	TriggerActionBranchCreated,
+	TriggerActionBranchUpdated,
+	TriggerActionTagCreated,
+	TriggerActionTagUpdated,
+	TriggerActionPullReqCreated,
+	TriggerActionPullReqReopened,
+	TriggerActionPullReqBranchUpdated,
+})
+
+// Trigger types
+const (
+	TriggerHook = "@hook"
+	TriggerCron = "@cron"
+)
diff --git a/types/enum/trigger_events.go b/types/enum/trigger_events.go
index df1090c50..a00f84f81 100644
--- a/types/enum/trigger_events.go
+++ b/types/enum/trigger_events.go
@@ -4,13 +4,14 @@
 
 package enum
 
+// TriggerEvent defines the different kinds of events in triggers.
+type TriggerEvent string
+
 // Hook event constants.
 const (
 	TriggerEventCron        = "cron"
-	TriggerEventCustom      = "custom"
+	TriggerEventManual      = "manual"
 	TriggerEventPush        = "push"
 	TriggerEventPullRequest = "pull_request"
 	TriggerEventTag         = "tag"
-	TriggerEventPromote     = "promote"
-	TriggerEventRollback    = "rollback"
 )
diff --git a/types/trigger.go b/types/trigger.go
index 81a6ebccc..c6c2ac28c 100644
--- a/types/trigger.go
+++ b/types/trigger.go
@@ -4,12 +4,19 @@
 
 package types
 
+import "github.com/harness/gitness/types/enum"
+
 type Trigger struct {
-	ID          int64  `db:"trigger_id"              json:"id"`
-	Description string `db:"trigger_description"     json:"description"`
-	PipelineID  int64  `db:"trigger_pipeline_id"     json:"pipeline_id"`
-	UID         string `db:"trigger_uid"             json:"uid"`
-	Created     int64  `db:"trigger_created"         json:"created"`
-	Updated     int64  `db:"trigger_updated"         json:"updated"`
-	Version     int64  `db:"trigger_version"         json:"-"`
+	ID          int64                `json:"id"`
+	Description string               `json:"description"`
+	PipelineID  int64                `json:"pipeline_id"`
+	Secret      string               `json:"-"`
+	RepoID      int64                `json:"repo_id"`
+	CreatedBy   int64                `json:"created_by"`
+	Enabled     bool                 `json:"enabled"`
+	Actions     []enum.TriggerAction `json:"actions"`
+	UID         string               `json:"uid"`
+	Created     int64                `json:"created"`
+	Updated     int64                `json:"updated"`
+	Version     int64                `json:"-"`
 }

From 68792a95819638746048e674c202bbf205f16d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Ga=C4=87e=C5=A1a?= <marko.gacesa@harness.io>
Date: Tue, 12 Sep 2023 13:34:52 +0200
Subject: [PATCH 34/38] require scm auth for import API; import repo job
 encrypt

---
 cmd/gitness/wire_gen.go                  |  10 +-
 internal/services/importer/provider.go   | 148 ++++++++++-------------
 internal/services/importer/repository.go |  93 ++++++++------
 internal/services/importer/wire.go       |   3 +
 4 files changed, 132 insertions(+), 122 deletions(-)

diff --git a/cmd/gitness/wire_gen.go b/cmd/gitness/wire_gen.go
index 44d295df0..39121cf0b 100644
--- a/cmd/gitness/wire_gen.go
+++ b/cmd/gitness/wire_gen.go
@@ -106,6 +106,10 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 	if err != nil {
 		return nil, err
 	}
+	encrypter, err := encrypt.ProvideEncrypter(config)
+	if err != nil {
+		return nil, err
+	}
 	jobStore := database.ProvideJobStore(db)
 	pubsubConfig := pubsub.ProvideConfig(config)
 	universalClient, err := server.ProvideRedis(config)
@@ -120,7 +124,7 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 	if err != nil {
 		return nil, err
 	}
-	repository, err := importer.ProvideRepoImporter(config, provider, gitrpcInterface, repoStore, jobScheduler, executor)
+	repository, err := importer.ProvideRepoImporter(config, provider, gitrpcInterface, repoStore, encrypter, jobScheduler, executor)
 	if err != nil {
 		return nil, err
 	}
@@ -146,10 +150,6 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 	spaceController := space.ProvideController(db, provider, eventsStreamer, pathUID, authorizer, pathStore, pipelineStore, secretStore, connectorStore, templateStore, spaceStore, repoStore, principalStore, repoController, membershipStore, repository)
 	triggerStore := database.ProvideTriggerStore(db)
 	pipelineController := pipeline.ProvideController(db, pathUID, pathStore, repoStore, triggerStore, authorizer, pipelineStore)
-	encrypter, err := encrypt.ProvideEncrypter(config)
-	if err != nil {
-		return nil, err
-	}
 	secretController := secret.ProvideController(db, pathUID, pathStore, encrypter, secretStore, authorizer, spaceStore)
 	triggerController := trigger.ProvideController(db, authorizer, triggerStore, pathUID, pipelineStore, repoStore)
 	connectorController := connector.ProvideController(db, pathUID, connectorStore, authorizer, spaceStore)
diff --git a/internal/services/importer/provider.go b/internal/services/importer/provider.go
index 3a50d25b9..6fcc675c3 100644
--- a/internal/services/importer/provider.go
+++ b/internal/services/importer/provider.go
@@ -23,18 +23,14 @@ import (
 type ProviderType string
 
 const (
-	ProviderTypeGitHub           ProviderType = "github"
-	ProviderTypeGitHubEnterprise ProviderType = "github-enterprise"
-	ProviderTypeGitLab           ProviderType = "gitlab"
-	ProviderTypeGitLabEnterprise ProviderType = "gitlab-enterprise"
+	ProviderTypeGitHub ProviderType = "github"
+	ProviderTypeGitLab ProviderType = "gitlab"
 )
 
 func (p ProviderType) Enum() []any {
 	return []any{
 		ProviderTypeGitHub,
-		ProviderTypeGitHubEnterprise,
 		ProviderTypeGitLab,
-		ProviderTypeGitLabEnterprise,
 	}
 }
 
@@ -83,67 +79,48 @@ func (r *RepositoryInfo) ToRepo(
 }
 
 func getClient(provider Provider) (*scm.Client, error) {
+	if provider.Username == "" || provider.Password == "" {
+		return nil, usererror.BadRequest("scm provider authentication credentials missing")
+	}
+
+	var c *scm.Client
+	var err error
+
 	switch provider.Type {
 	case "":
-		return nil, usererror.BadRequest("provider can not be empty")
+		return nil, usererror.BadRequest("scm provider can not be empty")
 
 	case ProviderTypeGitHub:
-		c := github.NewDefault()
-		if provider.Password != "" {
-			c.Client = &http.Client{
-				Transport: &oauth2.Transport{
-					Source: oauth2.StaticTokenSource(&scm.Token{Token: provider.Password}),
-				},
+		if provider.Host != "" {
+			c, err = github.New(provider.Host)
+			if err != nil {
+				return nil, usererror.BadRequestf("scm provider Host invalid: %s", err.Error())
 			}
+		} else {
+			c = github.NewDefault()
 		}
-		return c, nil
-
-	case ProviderTypeGitHubEnterprise:
-		c, err := github.New(provider.Host)
-		if err != nil {
-			return nil, usererror.BadRequestf("provider Host invalid: %s", err.Error())
-		}
-
-		if provider.Password != "" {
-			c.Client = &http.Client{
-				Transport: &oauth2.Transport{
-					Source: oauth2.StaticTokenSource(&scm.Token{Token: provider.Password}),
-				},
-			}
-		}
-		return c, nil
 
 	case ProviderTypeGitLab:
-		c := gitlab.NewDefault()
-		if provider.Password != "" {
-			c.Client = &http.Client{
-				Transport: &oauth2.Transport{
-					Source: oauth2.StaticTokenSource(&scm.Token{Token: provider.Password}),
-				},
+		if provider.Host != "" {
+			c, err = gitlab.New(provider.Host)
+			if err != nil {
+				return nil, usererror.BadRequestf("scm provider Host invalid: %s", err.Error())
 			}
+		} else {
+			c = gitlab.NewDefault()
 		}
 
-		return c, nil
-
-	case ProviderTypeGitLabEnterprise:
-		c, err := gitlab.New(provider.Host)
-		if err != nil {
-			return nil, usererror.BadRequestf("provider Host invalid: %s", err.Error())
-		}
-
-		if provider.Password != "" {
-			c.Client = &http.Client{
-				Transport: &oauth2.Transport{
-					Source: oauth2.StaticTokenSource(&scm.Token{Token: provider.Password}),
-				},
-			}
-		}
-
-		return c, nil
-
 	default:
-		return nil, usererror.BadRequestf("unsupported provider: %s", provider)
+		return nil, usererror.BadRequestf("unsupported scm provider: %s", provider)
 	}
+
+	c.Client = &http.Client{
+		Transport: &oauth2.Transport{
+			Source: oauth2.StaticTokenSource(&scm.Token{Token: provider.Password}),
+		},
+	}
+
+	return c, nil
 }
 func LoadRepositoryFromProvider(ctx context.Context, provider Provider, repoSlug string) (RepositoryInfo, error) {
 	scmClient, err := getClient(provider)
@@ -155,18 +132,24 @@ func LoadRepositoryFromProvider(ctx context.Context, provider Provider, repoSlug
 		return RepositoryInfo{}, usererror.BadRequest("provider repository identifier is missing")
 	}
 
-	scmRepo, _, err := scmClient.Repositories.Find(ctx, repoSlug)
-	if errors.Is(err, scm.ErrNotFound) {
+	var statusCode int
+	scmRepo, scmResp, err := scmClient.Repositories.Find(ctx, repoSlug)
+	if scmResp != nil {
+		statusCode = scmResp.Status
+	}
+
+	if errors.Is(err, scm.ErrNotFound) || statusCode == http.StatusNotFound {
 		return RepositoryInfo{},
 			usererror.BadRequestf("repository %s not found at %s", repoSlug, provider.Type)
 	}
-	if errors.Is(err, scm.ErrNotAuthorized) {
+	if errors.Is(err, scm.ErrNotAuthorized) || statusCode == http.StatusUnauthorized {
 		return RepositoryInfo{},
 			usererror.BadRequestf("bad credentials provided for %s at %s", repoSlug, provider.Type)
 	}
-	if err != nil {
+	if err != nil || statusCode > 299 {
 		return RepositoryInfo{},
-			fmt.Errorf("failed to fetch repository %s from %s: %w", repoSlug, provider.Type, err)
+			fmt.Errorf("failed to fetch repository %s from %s, status=%d: %w",
+				repoSlug, provider.Type, statusCode, err)
 	}
 
 	return RepositoryInfo{
@@ -188,33 +171,38 @@ func LoadRepositoriesFromProviderSpace(ctx context.Context, provider Provider, s
 		return nil, usererror.BadRequest("provider space identifier is missing")
 	}
 
-	repos := make([]RepositoryInfo, 0)
+	const pageSize = 100
+	opts := scm.ListOptions{Page: 0, Size: pageSize}
 
-	const pageSize = 50
-	page := 1
+	repos := make([]RepositoryInfo, 0)
 	for {
-		scmRepos, scmResponse, err := scmClient.Repositories.ListV2(ctx, scm.RepoListOptions{
-			ListOptions: scm.ListOptions{
-				URL:  "",
-				Page: page,
-				Size: pageSize,
-			},
-			RepoSearchTerm: scm.RepoSearchTerm{
-				RepoName: "",
-				User:     spaceSlug,
-			},
-		})
-		if errors.Is(err, scm.ErrNotFound) {
+		opts.Page++
+
+		var statusCode int
+		scmRepos, scmResp, err := scmClient.Repositories.List(ctx, opts)
+		if scmResp != nil {
+			statusCode = scmResp.Status
+		}
+
+		if errors.Is(err, scm.ErrNotFound) || statusCode == http.StatusNotFound {
 			return nil, usererror.BadRequestf("space %s not found at %s", spaceSlug, provider.Type)
 		}
-		if errors.Is(err, scm.ErrNotAuthorized) {
+		if errors.Is(err, scm.ErrNotAuthorized) || statusCode == http.StatusUnauthorized {
 			return nil, usererror.BadRequestf("bad credentials provided for %s at %s", spaceSlug, provider.Type)
 		}
-		if err != nil {
-			return nil, fmt.Errorf("failed to fetch space %s from %s: %w", spaceSlug, provider.Type, err)
+		if err != nil || statusCode > 299 {
+			return nil, fmt.Errorf("failed to fetch space %s from %s, status=%d: %w",
+				spaceSlug, provider.Type, statusCode, err)
+		}
+
+		if len(scmRepos) == 0 {
+			break
 		}
 
 		for _, scmRepo := range scmRepos {
+			if scmRepo.Namespace != spaceSlug {
+				continue
+			}
 			repos = append(repos, RepositoryInfo{
 				Space:         scmRepo.Namespace,
 				UID:           scmRepo.Name,
@@ -223,12 +211,6 @@ func LoadRepositoriesFromProviderSpace(ctx context.Context, provider Provider, s
 				DefaultBranch: scmRepo.Branch,
 			})
 		}
-
-		if len(scmRepos) == 0 || page == scmResponse.Page.Last {
-			break
-		}
-
-		page++
 	}
 
 	return repos, nil
diff --git a/internal/services/importer/repository.go b/internal/services/importer/repository.go
index a6e9add4a..028fd175e 100644
--- a/internal/services/importer/repository.go
+++ b/internal/services/importer/repository.go
@@ -6,6 +6,7 @@ package importer
 
 import (
 	"context"
+	"encoding/base64"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -13,6 +14,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/harness/gitness/encrypt"
 	"github.com/harness/gitness/gitrpc"
 	"github.com/harness/gitness/internal/bootstrap"
 	"github.com/harness/gitness/internal/githook"
@@ -35,6 +37,7 @@ type Repository struct {
 	urlProvider   *gitnessurl.Provider
 	git           gitrpc.Interface
 	repoStore     store.RepoStore
+	encrypter     encrypt.Encrypter
 	scheduler     *job.Scheduler
 }
 
@@ -55,27 +58,17 @@ func (r *Repository) Register(executor *job.Executor) error {
 
 // Run starts a background job that imports the provided repository from the provided clone URL.
 func (r *Repository) Run(ctx context.Context, provider Provider, repo *types.Repository, cloneURL string) error {
-	input := Input{
+	jobDef, err := r.getJobDef(*repo.ImportingJobUID, Input{
 		RepoID:   repo.ID,
 		GitUser:  provider.Username,
 		GitPass:  provider.Password,
 		CloneURL: cloneURL,
-	}
-
-	data, err := json.Marshal(input)
-	if err != nil {
-		return fmt.Errorf("failed to marshal job input json: %w", err)
-	}
-
-	strData := strings.TrimSpace(string(data))
-
-	return r.scheduler.RunJob(ctx, job.Definition{
-		UID:        *repo.ImportingJobUID,
-		Type:       jobType,
-		MaxRetries: importJobMaxRetries,
-		Timeout:    importJobMaxDuration,
-		Data:       strData,
 	})
+	if err != nil {
+		return err
+	}
+
+	return r.scheduler.RunJob(ctx, jobDef)
 }
 
 // RunMany starts background jobs that import the provided repositories from the provided clone URLs.
@@ -91,34 +84,23 @@ func (r *Repository) RunMany(ctx context.Context,
 	}
 
 	n := len(repos)
-
 	defs := make([]job.Definition, n)
 
 	for k := 0; k < n; k++ {
 		repo := repos[k]
 		cloneURL := cloneURLs[k]
 
-		input := Input{
+		jobDef, err := r.getJobDef(*repo.ImportingJobUID, Input{
 			RepoID:   repo.ID,
 			GitUser:  provider.Username,
 			GitPass:  provider.Password,
 			CloneURL: cloneURL,
-		}
-
-		data, err := json.Marshal(input)
+		})
 		if err != nil {
-			return fmt.Errorf("failed to marshal job input json: %w", err)
+			return err
 		}
 
-		strData := strings.TrimSpace(string(data))
-
-		defs[k] = job.Definition{
-			UID:        *repo.ImportingJobUID,
-			Type:       jobType,
-			MaxRetries: importJobMaxRetries,
-			Timeout:    importJobMaxDuration,
-			Data:       strData,
-		}
+		defs[k] = jobDef
 	}
 
 	err := r.scheduler.RunJobs(ctx, groupID, defs)
@@ -129,13 +111,56 @@ func (r *Repository) RunMany(ctx context.Context,
 	return nil
 }
 
+func (r *Repository) getJobDef(jobUID string, input Input) (job.Definition, error) {
+	data, err := json.Marshal(input)
+	if err != nil {
+		return job.Definition{}, fmt.Errorf("failed to marshal job input json: %w", err)
+	}
+
+	strData := strings.TrimSpace(string(data))
+
+	encryptedData, err := r.encrypter.Encrypt(strData)
+	if err != nil {
+		return job.Definition{}, fmt.Errorf("failed to encrypt job input: %w", err)
+	}
+
+	return job.Definition{
+		UID:        jobUID,
+		Type:       jobType,
+		MaxRetries: importJobMaxRetries,
+		Timeout:    importJobMaxDuration,
+		Data:       base64.StdEncoding.EncodeToString(encryptedData),
+	}, nil
+}
+
+func (r *Repository) getJobInput(data string) (Input, error) {
+	encrypted, err := base64.StdEncoding.DecodeString(data)
+	if err != nil {
+		return Input{}, fmt.Errorf("failed to base64 decode job input: %w", err)
+	}
+
+	decrypted, err := r.encrypter.Decrypt(encrypted)
+	if err != nil {
+		return Input{}, fmt.Errorf("failed to decrypt job input: %w", err)
+	}
+
+	var input Input
+
+	err = json.NewDecoder(strings.NewReader(decrypted)).Decode(&input)
+	if err != nil {
+		return Input{}, fmt.Errorf("failed to unmarshal job input json: %w", err)
+	}
+
+	return input, nil
+}
+
 // Handle is repository import background job handler.
 func (r *Repository) Handle(ctx context.Context, data string, _ job.ProgressReporter) (string, error) {
 	systemPrincipal := bootstrap.NewSystemServiceSession().Principal
 
-	var input Input
-	if err := json.NewDecoder(strings.NewReader(data)).Decode(&input); err != nil {
-		return "", fmt.Errorf("failed to unmarshal job input: %w", err)
+	input, err := r.getJobInput(data)
+	if err != nil {
+		return "", err
 	}
 
 	if input.CloneURL == "" {
diff --git a/internal/services/importer/wire.go b/internal/services/importer/wire.go
index 44328b4bf..cdeb81623 100644
--- a/internal/services/importer/wire.go
+++ b/internal/services/importer/wire.go
@@ -5,6 +5,7 @@
 package importer
 
 import (
+	"github.com/harness/gitness/encrypt"
 	"github.com/harness/gitness/gitrpc"
 	"github.com/harness/gitness/internal/services/job"
 	"github.com/harness/gitness/internal/store"
@@ -23,6 +24,7 @@ func ProvideRepoImporter(
 	urlProvider *url.Provider,
 	git gitrpc.Interface,
 	repoStore store.RepoStore,
+	encrypter encrypt.Encrypter,
 	scheduler *job.Scheduler,
 	executor *job.Executor,
 ) (*Repository, error) {
@@ -31,6 +33,7 @@ func ProvideRepoImporter(
 		urlProvider:   urlProvider,
 		git:           git,
 		repoStore:     repoStore,
+		encrypter:     encrypter,
 		scheduler:     scheduler,
 	}
 

From 50b66d9342cb59fa69cf766842c2f278853b7ddf Mon Sep 17 00:00:00 2001
From: Johannes Batzill <johannes.batzill@harness.io>
Date: Tue, 12 Sep 2023 16:26:18 +0000
Subject: [PATCH 35/38] [PR] Recheck `Unchecked` PR Merge Status (#434)

---
 cmd/gitness/wire_gen.go                       | 24 ++++-----
 internal/api/controller/pullreq/controller.go |  4 ++
 internal/api/controller/pullreq/pr_recheck.go | 33 ++++++++++++
 internal/api/controller/pullreq/wire.go       |  7 ++-
 internal/api/handler/pullreq/pr_recheck.go    | 41 ++++++++++++++
 internal/api/openapi/pullreq.go               | 11 ++++
 internal/router/api.go                        |  1 +
 .../services/pullreq/handlers_mergeable.go    | 53 ++++++++++++++++---
 web/src/pages/PullRequest/PullRequest.tsx     | 33 +++++++++++-
 web/src/services/code/index.tsx               | 34 ++++++++++++
 web/src/services/code/swagger.yaml            | 48 +++++++++++++++++
 11 files changed, 266 insertions(+), 23 deletions(-)
 create mode 100644 internal/api/controller/pullreq/pr_recheck.go
 create mode 100644 internal/api/handler/pullreq/pr_recheck.go

diff --git a/cmd/gitness/wire_gen.go b/cmd/gitness/wire_gen.go
index 39121cf0b..abf0eb21f 100644
--- a/cmd/gitness/wire_gen.go
+++ b/cmd/gitness/wire_gen.go
@@ -22,7 +22,7 @@ import (
 	"github.com/harness/gitness/internal/api/controller/pipeline"
 	"github.com/harness/gitness/internal/api/controller/plugin"
 	"github.com/harness/gitness/internal/api/controller/principal"
-	"github.com/harness/gitness/internal/api/controller/pullreq"
+	pullreq2 "github.com/harness/gitness/internal/api/controller/pullreq"
 	"github.com/harness/gitness/internal/api/controller/repo"
 	"github.com/harness/gitness/internal/api/controller/secret"
 	"github.com/harness/gitness/internal/api/controller/service"
@@ -51,7 +51,7 @@ import (
 	"github.com/harness/gitness/internal/services/codecomments"
 	"github.com/harness/gitness/internal/services/importer"
 	"github.com/harness/gitness/internal/services/job"
-	pullreq2 "github.com/harness/gitness/internal/services/pullreq"
+	"github.com/harness/gitness/internal/services/pullreq"
 	trigger2 "github.com/harness/gitness/internal/services/trigger"
 	"github.com/harness/gitness/internal/services/webhook"
 	"github.com/harness/gitness/internal/store"
@@ -174,10 +174,6 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 		return nil, err
 	}
 	migrator := codecomments.ProvideMigrator(gitrpcInterface)
-	pullreqController := pullreq.ProvideController(db, provider, authorizer, pullReqStore, pullReqActivityStore, codeCommentView, pullReqReviewStore, pullReqReviewerStore, repoStore, principalStore, gitrpcInterface, reporter, mutexManager, migrator)
-	webhookConfig := server.ProvideWebhookConfig(config)
-	webhookStore := database.ProvideWebhookStore(db)
-	webhookExecutionStore := database.ProvideWebhookExecutionStore(db)
 	readerFactory, err := events4.ProvideReaderFactory(eventsSystem)
 	if err != nil {
 		return nil, err
@@ -186,6 +182,16 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 	if err != nil {
 		return nil, err
 	}
+	repoGitInfoView := database.ProvideRepoGitInfoView(db)
+	repoGitInfoCache := cache.ProvideRepoGitInfoCache(repoGitInfoView)
+	pullreqService, err := pullreq.ProvideService(ctx, config, readerFactory, eventsReaderFactory, reporter, gitrpcInterface, db, repoGitInfoCache, repoStore, pullReqStore, pullReqActivityStore, codeCommentView, migrator, pubSub, provider)
+	if err != nil {
+		return nil, err
+	}
+	pullreqController := pullreq2.ProvideController(db, provider, authorizer, pullReqStore, pullReqActivityStore, codeCommentView, pullReqReviewStore, pullReqReviewerStore, repoStore, principalStore, gitrpcInterface, reporter, mutexManager, migrator, pullreqService)
+	webhookConfig := server.ProvideWebhookConfig(config)
+	webhookStore := database.ProvideWebhookStore(db)
+	webhookExecutionStore := database.ProvideWebhookExecutionStore(db)
 	webhookService, err := webhook.ProvideService(ctx, webhookConfig, readerFactory, eventsReaderFactory, webhookStore, webhookExecutionStore, repoStore, pullReqStore, provider, principalStore, gitrpcInterface)
 	if err != nil {
 		return nil, err
@@ -228,12 +234,6 @@ func initSystem(ctx context.Context, config *types.Config) (*server.System, erro
 		return nil, err
 	}
 	cronManager := cron.ProvideManager(serverConfig)
-	repoGitInfoView := database.ProvideRepoGitInfoView(db)
-	repoGitInfoCache := cache.ProvideRepoGitInfoCache(repoGitInfoView)
-	pullreqService, err := pullreq2.ProvideService(ctx, config, readerFactory, eventsReaderFactory, reporter, gitrpcInterface, db, repoGitInfoCache, repoStore, pullReqStore, pullReqActivityStore, codeCommentView, migrator, pubSub, provider)
-	if err != nil {
-		return nil, err
-	}
 	triggerConfig := server.ProvideTriggerConfig(config)
 	triggerService, err := trigger2.ProvideService(ctx, triggerConfig, triggerStore, commitService, pullReqStore, repoStore, pipelineStore, triggererTriggerer, readerFactory, eventsReaderFactory)
 	if err != nil {
diff --git a/internal/api/controller/pullreq/controller.go b/internal/api/controller/pullreq/controller.go
index e96c9c761..d7baa809b 100644
--- a/internal/api/controller/pullreq/controller.go
+++ b/internal/api/controller/pullreq/controller.go
@@ -16,6 +16,7 @@ import (
 	"github.com/harness/gitness/internal/auth/authz"
 	pullreqevents "github.com/harness/gitness/internal/events/pullreq"
 	"github.com/harness/gitness/internal/services/codecomments"
+	"github.com/harness/gitness/internal/services/pullreq"
 	"github.com/harness/gitness/internal/store"
 	"github.com/harness/gitness/internal/url"
 	"github.com/harness/gitness/lock"
@@ -40,6 +41,7 @@ type Controller struct {
 	eventReporter       *pullreqevents.Reporter
 	mtxManager          lock.MutexManager
 	codeCommentMigrator *codecomments.Migrator
+	pullreqService      *pullreq.Service
 }
 
 func NewController(
@@ -57,6 +59,7 @@ func NewController(
 	eventReporter *pullreqevents.Reporter,
 	mtxManager lock.MutexManager,
 	codeCommentMigrator *codecomments.Migrator,
+	pullreqService *pullreq.Service,
 ) *Controller {
 	return &Controller{
 		db:                  db,
@@ -73,6 +76,7 @@ func NewController(
 		codeCommentMigrator: codeCommentMigrator,
 		eventReporter:       eventReporter,
 		mtxManager:          mtxManager,
+		pullreqService:      pullreqService,
 	}
 }
 
diff --git a/internal/api/controller/pullreq/pr_recheck.go b/internal/api/controller/pullreq/pr_recheck.go
new file mode 100644
index 000000000..f35848810
--- /dev/null
+++ b/internal/api/controller/pullreq/pr_recheck.go
@@ -0,0 +1,33 @@
+// Copyright 2022 Harness Inc. All rights reserved.
+// Use of this source code is governed by the Polyform Free Trial License
+// that can be found in the LICENSE.md file for this repository.
+
+package pullreq
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/harness/gitness/internal/auth"
+	"github.com/harness/gitness/types/enum"
+)
+
+// Recheck re-checks all system PR checks (mergeability check, ...).
+func (c *Controller) Recheck(
+	ctx context.Context,
+	session *auth.Session,
+	repoRef string,
+	prNum int64,
+) error {
+	repo, err := c.getRepoCheckAccess(ctx, session, repoRef, enum.PermissionRepoPush)
+	if err != nil {
+		return fmt.Errorf("failed to acquire access to repo: %w", err)
+	}
+
+	err = c.pullreqService.UpdateMergeDataIfRequired(ctx, repo.ID, prNum)
+	if err != nil {
+		return fmt.Errorf("failed to refresh merge data: %w", err)
+	}
+
+	return nil
+}
diff --git a/internal/api/controller/pullreq/wire.go b/internal/api/controller/pullreq/wire.go
index 8f6c3a757..e313c49bd 100644
--- a/internal/api/controller/pullreq/wire.go
+++ b/internal/api/controller/pullreq/wire.go
@@ -9,6 +9,7 @@ import (
 	"github.com/harness/gitness/internal/auth/authz"
 	pullreqevents "github.com/harness/gitness/internal/events/pullreq"
 	"github.com/harness/gitness/internal/services/codecomments"
+	"github.com/harness/gitness/internal/services/pullreq"
 	"github.com/harness/gitness/internal/store"
 	"github.com/harness/gitness/internal/url"
 	"github.com/harness/gitness/lock"
@@ -28,12 +29,14 @@ func ProvideController(db *sqlx.DB, urlProvider *url.Provider, authorizer authz.
 	pullReqReviewStore store.PullReqReviewStore, pullReqReviewerStore store.PullReqReviewerStore,
 	repoStore store.RepoStore, principalStore store.PrincipalStore,
 	rpcClient gitrpc.Interface, eventReporter *pullreqevents.Reporter,
-	mtxManager lock.MutexManager, codeCommentMigrator *codecomments.Migrator) *Controller {
+	mtxManager lock.MutexManager, codeCommentMigrator *codecomments.Migrator,
+	pullreqService *pullreq.Service,
+) *Controller {
 	return NewController(db, urlProvider, authorizer,
 		pullReqStore, pullReqActivityStore,
 		codeCommentsView,
 		pullReqReviewStore, pullReqReviewerStore,
 		repoStore, principalStore,
 		rpcClient, eventReporter,
-		mtxManager, codeCommentMigrator)
+		mtxManager, codeCommentMigrator, pullreqService)
 }
diff --git a/internal/api/handler/pullreq/pr_recheck.go b/internal/api/handler/pullreq/pr_recheck.go
new file mode 100644
index 000000000..212e37f12
--- /dev/null
+++ b/internal/api/handler/pullreq/pr_recheck.go
@@ -0,0 +1,41 @@
+// Copyright 2022 Harness Inc. All rights reserved.
+// Use of this source code is governed by the Polyform Free Trial License
+// that can be found in the LICENSE.md file for this repository.
+
+package pullreq
+
+import (
+	"net/http"
+
+	"github.com/harness/gitness/internal/api/controller/pullreq"
+	"github.com/harness/gitness/internal/api/render"
+	"github.com/harness/gitness/internal/api/request"
+)
+
+// HandleRecheck handles API that re-checks all system PR checks (mergeability check, ...).
+func HandleRecheck(pullreqCtrl *pullreq.Controller) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		ctx := r.Context()
+		session, _ := request.AuthSessionFrom(ctx)
+
+		repoRef, err := request.GetRepoRefFromPath(r)
+		if err != nil {
+			render.TranslatedUserError(w, err)
+			return
+		}
+
+		pullreqNumber, err := request.GetPullReqNumberFromPath(r)
+		if err != nil {
+			render.TranslatedUserError(w, err)
+			return
+		}
+
+		err = pullreqCtrl.Recheck(ctx, session, repoRef, pullreqNumber)
+		if err != nil {
+			render.TranslatedUserError(w, err)
+			return
+		}
+
+		w.WriteHeader(http.StatusNoContent)
+	}
+}
diff --git a/internal/api/openapi/pullreq.go b/internal/api/openapi/pullreq.go
index fdff3d37f..693da8daa 100644
--- a/internal/api/openapi/pullreq.go
+++ b/internal/api/openapi/pullreq.go
@@ -469,4 +469,15 @@ func pullReqOperations(reflector *openapi3.Reflector) {
 	_ = reflector.SetJSONResponse(&opMetaData, new(usererror.Error), http.StatusForbidden)
 	_ = reflector.SetJSONResponse(&opMetaData, new(usererror.Error), http.StatusNotFound)
 	_ = reflector.Spec.AddOperation(http.MethodGet, "/repos/{repo_ref}/pullreq/{pullreq_number}/metadata", opMetaData)
+
+	recheckPullReq := openapi3.Operation{}
+	recheckPullReq.WithTags("pullreq")
+	recheckPullReq.WithMapOfAnything(map[string]interface{}{"operationId": "recheckPullReq"})
+	_ = reflector.SetRequest(&recheckPullReq, nil, http.MethodPost)
+	_ = reflector.SetJSONResponse(&recheckPullReq, nil, http.StatusNoContent)
+	_ = reflector.SetJSONResponse(&recheckPullReq, new(usererror.Error), http.StatusBadRequest)
+	_ = reflector.SetJSONResponse(&recheckPullReq, new(usererror.Error), http.StatusInternalServerError)
+	_ = reflector.SetJSONResponse(&recheckPullReq, new(usererror.Error), http.StatusUnauthorized)
+	_ = reflector.SetJSONResponse(&recheckPullReq, new(usererror.Error), http.StatusForbidden)
+	_ = reflector.Spec.AddOperation(http.MethodPost, "/repos/{repo_ref}/pullreq/{pullreq_number}/recheck", recheckPullReq)
 }
diff --git a/internal/router/api.go b/internal/router/api.go
index d2fa4762f..6b1b57f54 100644
--- a/internal/router/api.go
+++ b/internal/router/api.go
@@ -461,6 +461,7 @@ func SetupPullReq(r chi.Router, pullreqCtrl *pullreq.Controller) {
 			r.Get("/", handlerpullreq.HandleFind(pullreqCtrl))
 			r.Patch("/", handlerpullreq.HandleUpdate(pullreqCtrl))
 			r.Post("/state", handlerpullreq.HandleState(pullreqCtrl))
+			r.Post("/recheck", handlerpullreq.HandleRecheck(pullreqCtrl))
 			r.Get("/activities", handlerpullreq.HandleListActivities(pullreqCtrl))
 			r.Route("/comments", func(r chi.Router) {
 				r.Post("/", handlerpullreq.HandleCommentCreate(pullreqCtrl))
diff --git a/internal/services/pullreq/handlers_mergeable.go b/internal/services/pullreq/handlers_mergeable.go
index 4fe14c6ca..54262e350 100644
--- a/internal/services/pullreq/handlers_mergeable.go
+++ b/internal/services/pullreq/handlers_mergeable.go
@@ -106,6 +106,28 @@ func (s *Service) deleteMergeRef(ctx context.Context, repoID int64, prNum int64)
 	return nil
 }
 
+// UpdateMergeDataIfRequired rechecks the merge data of a PR.
+// TODO: This is a temporary solution - doesn't fix changed merge-base or other things.
+func (s *Service) UpdateMergeDataIfRequired(
+	ctx context.Context,
+	repoID int64,
+	prNum int64,
+) error {
+	pr, err := s.pullreqStore.FindByNumber(ctx, repoID, prNum)
+	if err != nil {
+		return fmt.Errorf("failed to get pull request number %d: %w", prNum, err)
+	}
+
+	// nothing to-do if check was already performed
+	if pr.MergeCheckStatus != enum.MergeCheckStatusUnchecked {
+		return nil
+	}
+
+	// WARNING: This CAN lead to two (or more) merge-checks on the same SHA
+	// running on different machines at the same time.
+	return s.updateMergeDataInner(ctx, pr, "", pr.SourceSHA)
+}
+
 //nolint:funlen // refactor if required.
 func (s *Service) updateMergeData(
 	ctx context.Context,
@@ -114,21 +136,31 @@ func (s *Service) updateMergeData(
 	oldSHA string,
 	newSHA string,
 ) error {
-	// TODO: Merge check should not update the merge base.
-	// TODO: Instead it should accept it as an argument and fail if it doesn't match.
-	// Then is would not longer be necessary to cancel already active mergeability checks.
-
 	pr, err := s.pullreqStore.FindByNumber(ctx, repoID, prNum)
 	if err != nil {
 		return fmt.Errorf("failed to get pull request number %d: %w", prNum, err)
 	}
 
+	return s.updateMergeDataInner(ctx, pr, oldSHA, newSHA)
+}
+
+//nolint:funlen // refactor if required.
+func (s *Service) updateMergeDataInner(
+	ctx context.Context,
+	pr *types.PullReq,
+	oldSHA string,
+	newSHA string,
+) error {
+	// TODO: Merge check should not update the merge base.
+	// TODO: Instead it should accept it as an argument and fail if it doesn't match.
+	// Then is would not longer be necessary to cancel already active mergeability checks.
+
 	if pr.State != enum.PullReqStateOpen {
-		return fmt.Errorf("cannot do mergability check on closed PR %d", prNum)
+		return fmt.Errorf("cannot do mergability check on closed PR %d", pr.Number)
 	}
 
 	// cancel all previous mergability work for this PR based on oldSHA
-	if err = s.pubsub.Publish(ctx, cancelMergeCheckKey, []byte(oldSHA),
+	if err := s.pubsub.Publish(ctx, cancelMergeCheckKey, []byte(oldSHA),
 		pubsub.WithPublishNamespace("pullreq")); err != nil {
 		return err
 	}
@@ -137,6 +169,13 @@ func (s *Service) updateMergeData(
 	ctx, cancel = context.WithCancel(ctx)
 
 	s.cancelMutex.Lock()
+	// NOTE: Temporary workaround to avoid overwriting existing cancel method on same machine.
+	// This doesn't avoid same SHA running on multiple machines
+	if _, ok := s.cancelMergeability[newSHA]; ok {
+		s.cancelMutex.Unlock()
+		cancel()
+		return nil
+	}
 	s.cancelMergeability[newSHA] = cancel
 	s.cancelMutex.Unlock()
 
@@ -175,7 +214,7 @@ func (s *Service) updateMergeData(
 		HeadRepoUID:     sourceRepo.GitUID,
 		HeadBranch:      pr.SourceBranch,
 		RefType:         gitrpcenum.RefTypePullReqMerge,
-		RefName:         strconv.Itoa(int(prNum)),
+		RefName:         strconv.Itoa(int(pr.Number)),
 		HeadExpectedSHA: newSHA,
 		Force:           true,
 
diff --git a/web/src/pages/PullRequest/PullRequest.tsx b/web/src/pages/PullRequest/PullRequest.tsx
index 9659a1936..a5721b557 100644
--- a/web/src/pages/PullRequest/PullRequest.tsx
+++ b/web/src/pages/PullRequest/PullRequest.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Container, Layout, PageBody, Tabs, Text } from '@harnessio/uicore'
 import { FontVariation } from '@harnessio/design-system'
-import { useGet } from 'restful-react'
+import { useGet, useMutate } from 'restful-react'
 import { Render } from 'react-jsx-match'
 import { useHistory } from 'react-router-dom'
 import { compact } from 'lodash-es'
@@ -9,7 +9,7 @@ import { useAppContext } from 'AppContext'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { useStrings } from 'framework/strings'
 import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
-import { voidFn, getErrorMessage, PullRequestSection } from 'utils/Utils'
+import { voidFn, getErrorMessage, PullRequestSection, MergeCheckStatus } from 'utils/Utils'
 import { CodeIcon } from 'utils/GitUtils'
 import type { TypesPullReq, TypesPullReqStats, TypesRepository } from 'services/code'
 import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
@@ -83,6 +83,14 @@ export default function PullRequest() {
       })
     )
   }, [history, routes, repoMetadata?.path, pullRequestId])
+  const recheckPath = useMemo(
+    () => `/api/v1/repos/${repoMetadata?.path}/+/pullreq/${pullRequestId}/recheck`,
+    [repoMetadata?.path, pullRequestId]
+  )
+  const { mutate : recheckPR, loading: loadingRecheckPR } = useMutate({
+    verb: 'POST',
+    path: recheckPath,
+  })
 
   useEffect(
     function setStatsIfNotSet() {
@@ -98,6 +106,27 @@ export default function PullRequest() {
   useEffect(
     function setPrDataIfNotSet() {
       if (pullRequestData) {
+        // recheck pr (merge-check, ...) in case it's unavailable
+        // Approximation of identifying target branch update:
+        //   1. branch got updated before page was loaded (status is unchecked and prData is empty)
+        //      NOTE: This doesn't guarantee the status is UNCHECKED due to target branch update and can cause duplicate
+        //      PR merge checks being run on PR creation or source branch update.
+        //   2. branch got updated while we are on the page (same source_sha but status changed to UNCHECKED)
+        //      NOTE: This doesn't cover the case in which the status changed back to UNCHECKED before the PR is refetched.
+        //      In that case, the user will have to re-open the PR - better than us spamming the backend with rechecks.
+        // This is a TEMPORARY SOLUTION and will most likely change in the future (more so on backend side)
+        if (pullRequestData.state == 'open' &&
+            pullRequestData.merge_check_status == MergeCheckStatus.UNCHECKED &&
+            (
+              // case 1:
+              !prData || 
+              // case 2:
+              (prData?.merge_check_status != MergeCheckStatus.UNCHECKED && prData?.source_sha == pullRequestData.source_sha)
+            ) && !loadingRecheckPR) {
+              // best effort attempt to recheck PR - fail silently
+              recheckPR({})
+        }
+
         setPrData(pullRequestData)
       }
     },
diff --git a/web/src/services/code/index.tsx b/web/src/services/code/index.tsx
index 3779663e7..c50135836 100644
--- a/web/src/services/code/index.tsx
+++ b/web/src/services/code/index.tsx
@@ -3398,6 +3398,40 @@ export const usePullReqMetaData = ({ repo_ref, pullreq_number, ...props }: UsePu
     { base: getConfig('code/api/v1'), pathParams: { repo_ref, pullreq_number }, ...props }
   )
 
+export interface RecheckPullReqPathParams {
+  repo_ref: string
+  pullreq_number: number
+}
+
+export type RecheckPullReqProps = Omit<
+  MutateProps<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>,
+  'path' | 'verb'
+> &
+  RecheckPullReqPathParams
+
+export const RecheckPullReq = ({ repo_ref, pullreq_number, ...props }: RecheckPullReqProps) => (
+  <Mutate<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>
+    verb="POST"
+    path={`/repos/${repo_ref}/pullreq/${pullreq_number}/recheck`}
+    base={getConfig('code/api/v1')}
+    {...props}
+  />
+)
+
+export type UseRecheckPullReqProps = Omit<
+  UseMutateProps<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>,
+  'path' | 'verb'
+> &
+  RecheckPullReqPathParams
+
+export const useRecheckPullReq = ({ repo_ref, pullreq_number, ...props }: UseRecheckPullReqProps) =>
+  useMutate<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>(
+    'POST',
+    (paramsInPath: RecheckPullReqPathParams) =>
+      `/repos/${paramsInPath.repo_ref}/pullreq/${paramsInPath.pullreq_number}/recheck`,
+    { base: getConfig('code/api/v1'), pathParams: { repo_ref, pullreq_number }, ...props }
+  )
+
 export interface ReviewerListPullReqPathParams {
   repo_ref: string
   pullreq_number: number
diff --git a/web/src/services/code/swagger.yaml b/web/src/services/code/swagger.yaml
index 27a2a1659..14f78da2e 100644
--- a/web/src/services/code/swagger.yaml
+++ b/web/src/services/code/swagger.yaml
@@ -3622,6 +3622,54 @@ paths:
           description: Internal Server Error
       tags:
         - pullreq
+  /repos/{repo_ref}/pullreq/{pullreq_number}/recheck:
+    post:
+      operationId: recheckPullReq
+      parameters:
+        - in: path
+          name: repo_ref
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: pullreq_number
+          required: true
+          schema:
+            type: integer
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/OpenapiUpdatePullReqRequest'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Internal Server Error
+      tags:
+        - pullreq
   /repos/{repo_ref}/pullreq/{pullreq_number}/reviewers:
     get:
       operationId: reviewerListPullReq

From 1358ef74d6ce54dc9b981f60e876fe654c892cf9 Mon Sep 17 00:00:00 2001
From: Dan Wilson <daniel.wilson@harness.io>
Date: Tue, 12 Sep 2023 17:47:07 +0100
Subject: [PATCH 36/38] enable for standalone, improved trigger wording,
 improve ci icons

---
 web/src/RouteDestinations.tsx                 |  16 +-
 .../components/Console/Console.module.scss    |  10 +
 .../Console/Console.module.scss.d.ts          |   1 +
 web/src/components/Console/Console.tsx        |   7 +
 .../ConsoleStep/ConsoleStep.module.scss       |  13 ++
 .../ConsoleStep/ConsoleStep.module.scss.d.ts  |   1 +
 .../components/ConsoleStep/ConsoleStep.tsx    |   6 +-
 .../ExecutionPageHeader.tsx                   |   2 +-
 .../ExecutionStageList/ExecutionStageList.tsx |   1 +
 .../ExecutionStatus.module.scss               |  16 ++
 .../ExecutionStatus.module.scss.d.ts          |   2 +
 .../ExecutionStatus/ExecutionStatus.tsx       |  20 +-
 .../ExecutionText/ExecutionText.module.scss   |  21 ++
 .../ExecutionText.module.scss.d.ts            |   6 +
 .../ExecutionText/ExecutionText.tsx           | 162 +++++++++++++
 web/src/framework/strings/stringTypes.ts      |   2 +
 web/src/hooks/useFeatureFlag.ts               |   8 -
 web/src/hooks/usePRChecksDecision.tsx         |   8 +-
 web/src/i18n/strings.en.yaml                  |   2 +
 web/src/layouts/menu/DefaultMenu.tsx          |   8 +-
 .../ExecutionList/ExecutionList.module.scss   |  17 --
 .../ExecutionList.module.scss.d.ts            |   3 -
 web/src/pages/ExecutionList/ExecutionList.tsx |  38 ++-
 web/src/pages/PipelineList/PipelineList.tsx   |  13 +-
 web/src/services/code/index.tsx               | 141 ++++++++---
 web/src/services/code/swagger.yaml            | 221 ++++++++++++++----
 26 files changed, 585 insertions(+), 160 deletions(-)
 create mode 100644 web/src/components/ExecutionText/ExecutionText.module.scss
 create mode 100644 web/src/components/ExecutionText/ExecutionText.module.scss.d.ts
 create mode 100644 web/src/components/ExecutionText/ExecutionText.tsx
 delete mode 100644 web/src/hooks/useFeatureFlag.ts

diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index 2b6642f85..3425889aa 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -27,16 +27,16 @@ import ChangePassword from 'pages/ChangePassword/ChangePassword'
 import SpaceAccessControl from 'pages/SpaceAccessControl/SpaceAccessControl'
 import SpaceSettings from 'pages/SpaceSettings/SpaceSettings'
 import { useStrings } from 'framework/strings'
-import { useFeatureFlag } from 'hooks/useFeatureFlag'
 import ExecutionList from 'pages/ExecutionList/ExecutionList'
 import Execution from 'pages/Execution/Execution'
 import Secret from 'pages/Secret/Secret'
 import AddUpdatePipeline from 'pages/AddUpdatePipeline/AddUpdatePipeline'
+import { useAppContext } from 'AppContext'
 
 export const RouteDestinations: React.FC = React.memo(function RouteDestinations() {
   const { getString } = useStrings()
   const repoPath = `${pathProps.space}/${pathProps.repoName}`
-  const { OPEN_SOURCE_PIPELINES, OPEN_SOURCE_SECRETS } = useFeatureFlag()
+  const { standalone } = useAppContext()
 
   return (
     <BrowserRouter>
@@ -163,7 +163,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </LayoutWithSideNav>
         </Route>
 
-        {OPEN_SOURCE_PIPELINES && (
+        {standalone && (
           <Route
             path={routes.toCODEExecution({
               repoPath,
@@ -177,7 +177,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </Route>
         )}
 
-        {OPEN_SOURCE_PIPELINES && (
+        {standalone && (
           <Route path={routes.toCODEExecutions({ repoPath, pipeline: pathProps.pipeline })} exact>
             <LayoutWithSideNav title={getString('pageTitle.executions')}>
               <ExecutionList />
@@ -185,7 +185,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </Route>
         )}
 
-        {OPEN_SOURCE_PIPELINES && (
+        {standalone && (
           <Route path={routes.toCODEPipelineEdit({ repoPath, pipeline: pathProps.pipeline })} exact>
             <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
               <AddUpdatePipeline />
@@ -193,7 +193,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </Route>
         )}
 
-        {OPEN_SOURCE_PIPELINES && (
+        {standalone && (
           <Route path={routes.toCODEPipelines({ repoPath })} exact>
             <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
               <PipelineList />
@@ -201,7 +201,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </Route>
         )}
 
-        {OPEN_SOURCE_SECRETS && (
+        {standalone && (
           <Route path={routes.toCODESecret({ space: pathProps.space, secret: pathProps.secret })} exact>
             <LayoutWithSideNav title={getString('pageTitle.secrets')}>
               <Secret />
@@ -209,7 +209,7 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </Route>
         )}
 
-        {OPEN_SOURCE_SECRETS && (
+        {standalone && (
           <Route path={routes.toCODESecrets({ space: pathProps.space })} exact>
             <LayoutWithSideNav title={getString('pageTitle.secrets')}>
               <SecretList />
diff --git a/web/src/components/Console/Console.module.scss b/web/src/components/Console/Console.module.scss
index 0fb914b96..a5102d7da 100644
--- a/web/src/components/Console/Console.module.scss
+++ b/web/src/components/Console/Console.module.scss
@@ -26,6 +26,16 @@
   }
 }
 
+.error {
+  position: sticky !important;
+  top: 0 !important;
+  background-color: var(--red) !important;
+  height: var(--log-content-header-height) !important;
+  border-bottom: 1px solid var(--grey-800) !important;
+  padding: var(--spacing-medium) !important;
+  font-weight: 600 !important;
+}
+
 .steps {
   padding: var(--spacing-medium) !important;
 }
diff --git a/web/src/components/Console/Console.module.scss.d.ts b/web/src/components/Console/Console.module.scss.d.ts
index 44ee1eccf..b446b8833 100644
--- a/web/src/components/Console/Console.module.scss.d.ts
+++ b/web/src/components/Console/Console.module.scss.d.ts
@@ -1,6 +1,7 @@
 /* eslint-disable */
 // This is an auto-generated file
 export declare const container: string
+export declare const error: string
 export declare const header: string
 export declare const headerLayout: string
 export declare const log: string
diff --git a/web/src/components/Console/Console.tsx b/web/src/components/Console/Console.tsx
index 2caf96d42..a6235c693 100644
--- a/web/src/components/Console/Console.tsx
+++ b/web/src/components/Console/Console.tsx
@@ -20,6 +20,13 @@ const Console: FC<ConsoleProps> = ({ stage, repoPath }) => {
 
   return (
     <div className={css.container}>
+      {stage?.error && (
+        <Container className={css.error}>
+          <Text font={{ variation: FontVariation.BODY }} color={Color.WHITE}>
+            {stage?.error}
+          </Text>
+        </Container>
+      )}
       <Container className={css.header}>
         <Layout.Horizontal className={css.headerLayout} spacing="small">
           <Text font={{ variation: FontVariation.H4 }} color={Color.WHITE} padding={{ left: 'large', right: 'large' }}>
diff --git a/web/src/components/ConsoleStep/ConsoleStep.module.scss b/web/src/components/ConsoleStep/ConsoleStep.module.scss
index 465505cc1..3bf78fd03 100644
--- a/web/src/components/ConsoleStep/ConsoleStep.module.scss
+++ b/web/src/components/ConsoleStep/ConsoleStep.module.scss
@@ -20,3 +20,16 @@
     transform: rotate(360deg);
   }
 }
+
+.timeoutIcon {
+  svg {
+    g {
+      circle {
+        fill: black !important;
+      }
+      path {
+        fill: white !important;
+      }
+    }
+  }
+}
diff --git a/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts b/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts
index eb9e0ef6e..d4984fd99 100644
--- a/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts
+++ b/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts
@@ -3,3 +3,4 @@
 export declare const loading: string
 export declare const spin: string
 export declare const stepLayout: string
+export declare const timeoutIcon: string
diff --git a/web/src/components/ConsoleStep/ConsoleStep.tsx b/web/src/components/ConsoleStep/ConsoleStep.tsx
index 5742248f0..7f34b3df7 100644
--- a/web/src/components/ConsoleStep/ConsoleStep.tsx
+++ b/web/src/components/ConsoleStep/ConsoleStep.tsx
@@ -70,6 +70,10 @@ const ConsoleStep: FC<ConsoleStepProps> = ({ step, stageNumber, repoPath, pipeli
     icon = <Icon name="circle" />
   } else if (step?.status === ExecutionState.RUNNING) {
     icon = <Icon className={css.spin} name="pending" />
+  } else if (step?.status === ExecutionState.FAILURE) {
+    icon = <Icon name="danger-icon" />
+  } else if (step?.status === ExecutionState.SKIPPED) {
+    icon = <Icon className={css.timeoutIcon} name="execution-timeout" />
   } else {
     icon = <Icon name="circle" /> // Default icon in case of other statuses or unknown status
   }
@@ -93,7 +97,7 @@ const ConsoleStep: FC<ConsoleStepProps> = ({ step, stageNumber, repoPath, pipeli
         className={css.stepLayout}
         spacing="medium"
         onClick={() => {
-          if (!isPending) {
+          if (!isPending && step?.status !== ExecutionState.SKIPPED) {
             setIsOpened(!isOpened)
             if (shouldUseGet && !isOpened) refetch()
           }
diff --git a/web/src/components/ExecutionPageHeader/ExecutionPageHeader.tsx b/web/src/components/ExecutionPageHeader/ExecutionPageHeader.tsx
index 44cd71ba4..d5a30db3e 100644
--- a/web/src/components/ExecutionPageHeader/ExecutionPageHeader.tsx
+++ b/web/src/components/ExecutionPageHeader/ExecutionPageHeader.tsx
@@ -79,7 +79,7 @@ export function ExecutionPageHeader({
       content={
         executionInfo && (
           <Container className={css.executionInfo}>
-            <ExecutionStatus status={getStatus(executionInfo.status)} iconOnly noBackground iconSize={18} />
+            <ExecutionStatus status={getStatus(executionInfo.status)} iconOnly noBackground iconSize={18} isCi />
             <Text inline color={Color.GREY_800} font={{ size: 'small' }}>
               {executionInfo.message}
             </Text>
diff --git a/web/src/components/ExecutionStageList/ExecutionStageList.tsx b/web/src/components/ExecutionStageList/ExecutionStageList.tsx
index 2b5090586..3a5098ea3 100644
--- a/web/src/components/ExecutionStageList/ExecutionStageList.tsx
+++ b/web/src/components/ExecutionStageList/ExecutionStageList.tsx
@@ -34,6 +34,7 @@ const ExecutionStage: FC<ExecutionStageProps> = ({ stage, isSelected = false, se
           noBackground
           iconSize={18}
           className={css.statusIcon}
+          isCi
         />
         <Text className={css.uid} lineClamp={1}>
           {stage.name}
diff --git a/web/src/components/ExecutionStatus/ExecutionStatus.module.scss b/web/src/components/ExecutionStatus/ExecutionStatus.module.scss
index 01efc8f29..c11a459e8 100644
--- a/web/src/components/ExecutionStatus/ExecutionStatus.module.scss
+++ b/web/src/components/ExecutionStatus/ExecutionStatus.module.scss
@@ -32,6 +32,14 @@
     --bgColor: transparent !important;
   }
 
+  &.waiting {
+    svg {
+      > circle {
+        fill: var(--orange-700) !important;
+      }
+    }
+  }
+
   &.pending {
     --fgColor: var(--grey-600);
     --bgColor: var(--grey-100);
@@ -48,6 +56,14 @@
     }
   }
 
+  &.runningBlue {
+    svg {
+      > circle {
+        fill: var(--primary-6) !important;
+      }
+    }
+  }
+
   &.success {
     --fgColor: var(--green-800);
     --bgColor: var(--green-50);
diff --git a/web/src/components/ExecutionStatus/ExecutionStatus.module.scss.d.ts b/web/src/components/ExecutionStatus/ExecutionStatus.module.scss.d.ts
index 40f8b815e..7cbd3420c 100644
--- a/web/src/components/ExecutionStatus/ExecutionStatus.module.scss.d.ts
+++ b/web/src/components/ExecutionStatus/ExecutionStatus.module.scss.d.ts
@@ -7,4 +7,6 @@ export declare const main: string
 export declare const noBackground: string
 export declare const pending: string
 export declare const running: string
+export declare const runningBlue: string
 export declare const success: string
+export declare const waiting: string
diff --git a/web/src/components/ExecutionStatus/ExecutionStatus.tsx b/web/src/components/ExecutionStatus/ExecutionStatus.tsx
index 40f1c3128..07f8f7b90 100644
--- a/web/src/components/ExecutionStatus/ExecutionStatus.tsx
+++ b/web/src/components/ExecutionStatus/ExecutionStatus.tsx
@@ -10,7 +10,8 @@ export enum ExecutionState {
   RUNNING = 'running',
   SUCCESS = 'success',
   FAILURE = 'failure',
-  ERROR = 'error'
+  ERROR = 'error',
+  SKIPPED = 'skipped'
 }
 
 interface ExecutionStatusProps {
@@ -19,6 +20,7 @@ interface ExecutionStatusProps {
   noBackground?: boolean
   iconSize?: number
   className?: string
+  isCi?: boolean
 }
 
 export const ExecutionStatus: React.FC<ExecutionStatusProps> = ({
@@ -26,19 +28,20 @@ export const ExecutionStatus: React.FC<ExecutionStatusProps> = ({
   iconSize = 20,
   iconOnly = false,
   noBackground = false,
-  className
+  className,
+  isCi = false
 }) => {
   const { getString } = useStrings()
   const maps = useMemo(
     () => ({
       [ExecutionState.PENDING]: {
-        icon: 'ci-pending-build',
-        css: css.pending,
+        icon: isCi ? 'execution-waiting' : 'ci-pending-build',
+        css: isCi ? css.waiting : css.pending,
         title: getString('pending').toLocaleUpperCase()
       },
       [ExecutionState.RUNNING]: {
         icon: 'running-filled',
-        css: css.running,
+        css: isCi ? css.runningBlue : css.running,
         title: getString('running').toLocaleUpperCase()
       },
       [ExecutionState.SUCCESS]: {
@@ -55,9 +58,14 @@ export const ExecutionStatus: React.FC<ExecutionStatusProps> = ({
         icon: 'solid-error',
         css: css.error,
         title: getString('error').toLocaleUpperCase()
+      },
+      [ExecutionState.SKIPPED]: {
+        icon: 'execution-timeout',
+        css: null,
+        title: getString('skipped').toLocaleUpperCase()
       }
     }),
-    [getString]
+    [getString, isCi]
   )
   const map = useMemo(() => maps[status], [maps, status])
 
diff --git a/web/src/components/ExecutionText/ExecutionText.module.scss b/web/src/components/ExecutionText/ExecutionText.module.scss
new file mode 100644
index 000000000..d716efe36
--- /dev/null
+++ b/web/src/components/ExecutionText/ExecutionText.module.scss
@@ -0,0 +1,21 @@
+.author {
+  color: var(--grey-500) !important;
+  font-weight: 600 !important;
+}
+
+.hash {
+  color: var(--primary-7) !important;
+  font-family: Roboto Mono !important;
+  font-size: var(--font-size-small) !important;
+  font-weight: 500 !important;
+}
+
+.pillContainer {
+  background-color: var(--grey-100) !important;
+  color: var(--grey-500) !important;
+  padding: 2px 4px !important;
+}
+
+.pillText {
+  font-weight: 600 !important;
+}
diff --git a/web/src/components/ExecutionText/ExecutionText.module.scss.d.ts b/web/src/components/ExecutionText/ExecutionText.module.scss.d.ts
new file mode 100644
index 000000000..89c04ec14
--- /dev/null
+++ b/web/src/components/ExecutionText/ExecutionText.module.scss.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+// This is an auto-generated file
+export declare const author: string
+export declare const hash: string
+export declare const pillContainer: string
+export declare const pillText: string
diff --git a/web/src/components/ExecutionText/ExecutionText.tsx b/web/src/components/ExecutionText/ExecutionText.tsx
new file mode 100644
index 000000000..31a44e426
--- /dev/null
+++ b/web/src/components/ExecutionText/ExecutionText.tsx
@@ -0,0 +1,162 @@
+import React from 'react'
+import { Avatar, Layout, Text, Utils } from '@harnessio/uicore'
+import { Link } from 'react-router-dom'
+import { GitCommit, GitFork, Label } from 'iconoir-react'
+import { Color } from '@harnessio/design-system'
+import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
+import { useAppContext } from 'AppContext'
+import type { EnumTriggerAction } from 'services/code'
+import css from './ExecutionText.module.scss'
+
+export enum ExecutionTrigger {
+  CRON = 'cron',
+  MANUAL = 'manual',
+  PUSH = 'push',
+  PULL = 'pull_request',
+  TAG = 'tag'
+}
+
+enum PillType {
+  BRANCH = 'branch',
+  TAG = 'tag',
+  COMMIT = 'commit'
+}
+
+interface PillProps {
+  type: PillType
+  text: string
+}
+
+interface ExecutionTextProps {
+  authorName: string
+  authorEmail: string
+  repoPath: string
+  commitRef: string
+  event: ExecutionTrigger
+  target: string
+  beforeRef: string
+  source: string
+  action: EnumTriggerAction | undefined
+}
+
+const Pill: React.FC<PillProps> = ({ type, text }) => {
+  let Icon
+
+  switch (type) {
+    case PillType.BRANCH:
+      Icon = GitFork
+      break
+    case PillType.TAG:
+      Icon = Label
+      break
+    case PillType.COMMIT:
+      Icon = GitCommit
+      break
+    default:
+      Icon = GitCommit
+  }
+
+  return (
+    <Layout.Horizontal
+      spacing={'xsmall'}
+      style={{ alignItems: 'center', borderRadius: '4px' }}
+      className={css.pillContainer}>
+      <Icon height={12} width={12} color={Utils.getRealCSSColor(Color.GREY_500)} />
+      <Text className={css.pillText} font={{ size: 'xsmall' }}>
+        {text}
+      </Text>
+    </Layout.Horizontal>
+  )
+}
+
+export const ExecutionText: React.FC<ExecutionTextProps> = ({
+  authorName,
+  authorEmail,
+  repoPath,
+  commitRef,
+  event,
+  target,
+  beforeRef,
+  source,
+  action
+}) => {
+  const { routes } = useAppContext()
+
+  let componentToRender
+
+  switch (event) {
+    case ExecutionTrigger.CRON:
+      componentToRender = (
+        <Text font={{ size: 'small' }} className={css.author}>
+          Triggered by CRON job
+        </Text>
+      )
+      break
+    case ExecutionTrigger.MANUAL:
+      componentToRender = (
+        <Text font={{ size: 'small' }} className={css.author}>{`${authorName} triggered manually`}</Text>
+      )
+      break
+    case ExecutionTrigger.PUSH:
+      componentToRender = (
+        <>
+          <Text font={{ size: 'small' }} className={css.author}>{`${authorName} pushed`}</Text>
+          <Pill type={PillType.COMMIT} text={beforeRef.slice(0, 6)} />
+          <Text font={{ size: 'small' }} className={css.author}>
+            to
+          </Text>
+          <Pill type={PillType.BRANCH} text={target} />
+        </>
+      )
+      break
+    case ExecutionTrigger.PULL:
+      componentToRender = (
+        <>
+          <Text font={{ size: 'small' }} className={css.author}>{`${authorName} ${
+            action === 'pullreq_reopened' ? 'reopened' : action === 'pullreq_branch_updated' ? 'updated' : 'created'
+          } pull request`}</Text>
+          <Pill type={PillType.BRANCH} text={source} />
+          <Text font={{ size: 'small' }} className={css.author}>
+            to
+          </Text>
+          <Pill type={PillType.BRANCH} text={target} />
+        </>
+      )
+      break
+    case ExecutionTrigger.TAG:
+      componentToRender = (
+        <>
+          <Text font={{ size: 'small' }} className={css.author}>{`${authorName} ${
+            action === 'branch_updated' ? 'updated' : 'created'
+          }`}</Text>
+          <Pill type={PillType.TAG} text={target.split('/').pop() as string} />
+        </>
+      )
+      break
+    default:
+      componentToRender = (
+        <Text font={{ size: 'small' }} className={css.author}>
+          Unknown trigger
+        </Text>
+      )
+  }
+
+  return (
+    <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center', marginLeft: '1.2rem' }}>
+      <Avatar email={authorEmail} name={authorName} size="small" hoverCard={false} />
+      {componentToRender}
+      <PipeSeparator height={7} />
+      <Link
+        to={routes.toCODECommit({
+          repoPath: repoPath,
+          commitRef: commitRef
+        })}
+        className={css.hash}
+        onClick={e => {
+          e.stopPropagation()
+        }}>
+        {commitRef?.slice(0, 6)}
+      </Link>
+    </Layout.Horizontal>
+  )
+}
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 744160371..529fa1704 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -409,6 +409,7 @@ export interface StringsMap {
   'prChecks.notFound': string
   'prChecks.pending': string
   'prChecks.running': string
+  'prChecks.skipped': string
   'prChecks.success': string
   'prChecks.viewExternal': string
   prMustSelectSourceAndTargetBranches: string
@@ -507,6 +508,7 @@ export interface StringsMap {
   showMore: string
   signIn: string
   signUp: string
+  skipped: string
   space: string
   'spaceMemberships.addMember': string
   'spaceMemberships.changeRole': string
diff --git a/web/src/hooks/useFeatureFlag.ts b/web/src/hooks/useFeatureFlag.ts
deleted file mode 100644
index fa979a079..000000000
--- a/web/src/hooks/useFeatureFlag.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// temp file to hide open source pipelines and secrets - can be extended if needs be
-
-const featureFlags = {
-  OPEN_SOURCE_PIPELINES: false,
-  OPEN_SOURCE_SECRETS: false
-}
-
-export const useFeatureFlag = (): Record<keyof typeof featureFlags, boolean> => featureFlags
diff --git a/web/src/hooks/usePRChecksDecision.tsx b/web/src/hooks/usePRChecksDecision.tsx
index 740bd161c..82f6936be 100644
--- a/web/src/hooks/usePRChecksDecision.tsx
+++ b/web/src/hooks/usePRChecksDecision.tsx
@@ -63,6 +63,11 @@ export function usePRChecksDecision({
         setColor(Color.GREY_600)
         setBackground(Color.GREY_100)
         setMessage(stringSubstitute(getString('prChecks.pending'), { count: _count.pending, total }) as string)
+      } else if (_count.skipped) {
+        _status = ExecutionState.SKIPPED
+        setColor(Color.GREY_600)
+        setBackground(Color.GREY_100)
+        setMessage(stringSubstitute(getString('prChecks.skipped'), { count: _count.pending, total }) as string)
       } else if (_count.success) {
         _status = ExecutionState.SUCCESS
         setColor(Color.GREEN_800)
@@ -110,5 +115,6 @@ const DEFAULT_COUNTS = {
   failure: 0,
   pending: 0,
   running: 0,
-  success: 0
+  success: 0,
+  skipped: 0
 }
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 1433ba2d4..eeb4fa3e7 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -298,6 +298,7 @@ prChecks:
   failure: '{count}/{total} {count|1:check,checks} failed.'
   running: '{count}/{total} {count|1:check,checks} running.'
   pending: '{count}/{total} {count|1:check,checks} pending.'
+  skipped: '{count}/{total} {count|1:check,checks} skipped.'
   success: '{count}/{total} {count|1:check,checks} succeeded.'
   notFound: No pipelines or external checks found for this repository.
   viewExternal: View Details
@@ -616,6 +617,7 @@ running: Running
 success: Success
 failed: Failed
 error: Error
+skipped: Skipped
 repoDelete:
   title: Delete Repository
   deleteConfirm1: This will permanently delete the "{{repo}}" repository, wiki, issues, comments, packages, secrets, workflow runs, and remove all collaborator associations.
diff --git a/web/src/layouts/menu/DefaultMenu.tsx b/web/src/layouts/menu/DefaultMenu.tsx
index 4f84736ae..92ad95177 100644
--- a/web/src/layouts/menu/DefaultMenu.tsx
+++ b/web/src/layouts/menu/DefaultMenu.tsx
@@ -7,13 +7,12 @@ import { useStrings } from 'framework/strings'
 import type { TypesSpace } from 'services/code'
 import { SpaceSelector } from 'components/SpaceSelector/SpaceSelector'
 import { useAppContext } from 'AppContext'
-import { useFeatureFlag } from 'hooks/useFeatureFlag'
 import { NavMenuItem } from './NavMenuItem'
 import css from './DefaultMenu.module.scss'
 
 export const DefaultMenu: React.FC = () => {
   const history = useHistory()
-  const { routes } = useAppContext()
+  const { routes, standalone } = useAppContext()
   const [selectedSpace, setSelectedSpace] = useState<TypesSpace | undefined>()
   const { repoMetadata, gitRef, commitRef } = useGetRepositoryMetadata()
   const { getString } = useStrings()
@@ -25,7 +24,6 @@ export const DefaultMenu: React.FC = () => {
   )
   const isCommitSelected = useMemo(() => routeMatch.path === '/:space*/:repoName/commit/:commitRef*', [routeMatch])
 
-  const { OPEN_SOURCE_PIPELINES, OPEN_SOURCE_SECRETS } = useFeatureFlag()
   return (
     <Container className={css.main}>
       <Layout.Vertical spacing="small">
@@ -118,7 +116,7 @@ export const DefaultMenu: React.FC = () => {
                 })}
               />
 
-              {OPEN_SOURCE_PIPELINES && (
+              {standalone && (
                 <NavMenuItem
                   data-code-repo-section="pipelines"
                   isSubLink
@@ -141,7 +139,7 @@ export const DefaultMenu: React.FC = () => {
           </Container>
         </Render>
 
-        {OPEN_SOURCE_SECRETS && (
+        {standalone && (
           <Render when={selectedSpace}>
             {/* icon is placeholder */}
             <NavMenuItem
diff --git a/web/src/pages/ExecutionList/ExecutionList.module.scss b/web/src/pages/ExecutionList/ExecutionList.module.scss
index 069671835..73ea09351 100644
--- a/web/src/pages/ExecutionList/ExecutionList.module.scss
+++ b/web/src/pages/ExecutionList/ExecutionList.module.scss
@@ -51,21 +51,4 @@
     font-size: var(--font-size-normal) !important;
     font-weight: 600 !important;
   }
-
-  .author {
-    color: var(--grey500) !important;
-    font-size: var(--font-size-small) !important;
-    font-weight: 600 !important;
-  }
-
-  .hash {
-    color: var(--primary-7) !important;
-    font-family: Roboto Mono !important;
-    font-size: var(--font-size-small) !important;
-    font-weight: 500 !important;
-  }
-
-  .triggerLayout {
-    align-items: center !important;
-  }
 }
diff --git a/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts b/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts
index a6fb32573..646f96881 100644
--- a/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts
+++ b/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts
@@ -1,13 +1,10 @@
 /* eslint-disable */
 // This is an auto-generated file
-export declare const author: string
 export declare const desc: string
-export declare const hash: string
 export declare const layout: string
 export declare const main: string
 export declare const name: string
 export declare const nameContainer: string
 export declare const number: string
 export declare const pinned: string
-export declare const triggerLayout: string
 export declare const withError: string
diff --git a/web/src/pages/ExecutionList/ExecutionList.tsx b/web/src/pages/ExecutionList/ExecutionList.tsx
index e8ccdc5a5..970552526 100644
--- a/web/src/pages/ExecutionList/ExecutionList.tsx
+++ b/web/src/pages/ExecutionList/ExecutionList.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import {
-  Avatar,
   Button,
   ButtonVariation,
   Container,
@@ -15,7 +14,7 @@ import {
 import { Color } from '@harnessio/design-system'
 import cx from 'classnames'
 import type { CellProps, Column } from 'react-table'
-import { Link, useHistory, useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { useGet, useMutate } from 'restful-react'
 import { Timer, Calendar } from 'iconoir-react'
 import { useStrings } from 'framework/strings'
@@ -24,7 +23,7 @@ import { useAppContext } from 'AppContext'
 import { NoResultCard } from 'components/NoResultCard/NoResultCard'
 import { LIST_FETCHING_LIMIT, PageBrowserProps, getErrorMessage, timeDistance, voidFn } from 'utils/Utils'
 import type { CODEProps } from 'RouteDefinitions'
-import type { TypesExecution } from 'services/code'
+import type { EnumTriggerAction, TypesExecution } from 'services/code'
 import { useQueryParams } from 'hooks/useQueryParams'
 import { usePageIndex } from 'hooks/usePageIndex'
 import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination'
@@ -32,8 +31,8 @@ import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
 import { ExecutionStatus } from 'components/ExecutionStatus/ExecutionStatus'
 import { getStatus } from 'utils/PipelineUtils'
-import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import usePipelineEventStream from 'hooks/usePipelineEventStream'
+import { ExecutionText, ExecutionTrigger } from 'components/ExecutionText/ExecutionText'
 import noExecutionImage from '../RepositoriesListing/no-repo.svg'
 import css from './ExecutionList.module.scss'
 
@@ -94,6 +93,7 @@ const ExecutionList = () => {
       //TODO - this should NOT be hardcoded to master branch - need a modal to insert branch - but useful for testing until then
       await mutate({ branch: 'master' })
       showSuccess('Build started')
+      executionsRefetch()
     } catch {
       showError('Failed to start build')
     }
@@ -118,27 +118,21 @@ const ExecutionList = () => {
           return (
             <Layout.Vertical className={css.nameContainer}>
               <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center' }}>
-                <ExecutionStatus status={getStatus(record.status)} iconOnly noBackground iconSize={20} />
+                <ExecutionStatus status={getStatus(record.status)} iconOnly noBackground iconSize={20} isCi />
                 <Text className={css.number}>{`#${record.number}.`}</Text>
                 <Text className={css.desc}>{record.message}</Text>
               </Layout.Horizontal>
-              <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center', marginLeft: '1.2rem' }}>
-                <Avatar email={record.author_email} name={record.author_name} size="small" hoverCard={false} />
-                {/* TODO need logic here for different trigger types */}
-                <Text className={css.author}>{`${record.author_name} triggered manually`}</Text>
-                <PipeSeparator height={7} />
-                <Link
-                  to={routes.toCODECommit({
-                    repoPath: repoMetadata?.path as string,
-                    commitRef: record.after as string
-                  })}
-                  className={css.hash}
-                  onClick={e => {
-                    e.stopPropagation()
-                  }}>
-                  {record.after?.slice(0, 6)}
-                </Link>
-              </Layout.Horizontal>
+              <ExecutionText
+                authorEmail={record.author_email as string}
+                authorName={record.author_name as string}
+                repoPath={repoMetadata?.path as string}
+                commitRef={record.after as string}
+                event={record.event as ExecutionTrigger}
+                action={record.action as EnumTriggerAction}
+                target={record.target as string}
+                beforeRef={record.before as string}
+                source={record.source as string}
+              />
             </Layout.Vertical>
           )
         }
diff --git a/web/src/pages/PipelineList/PipelineList.tsx b/web/src/pages/PipelineList/PipelineList.tsx
index 3d39c62cc..37e318f4b 100644
--- a/web/src/pages/PipelineList/PipelineList.tsx
+++ b/web/src/pages/PipelineList/PipelineList.tsx
@@ -114,6 +114,7 @@ const PipelineList = () => {
                 noBackground
                 iconSize={24}
                 className={css.statusIcon}
+                isCi
               />
               <Text className={css.repoName}>
                 <Keywords value={searchTerm}>{record.uid}</Keywords>
@@ -133,7 +134,7 @@ const PipelineList = () => {
               <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center' }}>
                 <Text className={css.desc}>{`#${record.number}`}</Text>
                 <PipeSeparator height={7} />
-                <Text className={css.desc}>{record.message}</Text>
+                <Text className={css.desc}>{record.title || record.message}</Text>
               </Layout.Horizontal>
               <Layout.Horizontal spacing={'xsmall'} style={{ alignItems: 'center' }}>
                 <Avatar
@@ -145,9 +146,13 @@ const PipelineList = () => {
                 />
                 {/* TODO need logic here for different trigger types */}
                 <Text className={css.author}>{record.author_name}</Text>
-                <PipeSeparator height={7} />
-                <GitFork height={12} width={12} color={Utils.getRealCSSColor(Color.GREY_500)} />
-                <Text className={css.author}>{record.source}</Text>
+                {record.target && (
+                  <>
+                    <PipeSeparator height={7} />
+                    <GitFork height={12} width={12} color={Utils.getRealCSSColor(Color.GREY_500)} />
+                    <Text className={css.author}>{record.target.split('/').pop()}</Text>
+                  </>
+                )}
                 <PipeSeparator height={7} />
                 <Link
                   to={routes.toCODECommit({
diff --git a/web/src/services/code/index.tsx b/web/src/services/code/index.tsx
index c50135836..8d5924b28 100644
--- a/web/src/services/code/index.tsx
+++ b/web/src/services/code/index.tsx
@@ -47,6 +47,15 @@ export type EnumPullReqState = 'closed' | 'merged' | 'open'
 
 export type EnumTokenType = string
 
+export type EnumTriggerAction =
+  | 'branch_created'
+  | 'branch_updated'
+  | 'pullreq_branch_updated'
+  | 'pullreq_created'
+  | 'pullreq_reopened'
+  | 'tag_created'
+  | 'tag_updated'
+
 export type EnumWebhookExecutionResult = 'fatal_error' | 'retriable_error' | 'success' | null
 
 export type EnumWebhookParent = 'repo' | 'space'
@@ -108,6 +117,15 @@ export interface GitrpcSignature {
   when?: string
 }
 
+export interface ImporterProvider {
+  host?: string
+  password?: string
+  type?: ImporterProviderType
+  username?: string
+}
+
+export type ImporterProviderType = 'github' | 'gitlab'
+
 export interface LivelogLine {
   out?: string
   pos?: number
@@ -256,7 +274,10 @@ export interface OpenapiCreateTokenRequest {
 }
 
 export interface OpenapiCreateTriggerRequest {
+  actions?: EnumTriggerAction[] | null
   description?: string
+  enabled?: boolean
+  secret?: string
   uid?: string
 }
 
@@ -380,8 +401,11 @@ export interface OpenapiUpdateTemplateRequest {
 }
 
 export interface OpenapiUpdateTriggerRequest {
-  description?: string
-  uid?: string
+  actions?: EnumTriggerAction[] | null
+  description?: string | null
+  enabled?: boolean | null
+  secret?: string | null
+  uid?: string | null
 }
 
 export interface OpenapiUpdateWebhookRequest {
@@ -861,10 +885,14 @@ export interface TypesTokenResponse {
 }
 
 export interface TypesTrigger {
+  actions?: EnumTriggerAction[] | null
   created?: number
+  created_by?: number
   description?: string
+  enabled?: boolean
   id?: number
   pipeline_id?: number
+  repo_id?: number
   uid?: string
   updated?: number
 }
@@ -3398,40 +3426,6 @@ export const usePullReqMetaData = ({ repo_ref, pullreq_number, ...props }: UsePu
     { base: getConfig('code/api/v1'), pathParams: { repo_ref, pullreq_number }, ...props }
   )
 
-export interface RecheckPullReqPathParams {
-  repo_ref: string
-  pullreq_number: number
-}
-
-export type RecheckPullReqProps = Omit<
-  MutateProps<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>,
-  'path' | 'verb'
-> &
-  RecheckPullReqPathParams
-
-export const RecheckPullReq = ({ repo_ref, pullreq_number, ...props }: RecheckPullReqProps) => (
-  <Mutate<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>
-    verb="POST"
-    path={`/repos/${repo_ref}/pullreq/${pullreq_number}/recheck`}
-    base={getConfig('code/api/v1')}
-    {...props}
-  />
-)
-
-export type UseRecheckPullReqProps = Omit<
-  UseMutateProps<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>,
-  'path' | 'verb'
-> &
-  RecheckPullReqPathParams
-
-export const useRecheckPullReq = ({ repo_ref, pullreq_number, ...props }: UseRecheckPullReqProps) =>
-  useMutate<void, UsererrorError, void, OpenapiUpdatePullReqRequest, RecheckPullReqPathParams>(
-    'POST',
-    (paramsInPath: RecheckPullReqPathParams) =>
-      `/repos/${paramsInPath.repo_ref}/pullreq/${paramsInPath.pullreq_number}/recheck`,
-    { base: getConfig('code/api/v1'), pathParams: { repo_ref, pullreq_number }, ...props }
-  )
-
 export interface ReviewerListPullReqPathParams {
   repo_ref: string
   pullreq_number: number
@@ -4075,6 +4069,47 @@ export const useGetWebhookExecution = ({
     { base: getConfig('code/api/v1'), pathParams: { repo_ref, webhook_id, webhook_execution_id }, ...props }
   )
 
+export interface ImportRepositoryQueryParams {
+  /**
+   * path of parent space (Not needed in standalone).
+   */
+  space_path?: string
+}
+
+export interface ImportRepositoryRequestBody {
+  description?: string
+  parent_ref?: string
+  provider?: ImporterProvider
+  provider_repo?: string
+  uid?: string
+}
+
+export type ImportRepositoryProps = Omit<
+  MutateProps<TypesRepository, UsererrorError, ImportRepositoryQueryParams, ImportRepositoryRequestBody, void>,
+  'path' | 'verb'
+>
+
+export const ImportRepository = (props: ImportRepositoryProps) => (
+  <Mutate<TypesRepository, UsererrorError, ImportRepositoryQueryParams, ImportRepositoryRequestBody, void>
+    verb="POST"
+    path={`/repos/import`}
+    base={getConfig('code/api/v1')}
+    {...props}
+  />
+)
+
+export type UseImportRepositoryProps = Omit<
+  UseMutateProps<TypesRepository, UsererrorError, ImportRepositoryQueryParams, ImportRepositoryRequestBody, void>,
+  'path' | 'verb'
+>
+
+export const useImportRepository = (props: UseImportRepositoryProps) =>
+  useMutate<TypesRepository, UsererrorError, ImportRepositoryQueryParams, ImportRepositoryRequestBody, void>(
+    'POST',
+    `/repos/import`,
+    { base: getConfig('code/api/v1'), ...props }
+  )
+
 export type ListGitignoreProps = Omit<GetProps<string[], UsererrorError, void, void>, 'path'>
 
 export const ListGitignore = (props: ListGitignoreProps) => (
@@ -4874,6 +4909,40 @@ export const useListTemplates = ({ space_ref, ...props }: UseListTemplatesProps)
     { base: getConfig('code/api/v1'), pathParams: { space_ref }, ...props }
   )
 
+export interface ImportSpaceRequestBody {
+  description?: string
+  is_public?: boolean
+  parent_ref?: string
+  provider?: ImporterProvider
+  provider_space?: string
+  uid?: string
+}
+
+export type ImportSpaceProps = Omit<
+  MutateProps<TypesSpace, UsererrorError, void, ImportSpaceRequestBody, void>,
+  'path' | 'verb'
+>
+
+export const ImportSpace = (props: ImportSpaceProps) => (
+  <Mutate<TypesSpace, UsererrorError, void, ImportSpaceRequestBody, void>
+    verb="POST"
+    path={`/spaces/import`}
+    base={getConfig('code/api/v1')}
+    {...props}
+  />
+)
+
+export type UseImportSpaceProps = Omit<
+  UseMutateProps<TypesSpace, UsererrorError, void, ImportSpaceRequestBody, void>,
+  'path' | 'verb'
+>
+
+export const useImportSpace = (props: UseImportSpaceProps) =>
+  useMutate<TypesSpace, UsererrorError, void, ImportSpaceRequestBody, void>('POST', `/spaces/import`, {
+    base: getConfig('code/api/v1'),
+    ...props
+  })
+
 export type GetSystemConfigProps = Omit<GetProps<SystemConfigOutput, UsererrorError, void, void>, 'path'>
 
 export const GetSystemConfig = (props: GetSystemConfigProps) => (
diff --git a/web/src/services/code/swagger.yaml b/web/src/services/code/swagger.yaml
index 14f78da2e..651dd1afe 100644
--- a/web/src/services/code/swagger.yaml
+++ b/web/src/services/code/swagger.yaml
@@ -3622,54 +3622,6 @@ paths:
           description: Internal Server Error
       tags:
         - pullreq
-  /repos/{repo_ref}/pullreq/{pullreq_number}/recheck:
-    post:
-      operationId: recheckPullReq
-      parameters:
-        - in: path
-          name: repo_ref
-          required: true
-          schema:
-            type: string
-        - in: path
-          name: pullreq_number
-          required: true
-          schema:
-            type: integer
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/OpenapiUpdatePullReqRequest'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UsererrorError'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UsererrorError'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UsererrorError'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UsererrorError'
-          description: Internal Server Error
-      tags:
-        - pullreq
   /repos/{repo_ref}/pullreq/{pullreq_number}/reviewers:
     get:
       operationId: reviewerListPullReq
@@ -4621,6 +4573,66 @@ paths:
           description: Internal Server Error
       tags:
         - webhook
+  /repos/import:
+    post:
+      operationId: importRepository
+      parameters:
+        - description: path of parent space (Not needed in standalone).
+          in: query
+          name: space_path
+          required: false
+          schema:
+            default: false
+            type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              properties:
+                description:
+                  type: string
+                parent_ref:
+                  type: string
+                provider:
+                  $ref: '#/components/schemas/ImporterProvider'
+                provider_repo:
+                  type: string
+                uid:
+                  type: string
+              type: object
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/TypesRepository'
+          description: Created
+        '400':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Bad Request
+        '401':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Unauthorized
+        '403':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Forbidden
+        '500':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Internal Server Error
+      tags:
+        - repository
   /resources/gitignore:
     get:
       operationId: listGitignore
@@ -5894,6 +5906,60 @@ paths:
           description: Internal Server Error
       tags:
         - space
+  /spaces/import:
+    post:
+      operationId: importSpace
+      requestBody:
+        content:
+          application/json:
+            schema:
+              properties:
+                description:
+                  type: string
+                is_public:
+                  type: boolean
+                parent_ref:
+                  type: string
+                provider:
+                  $ref: '#/components/schemas/ImporterProvider'
+                provider_space:
+                  type: string
+                uid:
+                  type: string
+              type: object
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/TypesSpace'
+          description: Created
+        '400':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Bad Request
+        '401':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Unauthorized
+        '403':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Forbidden
+        '500':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UsererrorError'
+          description: Internal Server Error
+      tags:
+        - space
   /system/config:
     get:
       operationId: getSystemConfig
@@ -6313,6 +6379,16 @@ components:
       type: string
     EnumTokenType:
       type: string
+    EnumTriggerAction:
+      enum:
+        - branch_created
+        - branch_updated
+        - pullreq_branch_updated
+        - pullreq_created
+        - pullreq_reopened
+        - tag_created
+        - tag_updated
+      type: string
     EnumWebhookExecutionResult:
       enum:
         - fatal_error
@@ -6421,6 +6497,22 @@ components:
           format: date-time
           type: string
       type: object
+    ImporterProvider:
+      properties:
+        host:
+          type: string
+        password:
+          type: string
+        type:
+          $ref: '#/components/schemas/ImporterProviderType'
+        username:
+          type: string
+      type: object
+    ImporterProviderType:
+      enum:
+        - github
+        - gitlab
+      type: string
     LivelogLine:
       properties:
         out:
@@ -6669,8 +6761,17 @@ components:
       type: object
     OpenapiCreateTriggerRequest:
       properties:
+        actions:
+          items:
+            $ref: '#/components/schemas/EnumTriggerAction'
+          nullable: true
+          type: array
         description:
           type: string
+        enabled:
+          type: boolean
+        secret:
+          type: string
         uid:
           type: string
       type: object
@@ -6868,9 +6969,22 @@ components:
       type: object
     OpenapiUpdateTriggerRequest:
       properties:
+        actions:
+          items:
+            $ref: '#/components/schemas/EnumTriggerAction'
+          nullable: true
+          type: array
         description:
+          nullable: true
+          type: string
+        enabled:
+          nullable: true
+          type: boolean
+        secret:
+          nullable: true
           type: string
         uid:
+          nullable: true
           type: string
       type: object
     OpenapiUpdateWebhookRequest:
@@ -7719,14 +7833,25 @@ components:
       type: object
     TypesTrigger:
       properties:
+        actions:
+          items:
+            $ref: '#/components/schemas/EnumTriggerAction'
+          nullable: true
+          type: array
         created:
           type: integer
+        created_by:
+          type: integer
         description:
           type: string
+        enabled:
+          type: boolean
         id:
           type: integer
         pipeline_id:
           type: integer
+        repo_id:
+          type: integer
         uid:
           type: string
         updated:

From c7714aafea88edb22af6c5f5666e9dcb7aa2e789 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Tue, 12 Sep 2023 12:15:41 -0700
Subject: [PATCH 37/38] fix eslint errors

---
 .../NewPipelineModal/NewPipelineModal.tsx     |  2 +-
 .../components/PluginsPanel/PluginsPanel.tsx  | 23 ++++++++++---------
 .../RunPipelineModal/RunPipelineModal.tsx     |  6 ++---
 .../AddUpdatePipeline/AddUpdatePipeline.tsx   |  6 +++--
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/web/src/components/NewPipelineModal/NewPipelineModal.tsx b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
index 5bfb5807b..99685a42b 100644
--- a/web/src/components/NewPipelineModal/NewPipelineModal.tsx
+++ b/web/src/components/NewPipelineModal/NewPipelineModal.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useMutate } from 'restful-react'
 import * as yup from 'yup'
-import { capitalize } from 'lodash'
+import { capitalize } from 'lodash-es'
 import {
   Button,
   ButtonVariation,
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 29e16c50c..82002b53a 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { Formik } from 'formik'
 import { capitalize, get } from 'lodash-es'
 import { useGet } from 'restful-react'
-import { useStrings } from 'framework/strings'
-import { Button, ButtonVariation, Container, FormInput, FormikForm, Layout, Tab, Tabs, Text } from '@harnessio/uicore'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Icon, type IconName } from '@harnessio/icons'
+import { Button, ButtonVariation, Container, FormInput, FormikForm, Layout, Tab, Tabs, Text } from '@harnessio/uicore'
+import { useStrings } from 'framework/strings'
 import { LIST_FETCHING_LIMIT } from 'utils/Utils'
 import type { TypesPlugin } from 'services/code'
 import { YamlVersion } from 'pages/AddUpdatePipeline/Constants'
@@ -104,19 +104,19 @@ export const PluginsPanel = ({ version = YamlVersion.V0, onPluginAddUpdate }: Pl
     return (
       <>
         {PluginCategories.map((item: PluginInterface) => {
-          const { name, category, description, icon } = item
+          const { name, category: pluginCategory, description, icon } = item
           return (
             <Layout.Horizontal
               onClick={() => {
-                setCategory(category)
-                if (category === PluginCategory.Drone) {
+                setCategory(pluginCategory)
+                if (pluginCategory === PluginCategory.Drone) {
                   setPanelView(PluginPanelView.Listing)
-                } else if (category === PluginCategory.Harness) {
+                } else if (pluginCategory === PluginCategory.Harness) {
                   setPlugin({ uid: getString('run') })
                   setPanelView(PluginPanelView.Configuration)
                 }
               }}
-              key={category}
+              key={pluginCategory}
               padding={{ left: 'medium', right: 'medium', top: 'medium', bottom: 'medium' }}
               flex={{ justifyContent: 'flex-start' }}
               className={css.plugin}>
@@ -160,8 +160,8 @@ export const PluginsPanel = ({ version = YamlVersion.V0, onPluginAddUpdate }: Pl
           </Text>
         </Layout.Horizontal>
         <Container>
-          {plugins?.map((plugin: TypesPlugin) => {
-            const { uid, description } = plugin
+          {plugins?.map((_plugin: TypesPlugin) => {
+            const { uid, description } = _plugin
             return (
               <Layout.Horizontal
                 flex={{ justifyContent: 'flex-start' }}
@@ -169,8 +169,9 @@ export const PluginsPanel = ({ version = YamlVersion.V0, onPluginAddUpdate }: Pl
                 className={css.plugin}
                 onClick={() => {
                   setPanelView(PluginPanelView.Configuration)
-                  setPlugin(plugin)
-                }}>
+                  setPlugin(_plugin)
+                }}
+                key={uid}>
                 <Icon name={'gear'} size={25} />
                 <Layout.Vertical padding={{ left: 'small' }}>
                   <Text font={{ variation: FontVariation.BODY2 }} color={Color.PRIMARY_7}>
diff --git a/web/src/components/RunPipelineModal/RunPipelineModal.tsx b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
index 3ad1c9768..9dccc9155 100644
--- a/web/src/components/RunPipelineModal/RunPipelineModal.tsx
+++ b/web/src/components/RunPipelineModal/RunPipelineModal.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { useHistory } from 'react-router'
 import { useMutate } from 'restful-react'
 import * as yup from 'yup'
-import { capitalize } from 'lodash'
+import { capitalize } from 'lodash-es'
 import { FontVariation } from '@harnessio/design-system'
 import {
   Button,
@@ -118,9 +118,9 @@ const useRunPipelineModal = () => {
   }, [repo?.default_branch, pipeline])
 
   return {
-    openModal: ({ repoMetadata, pipeline }: { repoMetadata: TypesRepository; pipeline: string }) => {
+    openModal: ({ repoMetadata, pipeline: pipelineUid }: { repoMetadata: TypesRepository; pipeline: string }) => {
       setRepo(repoMetadata)
-      setPipeline(pipeline)
+      setPipeline(pipelineUid)
       openModal()
     },
     hideModal
diff --git a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
index 29d5b23b2..149d15418 100644
--- a/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
+++ b/web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useGet, useMutate } from 'restful-react'
 import { Link, useParams } from 'react-router-dom'
-import { get, isEmpty, isUndefined, set } from 'lodash'
+import { get, isEmpty, isUndefined, set } from 'lodash-es'
 import { stringify } from 'yaml'
 import { Menu, PopoverPosition } from '@blueprintjs/core'
 import {
@@ -222,7 +222,9 @@ const AddUpdatePipeline = (): JSX.Element => {
       const updatedPipelineAsObj = updatePipeline(pluginFormData)
       setPipelineAsObj(updatedPipelineAsObj)
       setPipelineAsYaml(stringify(updatedPipelineAsObj))
-    } catch (ex) {}
+    } catch (ex) {
+      // ignore exception
+    }
   }
 
   const renderCTA = useCallback(() => {

From ce6d798fb29dffe32b899d786062440d547bd55a Mon Sep 17 00:00:00 2001
From: Tan Nhu <tan@harness.io>
Date: Tue, 12 Sep 2023 22:16:40 +0000
Subject: [PATCH 38/38] Implement Semantic Search (#440)

---
 web/config/moduleFederation.config.js         |   1 +
 web/src/RouteDefinitions.ts                   |   3 +-
 web/src/RouteDestinations.tsx                 |   7 +
 web/src/components/Editor/Editor.tsx          |  18 +-
 .../RepositoryPageHeader.tsx                  |  18 +-
 .../SearchInputWithSpinner.tsx                |  14 +-
 .../SpaceSelector/SpaceSelector.module.scss   |   9 +-
 web/src/components/Split/Split.module.scss    |  48 +++
 .../components/Split/Split.module.scss.d.ts   |   3 +
 web/src/components/Split/Split.tsx            |   8 +
 web/src/framework/strings/stringTypes.ts      |   7 +
 web/src/i18n/strings.en.yaml                  |   9 +-
 web/src/layouts/layout.module.scss            |   1 +
 web/src/layouts/menu/DefaultMenu.tsx          |  18 +-
 web/src/pages/Execution/Execution.module.scss |  47 ---
 web/src/pages/Execution/Execution.tsx         |   6 +-
 .../PullRequest/Checks/Checks.module.scss     |  47 ---
 web/src/pages/PullRequest/Checks/Checks.tsx   |   6 +-
 .../ContentHeader/ContentHeader.module.scss   |  29 +-
 .../ContentHeader.module.scss.d.ts            |   2 +-
 .../ContentHeader/ContentHeader.tsx           |  28 +-
 .../ContentHeader/search-background.svg       |   7 +
 .../FileContent/FileContent.tsx               |   3 +-
 web/src/pages/Search/Search.module.scss       | 229 ++++++++++++
 web/src/pages/Search/Search.module.scss.d.ts  |  21 ++
 web/src/pages/Search/Search.tsx               | 332 ++++++++++++++++++
 .../codemirror/addClassToLinesExtension.tsx   |  66 ++++
 27 files changed, 858 insertions(+), 129 deletions(-)
 create mode 100644 web/src/components/Split/Split.module.scss
 create mode 100644 web/src/components/Split/Split.module.scss.d.ts
 create mode 100644 web/src/components/Split/Split.tsx
 create mode 100644 web/src/pages/Repository/RepositoryContent/ContentHeader/search-background.svg
 create mode 100644 web/src/pages/Search/Search.module.scss
 create mode 100644 web/src/pages/Search/Search.module.scss.d.ts
 create mode 100644 web/src/pages/Search/Search.tsx
 create mode 100644 web/src/utils/codemirror/addClassToLinesExtension.tsx

diff --git a/web/config/moduleFederation.config.js b/web/config/moduleFederation.config.js
index 5148930c1..919873364 100644
--- a/web/config/moduleFederation.config.js
+++ b/web/config/moduleFederation.config.js
@@ -35,6 +35,7 @@ module.exports = {
     './Settings': './src/pages/RepositorySettings/RepositorySettings.tsx',
     './Webhooks': './src/pages/Webhooks/Webhooks.tsx',
     './WebhookNew': './src/pages/WebhookNew/WebhookNew.tsx',
+    './Search': './src/pages/Search/Search.tsx',
     './WebhookDetails': './src/pages/WebhookDetails/WebhookDetails.tsx',
     './NewRepoModalButton': './src/components/NewRepoModalButton/NewRepoModalButton.tsx'
   },
diff --git a/web/src/RouteDefinitions.ts b/web/src/RouteDefinitions.ts
index 1d40d7384..1a7000138 100644
--- a/web/src/RouteDefinitions.ts
+++ b/web/src/RouteDefinitions.ts
@@ -73,7 +73,7 @@ export interface CODERoutes {
   toCODEWebhookNew: (args: Required<Pick<CODEProps, 'repoPath'>>) => string
   toCODEWebhookDetails: (args: Required<Pick<CODEProps, 'repoPath' | 'webhookId'>>) => string
   toCODESettings: (args: Required<Pick<CODEProps, 'repoPath'>>) => string
-
+  toCODESearch: (args: Required<Pick<CODEProps, 'repoPath'>>) => string
   toCODEExecutions: (args: Required<Pick<CODEProps, 'repoPath' | 'pipeline'>>) => string
   toCODEExecution: (args: Required<Pick<CODEProps, 'repoPath' | 'pipeline' | 'execution'>>) => string
   toCODESecret: (args: Required<Pick<CODEProps, 'space' | 'secret'>>) => string
@@ -126,6 +126,7 @@ export const routes: CODERoutes = {
   toCODEBranches: ({ repoPath }) => `/${repoPath}/branches`,
   toCODETags: ({ repoPath }) => `/${repoPath}/tags`,
   toCODESettings: ({ repoPath }) => `/${repoPath}/settings`,
+  toCODESearch: ({ repoPath }) => `/${repoPath}/search`,
   toCODEWebhooks: ({ repoPath }) => `/${repoPath}/webhooks`,
   toCODEWebhookNew: ({ repoPath }) => `/${repoPath}/webhooks/new`,
   toCODEWebhookDetails: ({ repoPath, webhookId }) => `/${repoPath}/webhook/${webhookId}`,
diff --git a/web/src/RouteDestinations.tsx b/web/src/RouteDestinations.tsx
index 3425889aa..60ec8dd21 100644
--- a/web/src/RouteDestinations.tsx
+++ b/web/src/RouteDestinations.tsx
@@ -30,6 +30,7 @@ import { useStrings } from 'framework/strings'
 import ExecutionList from 'pages/ExecutionList/ExecutionList'
 import Execution from 'pages/Execution/Execution'
 import Secret from 'pages/Secret/Secret'
+import Search from 'pages/Search/Search'
 import AddUpdatePipeline from 'pages/AddUpdatePipeline/AddUpdatePipeline'
 import { useAppContext } from 'AppContext'
 
@@ -249,6 +250,12 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
           </LayoutWithSideNav>
         </Route>
 
+        <Route path={routes.toCODESearch({ repoPath })} exact>
+          <LayoutWithSideNav title={getString('pageTitle.search')}>
+            <Search />
+          </LayoutWithSideNav>
+        </Route>
+
         <Route
           path={routes.toCODEFileEdit({
             repoPath,
diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index c0d94bf0d..5c2b5ff59 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -11,7 +11,7 @@ import { EditorView, keymap, placeholder as placeholderExtension } from '@codemi
 import { Compartment, EditorState, Extension } from '@codemirror/state'
 import { color } from '@uiw/codemirror-extensions-color'
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
-import { githubLight as theme } from '@uiw/codemirror-themes-all'
+import { githubLight, githubDark } from '@uiw/codemirror-themes-all'
 import css from './Editor.module.scss'
 
 export interface EditorProps {
@@ -28,6 +28,7 @@ export interface EditorProps {
   setDirty?: React.Dispatch<React.SetStateAction<boolean>>
   onChange?: (doc: Text, viewUpdate: ViewUpdate, isDirty: boolean) => void
   onViewUpdate?: (viewUpdate: ViewUpdate) => void
+  darkTheme?: boolean
 }
 
 export const Editor = React.memo(function CodeMirrorReactEditor({
@@ -43,8 +44,10 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
   viewRef,
   setDirty,
   onChange,
-  onViewUpdate
+  onViewUpdate,
+  darkTheme
 }: EditorProps) {
+  const contentRef = useRef(content)
   const view = useRef<EditorView>()
   const ref = useRef<HTMLDivElement>()
   const languageConfig = useMemo(() => new Compartment(), [])
@@ -70,7 +73,7 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
 
         color,
         hyperLink,
-        theme,
+        darkTheme ? githubDark : githubLight,
 
         EditorView.lineWrapping,
 
@@ -136,5 +139,14 @@ export const Editor = React.memo(function CodeMirrorReactEditor({
     }
   }, [filename, forMarkdown, view, languageConfig, markdownLanguageSupport])
 
+  useEffect(() => {
+    if (contentRef.current !== content) {
+      contentRef.current = content
+      viewRef?.current?.dispatch({
+        changes: { from: 0, to: viewRef?.current?.state.doc.length, insert: content }
+      })
+    }
+  }, [content, viewRef])
+
   return <Container ref={ref} className={cx(css.editor, className)} style={style} />
 })
diff --git a/web/src/components/RepositoryPageHeader/RepositoryPageHeader.tsx b/web/src/components/RepositoryPageHeader/RepositoryPageHeader.tsx
index 3455bc491..044d0561b 100644
--- a/web/src/components/RepositoryPageHeader/RepositoryPageHeader.tsx
+++ b/web/src/components/RepositoryPageHeader/RepositoryPageHeader.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { Container, Layout, Text, PageHeader } from '@harnessio/uicore'
+import { Container, Layout, Text, PageHeader, PageHeaderProps } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Link, useParams } from 'react-router-dom'
@@ -19,33 +19,35 @@ interface RepositoryPageHeaderProps extends Optional<Pick<GitInfoProps, 'repoMet
   title: string | JSX.Element
   dataTooltipId: string
   extraBreadcrumbLinks?: BreadcrumbLink[]
+  className?: string
+  content?: PageHeaderProps['content']
 }
 
 export function RepositoryPageHeader({
   repoMetadata,
   title,
   dataTooltipId,
-  extraBreadcrumbLinks = []
+  extraBreadcrumbLinks = [],
+  className,
+  content
 }: RepositoryPageHeaderProps) {
   const { gitRef } = useParams<CODEProps>()
   const { getString } = useStrings()
   const space = useGetSpaceParam()
   const { routes } = useAppContext()
 
-  if (!repoMetadata) {
-    return null
-  }
-
   return (
     <PageHeader
+      className={className}
+      content={content}
       title=""
       breadcrumbs={
         <Container className={css.header}>
           <Layout.Horizontal spacing="small" className={css.breadcrumb}>
             <Link to={routes.toCODERepositories({ space })}>{getString('repositories')}</Link>
             <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
-            <Link to={routes.toCODERepository({ repoPath: repoMetadata.path as string, gitRef })}>
-              {repoMetadata.uid}
+            <Link to={routes.toCODERepository({ repoPath: (repoMetadata?.path as string) || '', gitRef })}>
+              {repoMetadata?.uid || ''}
             </Link>
             {extraBreadcrumbLinks.map(link => (
               <Fragment key={link.url}>
diff --git a/web/src/components/SearchInputWithSpinner/SearchInputWithSpinner.tsx b/web/src/components/SearchInputWithSpinner/SearchInputWithSpinner.tsx
index 8c7864557..fe38d3d30 100644
--- a/web/src/components/SearchInputWithSpinner/SearchInputWithSpinner.tsx
+++ b/web/src/components/SearchInputWithSpinner/SearchInputWithSpinner.tsx
@@ -16,6 +16,7 @@ interface SearchInputWithSpinnerProps {
   icon?: IconName
   spinnerIcon?: IconName
   spinnerPosition?: 'left' | 'right'
+  onSearch?: (searchTerm: string) => void
 }
 
 export const SearchInputWithSpinner: React.FC<SearchInputWithSpinnerProps> = ({
@@ -26,7 +27,8 @@ export const SearchInputWithSpinner: React.FC<SearchInputWithSpinnerProps> = ({
   placeholder,
   icon = 'search',
   spinnerIcon = 'steps-spinner',
-  spinnerPosition = 'left'
+  spinnerPosition = 'left',
+  onSearch
 }) => {
   const { getString } = useStrings()
   const spinner = <Icon name={spinnerIcon as IconName} color={Color.PRIMARY_7} />
@@ -37,6 +39,7 @@ export const SearchInputWithSpinner: React.FC<SearchInputWithSpinnerProps> = ({
       <Layout.Horizontal className={css.layout}>
         <Render when={loading && !spinnerOnRight}>{spinner}</Render>
         <TextInput
+          type="search"
           value={query}
           wrapperClassName={cx(css.wrapper, { [css.spinnerOnRight]: spinnerOnRight })}
           className={css.input}
@@ -45,7 +48,14 @@ export const SearchInputWithSpinner: React.FC<SearchInputWithSpinnerProps> = ({
           style={{ width }}
           autoFocus
           onFocus={event => event.target.select()}
-          onInput={event => setQuery(event.currentTarget.value || '')}
+          onInput={event => {
+            setQuery(event.currentTarget.value || '')
+          }}
+          onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
+            if (e.key === 'Enter') {
+              onSearch?.((e as unknown as React.FormEvent<HTMLInputElement>).currentTarget.value || '')
+            }
+          }}
         />
         <Render when={loading && spinnerOnRight}>{spinner}</Render>
       </Layout.Horizontal>
diff --git a/web/src/components/SpaceSelector/SpaceSelector.module.scss b/web/src/components/SpaceSelector/SpaceSelector.module.scss
index f2c4d8bee..e12cf551b 100644
--- a/web/src/components/SpaceSelector/SpaceSelector.module.scss
+++ b/web/src/components/SpaceSelector/SpaceSelector.module.scss
@@ -48,7 +48,7 @@
   width: min(calc(100vw - var(--nav-menu-width)), 840px) !important;
   height: 100vh;
   position: fixed;
-  left: 5px;
+  left: 241px;
   top: -5px;
 
   > div {
@@ -79,6 +79,13 @@
     background-color: rgba(26, 26, 26, 0.4);
   }
 
+  :global {
+    .bp3-popover-arrow {
+      left: -11px !important;
+      transform: rotate(180deg);
+    }
+  }
+
   > div {
     height: 100%;
     width: 100%;
diff --git a/web/src/components/Split/Split.module.scss b/web/src/components/Split/Split.module.scss
new file mode 100644
index 000000000..d8caa6cc6
--- /dev/null
+++ b/web/src/components/Split/Split.module.scss
@@ -0,0 +1,48 @@
+.main {
+  :global {
+    .Resizer {
+      background-color: var(--grey-300);
+      opacity: 0.2;
+      z-index: 1;
+      box-sizing: border-box;
+      background-clip: padding-box;
+    }
+
+    .Resizer:hover {
+      transition: all 2s ease;
+    }
+
+    .Resizer.horizontal {
+      margin: -5px 0;
+      border-top: 5px solid rgba(255, 255, 255, 0);
+      border-bottom: 5px solid rgba(255, 255, 255, 0);
+      cursor: row-resize;
+    }
+
+    .Resizer.horizontal:hover {
+      border-top: 5px solid rgba(0, 0, 0, 0.5);
+      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    }
+
+    .Resizer.vertical {
+      width: 11px;
+      margin: 0 -5px;
+      border-left: 5px solid rgba(255, 255, 255, 0);
+      border-right: 5px solid rgba(255, 255, 255, 0);
+      cursor: col-resize;
+    }
+
+    .Resizer.vertical:hover {
+      border-left: 5px solid rgba(0, 0, 0, 0.5);
+      border-right: 5px solid rgba(0, 0, 0, 0.5);
+    }
+
+    .Resizer.disabled {
+      cursor: not-allowed;
+    }
+
+    .Resizer.disabled:hover {
+      border-color: transparent;
+    }
+  }
+}
diff --git a/web/src/components/Split/Split.module.scss.d.ts b/web/src/components/Split/Split.module.scss.d.ts
new file mode 100644
index 000000000..b8f356255
--- /dev/null
+++ b/web/src/components/Split/Split.module.scss.d.ts
@@ -0,0 +1,3 @@
+/* eslint-disable */
+// This is an auto-generated file
+export declare const main: string
diff --git a/web/src/components/Split/Split.tsx b/web/src/components/Split/Split.tsx
new file mode 100644
index 000000000..9cda425f1
--- /dev/null
+++ b/web/src/components/Split/Split.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import cx from 'classnames'
+import SplitPane, { type SplitPaneProps } from 'react-split-pane'
+import css from './Split.module.scss'
+
+export const Split: React.FC<SplitPaneProps> = ({ className, ...props }) => (
+  <SplitPane className={cx(css.main, className)} {...props} />
+)
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 529fa1704..e465d5136 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -17,6 +17,7 @@ export interface StringsMap {
   addNewFile: string
   addReadMe: string
   admin: string
+  aiSearch: string
   all: string
   allBranches: string
   allComments: string
@@ -65,6 +66,7 @@ export interface StringsMap {
   cloneText: string
   close: string
   closed: string
+  codeSearch: string
   comment: string
   commentDeleted: string
   commit: string
@@ -307,6 +309,7 @@ export interface StringsMap {
   'pageTitle.repositories': string
   'pageTitle.repository': string
   'pageTitle.repositorySettings': string
+  'pageTitle.search': string
   'pageTitle.secrets': string
   'pageTitle.signin': string
   'pageTitle.spaceSettings': string
@@ -336,6 +339,7 @@ export interface StringsMap {
   'pipelines.run': string
   'pipelines.saveAndRun': string
   'pipelines.time': string
+  poweredByAI: string
   'pipelines.updated': string
   'pipelines.yamlPath': string
   'plugins.addAPlugin': string
@@ -482,6 +486,7 @@ export interface StringsMap {
   scrollToTop: string
   search: string
   searchBranches: string
+  searchResult: string
   secret: string
   'secrets.createSecret': string
   'secrets.createSuccess': string
@@ -527,6 +532,7 @@ export interface StringsMap {
   'spaceSetting.setting': string
   spaces: string
   sslVerificationLabel: string
+  startSearching: string
   status: string
   submitReview: string
   success: string
@@ -586,6 +592,7 @@ export interface StringsMap {
   viewAllTags: string
   viewCommitDetails: string
   viewFile: string
+  viewFileHistory: string
   viewFiles: string
   viewRaw: string
   viewRepo: string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index eeb4fa3e7..28d463d49 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -96,6 +96,7 @@ pageTitle:
   pipelines: Pipelines
   secrets: Secrets
   executions: Executions
+  search: Search powered by AI
 repos:
   name: Repo Name
   data: Repo Data
@@ -482,7 +483,7 @@ newTag: New Tag
 overview: Overview
 fileTooLarge: File is too large to open. {download}
 clickHereToDownload: Click here to download.
-viewFile: View the file at this point in the history
+viewFileHistory: View the file at this point in the history
 viewRepo: View the repository at this point in the history
 hideCommitHistory: Renamed from {file} - Hide History
 showCommitHistory: Renamed from {file} - Show History
@@ -669,6 +670,12 @@ secrets:
   failedToDeleteSecret: Failed to delete Secret. Please try again.
   deleteSecret: Delete Secrets
 userUpdateSuccess: 'User updated successfully'
+viewFile: View File
+searchResult: 'Search Result {count}'
+aiSearch: AI Search
+codeSearch: Code Search
+startSearching: Begin search by describing what you are looking for.
+poweredByAI: Unlock the power of AI with Semantic Code search. Try phrases like "Locate the code for authentication".
 run: Run
 plugins:
   title: Plugins
diff --git a/web/src/layouts/layout.module.scss b/web/src/layouts/layout.module.scss
index 697222d4b..ebef47d25 100644
--- a/web/src/layouts/layout.module.scss
+++ b/web/src/layouts/layout.module.scss
@@ -11,6 +11,7 @@
       height: 100%;
       display: flex;
       flex-direction: column;
+      overflow: auto;
 
       .settings {
         margin: 0 var(--spacing-medium);
diff --git a/web/src/layouts/menu/DefaultMenu.tsx b/web/src/layouts/menu/DefaultMenu.tsx
index 92ad95177..4ecca3f79 100644
--- a/web/src/layouts/menu/DefaultMenu.tsx
+++ b/web/src/layouts/menu/DefaultMenu.tsx
@@ -126,15 +126,25 @@ export const DefaultMenu: React.FC = () => {
                   })}
                 />
               )}
-
               <NavMenuItem
-                data-code-repo-section="settings"
+                data-code-repo-section="pipelines"
                 isSubLink
-                label={getString('settings')}
-                to={routes.toCODESettings({
+                label={getString('pageTitle.pipelines')}
+                to={routes.toCODEPipelines({
                   repoPath
                 })}
               />
+
+              {!standalone && (
+                <NavMenuItem
+                  data-code-repo-section="search"
+                  isSubLink
+                  label={getString('search')}
+                  to={routes.toCODESearch({
+                    repoPath
+                  })}
+                />
+              )}
             </Layout.Vertical>
           </Container>
         </Render>
diff --git a/web/src/pages/Execution/Execution.module.scss b/web/src/pages/Execution/Execution.module.scss
index 524ad90cf..3929081dc 100644
--- a/web/src/pages/Execution/Execution.module.scss
+++ b/web/src/pages/Execution/Execution.module.scss
@@ -1,53 +1,6 @@
 .main {
   min-height: var(--page-height);
   background-color: var(--primary-bg) !important;
-
-  :global {
-    .Resizer {
-      background-color: var(--grey-300);
-      opacity: 0.2;
-      z-index: 1;
-      box-sizing: border-box;
-      background-clip: padding-box;
-    }
-
-    .Resizer:hover {
-      transition: all 2s ease;
-    }
-
-    .Resizer.horizontal {
-      margin: -5px 0;
-      border-top: 5px solid rgba(255, 255, 255, 0);
-      border-bottom: 5px solid rgba(255, 255, 255, 0);
-      cursor: row-resize;
-    }
-
-    .Resizer.horizontal:hover {
-      border-top: 5px solid rgba(0, 0, 0, 0.5);
-      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
-
-    .Resizer.vertical {
-      width: 11px;
-      margin: 0 -5px;
-      border-left: 5px solid rgba(255, 255, 255, 0);
-      border-right: 5px solid rgba(255, 255, 255, 0);
-      cursor: col-resize;
-    }
-
-    .Resizer.vertical:hover {
-      border-left: 5px solid rgba(0, 0, 0, 0.5);
-      border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
-
-    .Resizer.disabled {
-      cursor: not-allowed;
-    }
-
-    .Resizer.disabled:hover {
-      border-color: transparent;
-    }
-  }
 }
 
 .container {
diff --git a/web/src/pages/Execution/Execution.tsx b/web/src/pages/Execution/Execution.tsx
index 8b98ee10d..68efba320 100644
--- a/web/src/pages/Execution/Execution.tsx
+++ b/web/src/pages/Execution/Execution.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 import { useGet } from 'restful-react'
-import SplitPane from 'react-split-pane'
 import { routes, type CODEProps } from 'RouteDefinitions'
 import type { TypesExecution } from 'services/code'
 import ExecutionStageList from 'components/ExecutionStageList/ExecutionStageList'
@@ -12,6 +11,7 @@ import { getErrorMessage, voidFn } from 'utils/Utils'
 import { useStrings } from 'framework/strings'
 import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
+import { Split } from 'components/Split/Split'
 import { ExecutionPageHeader } from 'components/ExecutionPageHeader/ExecutionPageHeader'
 import usePipelineEventStream from 'hooks/usePipelineEventStream'
 import { ExecutionState } from 'components/ExecutionStatus/ExecutionStatus'
@@ -102,7 +102,7 @@ const Execution = () => {
         }}>
         <LoadingSpinner visible={loading || isInitialLoad} withBorder={!!execution && isInitialLoad} />
         {execution && (
-          <SplitPane split="vertical" size={300} minSize={200} maxSize={400}>
+          <Split split="vertical" size={300} minSize={200} maxSize={400}>
             <ExecutionStageList
               stages={execution?.stages || []}
               setSelectedStage={setSelectedStage}
@@ -111,7 +111,7 @@ const Execution = () => {
             {selectedStage && (
               <Console stage={execution?.stages?.[selectedStage - 1]} repoPath={repoMetadata?.path as string} />
             )}
-          </SplitPane>
+          </Split>
         )}
       </PageBody>
     </Container>
diff --git a/web/src/pages/PullRequest/Checks/Checks.module.scss b/web/src/pages/PullRequest/Checks/Checks.module.scss
index fc977ee48..c61618802 100644
--- a/web/src/pages/PullRequest/Checks/Checks.module.scss
+++ b/web/src/pages/PullRequest/Checks/Checks.module.scss
@@ -139,53 +139,6 @@
       }
     }
   }
-
-  :global {
-    .Resizer {
-      background-color: var(--grey-300);
-      opacity: 0.2;
-      z-index: 1;
-      box-sizing: border-box;
-      background-clip: padding-box;
-    }
-
-    .Resizer:hover {
-      transition: all 2s ease;
-    }
-
-    .Resizer.horizontal {
-      margin: -5px 0;
-      border-top: 5px solid rgba(255, 255, 255, 0);
-      border-bottom: 5px solid rgba(255, 255, 255, 0);
-      cursor: row-resize;
-    }
-
-    .Resizer.horizontal:hover {
-      border-top: 5px solid rgba(0, 0, 0, 0.5);
-      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
-
-    .Resizer.vertical {
-      width: 11px;
-      margin: 0 -5px;
-      border-left: 5px solid rgba(255, 255, 255, 0);
-      border-right: 5px solid rgba(255, 255, 255, 0);
-      cursor: col-resize;
-    }
-
-    .Resizer.vertical:hover {
-      border-left: 5px solid rgba(0, 0, 0, 0.5);
-      border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
-
-    .Resizer.disabled {
-      cursor: not-allowed;
-    }
-
-    .Resizer.disabled:hover {
-      border-color: transparent;
-    }
-  }
 }
 
 .status {
diff --git a/web/src/pages/PullRequest/Checks/Checks.tsx b/web/src/pages/PullRequest/Checks/Checks.tsx
index ae74a03a5..be58524af 100644
--- a/web/src/pages/PullRequest/Checks/Checks.tsx
+++ b/web/src/pages/PullRequest/Checks/Checks.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Falsy, Match, Render, Truthy } from 'react-jsx-match'
 import { /*CheckCircle,*/ NavArrowRight } from 'iconoir-react'
-import SplitPane from 'react-split-pane'
 import { get } from 'lodash-es'
 import cx from 'classnames'
 import { useHistory } from 'react-router-dom'
@@ -24,6 +23,7 @@ import type { GitInfoProps } from 'utils/GitUtils'
 import { useAppContext } from 'AppContext'
 import { useQueryParams } from 'hooks/useQueryParams'
 import { useStrings } from 'framework/strings'
+import { Split } from 'components/Split/Split'
 import { MarkdownViewer } from 'components/MarkdownViewer/MarkdownViewer'
 import type { PRChecksDecisionResult } from 'hooks/usePRChecksDecision'
 import type { TypesCheck } from 'services/code'
@@ -56,7 +56,7 @@ export const Checks: React.FC<ChecksProps> = props => {
     <Container className={css.main}>
       <Match expr={props.prChecksDecisionResult?.overallStatus}>
         <Truthy>
-          <SplitPane
+          <Split
             split="vertical"
             size="calc(100% - 400px)"
             minSize={800}
@@ -118,7 +118,7 @@ export const Checks: React.FC<ChecksProps> = props => {
                 </Falsy>
               </Match>
             </Container>
-          </SplitPane>
+          </Split>
         </Truthy>
         <Falsy>
           <Container flex={{ align: 'center-center' }} height="90%">
diff --git a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss
index 9ebf384cb..5ec8b15de 100644
--- a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss
+++ b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss
@@ -1,5 +1,6 @@
 .main {
   padding: var(--spacing-large) var(--spacing-xlarge) 0 var(--spacing-xlarge) !important;
+  position: relative;
 
   div[class*='TextInput'] {
     margin-bottom: 0 !important;
@@ -54,7 +55,31 @@
     }
   }
 
-  .breadcrumbItem {
-    white-space: nowrap !important;
+  .searchBox {
+    position: absolute;
+    right: 16px;
+    top: -50px;
+    z-index: 2;
+    padding-bottom: 0 !important;
+    margin: 0;
+
+    input,
+    input:focus {
+      border: 1px solid var(--ai-purple-600) !important;
+    }
+
+    input {
+      width: 350px !important;
+    }
+
+    svg path {
+      fill: var(--ai-purple-600) !important;
+    }
+
+    img {
+      position: absolute;
+      top: 5px;
+      right: 13px;
+    }
   }
 }
diff --git a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss.d.ts b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss.d.ts
index 3de56dd26..c6a69acea 100644
--- a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss.d.ts
+++ b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.module.scss.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
 // This is an auto-generated file
-export declare const breadcrumbItem: string
 export declare const btnColorFix: string
 export declare const main: string
 export declare const refRoot: string
 export declare const rootSlash: string
+export declare const searchBox: string
diff --git a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx
index 4c530ef07..cf97aa0cd 100644
--- a/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx
+++ b/web/src/pages/Repository/RepositoryContent/ContentHeader/ContentHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Container, Layout, Button, FlexExpander, ButtonVariation, Text } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { Color } from '@harnessio/design-system'
@@ -12,6 +12,8 @@ import { BranchTagSelect } from 'components/BranchTagSelect/BranchTagSelect'
 import { useCreateBranchModal } from 'components/CreateBranchModal/CreateBranchModal'
 import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import { permissionProps } from 'utils/Utils'
+import { SearchInputWithSpinner } from 'components/SearchInputWithSpinner/SearchInputWithSpinner'
+import svg from './search-background.svg'
 import css from './ContentHeader.module.scss'
 
 export function ContentHeader({
@@ -21,11 +23,9 @@ export function ContentHeader({
   resourceContent
 }: Pick<GitInfoProps, 'repoMetadata' | 'gitRef' | 'resourcePath' | 'resourceContent'>) {
   const { getString } = useStrings()
-  const { routes } = useAppContext()
+  const { routes, standalone, hooks } = useAppContext()
   const history = useHistory()
   const _isDir = isDir(resourceContent)
-  const { standalone } = useAppContext()
-  const { hooks } = useAppContext()
   const space = useGetSpaceParam()
 
   const permPushResult = hooks?.usePermissionTranslate?.(
@@ -62,6 +62,7 @@ export function ContentHeader({
       return { href, text: _path }
     })
   }, [resourcePath, gitRef, repoMetadata.path, routes])
+  const [search, setSearch] = useState('')
 
   return (
     <Container className={css.main}>
@@ -139,6 +140,25 @@ export function ContentHeader({
           </>
         )}
       </Layout.Horizontal>
+      {!standalone && (
+        <Container className={css.searchBox}>
+          <SearchInputWithSpinner
+            placeholder={getString('codeSearch')}
+            spinnerPosition="right"
+            query={search}
+            setQuery={setSearch}
+            onSearch={() => {
+              history.push({
+                pathname: routes.toCODESearch({
+                  repoPath: repoMetadata.path as string
+                }),
+                search: `q=${search}`
+              })
+            }}
+          />
+          {!search && <img src={svg} width={95} height={22} />}
+        </Container>
+      )}
     </Container>
   )
 }
diff --git a/web/src/pages/Repository/RepositoryContent/ContentHeader/search-background.svg b/web/src/pages/Repository/RepositoryContent/ContentHeader/search-background.svg
new file mode 100644
index 000000000..ae7d01305
--- /dev/null
+++ b/web/src/pages/Repository/RepositoryContent/ContentHeader/search-background.svg
@@ -0,0 +1,7 @@
+<svg width="95" height="22" viewBox="0 0 95 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="95" height="22" rx="4" fill="#F6F1FF"/>
+<path opacity="0.3" d="M23.5057 14V8.18182H25.8011C26.2424 8.18182 26.6184 8.2661 26.929 8.43466C27.2396 8.60133 27.4763 8.83333 27.6392 9.13068C27.804 9.42614 27.8864 9.76705 27.8864 10.1534C27.8864 10.5398 27.803 10.8807 27.6364 11.1761C27.4697 11.4716 27.2282 11.7017 26.9119 11.8665C26.5975 12.0312 26.2169 12.1136 25.7699 12.1136H24.3068V11.1278H25.571C25.8078 11.1278 26.0028 11.0871 26.1562 11.0057C26.3116 10.9223 26.4271 10.8078 26.5028 10.6619C26.5805 10.5142 26.6193 10.3447 26.6193 10.1534C26.6193 9.96023 26.5805 9.79167 26.5028 9.64773C26.4271 9.50189 26.3116 9.3892 26.1562 9.30966C26.0009 9.22822 25.804 9.1875 25.5653 9.1875H24.7358V14H23.5057ZM34.232 11.0909C34.232 11.7254 34.1117 12.2652 33.8712 12.7102C33.6325 13.1553 33.3068 13.4953 32.8939 13.7301C32.4829 13.9631 32.0208 14.0795 31.5075 14.0795C30.9905 14.0795 30.5265 13.9621 30.1155 13.7273C29.7045 13.4924 29.3797 13.1525 29.1411 12.7074C28.9024 12.2623 28.7831 11.7235 28.7831 11.0909C28.7831 10.4564 28.9024 9.91667 29.1411 9.47159C29.3797 9.02652 29.7045 8.6875 30.1155 8.45455C30.5265 8.2197 30.9905 8.10227 31.5075 8.10227C32.0208 8.10227 32.4829 8.2197 32.8939 8.45455C33.3068 8.6875 33.6325 9.02652 33.8712 9.47159C34.1117 9.91667 34.232 10.4564 34.232 11.0909ZM32.9848 11.0909C32.9848 10.6799 32.9232 10.3333 32.8001 10.0511C32.6789 9.76894 32.5075 9.55492 32.2859 9.40909C32.0643 9.26326 31.8049 9.19034 31.5075 9.19034C31.2102 9.19034 30.9507 9.26326 30.7291 9.40909C30.5075 9.55492 30.3352 9.76894 30.2121 10.0511C30.0909 10.3333 30.0303 10.6799 30.0303 11.0909C30.0303 11.5019 30.0909 11.8485 30.2121 12.1307C30.3352 12.4129 30.5075 12.6269 30.7291 12.7727C30.9507 12.9186 31.2102 12.9915 31.5075 12.9915C31.8049 12.9915 32.0643 12.9186 32.2859 12.7727C32.5075 12.6269 32.6789 12.4129 32.8001 12.1307C32.9232 11.8485 32.9848 11.5019 32.9848 11.0909ZM36.4341 14L34.7693 8.18182H36.1131L37.0761 12.2244H37.1244L38.1869 8.18182H39.3375L40.3972 12.233H40.4483L41.4114 8.18182H42.7551L41.0903 14H39.8915L38.7835 10.196H38.7381L37.633 14H36.4341ZM43.6135 14V8.18182H47.5339V9.19602H44.8436V10.5824H47.3322V11.5966H44.8436V12.9858H47.5453V14H43.6135ZM48.7119 14V8.18182H51.0074C51.4468 8.18182 51.8218 8.26042 52.1324 8.41761C52.4449 8.57292 52.6826 8.79356 52.8455 9.07955C53.0102 9.36364 53.0926 9.69792 53.0926 10.0824C53.0926 10.4687 53.0093 10.8011 52.8426 11.0795C52.6759 11.3561 52.4345 11.5682 52.1182 11.7159C51.8038 11.8636 51.4231 11.9375 50.9761 11.9375H49.4392V10.9489H50.7773C51.0121 10.9489 51.2072 10.9167 51.3625 10.8523C51.5178 10.7879 51.6333 10.6913 51.7091 10.5625C51.7867 10.4337 51.8256 10.2737 51.8256 10.0824C51.8256 9.8892 51.7867 9.72633 51.7091 9.59375C51.6333 9.46117 51.5169 9.3608 51.3597 9.29261C51.2044 9.22254 51.0083 9.1875 50.7716 9.1875H49.942V14H48.7119ZM51.854 11.3523L53.3 14H51.942L50.5273 11.3523H51.854ZM54.1619 14V8.18182H58.0824V9.19602H55.392V10.5824H57.8807V11.5966H55.392V12.9858H58.0938V14H54.1619ZM61.3229 14H59.2604V8.18182H61.3399C61.9251 8.18182 62.4289 8.2983 62.8513 8.53125C63.2736 8.76231 63.5984 9.0947 63.8257 9.52841C64.0549 9.96212 64.1695 10.4811 64.1695 11.0852C64.1695 11.6913 64.0549 12.2121 63.8257 12.6477C63.5984 13.0833 63.2717 13.4176 62.8456 13.6506C62.4214 13.8835 61.9138 14 61.3229 14ZM60.4905 12.946H61.2717C61.6354 12.946 61.9412 12.8816 62.1893 12.7528C62.4393 12.6222 62.6268 12.4205 62.7518 12.1477C62.8787 11.8731 62.9422 11.5189 62.9422 11.0852C62.9422 10.6553 62.8787 10.304 62.7518 10.0312C62.6268 9.75852 62.4403 9.55777 62.1922 9.42898C61.9441 9.30019 61.6382 9.2358 61.2746 9.2358H60.4905V12.946ZM67.3322 14V8.18182H69.6618C70.0898 8.18182 70.4468 8.24527 70.7328 8.37216C71.0188 8.49905 71.2338 8.67519 71.3777 8.90057C71.5216 9.12405 71.5936 9.38163 71.5936 9.6733C71.5936 9.90057 71.5482 10.1004 71.4572 10.2727C71.3663 10.4432 71.2413 10.5833 71.0822 10.6932C70.925 10.8011 70.7451 10.8778 70.5425 10.9233V10.9801C70.7641 10.9896 70.9714 11.0521 71.1646 11.1676C71.3597 11.2831 71.5178 11.4451 71.6391 11.6534C71.7603 11.8598 71.8209 12.1061 71.8209 12.392C71.8209 12.7008 71.7442 12.9763 71.5908 13.2188C71.4393 13.4593 71.2148 13.6496 70.9175 13.7898C70.6201 13.9299 70.2536 14 69.818 14H67.3322ZM68.5624 12.9943H69.5652C69.908 12.9943 70.158 12.929 70.3152 12.7983C70.4724 12.6657 70.551 12.4896 70.551 12.2699C70.551 12.1089 70.5122 11.9669 70.4345 11.8438C70.3569 11.7206 70.2461 11.6241 70.1021 11.554C69.9601 11.4839 69.7906 11.4489 69.5936 11.4489H68.5624V12.9943ZM68.5624 10.6165H69.4743C69.6428 10.6165 69.7925 10.5871 69.9232 10.5284C70.0557 10.4678 70.1599 10.3826 70.2357 10.2727C70.3133 10.1629 70.3521 10.0312 70.3521 9.87784C70.3521 9.66761 70.2773 9.49811 70.1277 9.36932C69.98 9.24053 69.7697 9.17614 69.497 9.17614H68.5624V10.6165ZM72.4804 8.18182H73.8582L75.1849 10.6875H75.2418L76.5685 8.18182H77.9463L75.8241 11.9432V14H74.6026V11.9432L72.4804 8.18182ZM81.8726 14H80.5544L82.5629 8.18182H84.1482L86.1538 14H84.8357L83.3783 9.51136H83.3328L81.8726 14ZM81.7902 11.7131H84.9038V12.6733H81.7902V11.7131ZM88.2842 8.18182V14H87.0541V8.18182H88.2842Z" fill="#6938C0"/>
+<g opacity="0.2">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7098 6.57023C13.8692 6.45274 14.0422 6.3526 14.2261 6.27262L13.0028 5.04999L11.6454 6.40671C10.8957 7.156 10.8957 8.37085 11.6454 9.12014L11.844 9.3186C12.0744 9.15701 12.3399 9.04196 12.6267 8.98708V8.71142C12.6267 7.8587 13.0284 7.09975 13.653 6.61328C13.6717 6.59868 13.6906 6.58433 13.7098 6.57023ZM11.122 9.64325L11.3249 9.84605C11.168 10.0778 11.0575 10.3436 11.0071 10.6301H10.7071L10.7019 10.6301C9.64682 10.6241 8.7934 9.76735 8.7934 8.71142V6.79273H10.5259C10.1523 7.74656 10.351 8.87261 11.122 9.64325ZM10.7131 11.3699H11.0125C11.1686 12.1849 11.8113 12.8273 12.6267 12.9832V13.2886C12.6267 14.3787 13.2829 15.3151 14.222 15.7254L12.9968 16.95L11.6394 15.5933C11.0221 14.9763 10.9127 14.0427 11.313 13.3138C11.4114 13.1348 11.3459 12.9099 11.1667 12.8116C10.9875 12.7133 10.7626 12.7788 10.6642 12.9578C10.2831 13.6516 10.2348 14.4795 10.5199 15.2072H8.78739L8.78739 13.2885C8.78739 12.231 9.64349 11.3732 10.7008 11.3699L10.7131 11.3699ZM13.3669 13.2886V12.9887C14.1964 12.8428 14.8528 12.1948 15.0107 11.3699H15.2865C16.3467 11.3699 17.2062 12.2289 17.2062 13.2886V15.2073L15.2865 15.2073C15.174 15.2073 15.064 15.1976 14.9572 15.1792C14.054 15.0233 13.3669 14.2358 13.3669 13.2886ZM15.2865 10.6301H15.0162C14.9647 10.3378 14.8508 10.0671 14.6887 9.83203L14.8776 9.64329C15.6273 8.89399 16.8427 8.89399 17.5924 9.64329L18.9498 11L17.7247 12.2245C17.3141 11.2859 16.377 10.6301 15.2865 10.6301ZM14.3542 9.12018L14.1654 9.30892C13.9302 9.14693 13.6593 9.03309 13.3669 8.98164V8.71142C13.3669 7.65176 14.2263 6.79274 15.2865 6.79274L15.859 6.7927H17.2062V8.52437C16.2519 8.15093 15.1252 8.34953 14.3542 9.12018ZM8.27487 9.77553C8.49878 10.2873 8.87927 10.715 9.3558 10.9982C8.87776 11.2806 8.49579 11.7082 8.2707 12.2202L7.0498 11L8.27487 9.77553ZM14.3069 10.9852C14.3069 10.2702 13.727 9.69055 13.0116 9.69055C12.2963 9.69055 11.7163 10.2702 11.7163 10.9852C11.7163 11.7002 12.2963 12.2798 13.0116 12.2798C13.727 12.2798 14.3069 11.7002 14.3069 10.9852Z" fill="#6938C0"/>
+</g>
+</svg>
diff --git a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx
index 7eb3c4cdd..2f840d337 100644
--- a/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx
+++ b/web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx
@@ -248,9 +248,8 @@ export function FileContent({
                         <Match expr={isViewable}>
                           <Falsy>
                             <Center>
-                              rawURL: {rawURL}
                               <Link
-                                to={rawURL} // TODO: Link component generates wrong copy link
+                                to={rawURL}
                                 onClick={e => {
                                   Utils.stopEvent(e)
                                   downloadFile({ repoMetadata, resourcePath, gitRef, filename })
diff --git a/web/src/pages/Search/Search.module.scss b/web/src/pages/Search/Search.module.scss
new file mode 100644
index 000000000..c5fe438ff
--- /dev/null
+++ b/web/src/pages/Search/Search.module.scss
@@ -0,0 +1,229 @@
+@import 'src/utils/utils';
+
+.main {
+  --header-height: 128px;
+  --border-color: var(--grey-100);
+
+  min-height: var(--page-height);
+  background-color: var(--primary-bg) !important;
+
+  .pageHeader {
+    flex-direction: column;
+    height: var(--header-height);
+    align-items: normal !important;
+    justify-content: flex-start !important;
+    padding-top: 0 !important;
+
+    [class*='breadcrumbs'] > [class*='module_header'] {
+      padding-top: 13px !important;
+    }
+
+    .searchBox {
+      display: flex;
+      flex-direction: row;
+
+      > div {
+        flex-grow: 1;
+
+        div {
+          width: 100%;
+        }
+      }
+
+      input {
+        width: calc(100% - 8px) !important;
+        border: 1px solid var(--ai-purple-600) !important;
+      }
+
+      svg path {
+        fill: var(--ai-purple-600) !important;
+      }
+    }
+
+    & + div {
+      --page-header-height: var(--header-height) !important;
+    }
+  }
+
+  .split {
+    > div:first-of-type {
+      background-color: #fbfcfd;
+      overflow: auto;
+    }
+
+    > div:last-of-type {
+      background-color: var(--white);
+      overflow: scroll;
+    }
+
+    .searchResult {
+      padding: var(--spacing-medium) var(--spacing-large) var(--spacing-large) var(--spacing-xlarge);
+
+      .resultTitle {
+        text-transform: uppercase;
+
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--grey-400);
+      }
+
+      .result {
+        padding: var(--spacing-medium);
+        border: 1px solid rgba(243, 243, 250, 1);
+        border-radius: 5px;
+        background-color: var(--white);
+
+        &.selected {
+          border-color: rgba(217, 218, 229, 1);
+          background-color: rgba(246, 241, 255, 1);
+          box-shadow: 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16), 0px 0px 1px 0px rgba(40, 41, 61, 0.08);
+        }
+
+        &:hover:not(.selected) {
+          border-color: rgba(217, 218, 229, 1);
+          background-color: rgba(246, 241, 255, 0.5);
+        }
+
+        .layout {
+          align-items: baseline;
+        }
+
+        .texts {
+          flex-grow: 1;
+        }
+
+        .filename {
+          font-size: 12px;
+          font-weight: 600;
+          color: rgba(79, 81, 98, 1);
+        }
+
+        .path {
+          font-size: 11px;
+          font-weight: 500;
+          color: rgba(146, 147, 171, 1);
+        }
+
+        .aiLabel {
+          background: var(--ai-purple-100);
+          color: var(--ai-purple-600);
+          text-transform: uppercase;
+          font-size: 8px;
+          font-weight: 800;
+          text-align: center;
+          padding: 3px 6px;
+          border-radius: 2px;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    :global {
+      .Resizer.vertical {
+        width: 13px;
+        background-color: var(--border-color);
+        opacity: 1;
+
+        &:active,
+        &:focus,
+        &:hover {
+          background-color: var(--primary-6);
+          border-color: transparent !important;
+        }
+      }
+    }
+
+    .preview {
+      height: 100%;
+      position: relative;
+
+      &.noResult {
+        > * {
+          visibility: hidden;
+        }
+      }
+
+      .filePath {
+        height: 45px;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        padding: 0 var(--spacing-medium);
+
+        > div:first-of-type {
+          flex-grow: 1;
+          width: calc(100% - 150px);
+        }
+
+        button {
+          white-space: nowrap;
+        }
+
+        .pathText {
+          align-self: center;
+          color: var(--grey-500);
+        }
+
+        :global {
+          .bp3-breadcrumb,
+          .bp3-breadcrumb-current,
+          .bp3-breadcrumbs-collapsed {
+            white-space: nowrap !important;
+            font-size: 12px;
+            font-weight: 400;
+            color: var(--grey-500);
+          }
+
+          .bp3-breadcrumbs > li::after {
+            background: none;
+            content: '/';
+            color: var(--grey-500);
+            background: none;
+            text-align: center;
+            height: 100%;
+          }
+
+          .bp3-breadcrumbs-collapsed {
+            background: var(--grey-100);
+          }
+        }
+      }
+
+      .fileContent {
+        flex-grow: 1;
+        height: calc(100% - 45px);
+        overflow: auto;
+
+        :global {
+          .cm-editor {
+            border: none;
+
+            .cm-scroller {
+              padding: 0;
+
+              .cm-line {
+                &,
+                * {
+                  @include mono-font;
+                }
+              }
+            }
+
+            .cm-gutters {
+              border-right: none;
+
+              .cm-gutterElement {
+                padding-left: 30px;
+                padding-right: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .highlightLineNumber {
+        background-color: var(--ai-purple-100);
+      }
+    }
+  }
+}
diff --git a/web/src/pages/Search/Search.module.scss.d.ts b/web/src/pages/Search/Search.module.scss.d.ts
new file mode 100644
index 000000000..8ae28e339
--- /dev/null
+++ b/web/src/pages/Search/Search.module.scss.d.ts
@@ -0,0 +1,21 @@
+/* eslint-disable */
+// This is an auto-generated file
+export declare const aiLabel: string
+export declare const fileContent: string
+export declare const filename: string
+export declare const filePath: string
+export declare const highlightLineNumber: string
+export declare const layout: string
+export declare const main: string
+export declare const noResult: string
+export declare const pageHeader: string
+export declare const path: string
+export declare const pathText: string
+export declare const preview: string
+export declare const result: string
+export declare const resultTitle: string
+export declare const searchBox: string
+export declare const searchResult: string
+export declare const selected: string
+export declare const split: string
+export declare const texts: string
diff --git a/web/src/pages/Search/Search.tsx b/web/src/pages/Search/Search.tsx
new file mode 100644
index 000000000..c2c4cde52
--- /dev/null
+++ b/web/src/pages/Search/Search.tsx
@@ -0,0 +1,332 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Button,
+  ButtonSize,
+  ButtonVariation,
+  Container,
+  Layout,
+  PageBody,
+  stringSubstitute,
+  Text,
+  useToaster
+} from '@harnessio/uicore'
+import cx from 'classnames'
+import { lineNumbers, ViewUpdate } from '@codemirror/view'
+import { Breadcrumbs, IBreadcrumbProps } from '@blueprintjs/core'
+import { Link, useHistory, useLocation } from 'react-router-dom'
+import { EditorView } from '@codemirror/view'
+import { Match, Truthy, Falsy } from 'react-jsx-match'
+import { Icon } from '@harnessio/icons'
+import { useMutate } from 'restful-react'
+import { Editor } from 'components/Editor/Editor'
+import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
+import { useStrings } from 'framework/strings'
+import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
+import { Split } from 'components/Split/Split'
+import { CodeIcon, decodeGitContent } from 'utils/GitUtils'
+import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
+import { useQueryParams } from 'hooks/useQueryParams'
+import { useAppContext } from 'AppContext'
+import { SearchInputWithSpinner } from 'components/SearchInputWithSpinner/SearchInputWithSpinner'
+import { voidFn, getErrorMessage, ButtonRoleProps } from 'utils/Utils'
+import type { RepoFileContent } from 'services/code'
+import { useShowRequestError } from 'hooks/useShowRequestError'
+import { NoResultCard } from 'components/NoResultCard/NoResultCard'
+import { useGetResourceContent } from 'hooks/useGetResourceContent'
+import { addClassToLinesExtension } from 'utils/codemirror/addClassToLinesExtension'
+import css from './Search.module.scss'
+
+export default function Search() {
+  const { showError } = useToaster()
+  const history = useHistory()
+  const location = useLocation()
+  const highlightedLines = useRef<number[]>([])
+  const [highlightlLineNumbersExtension, updateHighlightlLineNumbers] = useMemo(
+    () => addClassToLinesExtension([], css.highlightLineNumber),
+    []
+  )
+  const extensions = useMemo(() => {
+    return [
+      lineNumbers({
+        formatNumber: (lineNo: number) => lineNo.toString()
+      }),
+      highlightlLineNumbersExtension
+    ]
+  }, [highlightlLineNumbersExtension])
+  const viewRef = useRef<EditorView>()
+  const { getString } = useStrings()
+  const { routes } = useAppContext()
+  const { q } = useQueryParams<{ q: string }>()
+  const [searchTerm, setSearchTerm] = useState(q || '')
+  const { repoMetadata, error, loading, refetch } = useGetRepositoryMetadata()
+  const [resourcePath, setResourcePath] = useState('')
+  const [filename, setFileName] = useState('')
+  const gitRef = useMemo(() => repoMetadata?.default_branch || '', [repoMetadata])
+  const breadcrumbs = useMemo(() => {
+    return repoMetadata?.path
+      ? resourcePath.split('/').map((_path, index, paths) => {
+          const pathAtIndex = paths.slice(0, index + 1).join('/')
+          const href = routes.toCODERepository({
+            repoPath: repoMetadata.path as string,
+            gitRef,
+            resourcePath: pathAtIndex
+          })
+
+          return { href, text: _path }
+        })
+      : []
+  }, [resourcePath, repoMetadata, gitRef, routes])
+  const onSelectResult = useCallback(
+    (fileName: string, filePath: string, _content: string, _highlightedLines: number[]) => {
+      updateHighlightlLineNumbers(_highlightedLines, viewRef.current)
+      highlightedLines.current = _highlightedLines
+      setFileName(fileName)
+      setResourcePath(filePath)
+    },
+    [updateHighlightlLineNumbers]
+  )
+  const {
+    data: resourceContent,
+    error: resourceError = null,
+    loading: resourceLoading
+  } = useGetResourceContent({ repoMetadata, gitRef, resourcePath, includeCommit: false, lazy: !resourcePath })
+  const fileContent = useMemo(
+    () =>
+      resourceContent?.path === resourcePath
+        ? decodeGitContent((resourceContent?.content as RepoFileContent)?.data)
+        : '',
+    [resourceContent?.content, resourceContent?.path, resourcePath]
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onViewUpdate = useCallback(({ view, docChanged }: ViewUpdate) => {
+    const firstLine = (highlightedLines.current || [])[0]
+
+    if (docChanged && firstLine > 0 && view.state.doc.lines >= firstLine) {
+      view.dispatch({
+        effects: EditorView.scrollIntoView(view.state.doc.line(firstLine).from, { y: 'start', yMargin: 18 * 2 })
+      })
+    }
+  }, [])
+  const [loadingSearch, setLoadingSearch] = useState(false)
+  const { mutate: sendSearch } = useMutate<SearchResultType[]>({
+    verb: 'POST',
+    path: `/api/v1/repos/${repoMetadata?.path}/+/semantic/search`
+  })
+  const [searchResult, setSearchResult] = useState<SearchResultType[]>([])
+  const performSearch = useCallback(() => {
+    setLoadingSearch(true)
+    history.replace({ pathname: location.pathname, search: `q=${searchTerm}` })
+
+    sendSearch({ query: searchTerm })
+      .then(response => {
+        setSearchResult(response)
+      })
+      .catch(exception => {
+        showError(getErrorMessage(exception), 0)
+      })
+      .finally(() => {
+        setLoadingSearch(false)
+      })
+  }, [searchTerm, history, location, sendSearch, showError])
+
+  useEffect(() => {
+    if (q && repoMetadata?.path) {
+      performSearch()
+    }
+  }, [repoMetadata?.path]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useShowRequestError(resourceError)
+
+  return (
+    <Container className={css.main}>
+      <RepositoryPageHeader
+        repoMetadata={repoMetadata}
+        title={getString('search')}
+        dataTooltipId="semanticSearch"
+        content={
+          <Container className={css.searchBox}>
+            <SearchInputWithSpinner
+              spinnerPosition="right"
+              query={searchTerm}
+              setQuery={setSearchTerm}
+              onSearch={performSearch}
+            />
+            <Button
+              variation={ButtonVariation.PRIMARY}
+              text={getString('search')}
+              disabled={!searchTerm.trim()}
+              onClick={performSearch}
+              loading={loadingSearch}
+            />
+          </Container>
+        }
+        className={css.pageHeader}
+      />
+      <PageBody error={getErrorMessage(error)} retryOnError={voidFn(refetch)}>
+        <LoadingSpinner visible={loading || resourceLoading || loadingSearch} withBorder />
+
+        <Match expr={q}>
+          <Truthy>
+            <Split split="vertical" className={css.split} size={450} minSize={300} maxSize={700} primary="first">
+              <SearchResults onSelect={onSelectResult} data={searchResult} />
+
+              <Layout.Vertical className={cx(css.preview, { [css.noResult]: !searchResult?.length })}>
+                <Container className={css.filePath}>
+                  <Container>
+                    <Layout.Horizontal spacing="small">
+                      <Link
+                        className={css.pathText}
+                        to={routes.toCODERepository({
+                          repoPath: (repoMetadata?.path as string) || '',
+                          gitRef
+                        })}>
+                        <Icon name={CodeIcon.Folder} />
+                      </Link>
+                      <Text inline className={css.pathText}>
+                        /
+                      </Text>
+                      <Breadcrumbs
+                        items={breadcrumbs}
+                        breadcrumbRenderer={({ text, href }: IBreadcrumbProps) => {
+                          return (
+                            <Link to={href as string}>
+                              <Text inline className={css.pathText}>
+                                {text}
+                              </Text>
+                            </Link>
+                          )
+                        }}
+                      />
+                    </Layout.Horizontal>
+                  </Container>
+                  <Button
+                    variation={ButtonVariation.SECONDARY}
+                    text={getString('viewFile')}
+                    size={ButtonSize.SMALL}
+                    rightIcon="chevron-right"
+                    onClick={() => {
+                      history.push(
+                        routes.toCODERepository({
+                          repoPath: (repoMetadata?.path as string) || '',
+                          gitRef,
+                          resourcePath
+                        })
+                      )
+                    }}
+                  />
+                </Container>
+                <Container className={css.fileContent}>
+                  <Editor
+                    viewRef={viewRef}
+                    filename={filename}
+                    content={fileContent}
+                    readonly={true}
+                    onViewUpdate={onViewUpdate}
+                    extensions={extensions}
+                    maxHeight="auto"
+                  />
+                </Container>
+              </Layout.Vertical>
+            </Split>
+          </Truthy>
+          <Falsy>
+            <NoResultCard
+              showWhen={() => true}
+              forSearch={true}
+              title={getString('startSearching')}
+              emptySearchMessage={getString('poweredByAI')}
+            />
+          </Falsy>
+        </Match>
+      </PageBody>
+    </Container>
+  )
+}
+
+interface SearchResultsProps {
+  data: SearchResultType[]
+  onSelect: (fileName: string, filePath: string, content: string, highlightedLines: number[]) => void
+}
+
+const SearchResults: React.FC<SearchResultsProps> = ({ data, onSelect }) => {
+  const { getString } = useStrings()
+  const [selected, setSelected] = useState(data?.[0]?.file_path || '')
+  const count = useMemo(() => data?.length || 0, [data])
+
+  useEffect(() => {
+    if (data?.length) {
+      const item = data[0]
+      onSelect(
+        item.file_name,
+        item.file_path,
+        (item.content || []).join('\n').replace(/^\n/g, '').trim(),
+        range(item.start_line, item.end_line)
+      )
+    }
+  }, [data, onSelect])
+
+  return (
+    <Container className={css.searchResult}>
+      <Layout.Vertical spacing="medium">
+        <Text className={css.resultTitle}>
+          {stringSubstitute(getString('searchResult'), { count: count - 4 ? `(${count})` : ' ' })}
+        </Text>
+        {data.map(item => (
+          <Container
+            key={item.file_path}
+            className={cx(css.result, { [css.selected]: item.file_path === selected })}
+            {...ButtonRoleProps}
+            onClick={() => {
+              setSelected(item.file_path)
+              onSelect(
+                item.file_name,
+                item.file_path,
+                (item.content || []).join('\n').replace(/^\n/g, '').trim(),
+                range(item.start_line, item.end_line)
+              )
+            }}>
+            <Layout.Vertical spacing="small">
+              <Container>
+                <Layout.Horizontal className={css.layout}>
+                  <Container className={css.texts}>
+                    <Layout.Vertical spacing="xsmall">
+                      <Text className={css.filename} lineClamp={1}>
+                        {item.file_name}
+                      </Text>
+                      <Text className={css.path} lineClamp={1}>
+                        {item.file_path}
+                      </Text>
+                    </Layout.Vertical>
+                  </Container>
+                  <Text inline className={css.aiLabel}>
+                    {getString('aiSearch')}
+                  </Text>
+                </Layout.Horizontal>
+              </Container>
+              <Editor
+                filename={item.file_name}
+                content={(item.content || []).join('\n').replace(/^\n/g, '').trim()}
+                readonly={true}
+                maxHeight="200px"
+                darkTheme
+              />
+            </Layout.Vertical>
+          </Container>
+        ))}
+      </Layout.Vertical>
+    </Container>
+  )
+}
+
+type SearchResultType = {
+  commit: string
+  file_path: string
+  start_line: number
+  end_line: number
+  file_name: string
+  content: string[]
+}
+
+const range = (start: number, stop: number, step = 1) =>
+  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
diff --git a/web/src/utils/codemirror/addClassToLinesExtension.tsx b/web/src/utils/codemirror/addClassToLinesExtension.tsx
new file mode 100644
index 000000000..d8c3ed5e5
--- /dev/null
+++ b/web/src/utils/codemirror/addClassToLinesExtension.tsx
@@ -0,0 +1,66 @@
+import { ViewPlugin, ViewUpdate, type EditorView, Decoration } from '@codemirror/view'
+import { RangeSetBuilder, Compartment, Extension } from '@codemirror/state'
+
+export const addClassToLinesExtension: AddClassToLinesExtension = (lines = [], className) => {
+  const highlightLineDecoration = Decoration.line({
+    attributes: { class: className }
+  })
+
+  function updateDecorations(view: EditorView) {
+    const builder = new RangeSetBuilder<Decoration>()
+
+    for (const { from, to } of view.visibleRanges) {
+      for (let pos = from; pos <= to; ) {
+        const line = view.state.doc.lineAt(pos)
+
+        if (lines.includes(line.number)) {
+          builder.add(line.from, line.from, highlightLineDecoration)
+        }
+        pos = line.to + 1
+      }
+    }
+
+    return builder.finish()
+  }
+
+  class Plugin {
+    decorations = Decoration.none
+
+    constructor(view: EditorView) {
+      this.decorations = updateDecorations(view)
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = updateDecorations(update.view)
+      }
+    }
+  }
+
+  const config = new Compartment()
+
+  const update: AddClassToLinesReturnType[1] = (_lines, view) => {
+    lines = _lines
+
+    view?.dispatch({
+      effects: config.reconfigure(
+        ViewPlugin.fromClass(Plugin, {
+          decorations: v => v.decorations
+        })
+      )
+    })
+  }
+
+  return [
+    config.of(
+      ViewPlugin.fromClass(Plugin, {
+        decorations: v => v.decorations
+      })
+    ),
+    update
+  ]
+}
+
+type AddClassToLinesReturnType = [Extension, (lines: number[], view?: EditorView) => void]
+
+type AddClassToLinesExtension = (lines: number[], className: string) => AddClassToLinesReturnType