search, my dashboard: highlight verified community

* Add "Part of" to the global search and user dashboard
* closes zenodo/zenodo-rdm#716

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/DisplayVerifiedCommunity.js

@@ -0,0 +1,53 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2024 CERN.
+//
+// Invenio App RDM 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 React from "react";
+import PropTypes from "prop-types";
+import { Label, Image } from "semantic-ui-react";
+
+export const DisplayVerifiedCommunity = ({ communities }) => {
+  const displayCommunity = (parentCommunities) => {
+    const brandedCommunityId = parentCommunities?.default;
+    const communities = parentCommunities?.entries;
+    let displayCommunity = null;
+
+    if (communities) {
+      communities.map((community) => {
+        if (community.id === brandedCommunityId && community?.theme) {
+          displayCommunity = community;
+        }
+        return displayCommunity;
+      });
+    }
+
+    return displayCommunity;
+  };
+
+  const verifiedCommunity = displayCommunity(communities);
+  return (
+    <>
+      {verifiedCommunity && (
+        <Label
+          as="a"
+          href={`/communities/${verifiedCommunity.id}`}
+          style={{ backgroundColor: verifiedCommunity?.theme?.style?.primaryColor }}
+          className="themed-community-label"
+        >
+          {verifiedCommunity.metadata.title}
+          <Image
+            className="themed-community-logo right-floated"
+            src={`/api/communities/${verifiedCommunity.id}/logo`}
+            alt=""
+          />
+        </Label>
+      )}
+    </>
+  );
+};
+
+DisplayVerifiedCommunity.propTypes = {
+  communities: PropTypes.object.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/RecordsResultsListItem.js

@@ -14,6 +14,7 @@ import PropTypes from "prop-types";
 import { Item, Label, Icon } from "semantic-ui-react";
 import { buildUID } from "react-searchkit";
 import { CompactStats } from "./CompactStats";
+import { DisplayVerifiedCommunity } from "./DisplayVerifiedCommunity";
 
 class RecordsResultsListItem extends Component {
   render() {
@@ -58,6 +59,34 @@ class RecordsResultsListItem extends Component {
     const filters = currentQueryState && Object.fromEntries(currentQueryState.filters);
     const allVersionsVisible = filters?.allversions;
     const numOtherVersions = versions.index - 1;
+    const communitiesEntries = result.parent?.communities?.entries;
+
+    const printPartOf = () => {
+      if (communitiesEntries) {
+        return (
+          <>
+            {i18next.t("Part of ")}
+            {communitiesEntries.map((community, index) => {
+              if (
+                !(
+                  community.id === result.parent?.communities?.default &&
+                  community?.theme
+                )
+              ) {
+                return (
+                  <>
+                    <a href={`/communities/${community.slug}`}>
+                      {community.metadata?.title}
+                    </a>
+                    {index !== communitiesEntries.length - 1 && ", "}
+                  </>
+                );
+              }
+            })}
+          </>
+        );
+      }
+    };
 
     // Derivatives
     const viewLink = `/records/${result.id}`;
@@ -117,6 +146,9 @@ class RecordsResultsListItem extends Component {
 
               <div className="flex justify-space-between align-items-end">
                 <small>
+                  <p>
+                    <b>{printPartOf()}</b>
+                  </p>
                   <p>
                     {createdDate && (
                       <>
@@ -154,6 +186,7 @@ class RecordsResultsListItem extends Component {
                   />
                 </small>
               </div>
+              <DisplayVerifiedCommunity communities={result.parent?.communities} />
             </Item.Extra>
           </Item.Content>
         </Item>

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/ComputerTabletUploadsItem.js

@@ -12,6 +12,7 @@ import _get from "lodash/get";
 import { Button, Icon, Item, Label } from "semantic-ui-react";
 import { SearchItemCreators } from "../../utils";
 import { CompactStats } from "../../components/CompactStats";
+import { DisplayVerifiedCommunity } from "../../components/DisplayVerifiedCommunity";
 
 export const ComputerTabletUploadsItem = ({
   result,
@@ -42,6 +43,32 @@ export const ComputerTabletUploadsItem = ({
   );
   const uniqueViews = _get(result, "stats.all_versions.unique_views", 0);
   const uniqueDownloads = _get(result, "stats.all_versions.unique_downloads", 0);
+  const communitiesEntries = result.parent?.communities?.entries;
+  const printPartOf = () => {
+    if (communitiesEntries) {
+      return (
+        <>
+          {i18next.t("Part of ")}
+          {communitiesEntries.map((community, index) => {
+            if (
+              !(
+                community.id === result.parent?.communities?.default && community?.theme
+              )
+            ) {
+              return (
+                <>
+                  <a href={`/communities/${community.slug}`}>
+                    {community.metadata?.title}
+                  </a>
+                  {index !== communitiesEntries.length - 1 && ", "}
+                </>
+              );
+            }
+          })}
+        </>
+      );
+    }
+  };
 
   return (
     <Item key={result.id} className="deposits-list-item computer tablet only flex">
@@ -112,6 +139,10 @@ export const ComputerTabletUploadsItem = ({
 
           <div className="flex justify-space-between align-items-end">
             <small>
+              <p>
+                <b>{printPartOf()}</b>
+              </p>
+
               {createdDate ? (
                 <>
                   {i18next.t("Uploaded on {{uploadDate}}", { uploadDate: createdDate })}
@@ -136,6 +167,7 @@ export const ComputerTabletUploadsItem = ({
               />
             </small>
           </div>
+          <DisplayVerifiedCommunity communities={result.parent?.communities} />
         </Item.Extra>
       </Item.Content>
     </Item>

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads_items/MobileUploadsItem.js

@@ -12,6 +12,7 @@ import _get from "lodash/get";
 import { Dropdown, Icon, Item, Label } from "semantic-ui-react";
 import { SearchItemCreators } from "../../utils";
 import { CompactStats } from "../../components/CompactStats";
+import { DisplayVerifiedCommunity } from "../../components/DisplayVerifiedCommunity";
 
 export const MobileUploadsItem = ({
   result,
@@ -42,6 +43,33 @@ export const MobileUploadsItem = ({
   );
   const uniqueViews = _get(result, "stats.all_versions.unique_views", 0);
   const uniqueDownloads = _get(result, "stats.all_versions.unique_downloads", 0);
+  const communitiesEntries = result.parent?.communities?.entries;
+  const printPartOf = () => {
+    if (communitiesEntries) {
+      return (
+        <>
+          {i18next.t("Part of ")}
+          {communitiesEntries.map((community, index) => {
+            if (
+              !(
+                community.id === result.parent?.communities?.default && community?.theme
+              )
+            ) {
+              return (
+                <>
+                  <a href={`/communities/${community.slug}`}>
+                    {community.metadata?.title}
+                  </a>
+                  {index !== communitiesEntries.length - 1 && ", "}
+                </>
+              );
+            }
+          })}
+        </>
+      );
+    }
+  };
+
   return (
     <Item key={result.id} className="deposits-list-item mobile only flex">
       <Item.Content className="centered">
@@ -87,6 +115,9 @@ export const MobileUploadsItem = ({
             ))}
             <div>
               <small>
+                <p>
+                  <b>{printPartOf()}</b>
+                </p>
                 {createdDate ? (
                   <>
                     {i18next.t("Uploaded on {{uploadDate}}", {
@@ -115,6 +146,7 @@ export const MobileUploadsItem = ({
                 </small>
               </div>
             </div>
+            <DisplayVerifiedCommunity communities={result.parent?.communities} />
           </Item.Extra>
         </Item.Extra>
         <Item.Extra>

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/globals/site.overrides

@@ -510,3 +510,15 @@ dl.details-list {
   border: 0;
 }
 
+.themed-community-label {
+  font-weight: @normal !important;
+  color: @white !important;
+  width: 100%;
+  height: @26px;
+}
+
+.themed-community-logo {
+  max-width: 100%;
+  max-height: 100%;
+}
+