Merge pull request #593 from ghassanmas/depends-nutmeg

build: update common depeds

.env

@@ -24,3 +24,4 @@ LOGO_WHITE_URL=''
 FAVICON_URL=''
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL=''
+COLLECT_YEAR_OF_BIRTH=true

.env.development

@@ -25,3 +25,4 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
+COLLECT_YEAR_OF_BIRTH=true

.env.test

@@ -19,3 +19,4 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
+COLLECT_YEAR_OF_BIRTH=true

.github/CODEOWNERS

@@ -1 +0,0 @@
-* @edx/community-engineering

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/ci.yml

@@ -1,4 +1,3 @@
----
 name: ci
 on:
   push:
@@ -6,23 +5,22 @@ on:
     - master
   pull_request:
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version:
-        - 12
         npm-test:
         - i18n_extract
         - is-es5
         - lint
         - test
+        node: [12, 14, 16]
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install -g npm@6
+        node-version: ${{ matrix.node }}
+    - run: npm install -g npm@8.x.x
     - run: make requirements
     - run: make test NPM_TESTS=build
     - run: make test NPM_TESTS=${{ matrix.npm-test }}

.tx/config

@@ -1,8 +1,9 @@
 [main]
 host = https://www.transifex.com
 
-[edx-platform.frontend-app-profile]
+[o:open-edx:p:edx-platform:r:frontend-app-profile]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type = KEYVALUEJSON
+type        = KEYVALUEJSON
+

Makefile

@@ -1,3 +1,4 @@
+export TRANSIFEX_RESOURCE = frontend-app-profile
 transifex_resource = frontend-app-profile
 transifex_langs = "ar,fr,es_419,zh_CN"
 
@@ -45,15 +46,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	tx pull -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

package.json

@@ -30,17 +30,17 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.1.6",
-    "@edx/frontend-component-header": "2.3.0",
-    "@edx/frontend-platform": "1.12.7",
-    "@edx/paragon": "16.6.1",
+    "@edx/frontend-component-footer": "10.2.2",
+    "@edx/frontend-component-header": "2.4.6",
+    "@edx/frontend-platform": "1.15.6",
+    "@edx/paragon": "19.14.1",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
+    "@fortawesome/react-fontawesome": "0.1.17",
     "classnames": "2.3.1",
-    "core-js": "3.18.2",
+    "core-js": "3.20.3",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
     "lodash.pick": "4.4.0",
@@ -48,22 +48,23 @@
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-redux": "7.2.5",
+    "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
-    "redux": "4.1.1",
+    "redux": "4.1.2",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.1",
     "regenerator-runtime": "0.13.9",
-    "reselect": "4.0.0",
+    "reselect": "4.1.5",
     "universal-cookie": "3.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "13.2.1",
     "@commitlint/config-angular": "13.2.0",
-    "@edx/frontend-build": "8.0.4",
+    "@edx/reactifex": "1.0.3",
+    "@edx/frontend-build": "9.1.4",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -72,5 +73,9 @@
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"
+  },
+    "peerDependencies": {
+    "bootstrap": "4.6.1" 
   }
+
 }

src/i18n/messages/ar.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "لا يمكن مشاركة ملفك الشخصي",
-  "profile.age.details": "لمشاركة ملفك الشخصي مع متعلمي edX الآخرين يجب التحقق من أن يكون عمرك أكثر من ١٣ سنة",
+  "profile.age.details": "لمشاركة ملفك الشخصي مع متعلمي {siteName} الآخرين يجب التحقق من أن يكون عمرك أكثر من ١٣ سنة",
   "profile.age.set.date": "اضبط تاريخ ميلاك",
   "profile.datejoined.member.since": "عضو منذُ {year}",
   "profile.bio.empty": "أضف نبذة قصيرة",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "جاري الحفظ",
   "profile.formcontrols.button.saved": "تم الحفظ",
   "profile.visibility.who.just.me": "أنا فقط",
-  "profile.visibility.who.everyone": "جميع أعضاء edX",
+  "profile.visibility.who.everyone": "جميع أعضاء {siteName}",
   "profile.name.full.name": "الاسم الكامل",
   "profile.name.details": "هذا هو الاسم الذي سيظهر في حسابك وفي شهاداتك",
   "profile.name.empty": "إضافة اسم",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "روابط قنوات التواصل الاجتماعي",
   "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
   "profile.viewMyRecords": "عرض سجلّاتي",
-  "profile.loading": "جاري تحميل الملف الشخصي ..."
+  "profile.loading": "جاري تحميل الملف الشخصي ...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
 }

src/i18n/messages/es_419.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "Tu perfil no puede ser compartido.",
-  "profile.age.details": "Para compartir tu perfil con otros estudiantes de edX, debes confirmar que tienes más de 13 años.",
+  "profile.age.details": "Para compartir tu perfil con otros estudiantes de {siteName}, debes confirmar que tienes más de 13 años.",
   "profile.age.set.date": "Establece tu fecha de nacimiento",
   "profile.datejoined.member.since": "Miembro desde {year}",
   "profile.bio.empty": "Añade una breve biografía",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "Guardando",
   "profile.formcontrols.button.saved": "Guardado",
   "profile.visibility.who.just.me": "Solo yo",
-  "profile.visibility.who.everyone": "Todos en edX",
+  "profile.visibility.who.everyone": "Todos en {siteName}",
   "profile.name.full.name": "Nombre completo",
   "profile.name.details": "Este es el nombre que aparecerá en tu cuenta y en tus certificados.",
   "profile.name.empty": "Añade nombre",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "Enlaces De Redes Sociales",
   "profile.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
   "profile.viewMyRecords": "Ver mis registros",
-  "profile.loading": "Cargando perfil..."
+  "profile.loading": "Cargando perfil...",
+  "profile.username.description": "La información de tu perfil es solo visible para ti. Únicamente tu nombre de usuario es visible para otros en {siteName}."
 }

src/i18n/messages/fr.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "Votre profil ne peut pas être partagé.",
-  "profile.age.details": "Pour partager votre profil avec d'autres apprenants edX, vous devez confirmer que vous avez plus de 13 ans.",
+  "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
   "profile.age.set.date": "Définissez votre date de naissance",
   "profile.datejoined.member.since": "Membre depuis {year}",
   "profile.bio.empty": "Ajouter une courte biographie",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "Enregistrement",
   "profile.formcontrols.button.saved": "Enregistré",
   "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur edX",
+  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
   "profile.name.full.name": "Nom complet",
   "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos certificats.",
   "profile.name.empty": "Ajouter un nom",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
   "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
   "profile.viewMyRecords": "Voir mes succès",
-  "profile.loading": "Chargement du profil...."
+  "profile.loading": "Chargement du profil....",
+  "profile.username.description": "Les informations de ton profil ne sont visibles que par toi. Seul votre nom d'utilisateur est visible par les autres utilisateurs d'{siteName}."
 }

src/i18n/messages/zh_CN.json

@@ -1,6 +1,6 @@
 {
   "profile.age.headline": "Your profile cannot be shared.",
-  "profile.age.details": "To share your profile with other edX learners, you must confirm that you are over the age of 13.",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",
   "profile.bio.empty": "Add a short bio",
@@ -33,7 +33,7 @@
   "profile.formcontrols.button.saving": "Saving",
   "profile.formcontrols.button.saved": "Saved",
   "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on edX",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
   "profile.name.full.name": "Full Name",
   "profile.name.details": "This is the name that appears in your account and on your certificates.",
   "profile.name.empty": "Add name",
@@ -47,5 +47,6 @@
   "profile.sociallinks.social.links": "Social Links",
   "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
   "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading..."
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
 }

src/index.jsx

@@ -60,6 +60,7 @@ initialize({
       mergeConfig({
         ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
         LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
+        COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
       }, 'App loadConfig override handler');
     },
   },

src/profile/AgeMessage.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StatusAlert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 function AgeMessage({ accountSettingsUrl }) {
   return (
@@ -17,15 +18,18 @@ function AgeMessage({ accountSettingsUrl }) {
           />
           <FormattedMessage
             id="profile.age.details"
-            defaultMessage="To share your profile with other edX learners, you must confirm that you are over the age of 13."
-            description="error message"
+            defaultMessage="To share your profile with other {siteName} learners, you must confirm that you are over the age of 13."
+            description="Error message"
             tagName="p"
+            values={{
+              siteName: getConfig().SITE_NAME,
+            }}
           />
           <a href={accountSettingsUrl}>
             <FormattedMessage
               id="profile.age.set.date"
               defaultMessage="Set your date of birth"
-              description="label on a link to set birthday"
+              description="Label on a link to set birthday"
             />
           </a>
         </>

src/profile/ProfilePage.jsx

@@ -30,6 +30,7 @@ import Bio from './forms/Bio';
 import Certificates from './forms/Certificates';
 import AgeMessage from './AgeMessage';
 import DateJoined from './DateJoined';
+import UsernameDescription from './UsernameDescription';
 import PageLoading from './PageLoading';
 import Banner from './Banner';
 
@@ -80,6 +81,14 @@ class ProfilePage extends React.Component {
     return recordsUrl;
   }
 
+  isYOBDisabled() {
+    const { yearOfBirth } = this.props;
+    const currentYear = new Date().getFullYear();
+    const isAgeOrNotCompliant = !yearOfBirth || ((currentYear - yearOfBirth) < 13);
+
+    return isAgeOrNotCompliant && getConfig().COLLECT_YEAR_OF_BIRTH !== 'true';
+  }
+
   isAuthenticatedUserProfile() {
     return this.props.match.params.username === this.context.authenticatedUser.username;
   }
@@ -130,6 +139,7 @@ class ProfilePage extends React.Component {
         <span data-hj-suppress>
           <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
           <DateJoined date={dateJoined} />
+          {this.isYOBDisabled() && <UsernameDescription />}
           <hr className="d-none d-md-block" />
         </span>
       </>
@@ -261,7 +271,7 @@ class ProfilePage extends React.Component {
             />
           </div>
           <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            {this.renderAgeMessage()}
+            {!this.isYOBDisabled() && this.renderAgeMessage()}
             <Bio
               bio={bio}
               visibilityBio={visibilityBio}
@@ -298,6 +308,7 @@ ProfilePage.propTypes = {
 
   // Bio form data
   bio: PropTypes.string,
+  yearOfBirth: PropTypes.number,
   visibilityBio: PropTypes.string.isRequired,
 
   // Certificates form data
@@ -373,6 +384,7 @@ ProfilePage.defaultProps = {
   photoUploadError: {},
   profileImage: {},
   name: null,
+  yearOfBirth: null,
   levelOfEducation: null,
   country: null,
   socialLinks: [],

src/profile/UsernameDescription.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { VisibilityOff } from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+function UsernameDescription() {
+  return (
+    <div className="d-flex align-items-center mt-3 mb-2rem">
+      <Icon src={VisibilityOff} className="icon-visibility-off" />
+      <div className="username-description">
+        <FormattedMessage
+          id="profile.username.description"
+          defaultMessage="Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+          description="A description of the username field"
+          values={{
+            siteName: getConfig().SITE_NAME,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default UsernameDescription;

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

@@ -104,6 +104,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 </span>
               </span>
             </p>
+            <div
+              className="d-flex align-items-center mt-3 mb-2rem"
+            >
+              <span
+                className="pgn__icon icon-visibility-off"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <div
+                className="username-description"
+              >
+                <span>
+                  Your profile information is only visible to you. Only your username is visible to others on localhost.
+                </span>
+              </div>
+            </div>
             <hr
               className="d-none d-md-block"
             />
@@ -141,6 +171,36 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 </span>
               </span>
             </p>
+            <div
+              className="d-flex align-items-center mt-3 mb-2rem"
+            >
+              <span
+                className="pgn__icon icon-visibility-off"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <div
+                className="username-description"
+              >
+                <span>
+                  Your profile information is only visible to you. Only your username is visible to others on localhost.
+                </span>
+              </div>
+            </div>
             <hr
               className="d-none d-md-block"
             />
@@ -319,17 +379,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           className="d-none d-md-block float-right"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -341,7 +401,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -355,6 +414,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -397,17 +461,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           className="d-md-none mb-4"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -419,7 +483,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -433,6 +496,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -610,7 +678,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -700,7 +768,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -880,7 +948,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1059,7 +1127,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1149,7 +1217,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1214,17 +1282,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                          className="d-inline-block align-text-top"
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
                         >
-                           
                           <span
                             className="pgn__icon"
                             style={
@@ -1236,7 +1304,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -1250,6 +1317,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                                 fill="currentColor"
                               />
                             </svg>
+                            <span
+                              className="sr-only"
+                            >
+                              in a new tab
+                            </span>
                           </span>
                         </span>
                       </a>
@@ -1370,17 +1442,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           className="d-none d-md-block float-right"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -1392,7 +1464,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -1406,6 +1477,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -1448,17 +1524,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           className="d-md-none mb-4"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
             <span
-              className="d-inline-block align-text-top"
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
             >
-               
               <span
                 className="pgn__icon"
                 style={
@@ -1470,7 +1546,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 <svg
                   aria-hidden={true}
-                  aria-label=""
                   fill="none"
                   focusable={false}
                   height={24}
@@ -1484,6 +1559,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     fill="currentColor"
                   />
                 </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
               </span>
             </span>
           </a>
@@ -1661,7 +1741,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1751,7 +1831,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1931,7 +2011,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2129,7 +2209,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                         <option
                           value="all_users"
                         >
-                          Everyone on edX
+                          Everyone on localhost
                         </option>
                       </select>
                     </span>
@@ -2156,7 +2236,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -2172,9 +2251,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                             </svg>
                           </span>
                         </span>
-                        <span
-                          className=""
-                        >
+                        <span>
                           Saving
                         </span>
                       </span>
@@ -2271,7 +2348,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2336,17 +2413,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                          className="d-inline-block align-text-top"
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
                         >
-                           
                           <span
                             className="pgn__icon"
                             style={
@@ -2358,7 +2435,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -2372,6 +2448,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                                 fill="currentColor"
                               />
                             </svg>
+                            <span
+                              className="sr-only"
+                            >
+                              in a new tab
+                            </span>
                           </span>
                         </span>
                       </a>
@@ -2701,7 +2782,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2791,7 +2872,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2971,7 +3052,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -3150,7 +3231,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -3240,7 +3321,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -3305,17 +3386,17 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
                         <span
-                          className="d-inline-block align-text-top"
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
                         >
-                           
                           <span
                             className="pgn__icon"
                             style={
@@ -3327,7 +3408,6 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                           >
                             <svg
                               aria-hidden={true}
-                              aria-label=""
                               fill="none"
                               focusable={false}
                               height={24}
@@ -3341,6 +3421,11 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                                 fill="currentColor"
                               />
                             </svg>
+                            <span
+                              className="sr-only"
+                            >
+                              in a new tab
+                            </span>
                           </span>
                         </span>
                       </a>

src/profile/data/selectors.js

@@ -335,6 +335,7 @@ export const profilePageSelector = createSelector(
     profileImage,
     requiresParentalConsent: account.requiresParentalConsent,
     dateJoined: account.dateJoined,
+    yearOfBirth: account.yearOfBirth,
 
     // Bio form data
     bio: formValues.bio,

src/profile/forms/elements/Visibility.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';
 
@@ -10,7 +11,7 @@ function Visibility({ to, intl }) {
   const icon = to === 'private' ? faEyeSlash : faEye;
   const label = to === 'private'
     ? intl.formatMessage(messages['profile.visibility.who.just.me'])
-    : intl.formatMessage(messages['profile.visibility.who.everyone']);
+    : intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME });
 
   return (
     <span className="ml-auto small text-muted">
@@ -43,7 +44,7 @@ function VisibilitySelect({ intl, className, ...props }) {
           {intl.formatMessage(messages['profile.visibility.who.just.me'])}
         </option>
         <option key="all_users" value="all_users">
-          {intl.formatMessage(messages['profile.visibility.who.everyone'])}
+          {intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME })}
         </option>
       </select>
     </span>

src/profile/forms/elements/Visibility.messages.jsx

@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   'profile.visibility.who.everyone': {
     id: 'profile.visibility.who.everyone',
-    defaultMessage: 'Everyone on edX',
+    defaultMessage: 'Everyone on {siteName}',
     description: 'What users can see this area?',
   },
 });

src/profile/index.scss

@@ -23,6 +23,28 @@
   background-size: auto 85%;
 }
 
+.username-description {
+  width: auto;
+  position: absolute;
+  left: 1.5rem;
+  top: 5.25rem;
+  color: $gray-500;
+  line-height: 0.9rem;
+  font-size: 0.8rem;
+  font-style: normal;
+  font-weight: 400;
+  margin-left: 0.9rem;
+}
+
+.mb-2rem {
+  margin-bottom: 2rem;
+}
+
+.icon-visibility-off {
+  height: 1rem;
+  color: $gray-500;
+}
+
 .profile-page {
   .edit-section-header {
     @extend .h6;