[deploy] Add generalized community name and description to onboarding slides (#7725)

* Comment out redirect

* Back to where we were

* Add basic generalization to onboarding

* Update app/javascript/onboarding/Onboarding.jsx

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* Update app/javascript/onboarding/components/IntroSlide.jsx

* Update app/javascript/onboarding/components/ProfileForm.jsx

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

app/javascript/onboarding/Onboarding.jsx

@@ -1,5 +1,6 @@
 import 'preact/devtools';
 import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
 
 import IntroSlide from './components/IntroSlide';
 import EmailPreferencesForm from './components/EmailPreferencesForm';
@@ -36,6 +37,7 @@ export default class Onboarding extends Component {
         prev={this.prevSlide}
         slidesCount={this.slidesCount}
         currentSlideIndex={index}
+        communityConfig={props.communityConfig}
         previousLocation={previousLocation}
       />
     ));
@@ -69,3 +71,10 @@ export default class Onboarding extends Component {
     return <main className="onboarding-body">{this.slides[currentSlide]}</main>;
   }
 }
+
+Onboarding.propTypes = {
+  communityConfig: PropTypes.shape({
+    communityName: PropTypes.string.isRequired,
+    communityDescription: PropTypes.string.isRequired
+  })
+};

app/javascript/onboarding/__tests__/Onboarding.test.jsx

@@ -25,7 +25,14 @@ function flushPromises() {
 
 function initializeSlides(currentSlide, userData = null, mockData = null) {
   document.body.setAttribute('data-user', userData);
-  const onboardingSlides = deep(<Onboarding />);
+  const onboardingSlides = deep(
+    <Onboarding
+      communityConfig={{
+        communityName: 'Test',
+        communityDescription: "Wouldn't you like to knoww..",
+      }}
+    />,
+  );
 
   if (mockData) {
     fetch.once(mockData);

app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap

@@ -348,10 +348,8 @@ preact-render-spy (1 nodes)
             alt="DEV"
            />
         </figure>
-        <h1 class="introduction-title">firstname lastname— welcome to DEV!</h1>
-        <h2 class="introduction-subtitle">
-          DEV is where programmers share ideas and help each other grow.
-        </h2>
+        <h1 class="introduction-title">firstname lastname— welcome to Test!</h1>
+        <h2 class="introduction-subtitle">Wouldn't you like to knoww..</h2>
       </div>
       <div class="checkbox-form-wrapper">
         <form class="checkbox-form">
@@ -464,7 +462,7 @@ preact-render-spy (1 nodes)
         <header class="onboarding-content-header">
           <h1 class="title">Build your profile</h1>
           <h2 class="subtitle">
-            Tell us a little bit about yourself — this is how others will see you on DEV. You’ll always be able to edit this later in your Settings.
+            Tell us a little bit about yourself — this is how others will see you on Test. You’ll always be able to edit this later in your Settings.
           </h2>
         </header>
         <div class="current-user-info">

app/javascript/onboarding/components/IntroSlide.jsx

@@ -66,7 +66,12 @@ class IntroSlide extends Component {
   }
 
   render() {
-    const { slidesCount, currentSlideIndex, prev } = this.props;
+    const {
+      slidesCount,
+      currentSlideIndex,
+      prev,
+      communityConfig,
+    } = this.props;
     const {
       checked_code_of_conduct,
       checked_terms_and_conditions,
@@ -109,10 +114,13 @@ class IntroSlide extends Component {
             </figure>
             <h1 className="introduction-title">
               {this.user.name}
-              &mdash; welcome to DEV!
+              &mdash; welcome to 
+              {' '}
+              {communityConfig.communityName}
+              !
             </h1>
             <h2 className="introduction-subtitle">
-              DEV is where programmers share ideas and help each other grow.
+              {communityConfig.communityDescription}
             </h2>
           </div>
 
@@ -187,6 +195,10 @@ IntroSlide.propTypes = {
   next: PropTypes.func.isRequired,
   slidesCount: PropTypes.number.isRequired,
   currentSlideIndex: PropTypes.func.isRequired,
+  communityConfig: PropTypes.shape({
+    communityName: PropTypes.string.isRequired,
+    communityDescription: PropTypes.string.isRequired
+  }),
 };
 
 export default IntroSlide;

app/javascript/onboarding/components/ProfileForm.jsx

@@ -64,7 +64,12 @@ class ProfileForm extends Component {
   }
 
   render() {
-    const { prev, slidesCount, currentSlideIndex } = this.props;
+    const {
+      prev,
+      slidesCount,
+      currentSlideIndex,
+      communityConfig,
+    } = this.props;
     const { profile_image_90, username, name } = this.user;
     const { canSkip } = this.state;
 
@@ -83,8 +88,11 @@ class ProfileForm extends Component {
               <h1 className="title">Build your profile</h1>
               <h2 className="subtitle">
                 Tell us a little bit about yourself — this is how others will
-                see you on DEV. You’ll always be able to edit this later in your
-                Settings.
+                see you on 
+                {' '}
+                {communityConfig.communityName}
+                . You’ll always be
+                able to edit this later in your Settings.
               </h2>
             </header>
             <div className="current-user-info">
@@ -156,6 +164,10 @@ ProfileForm.propTypes = {
   next: PropTypes.func.isRequired,
   slidesCount: PropTypes.number.isRequired,
   currentSlideIndex: PropTypes.func.isRequired,
+  communityConfig: PropTypes.shape({
+    communityName: PropTypes.string.isRequired,
+    communityDescription: PropTypes.string.isRequired
+  }),
 };
 
 export default ProfileForm;

app/javascript/packs/Onboarding.jsx

@@ -2,7 +2,7 @@ import { h, render } from 'preact';
 import { getUserDataAndCsrfToken } from '../chat/util';
 import getUnopenedChannels from '../src/utils/getUnopenedChannels';
 
-HTMLDocument.prototype.ready = new Promise(resolve => {
+HTMLDocument.prototype.ready = new Promise((resolve) => {
   if (document.readyState !== 'loading') {
     return resolve();
   }
@@ -11,11 +11,19 @@ HTMLDocument.prototype.ready = new Promise(resolve => {
 });
 
 function renderPage() {
+  const dataElement = document.getElementById('onboarding-container');
+  const communityConfig = {
+    communityName: dataElement.dataset.communityName,
+    communityDescription: dataElement.dataset.communityDescription,
+  };
   import('../onboarding/Onboarding')
     .then(({ default: Onboarding }) => {
-      render(<Onboarding />, document.getElementById('onboarding-container'));
+      render(
+        <Onboarding communityConfig={communityConfig} />,
+        document.getElementById('onboarding-container'),
+      );
     })
-    .catch(error => {
+    .catch((error) => {
       // eslint-disable-next-line no-console
       console.error('Unable to load onboarding', error);
     });
@@ -30,7 +38,7 @@ document.ready.then(
       getUnopenedChannels();
       renderPage();
     })
-    .catch(error => {
+    .catch((error) => {
       // eslint-disable-next-line no-console
       console.error('Error getting user and CSRF Token', error);
     }),

app/views/onboardings/show.html.erb

@@ -12,7 +12,7 @@
   }
 </style>
 
-<div id="onboarding-container">
+<div id="onboarding-container" data-community-name="<%= community_name %>" data-community-description="<%= SiteConfig.community_description %>">
   <%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
 </div>