auto generate pipeline

web/src/framework/strings/stringTypes.ts

@@ -234,8 +234,10 @@ export interface StringsMap {
   findOrCreateBranch: string
   firstTimeTitle: string
   general: string
+  generate: string
   generateCloneCred: string
   generateCloneText: string
+  generateHelptext: string
   getMyCloneTitle: string
   gitIgnore: string
   gitness: string
@@ -409,6 +411,7 @@ export interface StringsMap {
   'pipelines.executionStarted': string
   'pipelines.failedToCreatePipeline': string
   'pipelines.failedToFindPath': string
+  'pipelines.failedToGenerate': string
   'pipelines.failedToUpdatePipeline': string
   'pipelines.lastExecution': string
   'pipelines.name': string

web/src/i18n/strings.en.yaml

@@ -668,6 +668,7 @@ pipelines:
   executionCancelled: Pipeline execution cancelled.
   executionCouldNotCancel: Failure while cancelling Pipeline execution.
   failedToFindPath: failed to find path
+  failedToGenerate: Failed to generate pipeline
 executions:
   noData: There are no executions
   newExecutionButton: Run Pipeline
@@ -789,3 +790,5 @@ exportSpace:
   exportRepoCompleted: Exported {{repoCount}} repositories
   exportRepo: Exporting {{repoCount}} repositories
 spaceUpdate: Project Updated
+generate: Generate
+generateHelptext: Let Gitness build your Pipeline for you.

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss

@@ -58,3 +58,11 @@
     }
   }
 }
+
+.generate {
+  width: fit-content;
+}
+
+.generateHeader {
+  border-bottom: 1px solid var(--grey-100);
+}

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.module.scss.d.ts

@@ -3,6 +3,8 @@
 export declare const breadcrumb: string
 export declare const drawer: string
 export declare const editorContainer: string
+export declare const generate: string
+export declare const generateHeader: string
 export declare const header: string
 export declare const layout: string
 export declare const main: string

web/src/pages/AddUpdatePipeline/AddUpdatePipeline.tsx

@@ -86,6 +86,7 @@ const AddUpdatePipeline = (): JSX.Element => {
   const repoPath = useMemo(() => repoMetadata?.path || '', [repoMetadata])
   const [isExistingPipeline, setIsExistingPipeline] = useState<boolean>(false)
   const [isDirty, setIsDirty] = useState<boolean>(false)
+  const [generatingPipeline, setGeneratingPipeline] = useState<boolean>(false)
 
   const pipelineSaveOption: PipelineSaveAndRunOption = {
     title: getString('save'),
@@ -241,6 +242,22 @@ const AddUpdatePipeline = (): JSX.Element => {
     [yamlVersion, isExistingPipeline, originalPipelineYAMLFileContent, pipelineAsYAML]
   )
 
+  const handleGeneratePipeline = useCallback(async (): Promise<void> => {
+    try {
+      const response = await fetch(`/api/v1/repos/${repoPath}/+/pipelines/generate`)
+      if (response.ok && response.status === 200) {
+        const pipelineAsYAML = await response.text()
+        if (pipelineAsYAML) {
+          setPipelineAsYaml(pipelineAsYAML)
+        }
+      }
+      setGeneratingPipeline(false)
+    } catch (exception) {
+      showError(getErrorMessage(exception), 0, getString('pipelines.failedToGenerate'))
+      setGeneratingPipeline(false)
+    }
+  }, [repoPath])
+
   const renderCTA = useCallback(() => {
     /* Do not render CTA till pipeline existence info is obtained */
     if (fetchingPipeline || !pipelineData) {
@@ -325,28 +342,44 @@ const AddUpdatePipeline = (): JSX.Element => {
   return (
     <>
       <Container className={css.main}>
-        <RepositoryPageHeader
+        <Layout.Vertical>
-          repoMetadata={repoMetadata}
+          <RepositoryPageHeader
-          title={getString('pageTitle.executions')}
+            repoMetadata={repoMetadata}
-          dataTooltipId="repositoryExecutions"
+            title={getString('pageTitle.executions')}
-          extraBreadcrumbLinks={
+            dataTooltipId="repositoryExecutions"
-            repoMetadata && [
+            extraBreadcrumbLinks={
-              {
+              repoMetadata && [
-                label: getString('pageTitle.pipelines'),
+                {
-                url: routes.toCODEPipelines({ repoPath: repoMetadata.path as string })
+                  label: getString('pageTitle.pipelines'),
-              },
+                  url: routes.toCODEPipelines({ repoPath: repoMetadata.path as string })
-              ...(pipeline
+                },
-                ? [
+                ...(pipeline
-                    {
+                  ? [
-                      label: pipeline,
+                      {
-                      url: ''
+                        label: pipeline,
-                    }
+                        url: ''
-                  ]
+                      }
-                : [])
+                    ]
-            ]
+                  : [])
-          }
+              ]
-          content={<Layout.Horizontal flex={{ justifyContent: 'space-between' }}>{renderCTA()}</Layout.Horizontal>}
+            }
-        />
+            content={<Layout.Horizontal flex={{ justifyContent: 'space-between' }}>{renderCTA()}</Layout.Horizontal>}
+          />
+          <Layout.Horizontal
+            padding={{ left: 'medium', bottom: 'medium' }}
+            className={css.generateHeader}
+            spacing="large"
+            flex={{ justifyContent: 'flex-start' }}>
+            <Button
+              text={getString('generate')}
+              variation={ButtonVariation.PRIMARY}
+              className={css.generate}
+              onClick={handleGeneratePipeline}
+              disabled={generatingPipeline}
+            />
+            <Text font={{ variation: FontVariation.H5 }}>{getString('generateHelptext')}</Text>
+          </Layout.Horizontal>
+        </Layout.Vertical>
         <PageBody>
           <Layout.Horizontal className={css.layout}>
             <Container className={css.editorContainer}>