Added Run pipeline drawer

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

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

web/src/pages/NewPipeline/NewPipeline.module.scss

@@ -23,3 +23,7 @@
 .breadcrumb {
   align-items: center;
 }
+
+.drawer {
+  height: calc(100% - 40px);
+}

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

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 = {
+    try {
-      actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
+      const data: OpenapiCommitFilesRequest = {
-      branch: 'main',
+        actions: [{ action: 'CREATE', path: `sample_${new Date().getTime()}.txt`, payload: pipelineAsYAML }],
-      new_branch: '',
+        branch: 'main',
-      title: `Create pipeline ${pipeline}`,
+        new_branch: '',
-      message: ''
+        title: `Create pipeline ${pipeline}`,
-    }
+        message: ''
+      }
 
-    mutate(data)
+      mutate(data)
-      .then(response => console.log(response))
+        .then(() => setShowDrawer(true))
-      .catch(error => console.log(error))
+        .catch(error => {
+          showError(getErrorMessage(error), 0, 'pipelines.failedToSavePipeline')
+        })
+    } catch (exception) {
+      showError(getErrorMessage(exception), 0, 'pipelines.failedToCreatePipeline')
+    }
   }
 
   return (
-    <Container className={css.main}>
+    <>
-      <PageHeader
+      {showDrawer && (
-        title={getString('pipelines.editPipeline', { pipeline })}
+        <Drawer isOpen={showDrawer} title={getString('pipelines.run')} onClose={() => setShowDrawer(false)}>
-        breadcrumbs={
+          <Layout.Vertical padding="xlarge" flex={{ justifyContent: 'flex-end' }} className={css.drawer}>
-          <Container className={css.header}>
+            <Layout.Horizontal spacing="medium" flex={{ justifyContent: 'flex-start' }} width="100%">
-            <Layout.Horizontal spacing="small" className={css.breadcrumb}>
+              <Button variation={ButtonVariation.PRIMARY} text={getString('run')} />
-              <Link to={routes.toCODEPipelines({ space })}>{getString('pageTitle.pipelines')}</Link>
+              <Button
-              <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
+                variation={ButtonVariation.SECONDARY}
-              <Text font={{ size: 'small' }}>{pipeline}</Text>
+                text={getString('cancel')}
+                onClick={() => setShowDrawer(false)}
+              />
             </Layout.Horizontal>
-          </Container>
+          </Layout.Vertical>
-        }
+        </Drawer>
-        content={
+      )}
-          <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
+      <Container className={css.main}>
-            <Button
+        <PageHeader
-              variation={ButtonVariation.PRIMARY}
+          title={getString('pipelines.editPipeline', { pipeline })}
-              text={getString('pipelines.saveAndRun')}
+          breadcrumbs={
-              onClick={handleSaveAndRun}
+            <Container className={css.header}>
-              disabled={loading}
+              <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>
+          </Container>
-        }
+        </PageBody>
-      />
+      </Container>
-      <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>
   )
 }
 

web/src/pages/NewPipeline/NewPipelineModal.tsx

@@ -46,8 +46,8 @@ const useNewPipelineModal = () => {
           history.push(routes.toCODEPipelineEdit({ space, pipeline: name }))
           hideModal()
         })
-        .catch(_error => {
+        .catch(error => {
-          showError(getErrorMessage(_error), 0, 'pipelines.failedToCreatePipeline')
+          showError(getErrorMessage(error), 0, 'pipelines.failedToCreatePipeline')
         })
     } catch (exception) {
       showError(getErrorMessage(exception), 0, 'pipelines.failedToCreatePipeline')