From 1598b04ed6d4330ce896b016e9e5d69fa99e9cb9 Mon Sep 17 00:00:00 2001
From: Christoph Ladurner <christoph.ladurner@tugraz.at>
Date: Mon, 21 Dec 2020 15:00:42 +0100
Subject: [PATCH 1/4] feature(ui): override the default search react app from
 invenio-app-rdm

The look of the result entries should now be the same as on the frontpage.

The main difference from the default layout is that the access badge is not more a
badge. It is now in the footer on the right side. The main reason is that the
green color of the badge could lead to the wrong conclusion that if this record
has the access right "Open Acess" it would be a "Green Open Access" record.

NOTES:
It was necessary to import also some React classes into the components.js file
which were not really overriden. This was because it was not possible to import
it from invenio-app-rdm/search/components.js directly. This should be repaired
in some ways.
---
 .../invenio_theme_tugraz/search/components.js | 321 ++++++++++++++++++
 .../js/invenio_theme_tugraz/search/index.js   |  30 ++
 .../less/invenio_theme_tugraz/search.less     |  28 ++
 .../less/invenio_theme_tugraz/theme.less      |   1 +
 invenio_theme_tugraz/config.py                |   3 +
 .../invenio_theme_tugraz/search.html          |  82 +++++
 invenio_theme_tugraz/webpack.py               |   1 +
 7 files changed, 466 insertions(+)
 create mode 100644 invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
 create mode 100644 invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js
 create mode 100644 invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
 create mode 100644 invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html

diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
new file mode 100644
index 0000000..0f1fee7
--- /dev/null
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
@@ -0,0 +1,321 @@
+/*
+ * Copyright (C) 2020 CERN.
+ * Copyright (C) 2020 Northwestern University.
+ * Copyright (C) 2020 Graz University of Technology
+ *
+ * invenio-theme-tugraz is free software; you can redistribute it
+ * and/or modify it under the terms of the MIT License; see LICENSE
+ * file for more details.
+ *
+ * origin: invenio_app_rdm/search/components.js
+ */
+
+import React, { useState } from "react";
+import { Card, Item, Input, Label, Button, Grid, Checkbox, List, } from "semantic-ui-react";
+import { BucketAggregation, Toggle } from "react-searchkit";
+import _ from "lodash";
+import _truncate from "lodash/truncate";
+import Overridable from "react-overridable";
+import { SearchBar } from "@js/invenio_search_ui/components";
+
+export const RDMRecordResultsListItem = ({ result, index }) => {
+  const description = _.get(result, "metadata.description", "No description");
+  const version = _.get(result, "metadata.version", "");
+  const creators = _.get(result, "metadata.creators", []);
+  const title = _.get(result, "metadata.title", "No title");
+  const subjects = _.get(result, "metadata.subjects", null);
+
+  const publicationDate = _.get(result, "ui.publication_date_l10n_long", "No publication date found");
+  const createdDate = _.get(result, "ui.created_date_l10n_long", "No creation date found.");
+  const resourceType = _.get(result, "ui.resource_type", "No resource type");
+  const access = _.get(result, "ui.access_right.title", "No access rights");
+  const accessRightCategory = _.get(result, "ui.access_right.category", "closed");
+  const accessRightIcon = _.get(result, "ui.access_right.icon", "closed");
+  const accessRight = {type: access, category: accessRightCategory, icon: accessRightIcon};
+
+  const href = `/records/${result.id}`;
+
+  return (
+    <Item key={index}>
+      <Item.Content>
+        <div className="badges">
+          <Label className="record-version">
+            {publicationDate} {version ? `(${version})` : null}
+          </Label>
+          <Label className="teal">
+            {resourceType}
+          </Label>
+        </div>
+        <Item.Header href={href}>{title}</Item.Header>
+        <Creators creators={creators}/>
+        <Item.Description href={href}>
+          {_truncate(description.replace(/(<([^>]+)>)/ig, ''), { length: 350 })}
+        </Item.Description>
+        <Footer subjects={subjects} createdDate={createdDate} accessRight={accessRight}/>
+      </Item.Content>
+    </Item>
+  );
+};
+
+const Creators = ({creators}) => {
+  const creatorTags = creators.map((creator, index) => {
+    return <Creator key={index} creator={creator}/>;
+  });
+
+  return (
+    <div className="creators">
+      {creatorTags}
+    </div>
+  );
+};
+
+const Identifiers = ({creator}) => {
+  return (
+    <div className="identifiers">
+      {_.isObject(creator.identifiers) && creator.identifiers.hasOwnProperty("orcid") &&
+       <Orcid creator={creator}/>
+      }
+    </div>
+  );
+};
+
+const Orcid = ({creator}) => {
+  const href = `https://orcid.org/${creator.identifiers.orcid}`
+
+  return (
+    <a href={href} target="_blank">
+      <img className="inline-orcid" src="/static/extra/orcid.png"/>
+    </a>
+  );
+};
+
+const Creator = ({creator}) => {
+  return (
+    <div className="creator">
+      <Identifiers creator={creator}/>
+      <span className="text-muted">{creator.name}</span>
+    </div>
+  );
+};
+
+const Footer = ({subjects, createdDate, accessRight}) => {
+  return (
+    <Item.Extra>
+      <div className="left floated column">
+        {subjects && subjects.map((subject, index) => (
+          <Label key={index} size="tiny">
+            {subject.subject}
+          </Label>
+        ))}
+        {createdDate && (
+          <div>
+            <small>
+              Uploaded on <span>{createdDate}</span>
+            </small>
+          </div>
+        )}
+      </div>
+      <div className="right floated column">
+        <span className="access-right">
+          <i className={`icon ${accessRight.icon}`}></i>
+          {accessRight.type}
+        </span>
+      </div>
+    </Item.Extra>
+  );
+};
+
+/**
+ * ATTENTION:
+ * The following classes are only here because it is not easily possible to
+ * import it from the original module.
+ * If there is in the future a possibility to import following classes from
+ * invenio_app_rdm then this should be done!
+ */
+export const RDMRecordResultsGridItem = ({ result, index }) => {
+  const description = _.get(result, "metadata.description", "No description");
+  return (
+    <Card fluid key={index} href={`/records/${result.pid}`}>
+      <Card.Content>
+        <Card.Header>{result.metadata.title}</Card.Header>
+        <Card.Description>
+          {_truncate(description, { length: 200 })}
+        </Card.Description>
+      </Card.Content>
+    </Card>
+  );
+};
+
+export const RDMRecordSearchBarContainer = () => {
+  return (
+    <Overridable id={"SearchApp.searchbar"}>
+      <SearchBar />
+    </Overridable>
+  );
+};
+
+export const RDMRecordSearchBarElement = ({
+  placeholder: passedPlaceholder,
+  queryString,
+  onInputChange,
+  executeSearch,
+}) => {
+  const placeholder = passedPlaceholder || "Search";
+  const onBtnSearchClick = () => {
+    executeSearch();
+  };
+  const onKeyPress = (event) => {
+    if (event.key === "Enter") {
+      executeSearch();
+    }
+  };
+  return (
+    <Input
+      action={{
+        icon: "search",
+        onClick: onBtnSearchClick,
+        className: "search",
+      }}
+      placeholder={placeholder}
+      onChange={(event, { value }) => {
+        onInputChange(value);
+      }}
+      value={queryString}
+      onKeyPress={onKeyPress}
+    />
+  );
+};
+
+export const RDMRecordFacetsValues = ({
+  bucket,
+  isSelected,
+  onFilterClicked,
+  getChildAggCmps,
+}) => {
+  const childAggCmps = getChildAggCmps(bucket);
+  const [isActive, setisActive] = useState(false);
+  const hasChildren = childAggCmps && childAggCmps.props.buckets.length > 0;
+  return (
+    <List.Item key={bucket.key}>
+      <div
+        className={`title ${hasChildren ? "" : "facet-subtitle"} ${
+          isActive ? "active" : ""
+        }`}
+      >
+        <List.Content floated="right">
+          <Label circular>{bucket.doc_count}</Label>
+        </List.Content>
+        {hasChildren ? (
+          <i
+            className={`angle ${isActive ? "down" : "right"} icon`}
+            onClick={() => setisActive(!isActive)}
+          ></i>
+        ) : null}
+        <Checkbox
+          label={bucket.label}
+          value={bucket.key}
+          onClick={() => onFilterClicked(bucket.key)}
+          checked={isSelected}
+        />
+      </div>
+      <div className={`content facet-content ${isActive ? "active" : ""}`}>
+        {childAggCmps}
+      </div>
+    </List.Item>
+  );
+};
+
+const SearchHelpLinks = () => {
+  return (
+    <Overridable id={"RdmSearch.SearchHelpLinks"}>
+      <Grid className="padded-small">
+        <Grid.Row className="no-padded">
+          <Grid.Column>
+            <Card className="borderless-facet">
+              <Card.Content>
+                <a>Advanced search</a>
+              </Card.Content>
+            </Card>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row className="no-padded">
+          <Grid.Column>
+            <Card className="borderless-facet">
+              <Card.Content>
+                <a>Search guide</a>
+              </Card.Content>
+            </Card>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Overridable>
+  );
+};
+
+export const RDMRecordFacets = ({ aggs, currentResultsState }) => {
+  return (
+    <>
+      <Toggle
+        title="Versions"
+        label="View all versions"
+        filterValue={["all_versions", "true"]}
+      />
+      {aggs.map((agg) => {
+        return (
+          <div key={agg.title} className="ui accordion">
+            <BucketAggregation title={agg.title} agg={agg} />
+          </div>
+        );
+      })}
+      <SearchHelpLinks />
+    </>
+  );
+};
+
+export const RDMBucketAggregationElement = ({ title, containerCmp }) => {
+  return (
+    <Card className="borderless-facet">
+      <Card.Content>
+        <Card.Header>{title}</Card.Header>
+      </Card.Content>
+      <Card.Content>{containerCmp}</Card.Content>
+    </Card>
+  );
+};
+
+export const RDMToggleComponent = ({
+  updateQueryFilters,
+  userSelectionFilters,
+  filterValue,
+  label,
+  title,
+  isChecked,
+}) => {
+  const _isChecked = (userSelectionFilters) => {
+    const isFilterActive =
+      userSelectionFilters.filter((filter) => filter[0] === filterValue[0])
+        .length > 0;
+    return isFilterActive;
+  };
+
+  const onToggleClicked = () => {
+    updateQueryFilters(filterValue);
+  };
+
+  var isChecked = _isChecked(userSelectionFilters);
+  return (
+    <Card className="borderless-facet">
+      <Card.Content>
+        <Card.Header>{title}</Card.Header>
+      </Card.Content>
+      <Card.Content>
+        <Checkbox
+          toggle
+          label={label}
+          onClick={onToggleClicked}
+          checked={isChecked}
+        />
+      </Card.Content>
+    </Card>
+  );
+};
diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js
new file mode 100644
index 0000000..78b6d1b
--- /dev/null
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/index.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2020 Graz University of Technology
+ *
+ * invenio-theme-tugraz is free software; you can redistribute it and/or modify
+ * it under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+
+import { defaultComponents, createSearchAppInit } from "@js/invenio_search_ui";
+import {
+  RDMRecordResultsListItem,
+  RDMBucketAggregationElement,
+  RDMRecordFacets,
+  RDMRecordFacetsValues,
+  RDMRecordResultsGridItem,
+  RDMRecordSearchBarContainer,
+  RDMRecordSearchBarElement,
+  RDMToggleComponent,
+} from "./components";
+
+const initSearchApp = createSearchAppInit({
+  "ResultsList.item": RDMRecordResultsListItem,
+  "BucketAggregation.element": RDMBucketAggregationElement,
+  "BucketAggregationValues.element": RDMRecordFacetsValues,
+  "ResultsGrid.item": RDMRecordResultsGridItem,
+  "SearchApp.facets": RDMRecordFacets,
+  "SearchApp.searchbarContainer": RDMRecordSearchBarContainer,
+  "SearchBar.element": RDMRecordSearchBarElement,
+  "SearchFilters.ToggleComponent": RDMToggleComponent,
+});
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
new file mode 100644
index 0000000..98ce0f7
--- /dev/null
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2020 Graz University of Technology
+ *
+ * invenio-theme-tugraz is free software; you can redistribute it and/or modify
+ * it under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+.creators {
+  margin: 0 0 1em;
+}
+
+.creators span {
+  margin-left: 2px;
+}
+
+.creator:not(:last-child):after {
+  color: #777;
+  content: ';';
+}
+
+.creator {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.identifiers {
+  display: inline;
+}
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less
index 1ae0402..7f26f2a 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less
@@ -12,6 +12,7 @@
 @import "overrides";
 @import "frontpage";
 @import "record";
+@import "search";
 @import "macros";
 @import "login";
 @import (css)
diff --git a/invenio_theme_tugraz/config.py b/invenio_theme_tugraz/config.py
index 320ee00..d6b6d00 100644
--- a/invenio_theme_tugraz/config.py
+++ b/invenio_theme_tugraz/config.py
@@ -94,3 +94,6 @@ DEPOSITS_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html"
 #    template="invenio_theme_tugraz/record_landing_page.html"
 # )
 """override the default record landing page"""
+
+SEARCH_UI_SEARCH_TEMPLATE = "invenio_theme_tugraz/search.html"
+"""override the default search page"""
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html
new file mode 100644
index 0000000..d39a23c
--- /dev/null
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/search.html
@@ -0,0 +1,82 @@
+{#
+  Copyright (C) 2020 Graz University of Technology
+
+  invenio-theme-tugraz is free software; you can redistribute it and/or modify
+  it under the terms of the MIT License; see LICENSE file for more details.
+#}
+{%- extends config.BASE_TEMPLATE %}
+
+{%- block javascript %}
+    {{ super() }}
+    {{ webpack['invenio-theme-tugraz-search-app.js'] }}
+{%- endblock %}
+
+{%- block page_body %}
+
+<div data-invenio-search-config='{
+  "aggs": [
+    {
+      "aggName": "access_right",
+      "field": "access_right",
+      "title": "Access Right"
+    },
+    {
+      "aggName": "resource_type",
+      "field": "resource_type.type",
+      "title": "Resource Type",
+      "childAgg": {
+        "aggName": "subtype",
+        "field": "resource_type.subtype",
+        "title": "Resource Type"
+      }
+    }
+  ],
+  "appId": "rdm-search",
+  "initialQueryState": {
+    "hiddenParams": null,
+    "size": 10
+  },
+  "layoutOptions": {
+    "gridView": false,
+    "listView": true
+  },
+  "paginationOptions": {
+    "defaultValue": 10,
+    "resultsPerPage": [
+      {
+        "text": "10",
+        "value": 10
+      },
+      {
+        "text": "20",
+        "value": 20
+      },
+      {
+        "text": "50",
+        "value": 50
+      }
+    ]
+  },
+  "searchApi": {
+    "axios": {
+      "headers": {
+        "Accept": "application/vnd.inveniordm.v1+json"
+      },
+      "url": "/api/records",
+      "withCredentials": true
+    }
+  },
+  "sortOrderDisabled": true,
+  "sortOptions": [
+    {
+      "sortBy": "bestmatch",
+      "text": "Best match"
+    },
+    {
+      "sortBy": "newest",
+      "text": "Newest"
+    }
+  ]
+}'></div>
+
+{%- endblock page_body %}
diff --git a/invenio_theme_tugraz/webpack.py b/invenio_theme_tugraz/webpack.py
index 1ab4a6b..3d53c0f 100644
--- a/invenio_theme_tugraz/webpack.py
+++ b/invenio_theme_tugraz/webpack.py
@@ -17,6 +17,7 @@ theme = WebpackThemeBundle(
             entry={
                 "invenio-theme-tugraz-theme": "./less/invenio_theme_tugraz/theme.less",
                 "invenio-theme-tugraz-js": "./js/invenio_theme_tugraz/theme.js",
+                "invenio-theme-tugraz-search-app": "./js/invenio_theme_tugraz/search/index.js",
             },
             dependencies={},
         )

From 2543ee9cbfed63a03f96e7677b3ee8ab6fe889e6 Mon Sep 17 00:00:00 2001
From: Christoph Ladurner <christoph.ladurner@tugraz.at>
Date: Tue, 29 Dec 2020 15:53:50 +0100
Subject: [PATCH 2/4] bugfix(config): add source of SEARCH_UI_SEARCH_TEMPLATE
 variable

---
 invenio_theme_tugraz/config.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/invenio_theme_tugraz/config.py b/invenio_theme_tugraz/config.py
index d6b6d00..26ab619 100644
--- a/invenio_theme_tugraz/config.py
+++ b/invenio_theme_tugraz/config.py
@@ -95,5 +95,8 @@ DEPOSITS_HEADER_TEMPLATE = "invenio_theme_tugraz/header.html"
 # )
 """override the default record landing page"""
 
+# Invenio-search-ui
+# =============
+# See https://invenio-search-ui.readthedocs.io/en/latest/configuration.html
 SEARCH_UI_SEARCH_TEMPLATE = "invenio_theme_tugraz/search.html"
 """override the default search page"""

From ccfde55f4575f32899813dd19f39886adaaa1fcb Mon Sep 17 00:00:00 2001
From: Christoph Ladurner <christoph.ladurner@tugraz.at>
Date: Thu, 7 Jan 2021 22:46:17 +0100
Subject: [PATCH 3/4] bug(ui): colors of the accessRights should be different

there was only one color for the accessRights: the open access color.
now every type has his own color.
---
 .../invenio_theme_tugraz/search/components.js   |  2 +-
 .../less/invenio_theme_tugraz/search.less       | 17 +++++++++++++++++
 .../less/invenio_theme_tugraz/variables.less    |  7 ++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
index 0f1fee7..b854739 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
@@ -116,7 +116,7 @@ const Footer = ({subjects, createdDate, accessRight}) => {
         )}
       </div>
       <div className="right floated column">
-        <span className="access-right">
+        <span className={`ui access-right ${accessRight.category}`}>
           <i className={`icon ${accessRight.icon}`}></i>
           {accessRight.type}
         </span>
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
index 98ce0f7..7bd3130 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
@@ -26,3 +26,20 @@
 .identifiers {
   display: inline;
 }
+
+.ui.access-right {
+  color: #FFFFFF;
+
+  &.open {
+    color: @accessRightOpen;
+  }
+  &.restricted {
+    color: @accessRightRestricted;
+  }
+  &.embargoed {
+    color: @accessRightEmbargoed;
+  }
+  &.closed {
+    color: @accessRightClosed;
+  }
+}
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
index 0208aaa..53eef00 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
@@ -14,4 +14,9 @@
 //@import "../invenio_app_rdm/variables.less";
 
 //@navbar_background_image: unset;
-//@navbar_background_color: #ffffff;
\ No newline at end of file
+//@navbar_background_color: #ffffff;
+
+@accessRightOpen: #e9711c;
+@accessRightRestricted: #fbbd08;
+@accessRightEmbargoed: #db2828;
+@accessRightClosed: #db2828;

From 8913ef6301984868728d05cc95d67fe05172884c Mon Sep 17 00:00:00 2001
From: Christoph Ladurner <christoph.ladurner@tugraz.at>
Date: Thu, 7 Jan 2021 22:49:06 +0100
Subject: [PATCH 4/4] feature(ui): add license to the accessRight visualisation
 on the search

---
 .../js/invenio_theme_tugraz/search/components.js           | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
index b854739..ee33dcc 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/search/components.js
@@ -24,6 +24,7 @@ export const RDMRecordResultsListItem = ({ result, index }) => {
   const creators = _.get(result, "metadata.creators", []);
   const title = _.get(result, "metadata.title", "No title");
   const subjects = _.get(result, "metadata.subjects", null);
+  const rights = _.get(result, "metadata.rights", null)
 
   const publicationDate = _.get(result, "ui.publication_date_l10n_long", "No publication date found");
   const createdDate = _.get(result, "ui.created_date_l10n_long", "No creation date found.");
@@ -31,7 +32,7 @@ export const RDMRecordResultsListItem = ({ result, index }) => {
   const access = _.get(result, "ui.access_right.title", "No access rights");
   const accessRightCategory = _.get(result, "ui.access_right.category", "closed");
   const accessRightIcon = _.get(result, "ui.access_right.icon", "closed");
-  const accessRight = {type: access, category: accessRightCategory, icon: accessRightIcon};
+  const accessRight = {type: access, category: accessRightCategory, icon: accessRightIcon, rights};
 
   const href = `/records/${result.id}`;
 
@@ -118,7 +119,9 @@ const Footer = ({subjects, createdDate, accessRight}) => {
       <div className="right floated column">
         <span className={`ui access-right ${accessRight.category}`}>
           <i className={`icon ${accessRight.icon}`}></i>
-          {accessRight.type}
+          {accessRight.type} {accessRight.rights && accessRight.rights.map((right, index) => (
+            <a key={index} href={right.uri}>({right.identifier})</a>
+          ))}
         </span>
       </div>
     </Item.Extra>