Add label to show isolated group

Add label to show isolated group.

See: https://tower-mockups.testing.ansible.com/patternfly/instance-groups/instance-groups/

awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx

@@ -2,8 +2,8 @@ import React, { useCallback } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link, useHistory } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
 import styled from 'styled-components';
+import { Button, Label } from '@patternfly/react-core';
 
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
@@ -46,12 +46,28 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
     );
   };
 
+  const verifyIsIsolated = item => {
+    if (item.is_isolated) {
+      return (
+        <>
+          {item.name}
+          <span css="margin-left: 12px">
+            <Label aria-label={i18n._(t`isolated instance`)}>
+              {i18n._(t`Isolated`)}
+            </Label>
+          </span>
+        </>
+      );
+    }
+    return <>{item.name}</>;
+  };
+
   return (
     <CardBody>
       <DetailList>
         <Detail
           label={i18n._(t`Name`)}
-          value={name}
+          value={verifyIsIsolated(instanceGroup)}
           dataCy="instance-group-detail-name"
         />
         <Detail

awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.test.jsx

@@ -21,6 +21,7 @@ const instanceGroups = [
     policy_instance_percentage: 50,
     percent_capacity_remaining: 60,
     is_containerized: false,
+    is_isolated: false,
     created: '2020-07-21T18:41:02.818081Z',
     modified: '2020-07-24T20:32:03.121079Z',
     summary_fields: {
@@ -40,6 +41,7 @@ const instanceGroups = [
     policy_instance_percentage: 0,
     percent_capacity_remaining: 0,
     is_containerized: true,
+    is_isolated: false,
     created: '2020-07-21T18:41:02.818081Z',
     modified: '2020-07-24T20:32:03.121079Z',
     summary_fields: {
@@ -67,7 +69,11 @@ describe('<InstanceGroupDetails/>', () => {
     });
 
     wrapper.update();
-    expectDetailToMatch(wrapper, 'Name', instanceGroups[0].name);
+
+    expect(wrapper.find('Detail[label="Name"]').text()).toEqual(
+      expect.stringContaining(instanceGroups[0].name)
+    );
+    expect(wrapper.find('Detail[label="Name"]')).toHaveLength(1);
     expectDetailToMatch(wrapper, 'Type', `Instance group`);
     const dates = wrapper.find('UserDateDetail');
     expect(dates).toHaveLength(2);
@@ -144,4 +150,18 @@ describe('<InstanceGroupDetails/>', () => {
 
     expect(wrapper.find('Button[aria-label="Edit"]').length).toBe(0);
   });
+
+  test('should display isolated label', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupDetails
+          instanceGroup={{ ...instanceGroups[0], is_isolated: true }}
+        />
+      );
+    });
+    wrapper.update();
+    expect(
+      wrapper.find('Label[aria-label="isolated instance"]').prop('children')
+    ).toEqual('Isolated');
+  });
 });

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx

@@ -6,15 +6,16 @@ import { Link } from 'react-router-dom';
 import 'styled-components/macro';
 import {
   Badge as PFBadge,
-  Progress,
-  ProgressMeasureLocation,
-  ProgressSize,
   Button,
   DataListAction as _DataListAction,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
+  Label,
+  Progress,
+  ProgressMeasureLocation,
+  ProgressSize,
   Tooltip,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
@@ -112,6 +113,13 @@ function InstanceGroupListItem({
                   <b>{instanceGroup.name}</b>
                 </Link>
               </span>
+              {instanceGroup.is_isolated ? (
+                <span css="margin-left: 12px">
+                  <Label aria-label={i18n._(t`isolated instance`)}>
+                    {i18n._(t`Isolated`)}
+                  </Label>
+                </span>
+              ) : null}
             </DataListCell>,
 
             <DataListCell