Add /admin/dashboard/quicksight endpoint. Ensure iframe is expanding …

…to fit the container.

src/components/DashboardPage.tsx

@@ -47,7 +47,6 @@ export default class DashboardPage extends React.Component<DashboardPageProps> {
         <Header />
         <main className="body">
           <Stats library={library} />
-          <QuicksightDashboard dashboardId="library"/>
           <CirculationEvents
             store={this.context.editorStore}
             library={library}

src/components/QuicksightDashboard.tsx

@@ -42,17 +42,12 @@ export class QuicksightDashboard extends React.Component<
     }
 
     this.props.fetchLibraries().then((libs) => {
-      const library_uuids: string = libs.libraries.map((l) => l.uuid).join(",");
-      let library_uuids_key_pair = "library_uuids=" + library_uuids;
-      // TODO Remove next line once https://github.com/ThePalaceProject/circulation/pull/1548
-      // is merged
-      library_uuids_key_pair = "libraryIds=1";
+      const library_uuids: string = libs.libraries.slice(0,5).map((l) => l.uuid).join(",");
       try {
         fetch(
           "/admin/quicksight_embed/" +
             this.props.dashboardId +
-            "?" +
-            library_uuids_key_pair
+            "?libraryUuids=" + library_uuids
         )
           .then((response) => response.json())
           .then((data) => this.setState({ embedUrl: data["embedUrl"] }))
@@ -67,15 +62,12 @@ export class QuicksightDashboard extends React.Component<
 
   render(): JSX.Element {
     return (
-      <div className="quicksight-dashboard">
-        <h2>Quicksight Dashboard</h2>
         <iframe
           title="Quicksight Dashboard"
-          height="900"
-          width="1200"
+          height="1200"
+          width="100%"
           src={this.state.embedUrl}
         />
-      </div>
     );
   }
 }

src/components/QuicksightDashboardPage.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Store } from "redux";
+import { RootState } from "../store";
+import * as PropTypes from "prop-types";
+import Header from "./Header";
+import Footer from "./Footer";
+import title from "../utils/title";
+import QuicksightDashboard from "./QuicksightDashboard";
+
+export interface QuicksightDashboardPageProps extends React.Props<QuicksightDashboardPageProps> {
+  params: {
+    library?: string;
+  };
+}
+
+export interface QuicksightDashboardPageContext {
+  editorStore: Store<RootState>;
+}
+
+/** Page holds quicksight dashboards. */
+export default class DashboardPage extends React.Component<QuicksightDashboardPageProps> {
+  context: QuicksightDashboardPageContext;
+
+  static contextTypes: React.ValidationMap<QuicksightDashboardPageContext> = {
+    editorStore: PropTypes.object.isRequired as React.Validator<Store>,
+  };
+
+  static childContextTypes: React.ValidationMap<object> = {
+    library: PropTypes.func,
+  };
+
+
+  getChildContext() {
+    return {
+      library: () => this.props.params.library,
+    };
+  }
+
+
+  render(): JSX.Element {
+    const { library } = this.props.params;
+    return (
+      <div className="quicksight-dashboard">
+        <Header />
+        <main className="body">
+          <QuicksightDashboard dashboardId="library"/>
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
+  UNSAFE_componentWillMount() {
+    document.title = title("Quicksight Dashboard");
+  }
+}

src/index.tsx

@@ -9,6 +9,7 @@ import CatalogPage from "./components/CatalogPage";
 import CustomListPage from "./components/CustomListPage";
 import LanePage from "./components/LanePage";
 import DashboardPage from "./components/DashboardPage";
+import QuicksightDashboardPage from "./components/QuicksightDashboardPage";
 import ConfigPage from "./components/ConfigPage";
 import AccountPage from "./components/AccountPage";
 import SetupPage from "./components/SetupPage";
@@ -87,6 +88,10 @@ class CirculationAdmin {
                 path="/admin/web/dashboard(/:library)"
                 component={DashboardPage}
               />
+              <Route
+                  path="/admin/web/dashboard/quicksight(/:library)"
+                  component={QuicksightDashboardPage}
+              />
               <Route
                 path="/admin/web/config(/:tab)(/:editOrCreate)(/:identifier)"
                 component={ConfigPage}

src/stylesheets/quicksight-dashboard.scss

@@ -0,0 +1,7 @@
+.quicksight-dashboard {
+  .body {
+    height: 100%;
+    margin: 10px;
+    margin-top: 60px;
+  }
+}