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] 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>
   )
 }