build(deps): bump codecov/codecov-action from 4 to 5

Bumps [codecov/codecov-action](https://github.com/codecov/codecov-action) from 4 to 5. - [Release notes](https://github.com/codecov/codecov-action/releases) - [Changelog](https://github.com/codecov/codecov-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/codecov/codecov-action/compare/v4...v5) --- updated-dependencies: - dependency-name: codecov/codecov-action dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
2024-11-25 23:16:07 +00:00
20 changed files with 3839 additions and 14896 deletions
--- a/.env
+++ b/.env
@@ -29,5 +29,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -30,5 +30,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER_PROFILE=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -25,4 +25,3 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -23,7 +23,7 @@ jobs:
    - run: make test NPM_TESTS=${{ matrix.npm-test }}
    - name: Coverage
      if: ${{ matrix.npm-test == 'test' }}
-      uses: codecov/codecov-action@v4
+      uses: codecov/codecov-action@v5
      with:
        token: ${{ secrets.CODECOV_TOKEN }}
        fail_ci_if_error: true
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -17,7 +17,6 @@ metadata:
    openedx.org/arch-interest-groups: ""
    # This can be multiple comma-separated projects.
    openedx.org/add-to-projects: "openedx:23"
-    openedx.org/release: "master"
 spec:
  owner: group:2u-infinity
  type: 'service'
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,6 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
+
+nick: prof
+oeps: {}
+openedx-release: {ref: master}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/profile/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
    "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
  },
@@ -30,32 +29,32 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-platform": "^8.3.1",
-    "@edx/openedx-atlas": "^0.7.0",
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-regular-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-platform": "8.1.2",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "6.6.0",
+    "@fortawesome/free-regular-svg-icons": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
    "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^23.4.5",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.2.2",
    "@pact-foundation/pact": "^11.0.2",
    "@redux-devtools/extension": "3.3.0",
    "classnames": "2.5.1",
-    "core-js": "3.43.0",
+    "core-js": "3.39.0",
    "history": "5.3.0",
    "lodash.camelcase": "4.3.0",
    "lodash.get": "4.4.2",
    "lodash.pick": "4.4.0",
    "lodash.snakecase": "4.1.1",
    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
    "react-helmet": "6.1.0",
    "react-redux": "7.2.9",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
+    "react-router": "6.28.0",
+    "react-router-dom": "6.28.0",
    "redux": "4.2.1",
    "redux-logger": "3.0.6",
    "redux-saga": "1.3.0",
@@ -65,14 +64,14 @@
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-angular": "19.8.1",
+    "@commitlint/cli": "19.6.0",
+    "@commitlint/config-angular": "19.6.0",
    "@edx/browserslist-config": "^1.1.1",
    "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "^14.3.3",
+    "@openedx/frontend-build": "14.2.0",
    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "14.3.1",
-    "glob": "11.0.3",
+    "@testing-library/react": "12.1.5",
+    "glob": "11.0.0",
    "reactifex": "1.1.1",
    "redux-mock-store": "1.5.5"
  }
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -13,12 +13,11 @@ import {
  ErrorPage,
 } from '@edx/frontend-platform/react';

-import React, { StrictMode } from 'react';
-// eslint-disable-next-line import/no-unresolved
-import { createRoot } from 'react-dom/client';
+import React from 'react';
+import ReactDOM from 'react-dom';

 import Header from '@edx/frontend-component-header';
-import { FooterSlot } from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';

 import messages from './i18n';
 import configureStore from './data/configureStore';
@@ -28,24 +27,22 @@ import Head from './head/Head';

 import AppRoutes from './routes/AppRoutes';

-const rootNode = createRoot(document.getElementById('root'));
 subscribe(APP_READY, () => {
-  rootNode.render(
-    <StrictMode>
-      <AppProvider store={configureStore()}>
-        <Head />
-        <Header />
-        <main id="main">
-          <AppRoutes />
-        </main>
-        <FooterSlot />
-      </AppProvider>
-    </StrictMode>,
+  ReactDOM.render(
+    <AppProvider store={configureStore()}>
+      <Head />
+      <Header />
+      <main id="main">
+        <AppRoutes />
+      </main>
+      <FooterSlot />
+    </AppProvider>,
+    document.getElementById('root'),
  );
 });

 subscribe(APP_INIT_ERROR, (error) => {
-  rootNode.render(<ErrorPage message={error.message} />);
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });

 initialize({
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,7 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
-
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/footer";

--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -1,15 +1,12 @@
 # Footer Slot

-### Slot ID: `org.openedx.frontend.layout.footer.v1`
-
-### Slot ID Aliases
-* `footer_slot`
+### Slot ID: `footer_slot`

 ## Description

 This slot is used to replace/modify/hide the footer.

-The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
+The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).

 ## Example

@@ -26,7 +23,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    'org.openedx.frontend.layout.footer.v1': {
+    footer_slot: {
      plugins: [
        {
          // Hide the default footer
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -1,3 +1,3 @@
 # `frontend-app-profile` Plugin Slots

-* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
+* [`footer_slot`](./FooterSlot/)
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -183,19 +183,12 @@ class ProfilePage extends React.Component {
      visibilityBio,
      requiresParentalConsent,
      isLoadingProfile,
-      username,
-      saveState,
-      navigate,
    } = this.props;

    if (isLoadingProfile) {
      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
    }

-    if (!username && saveState === 'error' && navigate) {
-      navigate('/notfound');
-    }
-
    const commonFormProps = {
      openHandler: this.handleOpen,
      closeHandler: this.handleClose,
@@ -337,7 +330,6 @@ ProfilePage.propTypes = {
  // Account data
  requiresParentalConsent: PropTypes.bool,
  dateJoined: PropTypes.string,
-  username: PropTypes.string,

  // Bio form data
  bio: PropTypes.string,
@@ -403,7 +395,6 @@ ProfilePage.propTypes = {
  openForm: PropTypes.func.isRequired,
  closeForm: PropTypes.func.isRequired,
  updateDraft: PropTypes.func.isRequired,
-  navigate: PropTypes.func.isRequired,

  // Router
  params: PropTypes.shape({
@@ -416,7 +407,6 @@ ProfilePage.propTypes = {

 ProfilePage.defaultProps = {
  saveState: null,
-  username: '',
  savePhotoState: null,
  photoUploadError: {},
  profileImage: {},
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { BrowserRouter, useNavigate } from 'react-router-dom';

 import messages from '../i18n';
 import ProfilePage from './ProfilePage';
@@ -17,7 +16,6 @@ import ProfilePage from './ProfilePage';
 const mockStore = configureMockStore([thunk]);
 const storeMocks = {
  loadingApp: require('./__mocks__/loadingApp.mockStore'),
-  invalidUser: require('./__mocks__/invalidUser.mockStore'),
  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore'),
  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore'),
  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore'),
@@ -67,23 +65,6 @@ beforeEach(() => {
  analytics.sendTrackingLogEvent.mockReset();
 });

-const ProfileWrapper = ({ params, requiresParentalConsent }) => {
-  const navigate = useNavigate();
-  return (
-    <ProfilePage
-      {...requiredProfilePageProps}
-      params={params}
-      requiresParentalConsent={requiresParentalConsent}
-      navigate={navigate}
-    />
-  );
-};
-
-ProfileWrapper.propTypes = {
-  params: PropTypes.shape({}).isRequired,
-  requiresParentalConsent: PropTypes.bool.isRequired,
-};
-
 const ProfilePageWrapper = ({
  contextValue, store, params, requiresParentalConsent,
 }) => (
@@ -92,12 +73,7 @@ const ProfilePageWrapper = ({
  >
    <IntlProvider locale="en">
      <Provider store={store}>
-        <BrowserRouter>
-          <ProfileWrapper
-            params={params}
-            requiresParentalConsent={requiresParentalConsent}
-          />
-        </BrowserRouter>
+        <ProfilePage {...requiredProfilePageProps} params={params} requiresParentalConsent={requiresParentalConsent} />
      </Provider>
    </IntlProvider>
  </AppContext.Provider>
@@ -127,16 +103,6 @@ describe('<ProfilePage />', () => {
      expect(tree).toMatchSnapshot();
    });

-    it('successfully redirected to not found page.', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.invalidUser)} />;
-      const { container: tree } = render(component);
-      expect(tree).toMatchSnapshot();
-    });
-
    it('viewing own profile', () => {
      const contextValue = {
        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
--- a/src/profile/mocks/invalidUser.mockStore.js
+++ b/src/profile/mocks/invalidUser.mockStore.js
@@ -1,41 +0,0 @@
-module.exports = {
-  userAccount: {
-    loading: false,
-    error: null,
-    username: 'staff',
-    email: null,
-    bio: null,
-    name: null,
-    country: null,
-    socialLinks: null,
-    profileImage: {
-      imageUrlMedium: null,
-      imageUrlLarge: null
-    },
-    levelOfEducation: null,
-    learningGoal: null
-  },
-  profilePage: {
-    errors: {},
-    saveState: 'error',
-    savePhotoState: null,
-    currentlyEditingField: null,
-    account: {
-      username: '',
-      socialLinks: []
-    },
-    preferences: {},
-    courseCertificates: [],
-    drafts: {},
-    isLoadingProfile: false,
-    isAuthenticatedUserProfile: true,
-  },
-  router: {
-    location: {
-      pathname: '/u/staffTest',
-      search: '',
-      hash: ''
-    },
-    action: 'POP'
-  }
-};
--- a/src/profile/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile/snapshots/ProfilePage.test.jsx.snap
@@ -29,641 +29,6 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
 </div>
 `;

-exports[`<ProfilePage /> Renders correctly in various states successfully redirected to not found page. 1`] = `
-<div>
-  <div
-    class="profile-page"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block p-relative"
-    />
-    <div
-      class="container-fluid"
-    >
-      <div
-        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-      >
-        <div
-          class="col-auto col-md-4 col-lg-3"
-        >
-          <div
-            class="d-flex align-items-center d-md-block"
-          >
-            <div
-              class="profile-avatar-wrap position-relative"
-            >
-              <div
-                class="profile-avatar rounded-circle bg-light"
-              >
-                <div
-                  class="profile-avatar-menu-container"
-                >
-                  <button
-                    class="text-white btn-block btn btn-link btn-sm"
-                    type="button"
-                  >
-                    Upload Photo
-                  </button>
-                </div>
-                <div
-                  aria-hidden="true"
-                  class="text-muted"
-                  data-testid="IconMock"
-                  focusable="false"
-                  role="img"
-                  viewbox="0 0 24 24"
-                />
-              </div>
-              <form
-                enctype="multipart/form-data"
-              >
-                <input
-                  accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
-                  id="photo-file"
-                  name="file"
-                  type="file"
-                />
-              </form>
-            </div>
-          </div>
-        </div>
-        <div
-          class="col"
-        >
-          <div
-            class="d-md-none"
-          >
-            <span
-              data-hj-suppress="true"
-            >
-              <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
-              >
-                staff
-              </h1>
-              <div
-                class="d-flex align-items-center mt-3 mb-2rem"
-              >
-                <span
-                  class="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.45 2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 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 0 0-2.64-2.64l2.64 2.64Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
-                <div
-                  class="username-description"
-                >
-                  Your profile information is only visible to you. Only your username is visible to others on localhost.
-                </div>
-              </div>
-              <hr
-                class="d-none d-md-block"
-              />
-            </span>
-          </div>
-          <div
-            class="d-none d-md-block float-right"
-          >
-            <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
-              href="http://localhost:18150/records"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              View My Records
-              <span
-                class="pgn__hyperlink__external-icon"
-                title="Opens in a new tab"
-              >
-                <span
-                  class="pgn__icon"
-                  data-testid="hyperlink-icon"
-                  style="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
-                    class="sr-only"
-                  >
-                    in a new tab
-                  </span>
-                </span>
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
-      <div
-        class="row"
-      >
-        <div
-          class="col-md-4 col-lg-4"
-        >
-          <div
-            class="d-none d-md-block mb-4"
-          >
-            <span
-              data-hj-suppress="true"
-            >
-              <h1
-                class="h2 mb-0 font-weight-bold text-truncate"
-              >
-                staff
-              </h1>
-              <div
-                class="d-flex align-items-center mt-3 mb-2rem"
-              >
-                <span
-                  class="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.45 2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 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 0 0-2.64-2.64l2.64 2.64Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
-                <div
-                  class="username-description"
-                >
-                  Your profile information is only visible to you. Only your username is visible to others on localhost.
-                </div>
-              </div>
-              <hr
-                class="d-none d-md-block"
-              />
-            </span>
-          </div>
-          <div
-            class="d-md-none mb-4"
-          >
-            <a
-              class="pgn__hyperlink default-link standalone-link btn btn-primary"
-              href="http://localhost:18150/records"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              View My Records
-              <span
-                class="pgn__hyperlink__external-icon"
-                title="Opens in a new tab"
-              >
-                <span
-                  class="pgn__icon"
-                  data-testid="hyperlink-icon"
-                  style="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
-                    class="sr-only"
-                  >
-                    in a new tab
-                  </span>
-                </span>
-              </span>
-            </a>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Full Name
-                </h2>
-              </div>
-              <div>
-                <button
-                  class="pl-0 text-left btn btn-link"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-plus fa-xs mr-2"
-                    data-icon="plus"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Add name
-                </button>
-              </div>
-              <small
-                class="form-text text-muted"
-              >
-                This is the name that appears in your account and on your certificates.
-              </small>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Location
-                </h2>
-              </div>
-              <div>
-                <button
-                  class="pl-0 text-left btn btn-link"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-plus fa-xs mr-2"
-                    data-icon="plus"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Add location
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Primary Language Spoken
-                </h2>
-              </div>
-              <div>
-                <button
-                  class="pl-0 text-left btn btn-link"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-plus fa-xs mr-2"
-                    data-icon="plus"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Add language
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Education
-                </h2>
-              </div>
-              <div>
-                <button
-                  class="pl-0 text-left btn btn-link"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-plus fa-xs mr-2"
-                    data-icon="plus"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Add education
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  Social Links
-                </h2>
-              </div>
-              <ul
-                class="list-unstyled"
-              >
-                <li
-                  class="mb-4"
-                >
-                  <div>
-                    <button
-                      class="pl-0 text-left btn btn-link"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
-                        data-icon="plus"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      Add Twitter
-                    </button>
-                  </div>
-                </li>
-                <li
-                  class="mb-4"
-                >
-                  <div>
-                    <button
-                      class="pl-0 text-left btn btn-link"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
-                        data-icon="plus"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      Add Facebook
-                    </button>
-                  </div>
-                </li>
-                <li
-                  class="mb-4"
-                >
-                  <div>
-                    <button
-                      class="pl-0 text-left btn btn-link"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-plus fa-xs mr-2"
-                        data-icon="plus"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 448 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      Add LinkedIn
-                    </button>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div
-          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-        >
-          <div
-            class="pgn-transition-replace-group position-relative mb-5"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  About Me
-                </h2>
-              </div>
-              <div>
-                <button
-                  class="pl-0 text-left btn btn-link"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-plus fa-xs mr-2"
-                    data-icon="plus"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Add a short bio
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="pgn-transition-replace-group position-relative mb-4"
-          >
-            <div
-              style="padding: .1px 0px;"
-            >
-              <div
-                class="editable-item-header mb-2"
-              >
-                <h2
-                  class="edit-section-header"
-                >
-                  My Certificates
-                  <button
-                    class="float-right px-0 btn btn-link btn-sm"
-                    style="margin-top: -.35rem;"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="svg-inline--fa fa-pencil mr-1"
-                      data-icon="pencil"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 512 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    Edit
-                  </button>
-                </h2>
-                <p
-                  class="mb-0"
-                >
-                  <span
-                    class="ml-auto small text-muted"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="svg-inline--fa fa-eye "
-                      data-icon="eye"
-                      data-prefix="far"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 576 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                     
-                    Everyone on localhost
-                  </span>
-                </p>
-              </div>
-              You don't have any certificates yet.
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<ProfilePage /> Renders correctly in various states test country edit with error 1`] = `
 <div>
  <div
@@ -5768,10 +5133,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              <div
                class="profile-avatar rounded-circle bg-light"
              >
-                <div
+                <iconmock
                  aria-hidden="true"
                  class="text-muted"
-                  data-testid="IconMock"
                  focusable="false"
                  role="img"
                  viewbox="0 0 24 24"
--- a/src/profile/data/reducers.js
+++ b/src/profile/data/reducers.js
@@ -63,14 +63,12 @@ const profilePage = (state = initialState, action = {}) => {
      return {
        ...state,
        saveState: 'error',
-        isLoadingProfile: false,
        errors: { ...state.errors, ...action.payload.errors },
      };
    case SAVE_PROFILE.RESET:
      return {
        ...state,
        saveState: null,
-        isLoadingProfile: false,
        errors: {},
      };

--- a/src/profile/data/sagas.js
+++ b/src/profile/data/sagas.js
@@ -1,3 +1,4 @@
+import { history } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import pick from 'lodash.pick';
 import {
@@ -94,11 +95,7 @@ export function* handleFetchProfile(action) {
    yield put(fetchProfileReset());
  } catch (e) {
    if (e.response.status === 404) {
-      if (e.processedData && e.processedData.fieldErrors) {
-        yield put(saveProfileFailure(e.processedData.fieldErrors));
-      } else {
-        yield put(saveProfileFailure(e.customAttributes));
-      }
+      history.push('/notfound');
    } else {
      throw e;
    }
--- a/src/profile/index.scss
+++ b/src/profile/index.scss
@@ -28,7 +28,7 @@
  position: absolute;
  left: 1.5rem;
  top: 5.25rem;
-  color: var(--pgn-color-gray-500);
+  color: $gray-500;
  line-height: 0.9rem;
  font-size: 0.8rem;
  font-style: normal;
@@ -42,12 +42,12 @@

 .icon-visibility-off {
  height: 1rem;
-  color: var(--pgn-color-gray-500);
+  color: $gray-500;
 }

 .profile-page {
  .edit-section-header {
-    font-size: var(--pgn-typography-font-size-h6-base);
+    @extend .h6;
    display: block;
    font-weight: normal;
    letter-spacing: 0;
@@ -55,11 +55,11 @@
  }

  label.edit-section-header {
-    margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5);
+    margin-bottom: $spacer * .5;
  }

  .profile-avatar-wrap {
-    @media (--pgn-size-breakpoint-min-width-md) {
+    @include media-breakpoint-up(md) {
      max-width: 12rem;
      margin-right: 0;
      margin-top: -8rem;
@@ -77,25 +77,25 @@
    align-items: center;
    border-radius: 50%;

-     @media (--pgn-size-breakpoint-min-width-md) {
+    @include media-breakpoint-up(md) {
      background: linear-gradient(to top, rgba(0,0,0,.65) 4rem, rgba(0,0,0,0) 4rem);
      align-items: flex-end;
    }

    .btn {
      text-decoration: none;
-      @media (--pgn-size-breakpoint-min-width-md) {
+      @include media-breakpoint-up(md) {
        margin-bottom: 1.2rem;
      }
    }

    .dropdown {
-      @media (--pgn-size-breakpoint-min-width-md) {
+      @include media-breakpoint-up(md) {
        margin-bottom: 1.2rem;
      }

      .btn {
-        color: var(--pgn-color-white);
+        color: $white;
        background: transparent;
        border-color: transparent;
        margin: 0;
@@ -108,7 +108,7 @@
    height: 5rem;
    position: relative;

-    @media (--pgn-size-breakpoint-min-width-md) {
+    @include media-breakpoint-up(md) {
      width: 12rem;
      height: 12rem;
    }
@@ -128,7 +128,7 @@
      border-radius:0;
      transition: opacity 200ms ease;

-      @media (--pgn-size-breakpoint-min-width-md) {
+      @include media-breakpoint-up(md) {
        height: 4rem;
      }

@@ -142,7 +142,7 @@
    position: relative;

    .certificate-title {
-      font-family: var(--pgn-typography-font-family-serif);
+      font-family: $font-family-serif;
      font-weight: 400;
    }

--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -3,19 +3,15 @@ import {
  AuthenticatedPageRoute,
  PageWrap,
 } from '@edx/frontend-platform/react';
-import { Routes, Route, useNavigate } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { ProfilePage, NotFoundPage } from '../profile';

-const AppRoutes = () => {
-  const navigate = useNavigate();
-
-  return (
-    <Routes>
-      <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage navigate={navigate} /></AuthenticatedPageRoute>} />
-      <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
-      <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
-    </Routes>
-  );
-};
+const AppRoutes = () => (
+  <Routes>
+    <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
+    <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
+    <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
+  </Routes>
+);

 export default AppRoutes;