Merge branch '267543-create-an-empty-state-for-the-pipeline-visual-builder' into 'master'

Update empty state for the Pipeline visual builder

See merge request gitlab-org/gitlab!46781

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -167,7 +167,11 @@ export default {
       {{ failure.text }}
     </gl-alert>
     <gl-alert v-if="isPipelineDataEmpty" variant="tip" :dismissible="false">
-      {{ __('No content to show') }}
+      {{
+        __(
+          'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
+        )
+      }}
     </gl-alert>
     <div
       v-else

locale/gitlab.pot

@@ -18312,9 +18312,6 @@ msgstr ""
 msgid "No containers available"
 msgstr ""
 
-msgid "No content to show"
-msgstr ""
-
 msgid "No contributions"
 msgstr ""
 
@@ -26991,6 +26988,9 @@ msgstr ""
 msgid "The value of the provided variable exceeds the %{count} character limit"
 msgstr ""
 
+msgid "The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax."
+msgstr ""
+
 msgid "The vulnerability is no longer detected. Verify the vulnerability has been fixed or removed before changing its status."
 msgstr ""
 

spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js

@@ -33,7 +33,9 @@ describe('pipeline graph component', () => {
     });
 
     it('renders an empty section', () => {
-      expect(wrapper.text()).toContain('No content to show');
+      expect(wrapper.text()).toContain(
+        'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
+      );
       expect(findAllStagePills()).toHaveLength(0);
       expect(findAllJobPills()).toHaveLength(0);
     });