Add details view for publications (#3994)

* first mock up

* removed console logging

* refined publication details view

* fixed screenshot tests and adjusted icons

* applied feedback: renaming, shortening and beautifying

frontend/javascripts/dashboard/publication_card.js

@@ -1,5 +1,5 @@
 // @flow
-import { Card, Button } from "antd";
+import { Card, Button, Tooltip, Icon } from "antd";
 import Markdown from "react-remarkable";
 import * as React from "react";
 import classNames from "classnames";
@@ -138,7 +138,7 @@ function PublishedDatasetsOverlay({ datasets, activeDataset, setActiveDataset })
 
 const typeHint: Array<APIDataset> = [];
 
-type Props = { datasets: Array<APIDataset> };
+type Props = { datasets: Array<APIDataset>, showDetailedLink: boolean };
 type State = { activeDataset: APIDataset };
 
 class PublicationCard extends React.PureComponent<Props, State> {
@@ -147,7 +147,7 @@ class PublicationCard extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { datasets } = this.props;
+    const { datasets, showDetailedLink } = this.props;
     const { activeDataset } = this.state;
     const { publication } = activeDataset;
     // This method will only be called for datasets with a publication, but Flow doesn't know that
@@ -167,7 +167,25 @@ class PublicationCard extends React.PureComponent<Props, State> {
       <Card bodyStyle={{ padding: 0 }} className="spotlight-item-card" bordered={false}>
         <div style={{ display: "flex", height: "100%" }}>
           <div className="publication-description">
-            <h3>{publication.title}</h3>
+            <h3 className="container-with-hidden-icon">
+              {publication.title}
+              {showDetailedLink ? (
+                <Link to={`/publication/${publication.id}`}>
+                  <Tooltip title="Open permalink">
+                    <Icon
+                      type="link"
+                      style={{
+                        fontSize: 16,
+                        color: "#555",
+                        marginBottom: 18,
+                        marginLeft: 8,
+                      }}
+                      className="hidden-icon"
+                    />
+                  </Tooltip>
+                </Link>
+              ) : null}
+            </h3>
             <div className="publication-description-body nice-scrollbar">
               <Markdown
                 source={publication.description}

frontend/javascripts/dashboard/publication_details_view.js

@@ -0,0 +1,83 @@
+// @flow
+import * as React from "react";
+import { Layout, Icon, Spin, Tooltip } from "antd";
+
+import { getDatasets } from "admin/admin_rest_api";
+import type { APIDataset, APIMaybeUnimportedDataset } from "admin/api_flow_types";
+import PublicationCard from "dashboard/publication_card";
+import { handleGenericError } from "libs/error_handling";
+import { SimpleHeader } from "dashboard/spotlight_view";
+import { Link } from "react-router-dom";
+
+const { Content } = Layout;
+
+type Props = {
+  publicationId: string,
+};
+
+type State = {
+  datasets: Array<APIMaybeUnimportedDataset>,
+  isLoading: boolean,
+};
+
+class PublicationDetailView extends React.PureComponent<Props, State> {
+  state = {
+    datasets: [],
+    isLoading: true,
+  };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  async fetchData(): Promise<void> {
+    try {
+      this.setState({ isLoading: true });
+      const datasets = await getDatasets();
+      this.setState({ datasets });
+    } catch (error) {
+      handleGenericError(error);
+    } finally {
+      this.setState({ isLoading: false });
+    }
+  }
+
+  render() {
+    const { isLoading, datasets } = this.state;
+    const datasetsOfPublication = ((datasets.filter(
+      ds => ds.isActive && ds.publication != null && ds.publication.id === this.props.publicationId,
+    ): any): Array<APIDataset>);
+    return (
+      <Layout>
+        <SimpleHeader />
+        <Content className="centered-content">
+          <Spin size="large" spinning={isLoading}>
+            {datasetsOfPublication.length > 0 ? (
+              <React.Fragment>
+                <Link to="/">
+                  <Tooltip title="Back to the frontpage.">
+                    <Icon
+                      type="arrow-left"
+                      style={{ fontSize: 24, color: "#555", marginBottom: 18 }}
+                    />
+                  </Tooltip>
+                </Link>
+                <div style={{ display: "inline-block", verticalAlign: "top" }}>Back</div>
+                <PublicationCard
+                  className="dataset-panel"
+                  datasets={datasetsOfPublication}
+                  showDetailedLink={false}
+                />
+              </React.Fragment>
+            ) : null}
+            {!isLoading && datasetsOfPublication.length === 0 ? (
+              <p style={{ textAlign: "center" }}>There are not datasets for this publication.</p>
+            ) : null}
+          </Spin>
+        </Content>
+      </Layout>
+    );
+  }
+}
+
+export default PublicationDetailView;

frontend/javascripts/dashboard/publication_view.js

@@ -43,7 +43,7 @@ class PublicationView extends React.PureComponent<Props> {
           className="antd-no-border-list"
           renderItem={datasets => (
             <List.Item key={datasets[0].publication.id}>
-              <PublicationCard className="dataset-panel" datasets={datasets} />
+              <PublicationCard className="dataset-panel" datasets={datasets} showDetailedLink />
             </List.Item>
           )}
         />

frontend/javascripts/dashboard/spotlight_view.js

@@ -16,7 +16,7 @@ import features from "features";
 const { Content } = Layout;
 const { Search } = Input;
 
-const SimpleHeader = () => (
+export const SimpleHeader = () => (
   <div id="oxalis-header">
     <img
       src="/assets/images/oxalis.svg"
@@ -233,7 +233,7 @@ class SpotlightView extends React.PureComponent<PropsWithRouter, State> {
     return (
       <Layout>
         {useOnboardingFlow ? <WelcomeHeader history={this.props.history} /> : <SimpleHeader />}
-        <Content style={{ padding: 50, minWidth: 900, maxWidth: 1500, margin: "auto" }}>
+        <Content className="centered-content">
           <div className="pull-right">{this.state.datasets.length > 0 && search}</div>
           <h3>Featured Publications</h3>
           <div className="clearfix" style={{ margin: "20px 0px" }} />

frontend/javascripts/router.js

@@ -17,6 +17,7 @@ import ChangePasswordView from "admin/auth/change_password_view";
 import DashboardView, { urlTokenToTabKeyMap } from "dashboard/dashboard_view";
 import DatasetAddView from "admin/dataset/dataset_add_view";
 import DatasetImportView from "dashboard/dataset/dataset_import_view";
+import PublicationDetailView from "dashboard/publication_details_view";
 import DisableGenericDnd from "components/disable_generic_dnd";
 import FinishResetPasswordView from "admin/auth/finish_reset_password_view";
 import KeyboardShortcutView from "admin/help/keyboardshortcut_view";
@@ -148,7 +149,7 @@ class ReactRouter extends React.Component<Props> {
                 isAuthenticated={isAuthenticated}
                 path="/dashboard/:tab"
                 render={({ match }: ContextRouter) => {
-                  const tab = match.params.tab;
+                  const { tab } = match.params;
                   const initialTabKey = tab ? urlTokenToTabKeyMap[tab] : null;
                   return (
                     <DashboardView
@@ -422,6 +423,12 @@ class ReactRouter extends React.Component<Props> {
                   />
                 )}
               />
+              <Route
+                path="/publication/:id"
+                render={({ match }: ContextRouter) => (
+                  <PublicationDetailView publicationId={match.params.id || ""} />
+                )}
+              />
               <Route path="/imprint" component={Imprint} />
               <Route path="/privacy" component={Privacy} />
               <Route path="/onboarding" component={Onboarding} />

frontend/stylesheets/main.less

@@ -120,6 +120,24 @@ td.nowrap * {
   }
 }
 
+.centered-content{
+  padding: 50px; 
+  min-width: 900px;
+  max-width: 1500px;
+  margin: auto; 
+}
+
+.container-with-hidden-icon{
+  .hidden-icon{
+    visibility:hidden;
+  }
+  &:hover{
+    .hidden-icon{
+      visibility: visible;
+    }
+  }
+}
+
 #spotlight-footnote {
   text-align: center;
   margin: 30px 0;