Merge branch 'fix/brand_new_project_guidelines' into 'master'

Fix brand_new_project_guidelines not being displayed

See merge request gitlab-org/gitlab!50736

app/assets/javascripts/pages/projects/new/index.js

@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const config = {
         hasErrors: 'hasErrors' in el.dataset,
         isCiCdAvailable: 'isCiCdAvailable' in el.dataset,
+        newProjectGuidelines: el.dataset.newProjectGuidelines,
       };
       m.default(el, config);
     })

app/assets/javascripts/projects/experiment_new_project_creation/components/app.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
+import { GlBreadcrumb, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import WelcomePage from './welcome.vue';
 import LegacyContainer from './legacy_container.vue';
 import { __, s__ } from '~/locale';
@@ -57,7 +57,9 @@ export default {
     WelcomePage,
     LegacyContainer,
   },
-
+  directives: {
+    SafeHtml,
+  },
   props: {
     hasErrors: {
       type: Boolean,
@@ -69,6 +71,11 @@ export default {
       required: false,
       default: false,
     },
+    newProjectGuidelines: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 
   data() {
@@ -145,6 +152,11 @@ export default {
       <div class="gl-text-white" v-html="activePanel.illustration"></div>
       <h4>{{ activePanel.title }}</h4>
       <p>{{ activePanel.description }}</p>
+      <div
+        v-if="newProjectGuidelines"
+        id="new-project-guideline"
+        v-safe-html="newProjectGuidelines"
+      ></div>
     </div>
     <div class="col-lg-9">
       <gl-breadcrumb v-if="breadcrumbs" :items="breadcrumbs">

app/views/projects/new.html.haml

@@ -8,7 +8,7 @@
   .project-edit-errors
     = render 'projects/errors'
 
-  .js-experiment-new-project-creation{ data: { is_ci_cd_available: (ci_cd_projects_available? if Gitlab.ee?), has_errors: @project.errors.any? } }
+  .js-experiment-new-project-creation{ data: { is_ci_cd_available: (ci_cd_projects_available? if Gitlab.ee?), has_errors: @project.errors.any?, new_project_guidelines: brand_new_project_guidelines } }
 
   .row{ 'v-cloak': true }
     .col-lg-3.profile-settings-sidebar

changelogs/unreleased/fix-brand_new_project_guidelines.yml

+---
+title: New project guidelines are no longer displayed
+merge_request: 50736
+author: Roger Meier
+type: fixed

spec/frontend/projects/experiment_new_project_creation/components/app_spec.js

@@ -53,6 +53,28 @@ describe('Experimental new project creation app', () => {
     });
   });
 
+  describe('display custom new project guideline text', () => {
+    beforeEach(() => {
+      window.location.hash = '#blank_project';
+    });
+
+    it('does not render new project guideline if undefined', () => {
+      createComponent();
+      expect(wrapper.find('div#new-project-guideline').exists()).toBe(false);
+    });
+
+    it('render new project guideline if defined', () => {
+      const guidelineSelector = 'div#new-project-guideline';
+
+      createComponent({
+        newProjectGuidelines: '<h4>Internal Guidelines</h4><p>lorem ipsum</p>',
+      });
+      expect(wrapper.find(guidelineSelector).exists()).toBe(true);
+      expect(wrapper.find(guidelineSelector).html()).toContain('<h4>Internal Guidelines</h4>');
+      expect(wrapper.find(guidelineSelector).html()).toContain('<p>lorem ipsum</p>');
+    });
+  });
+
   it('renders relevant container when hash changes', () => {
     createComponent();
     expect(wrapper.find(WelcomePage).exists()).toBe(true);