fix: trim long text in form controls and username block (#887 )

* fix: trim long text in form controls and username block * fix: update snapshots
feat: fixed displaying field and visibility forms (#865 )
2023-11-08 13:57:45 -05:00 · 2023-11-08 13:46:31 -05:00 · 2023-10-16 13:06:59 -04:00
9 changed files with 297 additions and 125 deletions
--- a/src/profile/Banner.jsx
+++ b/src/profile/Banner.jsx
@@ -1,5 +1,5 @@
 import React from 'react';

-const Banner = () => <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
+const Banner = () => <div className="profile-page-bg-banner bg-primary d-md-block p-relative" />;

 export default Banner;
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -124,7 +124,7 @@ class ProfilePage extends React.Component {

    return (
      <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.match.params.username}</h1>
        <DateJoined date={dateJoined} />
        {this.isYOBDisabled() && <UsernameDescription />}
        <hr className="d-none d-md-block" />
@@ -176,6 +176,7 @@ class ProfilePage extends React.Component {
      visibilityLearningGoal,
      languageProficiencies,
      visibilityLanguageProficiencies,
+      courseCertificates,
      visibilityCourseCertificates,
      bio,
      visibilityBio,
@@ -194,6 +195,17 @@ class ProfilePage extends React.Component {
      changeHandler: this.handleChange,
    };

+    const isBlockVisible = (blockInfo) => this.isAuthenticatedUserProfile()
+      || (!this.isAuthenticatedUserProfile() && Boolean(blockInfo));
+
+    const isLanguageBlockVisible = isBlockVisible(languageProficiencies.length);
+    const isEducationBlockVisible = isBlockVisible(levelOfEducation);
+    const isSocialLinksBLockVisible = isBlockVisible(socialLinks.some((link) => link.socialLink !== null));
+    const isBioBlockVisible = isBlockVisible(bio);
+    const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
+    const isNameBlockVisible = isBlockVisible(name);
+    const isLocationBlockVisible = isBlockVisible(country);
+
    return (
      <div className="container-fluid">
        <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
@@ -210,7 +222,7 @@ class ProfilePage extends React.Component {
              />
            </div>
          </div>
-          <div className="col pl-0">
+          <div className="col">
            <div className="d-md-none">
              {this.renderHeadingLockup()}
            </div>
@@ -228,46 +240,58 @@ class ProfilePage extends React.Component {
            <div className="d-md-none mb-4">
              {this.renderViewMyRecordsButton()}
            </div>
-            <Name
-              name={name}
-              visibilityName={visibilityName}
-              formId="name"
-              {...commonFormProps}
-            />
-            <Country
-              country={country}
-              visibilityCountry={visibilityCountry}
-              formId="country"
-              {...commonFormProps}
-            />
-            <PreferredLanguage
-              languageProficiencies={languageProficiencies}
-              visibilityLanguageProficiencies={visibilityLanguageProficiencies}
-              formId="languageProficiencies"
-              {...commonFormProps}
-            />
-            <Education
-              levelOfEducation={levelOfEducation}
-              visibilityLevelOfEducation={visibilityLevelOfEducation}
-              formId="levelOfEducation"
-              {...commonFormProps}
-            />
-            <SocialLinks
-              socialLinks={socialLinks}
-              draftSocialLinksByPlatform={draftSocialLinksByPlatform}
-              visibilitySocialLinks={visibilitySocialLinks}
-              formId="socialLinks"
-              {...commonFormProps}
-            />
+            {isNameBlockVisible && (
+              <Name
+                name={name}
+                visibilityName={visibilityName}
+                formId="name"
+                {...commonFormProps}
+              />
+            )}
+            {isLocationBlockVisible && (
+              <Country
+                country={country}
+                visibilityCountry={visibilityCountry}
+                formId="country"
+                {...commonFormProps}
+              />
+            )}
+            {isLanguageBlockVisible && (
+              <PreferredLanguage
+                languageProficiencies={languageProficiencies}
+                visibilityLanguageProficiencies={visibilityLanguageProficiencies}
+                formId="languageProficiencies"
+                {...commonFormProps}
+              />
+            )}
+            {isEducationBlockVisible && (
+              <Education
+                levelOfEducation={levelOfEducation}
+                visibilityLevelOfEducation={visibilityLevelOfEducation}
+                formId="levelOfEducation"
+                {...commonFormProps}
+              />
+            )}
+            {isSocialLinksBLockVisible && (
+              <SocialLinks
+                socialLinks={socialLinks}
+                draftSocialLinksByPlatform={draftSocialLinksByPlatform}
+                visibilitySocialLinks={visibilitySocialLinks}
+                formId="socialLinks"
+                {...commonFormProps}
+              />
+            )}
          </div>
          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
            {!this.isYOBDisabled() && this.renderAgeMessage()}
-            <Bio
-              bio={bio}
-              visibilityBio={visibilityBio}
-              formId="bio"
-              {...commonFormProps}
-            />
+            {isBioBlockVisible && (
+              <Bio
+                bio={bio}
+                visibilityBio={visibilityBio}
+                formId="bio"
+                {...commonFormProps}
+              />
+            )}
            {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
              <LearningGoal
                learningGoal={learningGoal}
@@ -276,11 +300,13 @@ class ProfilePage extends React.Component {
                {...commonFormProps}
              />
            )}
-            <Certificates
-              visibilityCourseCertificates={visibilityCourseCertificates}
-              formId="certificates"
-              {...commonFormProps}
-            />
+            {isCertificatesBlockVisible && (
+              <Certificates
+                visibilityCourseCertificates={visibilityCourseCertificates}
+                formId="certificates"
+                {...commonFormProps}
+              />
+            )}
          </div>
        </div>
      </div>
@@ -346,7 +372,7 @@ ProfilePage.propTypes = {

  // Learning Goal form data
  learningGoal: PropTypes.string,
-  visibilityLearningGoal: PropTypes.string.isRequired,
+  visibilityLearningGoal: PropTypes.string,

  // Other data we need
  profileImage: PropTypes.shape({
@@ -397,6 +423,7 @@ ProfilePage.defaultProps = {
  courseCertificates: null,
  requiresParentalConsent: null,
  dateJoined: null,
+  visibilityLearningGoal: null,
 };

 export default connect(
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -115,15 +115,33 @@ describe('<ProfilePage />', () => {
      expect(tree).toMatchSnapshot();
    });

-    it('viewing other profile', () => {
+    it('viewing other profile with all fields', () => {
      const contextValue = {
        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
        config: getConfig(),
      };
+
      const component = (
        <ProfilePageWrapper
          contextValue={contextValue}
-          store={mockStore(storeMocks.viewOtherProfile)}
+          store={mockStore({
+            ...storeMocks.viewOtherProfile,
+            profilePage: {
+              ...storeMocks.viewOtherProfile.profilePage,
+              account: {
+                ...storeMocks.viewOtherProfile.profilePage.account,
+                name: 'user',
+                country: 'EN',
+                bio: 'bio',
+                courseCertificates: ['course certificates'],
+                levelOfEducation: 'some level',
+                languageProficiencies: ['some lang'],
+                socialLinks: ['twitter'],
+                timeZone: 'time zone',
+                accountPrivacy: 'all_users',
+              },
+            },
+          })}
          match={{ params: { username: 'verified' } }} // Override default match
        />
      );
--- a/src/profile/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile/snapshots/ProfilePage.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div>
    <div
@@ -36,7 +36,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -104,7 +104,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -113,7 +113,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -191,7 +191,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -1694,7 +1694,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                        id="visibilityCountry"
                        name="visibilityCountry"
                        onChange={[Function]}
@@ -2305,7 +2305,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -2417,7 +2417,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -2485,7 +2485,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -2494,7 +2494,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -2572,7 +2572,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -3049,7 +3049,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                        id="visibilityLevelOfEducation"
                        name="visibilityLevelOfEducation"
                        onChange={[Function]}
@@ -3480,7 +3480,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -3592,7 +3592,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -3660,7 +3660,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -3669,7 +3669,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -3747,7 +3747,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -5009,7 +5009,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                        id="visibilityLanguageProficiencies"
                        name="visibilityLanguageProficiencies"
                        onChange={[Function]}
@@ -5530,7 +5530,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -5637,12 +5637,12 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
 </div>
 `;

-exports[`<ProfilePage /> Renders correctly in various states viewing other profile 1`] = `
+exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
 <div
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -5687,7 +5687,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -5696,7 +5696,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              verified
            </h1>
@@ -5757,7 +5757,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              verified
            </h1>
@@ -5810,7 +5810,32 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        />
+        >
+          <div
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
+          >
+            <div
+              className="editable-item-header mb-2"
+            >
+              <h2
+                className="edit-section-header"
+                id={null}
+              >
+                Full Name
+              </h2>
+            </div>
+            <p
+              className="h5"
+              data-hj-suppress={true}
+            >
+              user
+            </p>
+          </div>
+        </div>
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -5818,7 +5843,30 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        />
+        >
+          <div
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
+          >
+            <div
+              className="editable-item-header mb-2"
+            >
+              <h2
+                className="edit-section-header"
+                id={null}
+              >
+                Location
+              </h2>
+            </div>
+            <p
+              className="h5"
+              data-hj-suppress={true}
+            />
+          </div>
+        </div>
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -5826,7 +5874,30 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        />
+        >
+          <div
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
+          >
+            <div
+              className="editable-item-header mb-2"
+            >
+              <h2
+                className="edit-section-header"
+                id={null}
+              >
+                Primary Language Spoken
+              </h2>
+            </div>
+            <p
+              className="h5"
+              data-hj-suppress={true}
+            />
+          </div>
+        </div>
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -5834,15 +5905,32 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        />
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
+        >
+          <div
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
            }
-          }
-        />
+          >
+            <div
+              className="editable-item-header mb-2"
+            >
+              <h2
+                className="edit-section-header"
+                id={null}
+              >
+                Education
+              </h2>
+            </div>
+            <p
+              className="h5"
+              data-hj-suppress={true}
+            >
+              Other education
+            </p>
+          </div>
+        </div>
      </div>
      <div
        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
@@ -5854,15 +5942,32 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        />
-        <div
-          className="pgn-transition-replace-group position-relative mb-4"
-          style={
-            Object {
-              "height": null,
+        >
+          <div
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
            }
-          }
-        />
+          >
+            <div
+              className="editable-item-header mb-2"
+            >
+              <h2
+                className="edit-section-header"
+                id={null}
+              >
+                About Me
+              </h2>
+            </div>
+            <p
+              className="lead"
+              data-hj-suppress={true}
+            >
+              bio
+            </p>
+          </div>
+        </div>
      </div>
    </div>
  </div>
@@ -5874,7 +5979,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -5942,7 +6047,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -5951,7 +6056,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -6029,7 +6134,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -6812,7 +6917,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -6924,7 +7029,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -6992,7 +7097,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -7001,7 +7106,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -7079,7 +7184,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -7767,7 +7872,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                        id="visibilityBio"
                        name="visibilityBio"
                        onChange={[Function]}
@@ -7929,7 +8034,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -8041,7 +8146,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -8109,7 +8214,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -8118,7 +8223,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -8196,7 +8301,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -8890,7 +8995,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                        id="visibilityBio"
                        name="visibilityBio"
                        onChange={[Function]}
@@ -9052,7 +9157,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -9164,7 +9269,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -9232,7 +9337,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -9241,7 +9346,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -9274,7 +9379,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
            >
              staff
            </h1>
@@ -10012,7 +10117,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
              className="row align-items-stretch"
            >
              <div
-                className="col col-sm-6 d-flex align-items-stretch"
+                className="col-12 col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
--- a/src/profile/data/sagas.js
+++ b/src/profile/data/sagas.js
@@ -66,6 +66,25 @@ export function* handleFetchProfile(action) {
    } else {
      [account, courseCertificates] = result;
    }
+
+    // Set initial visibility values for account
+    // Set account_privacy as custom is necessary so that when viewing another user's profile,
+    // their full name is displayed and change visibility forms are worked correctly
+    if (isAuthenticatedUserProfile && result[0].accountPrivacy === 'all_users') {
+      yield call(ProfileApiService.patchPreferences, action.payload.username, {
+        account_privacy: 'custom',
+        'visibility.name': 'all_users',
+        'visibility.bio': 'all_users',
+        'visibility.course_certificates': 'all_users',
+        'visibility.country': 'all_users',
+        'visibility.date_joined': 'all_users',
+        'visibility.level_of_education': 'all_users',
+        'visibility.language_proficiencies': 'all_users',
+        'visibility.social_links': 'all_users',
+        'visibility.time_zone': 'all_users',
+      });
+    }
+
    yield put(fetchProfileSuccess(
      account,
      preferences,
--- a/src/profile/data/selectors.js
+++ b/src/profile/data/selectors.js
@@ -35,9 +35,12 @@ export const editableFormModeSelector = createSelector(
    // or is being hidden from us (for other users' profiles)
    let propExists = account[formId] != null && account[formId].length > 0;
    propExists = formId === 'certificates' ? certificates.length > 0 : propExists; // overwrite for certificates
-    // If this isn't the current user's profile or if
+    // If this isn't the current user's profile
+    if (!isAuthenticatedUserProfile) {
+      return 'static';
+    }
    // the current user has no age set / under 13 ...
-    if (!isAuthenticatedUserProfile || account.requiresParentalConsent) {
+    if (account.requiresParentalConsent) {
      // then there are only two options: static or nothing.
      // We use 'null' as a return value because the consumers of
      // getMode render nothing at all on a mode of null.
@@ -228,13 +231,13 @@ export const visibilitiesSelector = createSelector(
    switch (accountPrivacy) {
      case 'custom':
        return {
-          visibilityBio: preferences.visibilityBio || 'private',
-          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'private',
-          visibilityCountry: preferences.visibilityCountry || 'private',
-          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'private',
-          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'private',
-          visibilityName: preferences.visibilityName || 'private',
-          visibilitySocialLinks: preferences.visibilitySocialLinks || 'private',
+          visibilityBio: preferences.visibilityBio || 'all_users',
+          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'all_users',
+          visibilityCountry: preferences.visibilityCountry || 'all_users',
+          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'all_users',
+          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
+          visibilityName: preferences.visibilityName || 'all_users',
+          visibilitySocialLinks: preferences.visibilitySocialLinks || 'all_users',
        };
      case 'private':
        return {
--- a/src/profile/forms/Certificates.jsx
+++ b/src/profile/forms/Certificates.jsx
@@ -68,7 +68,7 @@ class Certificates extends React.Component {
    })();

    return (
-      <div key={`${modifiedDate}-${courseId}`} className="col col-sm-6 d-flex align-items-stretch">
+      <div key={`${modifiedDate}-${courseId}`} className="col-12 col-sm-6 d-flex align-items-stretch">
        <div className="card mb-4 certificate flex-grow-1">
          <div
            className="certificate-type-illustration"
--- a/src/profile/forms/snapshots/SocialLinks.test.jsx.snap
+++ b/src/profile/forms/snapshots/SocialLinks.test.jsx.snap
@@ -119,7 +119,7 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
                </svg>
              </span>
              <select
-                className="d-inline-block w-auto form-control"
+                className="d-inline-block form-control"
                id="visibilitySocialLinks"
                name="visibilitySocialLinks"
                onChange={[Function]}
--- a/src/profile/forms/elements/Visibility.jsx
+++ b/src/profile/forms/elements/Visibility.jsx
@@ -39,7 +39,7 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
      <span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
        <FontAwesomeIcon icon={icon} />
      </span>
-      <select className="d-inline-block w-auto form-control" {...props}>
+      <select className="d-inline-block form-control" {...props}>
        <option key="private" value="private">
          {intl.formatMessage(messages['profile.visibility.who.just.me'])}
        </option>
Author	SHA1	Message	Date
Ihor Romaniuk	1a4174d2f2	fix: trim long text in form controls and username block (#887 ) * fix: trim long text in form controls and username block * fix: update snapshots	2023-11-08 13:57:45 -05:00
vladislavkeblysh	9461973574	feat: fixed displaying field and visibility forms (#865 )	2023-11-08 13:46:31 -05:00
vladislavkeblysh	06e827bdb4	feat: Fixed displaying banner and certificates on mobile view (palm.master) (#861 ) * feat: fixed displaing banner and certificates on mobile view * feat: update snapshot	2023-10-16 13:06:59 -04:00