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 ( -