update: profile POC from master (#926)

* Update dependencies and visibility in Profile page

---------

Co-authored-by: jsnwesson <jsnwesson@users.noreply.github.com>

package-lock.json

@@ -10,8 +10,8 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-        "@edx/frontend-component-footer": "12.5.1",
+        "@edx/frontend-component-footer": "12.6.0",
-        "@edx/frontend-component-header": "4.8.0",
+        "@edx/frontend-component-header": "4.10.1",
         "@edx/frontend-platform": "5.6.1",
         "@edx/paragon": "^20.44.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -21,7 +21,7 @@
         "@fortawesome/react-fontawesome": "0.2.0",
         "@pact-foundation/pact": "^11.0.2",
         "classnames": "2.3.2",
-        "core-js": "3.33.1",
+        "core-js": "3.33.3",
         "history": "5.3.0",
         "lodash.camelcase": "4.3.0",
         "lodash.get": "4.4.2",
@@ -48,11 +48,10 @@
         "@commitlint/cli": "17.8.1",
         "@commitlint/config-angular": "17.8.1",
         "@edx/browserslist-config": "^1.1.1",
-        "@edx/frontend-build": "13.0.4",
+        "@edx/frontend-build": "13.0.8",
         "@edx/reactifex": "2.2.0",
         "@testing-library/react": "12.1.5",
         "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
-        "codecov": "3.8.3",
         "enzyme": "3.11.0",
         "glob": "10.3.10",
         "react-test-renderer": "17.0.2",
@@ -2511,9 +2510,9 @@
       }
     },
     "node_modules/@edx/frontend-build": {
-      "version": "13.0.4",
+      "version": "13.0.8",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-13.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-13.0.8.tgz",
-      "integrity": "sha512-c6i4h19as3vNMIgo+vLNhBk3cM4TOUtBrgYmLrzLtLcWsNZUojnrufrLOdtWmNNKylcBUI9Lvyv++/KrtfJo9w==",
+      "integrity": "sha512-TXUoF7BTIHe4h+W4Dt9+Gf8PXnfVJRwLKitEkpYUH5r4kDEJfyKKGYSbizkciGI+9QScbhm2u8Alv2agDXV1TA==",
       "dependencies": {
         "@babel/cli": "7.22.5",
         "@babel/core": "7.22.5",
@@ -2557,17 +2556,17 @@
         "postcss": "8.4.31",
         "postcss-custom-media": "10.0.2",
         "postcss-loader": "7.3.3",
-        "postcss-rtlcss": "4.0.8",
+        "postcss-rtlcss": "4.0.9",
         "react-dev-utils": "12.0.1",
         "react-refresh": "0.14.0",
         "resolve-url-loader": "5.0.0",
-        "sass": "1.65.1",
+        "sass": "1.69.5",
         "sass-loader": "13.3.2",
         "sharp": "0.32.6",
         "source-map-loader": "4.0.1",
         "style-loader": "3.3.3",
         "url-loader": "4.1.1",
-        "webpack": "5.88.2",
+        "webpack": "5.89.0",
         "webpack-bundle-analyzer": "4.9.1",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "4.15.1",
@@ -2581,9 +2580,9 @@
       }
     },
     "node_modules/@edx/frontend-component-footer": {
-      "version": "12.5.1",
+      "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.6.0.tgz",
-      "integrity": "sha512-bLXfSDyyf8z+n4VXkraQ98qhkc+ZXuvRy65kXUE3s560oDv0qdiKU054W8uPY6wtsdu4WQ50C/Mluxzd60UKUg==",
+      "integrity": "sha512-s+YwcThkETBcyRji2Zl7CTYebrsqevP0rmTYyycEL952HkpbQ7EY8Ym0wYH2sp/ZnZ9bTyEeWsiQS5l7eMyY1A==",
       "dependencies": {
         "@edx/paragon": "^21.3.1",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
@@ -2750,17 +2749,17 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "version": "4.8.0",
+      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.10.1.tgz",
-      "integrity": "sha512-1uzT4LbDgiAYw9+WhbX6r3NGcA5DgscW7SzxXiqSqBM2ND9ym411eczVrxFzc7XGr0eZkQTrsgNDX7xagunYsg==",
+      "integrity": "sha512-bcQ+ebdy/lM2TfLVB+WhdWNsuc51cFVgt5UQuJcV5nw6ACYUkBVTLbGDT7J8797bsQe6Lywg7Cj9ykB+Dy78Kw==",
       "dependencies": {
-        "@edx/paragon": "21.5.3",
+        "@edx/paragon": "21.5.6",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-brands-svg-icons": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
         "@fortawesome/free-solid-svg-icons": "6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "axios-mock-adapter": "1.21.5",
+        "axios-mock-adapter": "1.22.0",
         "babel-polyfill": "6.26.0",
         "react-responsive": "8.2.0",
         "react-transition-group": "4.4.5"
@@ -2773,9 +2772,9 @@
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@edx/paragon": {
-      "version": "21.5.3",
+      "version": "21.5.6",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.5.6.tgz",
-      "integrity": "sha512-Xyq7gWLb4n8qWMsNBIPV3tZnOK0bBdHyqj8UVOrFbpBCSPlOES06qpcpT4IrtpfCh0LmUCBiIk5j9XMz3p6zaw==",
+      "integrity": "sha512-CWR9mFBQAnZ29GeP8igPk3dBLgIQmZJ6tZQiou6855TjHIXcvgmbIvtchKw9SgzhW+D5B0hQJet94zsm+GG/Rg==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
@@ -6207,16 +6206,6 @@
         "sprintf-js": "~1.0.2"
       }
     },
-    "node_modules/argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha512-dEamhpPEwRUBpLNHeuCm/v+g0anFByHahxodVO/BbAarHVBBg2MccCwf9K+o1Pof+2btdnkJelYVUWjW/VrATw==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.10"
-      }
-    },
     "node_modules/aria-hidden": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
@@ -6540,9 +6529,9 @@
       }
     },
     "node_modules/axios-mock-adapter": {
-      "version": "1.21.5",
+      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.5.tgz",
+      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.22.0.tgz",
-      "integrity": "sha512-5NI1V/VK+8+JeTF8niqOowuysA4b8mGzdlMN/QnTnoXbYh4HZSNiopsDclN2g/m85+G++IrEtUdZaQ3GnaMsSA==",
+      "integrity": "sha512-dmI0KbkyAhntUR05YY96qg2H6gg0XMl2+qTW0xmYg6Up+BFBAJYRLROMXRdDEL06/Wqwa0TJThAYvFtSFdRCZw==",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "is-buffer": "^2.0.5"
@@ -7312,9 +7301,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001558",
+      "version": "1.0.30001563",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001558.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001563.tgz",
-      "integrity": "sha512-/Et7DwLqpjS47JPEcz6VnxU9PwcIdVi0ciLXRWBQdj1XFye68pSQYpV0QtPTfUKWuOaEig+/Vez2l74eDc1tPQ==",
+      "integrity": "sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7686,26 +7675,6 @@
         "node": ">= 0.12.0"
       }
     },
-    "node_modules/codecov": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.3.tgz",
-      "integrity": "sha512-Y8Hw+V3HgR7V71xWH2vQ9lyS358CbGCldWlJFR0JirqoGtOoas3R3/OclRTvgUYFK29mmJICDPauVKmpqbwhOA==",
-      "deprecated": "https://about.codecov.io/blog/codecov-uploader-deprecation-plan/",
-      "dev": true,
-      "dependencies": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.4",
-        "js-yaml": "3.14.1",
-        "teeny-request": "7.1.1",
-        "urlgrey": "1.0.0"
-      },
-      "bin": {
-        "codecov": "bin/codecov"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -7954,9 +7923,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.33.1",
+      "version": "3.33.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.1.tgz",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.3.tgz",
-      "integrity": "sha512-qVSq3s+d4+GsqN0teRCJtM6tdEEXyWxjzbhVrCHmBS5ZTM0FS2MOS0D13dUXAWDUN6a+lHI/N1hF9Ytz6iLl9Q==",
+      "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -10188,21 +10157,6 @@
       "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
       "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA=="
     },
-    "node_modules/fast-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^1.3.2"
-      }
-    },
-    "node_modules/fast-url-parser/node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-      "dev": true
-    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -11833,15 +11787,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^3.0.4"
-      }
-    },
     "node_modules/image-minimizer-webpack-plugin": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-3.8.3.tgz",
@@ -15659,48 +15604,6 @@
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
       "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
     },
-    "node_modules/node-fetch": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
-      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
-      "dev": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-fetch/node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
-    },
-    "node_modules/node-fetch/node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
-    },
-    "node_modules/node-fetch/node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -17209,14 +17112,14 @@
       }
     },
     "node_modules/postcss-rtlcss": {
-      "version": "4.0.8",
+      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-4.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-4.0.9.tgz",
-      "integrity": "sha512-CR2sY889PHnX6K8rjW9FG4Qvm9UJsIekDakMtEYGH3zgFp9XADMeaKcA0hPOmkClNh0jWbkaPBm0jZ6fHmqkJQ==",
+      "integrity": "sha512-dCNKEf+FgTv+EA3XI8ysg2RnpS5s3/iZmU+9qpCNFxHU/BhK+4hz7jyCsCAfo0CLnDrMPtaQENhwb+EGm1wh7Q==",
       "dependencies": {
-        "rtlcss": "4.1.0"
+        "rtlcss": "4.1.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.4.21"
@@ -18895,9 +18798,9 @@
       }
     },
     "node_modules/rtlcss": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.1.tgz",
-      "integrity": "sha512-W+N4hh0nVqVrrn3mRkHakxpB+c9cQ4CRT67O39kgA+1DjyhrdsqyCqIuHXyvWaXn4/835n+oX3fYJCi4+G/06A==",
+      "integrity": "sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==",
       "dependencies": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0",
@@ -19275,9 +19178,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.65.1",
+      "version": "1.69.5",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
-      "integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -20315,15 +20218,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "dependencies": {
-        "stubs": "^3.0.0"
-      }
-    },
     "node_modules/streamx": {
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.0.tgz",
@@ -20531,12 +20425,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==",
-      "dev": true
-    },
     "node_modules/style-loader": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
@@ -20755,31 +20643,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/teeny-request": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.1.1.tgz",
-      "integrity": "sha512-iwY6rkW5DDGq8hE2YgNQlKbptYpY5Nn2xecjQiNjOXWbKzPGUfmeUBCSQbbr306d7Z7U2N0TPl+/SwYRfua1Dg==",
-      "dev": true,
-      "dependencies": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.1",
-        "stream-events": "^1.0.5",
-        "uuid": "^8.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/teeny-request/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/terminal-link": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
@@ -21540,15 +21403,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/urlgrey": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-1.0.0.tgz",
-      "integrity": "sha512-hJfIzMPJmI9IlLkby8QrsCykQ+SXDeO2W5Q9QTW3QpqZVTx4a/K7p8/5q+/isD8vsbVaFgql/gvAoQCRQ2Cb5w==",
-      "dev": true,
-      "dependencies": {
-        "fast-url-parser": "^1.1.3"
-      }
-    },
     "node_modules/use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -21742,9 +21596,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.88.2",
+      "version": "5.89.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz",
-      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
+      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.0",

package.json

@@ -29,8 +29,8 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.5.1",
+    "@edx/frontend-component-footer": "12.6.0",
-    "@edx/frontend-component-header": "4.8.0",
+    "@edx/frontend-component-header": "4.10.1",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^20.44.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -40,7 +40,7 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@pact-foundation/pact": "^11.0.2",
     "classnames": "2.3.2",
-    "core-js": "3.33.1",
+    "core-js": "3.33.3",
     "history": "5.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
@@ -67,11 +67,10 @@
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-angular": "17.8.1",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "13.0.4",
+    "@edx/frontend-build": "13.0.8",
     "@edx/reactifex": "2.2.0",
     "@testing-library/react": "12.1.5",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
-    "codecov": "3.8.3",
     "enzyme": "3.11.0",
     "glob": "10.3.10",
     "react-test-renderer": "17.0.2",

src/profile/ProfilePage.jsx

@@ -126,7 +126,7 @@ class ProfilePage extends React.Component {
 
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -178,6 +178,7 @@ class ProfilePage extends React.Component {
       visibilityLearningGoal,
       languageProficiencies,
       visibilityLanguageProficiencies,
+      courseCertificates,
       visibilityCourseCertificates,
       bio,
       visibilityBio,
@@ -196,6 +197,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">
@@ -213,7 +225,7 @@ class ProfilePage extends React.Component {
             </div>
           </div>
           <div>PluginPOC</div>
-          <div className="col pl-0">
+          <div className="col">
             <div className="d-md-none">
               {this.renderHeadingLockup()}
             </div>
@@ -231,46 +243,58 @@ class ProfilePage extends React.Component {
             <div className="d-md-none mb-4">
               {this.renderViewMyRecordsButton()}
             </div>
-            <Name
+            {isNameBlockVisible && (
-              name={name}
+              <Name
-              visibilityName={visibilityName}
+                name={name}
-              formId="name"
+                visibilityName={visibilityName}
-              {...commonFormProps}
+                formId="name"
-            />
+                {...commonFormProps}
-            <Country
+              />
-              country={country}
+            )}
-              visibilityCountry={visibilityCountry}
+            {isLocationBlockVisible && (
-              formId="country"
+              <Country
-              {...commonFormProps}
+                country={country}
-            />
+                visibilityCountry={visibilityCountry}
-            <PreferredLanguage
+                formId="country"
-              languageProficiencies={languageProficiencies}
+                {...commonFormProps}
-              visibilityLanguageProficiencies={visibilityLanguageProficiencies}
+              />
-              formId="languageProficiencies"
+            )}
-              {...commonFormProps}
+            {isLanguageBlockVisible && (
-            />
+              <PreferredLanguage
-            <Education
+                languageProficiencies={languageProficiencies}
-              levelOfEducation={levelOfEducation}
+                visibilityLanguageProficiencies={visibilityLanguageProficiencies}
-              visibilityLevelOfEducation={visibilityLevelOfEducation}
+                formId="languageProficiencies"
-              formId="levelOfEducation"
+                {...commonFormProps}
-              {...commonFormProps}
+              />
-            />
+            )}
-            <SocialLinks
+            {isEducationBlockVisible && (
-              socialLinks={socialLinks}
+              <Education
-              draftSocialLinksByPlatform={draftSocialLinksByPlatform}
+                levelOfEducation={levelOfEducation}
-              visibilitySocialLinks={visibilitySocialLinks}
+                visibilityLevelOfEducation={visibilityLevelOfEducation}
-              formId="socialLinks"
+                formId="levelOfEducation"
-              {...commonFormProps}
+                {...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
+            {isBioBlockVisible && (
-              bio={bio}
+              <Bio
-              visibilityBio={visibilityBio}
+                bio={bio}
-              formId="bio"
+                visibilityBio={visibilityBio}
-              {...commonFormProps}
+                formId="bio"
-            />
+                {...commonFormProps}
+              />
+            )}
             {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
               <LearningGoal
                 learningGoal={learningGoal}
@@ -279,11 +303,13 @@ class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             )}
-            <Certificates
+            {isCertificatesBlockVisible && (
-              visibilityCourseCertificates={visibilityCourseCertificates}
+              <Certificates
-              formId="certificates"
+                visibilityCourseCertificates={visibilityCourseCertificates}
-              {...commonFormProps}
+                formId="certificates"
-            />
+                {...commonFormProps}
+              />
+            )}
           </div>
         </div>
       </div>

src/profile/ProfilePage.test.jsx

@@ -114,16 +114,34 @@ 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({
-          params={{ username: 'verified' }} // Override default params
+            ...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
         />
       );
       const tree = renderer.create(component).toJSON();

src/profile/ProfilePluginPage.jsx

@@ -87,7 +87,7 @@ class ProfilePluginPage extends React.Component {
           <Card.Header
             className="pb-5"
             subtitle={(
-              <Hyperlink destination={`/u/${this.props.params.username}`}>
+              <Hyperlink destination={`/u/${this.props.params.username}`} target="_parent">
                 View public profile
               </Hyperlink>
             )}
@@ -146,7 +146,7 @@ class ProfilePluginPage extends React.Component {
 
   render() {
     return (
-      <div className="profile-page">
+      <div className="profile-page overflow-hidden">
         {this.renderContent()}
       </div>
     );
@@ -154,7 +154,7 @@ class ProfilePluginPage extends React.Component {
 }
 
 const SocialLink = ({ url, name, platform }) => (
-  <a href={url} className="font-weight-bold">
+  <a href={url} className="font-weight-bold" target="_parent">
     <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
     {name}
   </a>

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

@@ -107,7 +107,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -116,7 +116,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>
@@ -194,7 +194,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>
@@ -1699,7 +1699,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]}
@@ -2493,7 +2493,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -2502,7 +2502,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>
@@ -2580,7 +2580,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>
@@ -3059,7 +3059,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]}
@@ -3673,7 +3673,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -3682,7 +3682,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>
@@ -3760,7 +3760,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>
@@ -5024,7 +5024,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]}
@@ -5652,7 +5652,7 @@ 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"
 >
@@ -5705,7 +5705,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -5714,9 +5714,9 @@ 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
+              staff
             </h1>
             <p
               className="mb-0"
@@ -5759,7 +5759,52 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         </div>
         <div
           className="d-none d-md-block float-right"
-        />
+        >
+          <a
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <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="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
+              </span>
+            </span>
+          </a>
+        </div>
       </div>
     </div>
     <div
@@ -5775,9 +5820,9 @@ 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
+              staff
             </h1>
             <p
               className="mb-0"
@@ -5820,7 +5865,52 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         </div>
         <div
           className="d-md-none mb-4"
-        />
+        >
+          <a
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <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="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
+              </span>
+            </span>
+          </a>
+        </div>
         <div
           className="pgn-transition-replace-group position-relative mb-5"
           style={
@@ -5828,7 +5918,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={
@@ -5836,7 +5951,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={
@@ -5844,7 +5982,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={
@@ -5852,7 +6013,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}
+              >
+                Education
+              </h2>
+            </div>
+            <p
+              className="h5"
+              data-hj-suppress={true}
+            >
+              Other education
+            </p>
+          </div>
+        </div>
         <div
           className="pgn-transition-replace-group position-relative mb-5"
           style={
@@ -5860,7 +6046,29 @@ 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}
+              >
+                Social Links
+              </h2>
+            </div>
+            <ul
+              className="list-unstyled"
+            />
+          </div>
+        </div>
       </div>
       <div
         className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
@@ -5872,7 +6080,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}
+              >
+                About Me
+              </h2>
+            </div>
+            <p
+              className="lead"
+              data-hj-suppress={true}
+            >
+              bio
+            </p>
+          </div>
+        </div>
         <div
           className="pgn-transition-replace-group position-relative mb-4"
           style={
@@ -5880,7 +6113,27 @@ 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}
+              >
+                My Certificates
+              </h2>
+            </div>
+            You don't have any certificates yet.
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -5963,7 +6216,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -5972,7 +6225,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>
@@ -6050,7 +6303,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>
@@ -7016,7 +7269,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -7025,7 +7278,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>
@@ -7103,7 +7356,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>
@@ -7791,7 +8044,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]}
@@ -8136,7 +8389,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -8145,7 +8398,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>
@@ -8223,7 +8476,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>
@@ -8919,7 +9172,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]}
@@ -9264,7 +9517,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
         PluginPOC
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -9273,7 +9526,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>
@@ -9306,7 +9559,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>

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,

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',
+          visibilityBio: preferences.visibilityBio || 'all_users',
-          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'private',
+          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'all_users',
-          visibilityCountry: preferences.visibilityCountry || 'private',
+          visibilityCountry: preferences.visibilityCountry || 'all_users',
-          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'private',
+          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'all_users',
-          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'private',
+          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
-          visibilityName: preferences.visibilityName || 'private',
+          visibilityName: preferences.visibilityName || 'all_users',
-          visibilitySocialLinks: preferences.visibilitySocialLinks || 'private',
+          visibilitySocialLinks: preferences.visibilitySocialLinks || 'all_users',
         };
       case 'private':
         return {

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]}

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>