From e2b9352dad2f74f3e211722750f547f21ae4b55c Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Mon, 29 Aug 2022 13:49:11 -0700
Subject: [PATCH] Replace Chip with Label component for IG labels.

---
 .../InstanceDetail/InstanceDetail.js          | 42 +++++++++----------
 awx/ui/src/screens/TopologyView/Tooltip.js    | 27 +++++++++++-
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
index 9d3ae47864..3dc8690a1d 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
@@ -11,7 +11,7 @@ import {
   CodeBlockCode,
   Tooltip,
   Slider,
-  Chip,
+  Label,
 } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
@@ -29,7 +29,6 @@ import ContentLoading from 'components/ContentLoading';
 import { Detail, DetailList } from 'components/DetailList';
 import StatusLabel from 'components/StatusLabel';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
-import ChipGroup from 'components/ChipGroup';
 
 const Unavailable = styled.span`
   color: var(--pf-global--danger-color--200);
@@ -186,28 +185,25 @@ function InstanceDetail({ setBreadcrumb }) {
                 fullWidth
                 label={t`Instance Groups`}
                 helpText={t`The Instance Groups to which this instance belongs.`}
-                value={
-                  <ChipGroup
-                    numChips={5}
-                    totalChips={instanceGroups.length}
-                    ouiaId="instance-group-chips"
-                  >
-                    {instanceGroups.map((ig) => (
-                      <Link
-                        to={`${buildLinkURL(ig)}${ig.id}/details`}
-                        key={ig.id}
-                      >
-                        <Chip
-                          key={ig.id}
-                          isReadOnly
-                          ouiaId={`instance-group-${ig.id}-chip`}
+                value={instanceGroups.map((ig) => (
+                  <React.Fragment key={ig.id}>
+                    <Label
+                      color="blue"
+                      isTruncated
+                      render={({ className, content, componentRef }) => (
+                        <Link
+                          to={`${buildLinkURL(ig)}${ig.id}/details`}
+                          className={className}
+                          innerRef={componentRef}
                         >
-                          {ig.name}
-                        </Chip>
-                      </Link>
-                    ))}
-                  </ChipGroup>
-                }
+                          {content}
+                        </Link>
+                      )}
+                    >
+                      {ig.name}
+                    </Label>{' '}
+                  </React.Fragment>
+                ))}
                 isEmpty={instanceGroups.length === 0}
               />
             )}
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index 055691ba40..e2d8a792eb 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { t, Plural } from '@lingui/macro';
 import styled from 'styled-components';
 import { useConfig } from 'contexts/Config';
@@ -20,6 +21,7 @@ import {
   TextContent,
   Text as PFText,
   TextVariants,
+  Label,
 } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons';
 import ContentLoading from 'components/ContentLoading';
@@ -77,8 +79,31 @@ const SliderForks = styled.div`
   text-align: center;
 `;
 
+const buildLinkURL = (inst) =>
+  inst.is_container_group
+    ? '/instance_groups/container_group/'
+    : '/instance_groups/';
+
 function renderInstanceGroups(instanceGroups) {
-  return instanceGroups.map((g) => <StatusLabel status={g.name} />);
+  return instanceGroups.map((ig) => (
+    <React.Fragment key={ig.id}>
+      <Label
+        color="blue"
+        isTruncated
+        render={({ className, content, componentRef }) => (
+          <Link
+            to={`${buildLinkURL(ig)}${ig.id}/details`}
+            className={className}
+            innerRef={componentRef}
+          >
+            {content}
+          </Link>
+        )}
+      >
+        {ig.name}
+      </Label>{' '}
+    </React.Fragment>
+  ));
 }
 
 function usedCapacity(instance) {