feat: add hotjar suppression to PII (#385)

src/profile/ProfilePage.jsx

@@ -112,9 +112,11 @@ class ProfilePage extends React.Component {
 
     return (
       <React.Fragment>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
-        <DateJoined date={dateJoined} />
-        <hr className="d-none d-md-block" />
+        <span data-hj-suppress>
+          <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+          <DateJoined date={dateJoined} />
+          <hr className="d-none d-md-block" />
+        </span>
       </React.Fragment>
     );
   }

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -86,24 +86,28 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         <div
           className="d-md-none"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            verified
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
-              Member since 
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              verified
+            </h1>
+            <p
+              className="mb-0"
+            >
               <span>
-                2017
+                Member since 
+                <span>
+                  2017
+                </span>
               </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-none d-md-block float-right"
@@ -119,24 +123,28 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         <div
           className="d-none d-md-block mb-4"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            verified
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
-              Member since 
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              verified
+            </h1>
+            <p
+              className="mb-0"
+            >
               <span>
-                2017
+                Member since 
+                <span>
+                  2017
+                </span>
               </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-md-none mb-4"
@@ -277,6 +285,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               <img
                 alt="profile avatar"
                 className="w-100 h-100 d-block rounded-circle overflow-hidden"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
                 style={
                   Object {
@@ -307,24 +316,28 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         <div
           className="d-md-none"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
-              Member since 
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               <span>
-                2017
+                Member since 
+                <span>
+                  2017
+                </span>
               </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-none d-md-block float-right"
@@ -359,24 +372,28 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         <div
           className="d-none d-md-block mb-4"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
-              Member since 
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               <span>
-                2017
+                Member since 
+                <span>
+                  2017
+                </span>
               </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-md-none mb-4"
@@ -485,6 +502,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
@@ -580,6 +598,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
@@ -670,6 +689,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
@@ -760,6 +780,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
@@ -1029,6 +1050,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="lead"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
@@ -1278,6 +1300,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               <img
                 alt="profile avatar"
                 className="w-100 h-100 d-block rounded-circle overflow-hidden"
+                data-hj-suppress={true}
                 src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
                 style={
                   Object {
@@ -1308,24 +1331,28 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         <div
           className="d-md-none"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
-              Member since 
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               <span>
-                2017
+                Member since 
+                <span>
+                  2017
+                </span>
               </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-none d-md-block float-right"
@@ -1360,24 +1387,28 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         <div
           className="d-none d-md-block mb-4"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
-              Member since 
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               <span>
-                2017
+                Member since 
+                <span>
+                  2017
+                </span>
               </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-md-none mb-4"
@@ -1486,6 +1517,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
@@ -1581,6 +1613,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
@@ -1671,6 +1704,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
@@ -1761,6 +1795,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>

src/profile/forms/Bio.jsx

@@ -91,7 +91,7 @@ class Bio extends React.Component {
                 showVisibility={visibilityBio !== null}
                 visibility={visibilityBio}
               />
-              <p className="lead">{bio}</p>
+              <p data-hj-suppress className="lead">{bio}</p>
             </React.Fragment>
           ),
           empty: (
@@ -109,7 +109,7 @@ class Bio extends React.Component {
           static: (
             <React.Fragment>
               <EditableItemHeader content={intl.formatMessage(messages['profile.bio.about.me'])} />
-              <p className="lead">{bio}</p>
+              <p data-hj-suppress className="lead">{bio}</p>
             </React.Fragment>
           ),
         }}

src/profile/forms/Country.jsx

@@ -76,6 +76,7 @@ class Country extends React.Component {
                     {intl.formatMessage(messages['profile.country.label'])}
                   </label>
                   <select
+                    data-hj-suppress
                     className="form-control"
                     type="select"
                     id={formId}
@@ -108,7 +109,7 @@ class Country extends React.Component {
                 showVisibility={visibilityCountry !== null}
                 visibility={visibilityCountry}
               />
-              <p className="h5">{countryMessages[country]}</p>
+              <p data-hj-suppress className="h5">{countryMessages[country]}</p>
             </React.Fragment>
           ),
           empty: (
@@ -126,7 +127,7 @@ class Country extends React.Component {
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.country.label'])}
               />
-              <p className="h5">{countryMessages[country]}</p>
+              <p data-hj-suppress className="h5">{countryMessages[country]}</p>
             </React.Fragment>
           ),
         }}

src/profile/forms/Education.jsx

@@ -72,6 +72,7 @@ class Education extends React.Component {
                     {intl.formatMessage(messages['profile.education.education'])}
                   </label>
                   <select
+                    data-hj-suppress
                     className="form-control"
                     id={formId}
                     name={formId}
@@ -109,7 +110,7 @@ class Education extends React.Component {
                 showVisibility={visibilityLevelOfEducation !== null}
                 visibility={visibilityLevelOfEducation}
               />
-              <p className="h5">
+              <p data-hj-suppress className="h5">
                 {intl.formatMessage(get(
                   messages,
                   `profile.education.levels.${levelOfEducation}`,
@@ -133,7 +134,7 @@ class Education extends React.Component {
           static: (
             <React.Fragment>
               <EditableItemHeader content={intl.formatMessage(messages['profile.education.education'])} />
-              <p className="h5">
+              <p data-hj-suppress className="h5">
                 {intl.formatMessage(get(
                   messages,
                   `profile.education.levels.${levelOfEducation}`,

src/profile/forms/Name.jsx

@@ -68,7 +68,7 @@ class Name extends React.Component {
                   Once we're super sure we don't want it back, you could delete the name props and
                   such to fully get rid of it.
                   */}
-                  <p className="h5">{name}</p>
+                  <p data-hj-suppress className="h5">{name}</p>
                   <small className="form-text text-muted" id={`${formId}-help-text`}>
                     {intl.formatMessage(messages['profile.name.details'])}
                   </small>
@@ -92,7 +92,7 @@ class Name extends React.Component {
                 showVisibility={visibilityName !== null}
                 visibility={visibilityName}
               />
-              <p className="h5">{name}</p>
+              <p data-hj-suppress className="h5">{name}</p>
               <small className="form-text text-muted">
                 {intl.formatMessage(messages['profile.name.details'])}
               </small>
@@ -112,7 +112,7 @@ class Name extends React.Component {
           static: (
             <React.Fragment>
               <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
-              <p className="h5">{name}</p>
+              <p data-hj-suppress className="h5">{name}</p>
             </React.Fragment>
           ),
         }}

src/profile/forms/PreferredLanguage.jsx

@@ -86,6 +86,7 @@ class PreferredLanguage extends React.Component {
                     {intl.formatMessage(messages['profile.preferredlanguage.label'])}
                   </label>
                   <select
+                    data-hj-suppress
                     id={formId}
                     name={formId}
                     className="form-control"
@@ -117,7 +118,7 @@ class PreferredLanguage extends React.Component {
                 showVisibility={visibilityLanguageProficiencies !== null}
                 visibility={visibilityLanguageProficiencies}
               />
-              <p className="h5">{languageMessages[value]}</p>
+              <p data-hj-suppress className="h5">{languageMessages[value]}</p>
             </React.Fragment>
           ),
           empty: (
@@ -135,7 +136,7 @@ class PreferredLanguage extends React.Component {
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
               />
-              <p className="h5">{languageMessages[value]}</p>
+              <p data-hj-suppress className="h5">{languageMessages[value]}</p>
             </React.Fragment>
           ),
         }}

src/profile/forms/ProfileAvatar.jsx

@@ -109,6 +109,7 @@ class ProfileAvatar extends React.Component {
       <DefaultAvatar className="text-muted" role="img" aria-hidden focusable="false" viewBox="0 0 24 24" />
     ) : (
       <img
+        data-hj-suppress
         className="w-100 h-100 d-block rounded-circle overflow-hidden"
         style={{ objectFit: 'cover' }}
         alt={intl.formatMessage(messages['profile.image.alt.attribute'])}