On this page component (#1504)

1 files changed, 32 insertions, 12 deletions

diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx
index ad93d731..cb070dfb 100644
--- a/plugins/base/frontend/src/main/components/root.tsx
+++ b/plugins/base/frontend/src/main/components/root.tsx
@@ -1,30 +1,50 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import RedBox from 'redbox-react';
+import _ from "lodash";
 
 import App from "./app";
 import './app/index.scss';
 import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch';
+import { PageSummary } from './pageSummary/pageSummary';
 
 const appEl = document.getElementById('searchBar');
 const rootEl = document.createElement('div');
 
 const renderNavigationPane = () => {
-  const element = document.getElementById('paneSearch')
-  if(element){
-    render(
-        <NavigationPaneSearch />,
-        document.getElementById('paneSearch')
-    )
-  }
+  render(
+    <NavigationPaneSearch />,
+    document.getElementById('paneSearch')
+  )
+}
+
+const renderOnThisPage = () => {
+  document.addEventListener('DOMContentLoaded', () => {
+    for (const e of document.querySelectorAll('.tabs-section-body > div[data-togglable]')) {
+      const entries = Array.from(e.querySelectorAll('a[anchor-label]')).map((element: HTMLElement) => {
+        return {
+          location: element.getAttribute('data-name'),
+          label: element.getAttribute('anchor-label'),
+          sourceSets: _.sortBy(element.getAttribute('data-filterable-set').split(' '))
+        }
+      })
+      const unique = _.uniqBy(entries, ({label}) => label)
+      if (unique.length) {
+        const element = document.createElement('div')
+        render(<PageSummary entries={unique} />, element)
+        e.appendChild(element)
+      }
+    }
+  })
 }
 
 let renderApp = () => {
   render(
-      <App/>,
-      rootEl
+    <App />,
+    rootEl
   );
   renderNavigationPane();
+  renderOnThisPage();
 };
 
 // @ts-ignore
@@ -32,8 +52,8 @@ if (module.hot) {
   const renderAppHot = renderApp;
   const renderError = (error: Error) => {
     render(
-        <RedBox error={error}/>,
-        rootEl
+      <RedBox error={error} />,
+      rootEl
     );
   };