Update copy around adding a new stage/defining a new pipeline to a project without one (#4225)

Author: mattseddon

webview/src/experiments/components/AddStage.tsx

@@ -10,23 +10,30 @@ interface AddStageProps {
 
 export const AddStage: React.FC<AddStageProps> = ({ hasValidDvcYaml }) => (
   <div className={styles.addConfigButton}>
-    <p>Easily and efficiently reproduce your experiments </p>
+    <p>
+      Define a{' '}
+      <a href="https://dvc.org/doc/user-guide/pipelines/defining-pipelines">
+        pipeline
+      </a>{' '}
+      to improve experiment reproducibility.
+    </p>
     <IconButton
       icon={Add}
       onClick={() => hasValidDvcYaml && addConfiguration()}
-      text="Add a Pipeline Stage"
+      text="Add Stage"
       disabled={!hasValidDvcYaml}
     />
     {!hasValidDvcYaml && (
       <p className={styles.errorText}>
-        Your dvc.yaml file should contain valid yaml before adding any pipeline
-        stages.
+        A stage cannot be added to an invalid dvc.yaml file.
       </p>
     )}
     <p>
-      <a href="https://dvc.org/doc/user-guide/project-structure/dvcyaml-files#stages">
-        Learn more
-      </a>
+      Learn more about{' '}
+      <a href="https://dvc.org/doc/user-guide/project-structure/dvcyaml-files">
+        dvc.yaml
+      </a>{' '}
+      files.
     </p>
   </div>
 )

webview/src/experiments/components/App.test.tsx

@@ -1740,20 +1740,20 @@ describe('App', () => {
       renderTable()
       setTableData({ ...tableDataFixture, hasConfig: false })
 
-      expect(screen.getByText('Add a Pipeline Stage')).toBeInTheDocument()
+      expect(screen.getByText('Add Stage')).toBeInTheDocument()
     })
 
     it('should not show a add config button if the project has pipeline stages', () => {
       renderTable()
 
-      expect(screen.queryByText('Add a Pipeline Stage')).not.toBeInTheDocument()
+      expect(screen.queryByText('Add Stage')).not.toBeInTheDocument()
     })
 
     it('should send a message to the extension to add a pipeline stage when clicking on the add config button', () => {
       renderTable()
       setTableData({ ...tableDataFixture, hasConfig: false })
 
-      fireEvent.click(screen.getByText('Add a Pipeline Stage'))
+      fireEvent.click(screen.getByText('Add Stage'))
 
       expect(mockPostMessage).toHaveBeenCalledWith({
         type: MessageFromWebviewType.ADD_CONFIGURATION
@@ -1767,7 +1767,7 @@ describe('App', () => {
         hasConfig: false,
         hasValidDvcYaml: false
       })
-      const addPipelineButton = await screen.findByText('Add a Pipeline Stage')
+      const addPipelineButton = await screen.findByText('Add Stage')
 
       fireEvent.click(addPipelineButton)
 
@@ -1776,9 +1776,7 @@ describe('App', () => {
       })
 
       expect(
-        screen.getByText(
-          'Your dvc.yaml file should contain valid yaml before adding any pipeline stages.'
-        )
+        screen.getByText('A stage cannot be added to an invalid dvc.yaml file.')
       ).toBeInTheDocument()
     })
   })