Update Learner Program Record Styling and remove header (#3593)

Author: annagav

frontend/public/scss/learner-records.scss

@@ -20,17 +20,13 @@
     }
 
     div.learner-record-inst-logo {
-      padding: 20px 40px;
-      border: 1px solid $home-page-border-grey;
-      border-radius: 5px;
-      align-self: start;
-      align-items: center;
-      margin: 0;
+      display: flex;
+      padding: 20px 32px 20px 32px;
     }
 
-    img {
-      width: 200px;
-      height: auto;
+    .learner-record-inst-logo img {
+      height: 30.7569px;
+      opacity: 1;
     }
   }
 

frontend/public/src/containers/App.js

@@ -95,6 +95,20 @@ export class App extends React.Component<Props, void> {
     )
   }
 
+  isLearnerRecordsPage() {
+    const { match, location } = this.props
+    return (
+      !!matchPath(location.pathname, {
+        path:  urljoin(match.url, String(routes.learnerRecords)),
+        exact: false
+      }) ||
+      !!matchPath(location.pathname, {
+        path:  urljoin(match.url, String(routes.sharedLearnerRecord)),
+        exact: false
+      })
+    )
+  }
+
   render() {
     const { match, currentUser, cartItemsCount, location } = this.props
     if (!currentUser) {
@@ -104,7 +118,9 @@ export class App extends React.Component<Props, void> {
 
     return (
       <div className="app" aria-flowto="notifications-container">
-        {!this.isEcomServiceMode() && !this.isCheckoutRelatedPage() && (
+        {!this.isEcomServiceMode() &&
+          !this.isCheckoutRelatedPage() &&
+          !this.isLearnerRecordsPage() && (
           <Header
             currentUser={currentUser}
             cartItemsCount={currentUser.is_authenticated ? cartItemsCount : 0}

frontend/public/src/containers/App_test.js

@@ -183,6 +183,40 @@ describe("Top-level App", () => {
     assert.isFalse(inner.find("Header").exists())
   })
 
+  it("does not render header on learner record page", async () => {
+    helper.handleRequestStub.returns(anonymousUser)
+    renderPage = helper.configureMountRenderer(
+      App,
+      InnerApp,
+      {},
+      {
+        match:    { url: routes.root },
+        location: {
+          pathname: "/records/1/"
+        }
+      }
+    )
+    const { inner } = await renderPage()
+    assert.isFalse(inner.find("Header").exists())
+  })
+
+  it("does not render header on shared learner record page", async () => {
+    helper.handleRequestStub.returns(anonymousUser)
+    renderPage = helper.configureMountRenderer(
+      App,
+      InnerApp,
+      {},
+      {
+        match:    { url: routes.root },
+        location: {
+          pathname: "/records/shared/test-uuid/"
+        }
+      }
+    )
+    const { inner } = await renderPage()
+    assert.isFalse(inner.find("Header").exists())
+  })
+
   it("renders header on dashboard page", async () => {
     helper.handleRequestStub.returns(anonymousUser)
     renderPage = helper.configureMountRenderer(

frontend/public/src/containers/pages/records/LearnerRecordsPage.js

@@ -476,7 +476,7 @@ export class LearnerRecordsPage extends React.Component<Props, State> {
                 <h3 className="learner-record-program-title">
                   {learnerRecord ?
                     learnerRecord.program.title :
-                    "MITx Online Program Record"}
+                    "MIT Learn Program Record"}
                 </h3>
                 <p>Program Record</p>
               </div>
@@ -517,7 +517,7 @@ export class LearnerRecordsPage extends React.Component<Props, State> {
                   id="learner-record-school-name"
                 >
                   <div className="w-auto">
-                    <div>MITx Online Program Record</div>
+                    <div>MIT Learn Program Record</div>
                     <h1 className="learner-record-program-title">
                       {learnerRecord ? learnerRecord.program.title : null}
                     </h1>
@@ -537,8 +537,8 @@ export class LearnerRecordsPage extends React.Component<Props, State> {
                   </div>
                   <div className="learner-record-inst-logo">
                     <img
-                      src="/static/images/mitx-online-logo.png"
-                      alt="MITx Online Logo"
+                      src="/static/images/mit-black-logo.png"
+                      alt="MIT Logo"
                     />
                   </div>
                 </div>

frontend/public/src/containers/pages/records/LearnerRecordsPage_test.js

@@ -0,0 +1,68 @@
+// @flow
+import { assert } from "chai"
+import { shallow } from "enzyme"
+
+import LearnerRecordsPage, {
+  LearnerRecordsPage as InnerLearnerRecordsPage
+} from "./LearnerRecordsPage"
+import { makeLearnerRecord } from "../../../factories/course"
+import IntegrationTestHelper from "../../../util/integration_test_helper"
+
+describe("LearnerRecordsPage", () => {
+  let helper, renderPage
+
+  beforeEach(() => {
+    helper = new IntegrationTestHelper()
+    global.SETTINGS = {
+      site_name:     "MITx Online",
+      support_email: "support@example.com"
+    }
+
+    renderPage = helper.configureShallowRenderer(
+      LearnerRecordsPage,
+      InnerLearnerRecordsPage,
+      {},
+      {
+        learnerRecord:       null,
+        isSharedRecord:      false,
+        history:             {},
+        isLoading:           false,
+        addUserNotification: helper.sandbox.stub(),
+        forceRequest:        helper.sandbox.stub(),
+        enableRecordSharing: helper.sandbox.stub().resolves({}),
+        revokeRecordSharing: helper.sandbox.stub().resolves({}),
+        match:               { params: { program: "1" } },
+        currentUser:         { is_authenticated: true }
+      }
+    )
+  })
+
+  afterEach(() => {
+    helper.cleanup()
+    delete global.SETTINGS
+  })
+
+  it("keeps the records page title banner", async () => {
+    const { inner } = await renderPage()
+    const pageHeader = inner.find(".std-page-header").first()
+
+    assert.isTrue(pageHeader.exists())
+    assert.equal(pageHeader.find("h1").first().text(), "Program Record")
+  })
+
+  it("renders the MIT logo in the learner record header", async () => {
+    const learnerRecord = makeLearnerRecord(true)
+    const { inner } = await renderPage({}, { learnerRecord })
+    const learnerRecordTable = shallow(
+      inner.instance().renderLearnerRecordTable(learnerRecord)
+    )
+
+    const logo = learnerRecordTable
+      .find(".learner-record-inst-logo img")
+      .first()
+
+    assert.isTrue(logo.exists())
+    assert.equal(logo.prop("src"), "/static/images/mit-black-logo.png")
+    assert.equal(logo.prop("alt"), "MIT Logo")
+  })
+})