From 4eb2f05387ed854bdcb28f4e9ea5913484791472 Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Fri, 8 May 2020 14:45:24 -0400 Subject: [PATCH] [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 * Update app/javascript/onboarding/components/IntroSlide.jsx * Update app/javascript/onboarding/components/ProfileForm.jsx Co-authored-by: Vaidehi Joshi --- app/javascript/onboarding/Onboarding.jsx | 9 +++++++++ .../onboarding/__tests__/Onboarding.test.jsx | 9 ++++++++- .../__snapshots__/Onboarding.test.jsx.snap | 8 +++----- .../onboarding/components/IntroSlide.jsx | 18 +++++++++++++++--- .../onboarding/components/ProfileForm.jsx | 18 +++++++++++++++--- app/javascript/packs/Onboarding.jsx | 16 ++++++++++++---- app/views/onboardings/show.html.erb | 2 +- 7 files changed, 63 insertions(+), 17 deletions(-) diff --git a/app/javascript/onboarding/Onboarding.jsx b/app/javascript/onboarding/Onboarding.jsx index 2231d3f17..be03c883c 100644 --- a/app/javascript/onboarding/Onboarding.jsx +++ b/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
{this.slides[currentSlide]}
; } } + +Onboarding.propTypes = { + communityConfig: PropTypes.shape({ + communityName: PropTypes.string.isRequired, + communityDescription: PropTypes.string.isRequired + }) +}; diff --git a/app/javascript/onboarding/__tests__/Onboarding.test.jsx b/app/javascript/onboarding/__tests__/Onboarding.test.jsx index a7445163c..d0e6c9325 100644 --- a/app/javascript/onboarding/__tests__/Onboarding.test.jsx +++ b/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(); + const onboardingSlides = deep( + , + ); if (mockData) { fetch.once(mockData); diff --git a/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap b/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap index 7476eb8ed..0071ab7ed 100644 --- a/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap +++ b/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap @@ -348,10 +348,8 @@ preact-render-spy (1 nodes) alt="DEV" /> -

firstname lastname— welcome to DEV!

-

- DEV is where programmers share ideas and help each other grow. -

+

firstname lastname— welcome to Test!

+

Wouldn't you like to knoww..

@@ -464,7 +462,7 @@ preact-render-spy (1 nodes)

Build your profile

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

@@ -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; diff --git a/app/javascript/onboarding/components/ProfileForm.jsx b/app/javascript/onboarding/components/ProfileForm.jsx index acc896461..cc728917d 100644 --- a/app/javascript/onboarding/components/ProfileForm.jsx +++ b/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 {

Build your profile

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.

@@ -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; diff --git a/app/javascript/packs/Onboarding.jsx b/app/javascript/packs/Onboarding.jsx index 3c7c398dd..58f02db70 100644 --- a/app/javascript/packs/Onboarding.jsx +++ b/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(, document.getElementById('onboarding-container')); + render( + , + 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); }), diff --git a/app/views/onboardings/show.html.erb b/app/views/onboardings/show.html.erb index 461056599..1c128e3b7 100644 --- a/app/views/onboardings/show.html.erb +++ b/app/views/onboardings/show.html.erb @@ -12,7 +12,7 @@ } -
+
<%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>