From f2b4b5563660fe9f79647d427d0b05664a1f7c2c Mon Sep 17 00:00:00 2001
From: Prasetya Aria Wibawa <prasetya.wibawa@grabtaxi.com>
Date: Tue, 20 Sep 2022 18:45:04 +0700
Subject: [PATCH 1/2] consistently show parent and child relations in group
 profile card

Signed-off-by: Prasetya Aria Wibawa <prasetya.wibawa@grabtaxi.com>
---
 .changeset/breezy-pots-worry.md               |  5 ++
 .../Group/GroupProfile/GroupProfileCard.tsx   | 50 ++++++++++---------
 2 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/breezy-pots-worry.md

diff --git a/.changeset/breezy-pots-worry.md b/.changeset/breezy-pots-worry.md
new file mode 100644
index 0000000000..48d5ae6c80
--- /dev/null
+++ b/.changeset/breezy-pots-worry.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+consistently show parent and child relations in group profile card
diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index 174067275d..1b18261328 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -149,38 +149,40 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
                 </ListItemText>
               </ListItem>
             )}
-
-            {parentRelations.length ? (
-              <ListItem>
-                <ListItemIcon>
-                  <Tooltip title="Parent Group">
-                    <AccountTreeIcon />
-                  </Tooltip>
-                </ListItemIcon>
-                <ListItemText>
+            <ListItem>
+              <ListItemIcon>
+                <Tooltip title="Parent Group">
+                  <AccountTreeIcon />
+                </Tooltip>
+              </ListItemIcon>
+              <ListItemText>
+                {parentRelations.length ? (
                   <EntityRefLinks
                     entityRefs={parentRelations}
                     defaultKind="Group"
                   />
-                </ListItemText>
-              </ListItem>
-            ) : null}
-
-            {childRelations.length ? (
-              <ListItem>
-                <ListItemIcon>
-                  <Tooltip title="Child Groups">
-                    <GroupIcon />
-                  </Tooltip>
-                </ListItemIcon>
-                <ListItemText>
+                ) : (
+                  '-'
+                )}
+              </ListItemText>
+            </ListItem>
+            <ListItem>
+              <ListItemIcon>
+                <Tooltip title="Child Groups">
+                  <GroupIcon />
+                </Tooltip>
+              </ListItemIcon>
+              <ListItemText>
+                {childRelations.length ? (
                   <EntityRefLinks
                     entityRefs={childRelations}
                     defaultKind="Group"
                   />
-                </ListItemText>
-              </ListItem>
-            ) : null}
+                ) : (
+                  '-'
+                )}
+              </ListItemText>
+            </ListItem>
           </List>
         </Grid>
       </Grid>

From 0f1078415500a926aecacb644f76face10b1e76e Mon Sep 17 00:00:00 2001
From: Prasetya Aria Wibawa <prasetya.wibawa@grabtaxi.com>
Date: Thu, 22 Sep 2022 11:12:19 +0700
Subject: [PATCH 2/2] use primary and secondary for all ListItemText

Signed-off-by: Prasetya Aria Wibawa <prasetya.wibawa@grabtaxi.com>
---
 .../Group/GroupProfile/GroupProfileCard.tsx   | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index 1b18261328..dfdb566b20 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -144,9 +144,10 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
                     <EmailIcon />
                   </Tooltip>
                 </ListItemIcon>
-                <ListItemText>
-                  <Link to={emailHref}>{profile.email}</Link>
-                </ListItemText>
+                <ListItemText
+                  primary={<Link to={emailHref}>{profile.email}</Link>}
+                  secondary="Email"
+                />
               </ListItem>
             )}
             <ListItem>
@@ -155,16 +156,19 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
                   <AccountTreeIcon />
                 </Tooltip>
               </ListItemIcon>
-              <ListItemText>
-                {parentRelations.length ? (
-                  <EntityRefLinks
-                    entityRefs={parentRelations}
-                    defaultKind="Group"
-                  />
-                ) : (
-                  '-'
-                )}
-              </ListItemText>
+              <ListItemText
+                primary={
+                  parentRelations.length ? (
+                    <EntityRefLinks
+                      entityRefs={parentRelations}
+                      defaultKind="Group"
+                    />
+                  ) : (
+                    'N/A'
+                  )
+                }
+                secondary="Parent Group"
+              />
             </ListItem>
             <ListItem>
               <ListItemIcon>
@@ -172,16 +176,19 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
                   <GroupIcon />
                 </Tooltip>
               </ListItemIcon>
-              <ListItemText>
-                {childRelations.length ? (
-                  <EntityRefLinks
-                    entityRefs={childRelations}
-                    defaultKind="Group"
-                  />
-                ) : (
-                  '-'
-                )}
-              </ListItemText>
+              <ListItemText
+                primary={
+                  childRelations.length ? (
+                    <EntityRefLinks
+                      entityRefs={childRelations}
+                      defaultKind="Group"
+                    />
+                  ) : (
+                    'N/A'
+                  )
+                }
+                secondary="Child Groups"
+              />
             </ListItem>
           </List>
         </Grid>