From d6b3e39059eb97ce45f25e5c06cb30d6c6dd6259 Mon Sep 17 00:00:00 2001
From: Fatimah Zulfiqar <fatimah0zulfiqar@gmail.com>
Date: Thu, 17 Oct 2024 16:32:20 +0200
Subject: [PATCH] community: added verified icon and parent

---
 .../invenio_app_rdm/records/detail.html       | 19 ++++-
 .../components/DisplayPartOfCommunities.js    | 11 +++
 .../landing_page/RecordCommunitiesList.js     | 69 +++++++++++++------
 3 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/detail.html b/invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/detail.html
index c42d27589..ce7ab3eb7 100644
--- a/invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/detail.html
+++ b/invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/detail.html
@@ -67,8 +67,23 @@
                 />
               </div>
               <div class="page-subheader-element">
-                <a
-                  href="{{ url_for('invenio_app_rdm_communities.communities_detail', pid_value=community.slug) }}"> {{ community.metadata.title }}</a>
+                <div class="ui header">
+                  <a
+                  href="{{ url_for('invenio_app_rdm_communities.communities_detail', pid_value=community.slug) }}" class="ui small header">
+                    {{ community.metadata.title }}  
+                  </a>  
+                  {% if community.is_verified %}
+                    <p class="ml-2 mb-0 display-inline-block"><i class="green check circle outline icon"></i></p>
+                  {% endif %}
+                  {% if community.parent %}
+                    <div class="sub header">Part of
+                      <a
+                  href="{{ url_for('invenio_app_rdm_communities.communities_home', pid_value=community.parent.slug) }}">
+                   {{community.parent.metadata.title}}
+                  </a>
+                </div>
+                  {% endif %}
+                </div>
                 {% if is_community_restricted %}
                   <span
                     class="ui label horizontal small access-status restricted rel-ml-1"
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/DisplayPartOfCommunities.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/DisplayPartOfCommunities.js
index 3cdff0079..5132b97e7 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/DisplayPartOfCommunities.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/DisplayPartOfCommunities.js
@@ -7,6 +7,7 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { Popup, Icon } from "semantic-ui-react";
 
 export const DisplayPartOfCommunities = ({ communities }) => {
   const PartOfCommunities = () => {
@@ -24,6 +25,15 @@ export const DisplayPartOfCommunities = ({ communities }) => {
                 <a href={`/communities/${community.slug}`}>
                   {community.metadata?.title}
                 </a>
+                <span>&nbsp;</span>
+                {community.is_verified && (
+                  <Popup
+                    trigger={<Icon name="check outline circle" color="green mr-0" />}
+                    content="Verified community"
+                    position="top center"
+                  />
+                )}
+
                 {index !== communitiesEntries.length - 1 && ", "}
               </Fragment>
             );
@@ -32,6 +42,7 @@ export const DisplayPartOfCommunities = ({ communities }) => {
       );
     }
   };
+
   return (
     <p>
       <b>{PartOfCommunities()}</b>
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/RecordCommunitiesList.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/RecordCommunitiesList.js
index 620c22f58..fc7d02c4a 100644
--- a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/RecordCommunitiesList.js
+++ b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/RecordCommunitiesList.js
@@ -9,7 +9,16 @@ import _isEmpty from "lodash/isEmpty";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { Image } from "react-invenio-forms";
-import { Item, Message, Popup, Placeholder, Header, Icon } from "semantic-ui-react";
+import {
+  Grid,
+  Item,
+  Message,
+  Popup,
+  Placeholder,
+  Header,
+  HeaderSubheader,
+  Icon,
+} from "semantic-ui-react";
 
 export class RecordCommunitiesList extends Component {
   render() {
@@ -48,25 +57,45 @@ export class RecordCommunitiesList extends Component {
       const communityItems = communities
         ?.slice(0, maxDisplayedCommunities)
         .map((community) => (
-          <Item key={community.id}>
-            <Image wrapped size="mini" src={community.links.logo} alt="" />
-            <Item.Content verticalAlign="middle">
-              <Item.Header as={Header}>
-                <Header as="a" href={community.links.self_html} size="small">
-                  {community.metadata.title}
-                </Header>
-                {community.id === branded && community?.theme && (
-                  <p className="ml-5 display-inline-block">
-                    <Popup
-                      content="Verified community"
-                      trigger={<Icon color="green" name="check circle outline" />}
-                      position="top center"
-                    />
-                  </p>
-                )}
-              </Item.Header>
-            </Item.Content>
-          </Item>
+          <Grid key={community.id}>
+            <Grid.Row verticalAlign="middle">
+              <Grid.Column width={2}>
+                <Image wrapped size="mini" src={community.links.logo} alt="" />
+              </Grid.Column>
+              <Grid.Column width={14}>
+                <Item.Content>
+                  <Item.Header className="ui">
+                    <Header as="a" href={community.links.self_html} size="small">
+                      {community.metadata.title}
+                      {community.is_verified && (
+                        <p className="ml-5 display-inline-block">
+                          <Popup
+                            content="Verified community"
+                            trigger={
+                              <Icon
+                                size="small"
+                                color="green"
+                                name="check circle outline"
+                              />
+                            }
+                            position="top center"
+                          />
+                        </p>
+                      )}
+                    </Header>
+                    {community.parent && (
+                      <HeaderSubheader>
+                        Part of{" "}
+                        <a href={`/communities/${community.parent.slug}`}>
+                          {community.parent.metadata.title}
+                        </a>
+                      </HeaderSubheader>
+                    )}
+                  </Item.Header>
+                </Item.Content>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
         ));
 
       Element = (