Update the React Explorer to use the admin_display_title instead of the regular page title

client/src/components/Explorer/ExplorerHeader.js

@@ -20,7 +20,7 @@ const ExplorerHeader = ({ page, depth, onClick }) => {
     >
       <div className="c-explorer__header__inner">
         <Icon name={isRoot ? 'home' : 'arrow-left'} />
-        <span>{page.title || STRINGS.PAGES}</span>
+        <span>{page.admin_display_title || STRINGS.PAGES}</span>
       </div>
     </Button>
   );
@@ -29,7 +29,7 @@ const ExplorerHeader = ({ page, depth, onClick }) => {
 ExplorerHeader.propTypes = {
   page: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    title: PropTypes.string,
+    admin_display_title: PropTypes.string,
   }).isRequired,
   depth: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,

client/src/components/Explorer/ExplorerHeader.test.js

@@ -24,7 +24,7 @@ describe('ExplorerHeader', () => {
   });
 
   it('#page', () => {
-    expect(shallow(<ExplorerHeader {...mockProps} page={{ id: 'a', title: 'test' }} />)).toMatchSnapshot();
+    expect(shallow(<ExplorerHeader {...mockProps} page={{ id: 'a', admin_display_title: 'test' }} />)).toMatchSnapshot();
   });
 
   it('#onClick', () => {

client/src/components/Explorer/ExplorerItem.js

@@ -24,7 +24,7 @@ const nextIcon = (
  * and information depending on the metadata of the page.
  */
 const ExplorerItem = ({ item, onClick }) => {
-  const { id, title, meta } = item;
+  const { id, admin_display_title: title, meta } = item;
   const hasChildren = meta.children.count > 0;
   const isPublished = meta.status.live && !meta.status.has_unpublished_changes;
 
@@ -64,7 +64,7 @@ const ExplorerItem = ({ item, onClick }) => {
 ExplorerItem.propTypes = {
   item: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    title: PropTypes.string.isRequired,
+    admin_display_title: PropTypes.string.isRequired,
     meta: PropTypes.shape({
       status: PropTypes.object.isRequired,
     }).isRequired,

client/src/components/Explorer/ExplorerItem.test.js

@@ -6,7 +6,7 @@ import ExplorerItem from './ExplorerItem';
 const mockProps = {
   item: {
     id: 5,
-    title: 'test',
+    admin_display_title: 'test',
     meta: {
       latest_revision_created_at: null,
       status: {

client/src/components/Explorer/ExplorerPanel.test.js

@@ -57,8 +57,8 @@ describe('ExplorerPanel', () => {
         {...mockProps}
         page={{ children: { items: [1, 2] } }}
         nodes={{
-          1: { id: 1, title: 'Test', meta: { status: {}, type: 'test' } },
-          2: { id: 2, title: 'Foo', meta: { status: {}, type: 'foo' } },
+          1: { id: 1, admin_display_title: 'Test', meta: { status: {}, type: 'test' } },
+          2: { id: 2, admin_display_title: 'Foo', meta: { status: {}, type: 'foo' } },
         }}
       />
     ))).toMatchSnapshot();
@@ -103,7 +103,7 @@ describe('ExplorerPanel', () => {
           {...mockProps}
           path={[1]}
           page={{ children: { items: [1] } }}
-          nodes={{ 1: { id: 1, title: 'Test', meta: { status: {}, type: 'test' } } }}
+          nodes={{ 1: { id: 1, admin_display_title: 'Test', meta: { status: {}, type: 'test' } } }}
         />
       )).find('ExplorerItem').prop('onClick')({
         preventDefault() {},

client/src/components/Explorer/__snapshots__/ExplorerPanel.test.js.snap

@@ -190,12 +190,12 @@ exports[`ExplorerPanel #items 1`] = `
           <ExplorerItem
             item={
               Object {
+                "admin_display_title": "Test",
                 "id": 1,
                 "meta": Object {
                   "status": Object {},
                   "type": "test",
                 },
-                "title": "Test",
               }
             }
             onClick={[Function]}
@@ -203,12 +203,12 @@ exports[`ExplorerPanel #items 1`] = `
           <ExplorerItem
             item={
               Object {
+                "admin_display_title": "Foo",
                 "id": 2,
                 "meta": Object {
                   "status": Object {},
                   "type": "foo",
                 },
-                "title": "Foo",
               }
             }
             onClick={[Function]}