Enable instance group creation for non-k8s deployments only

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

@@ -11,6 +11,7 @@ import useSelected from '../../../util/useSelected';
 import PaginatedTable, {
   HeaderRow,
   HeaderCell,
+  ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedTable';
 import ErrorDetail from '../../../components/ErrorDetail';
@@ -43,7 +44,11 @@ function modifyInstanceGroups(items = []) {
   });
 }
 
-function InstanceGroupList() {
+function InstanceGroupList({
+  isKubernetes,
+  isSettingsRequestLoading,
+  settingsRequestError,
+}) {
   const location = useLocation();
   const match = useRouteMatch();
 
@@ -159,32 +164,39 @@ function InstanceGroupList() {
   const addContainerGroup = t`Add container group`;
   const addInstanceGroup = t`Add instance group`;
 
-  const addButton = (
-    <AddDropDownButton
-      ouiaId="add-instance-group-button"
-      key="add"
-      dropdownItems={[
-        <DropdownItem
-          ouiaId="add-container-group-item"
-          to="/instance_groups/container_group/add"
-          component={Link}
-          key={addContainerGroup}
-          aria-label={addContainerGroup}
-        >
-          {addContainerGroup}
-        </DropdownItem>,
-        <DropdownItem
-          ouiaId="add-instance-group-item"
-          to="/instance_groups/add"
-          component={Link}
-          key={addInstanceGroup}
-          aria-label={addInstanceGroup}
-        >
-          {addInstanceGroup}
-        </DropdownItem>,
-      ]}
-    />
-  );
+  const addButton =
+    !isSettingsRequestLoading && !isKubernetes ? (
+      <AddDropDownButton
+        ouiaId="add-instance-group-button"
+        key="add"
+        dropdownItems={[
+          <DropdownItem
+            ouiaId="add-container-group-item"
+            to="/instance_groups/container_group/add"
+            component={Link}
+            key={addContainerGroup}
+            aria-label={addContainerGroup}
+          >
+            {addContainerGroup}
+          </DropdownItem>,
+          <DropdownItem
+            ouiaId="add-instance-group-item"
+            to="/instance_groups/add"
+            component={Link}
+            key={addInstanceGroup}
+            aria-label={addInstanceGroup}
+          >
+            {addInstanceGroup}
+          </DropdownItem>,
+        ]}
+      />
+    ) : (
+      <ToolbarAddButton
+        key="add"
+        ouiaId="add-container-group-button"
+        linkTo={`${match.url}/container_group/add`}
+      />
+    );
 
   const getDetailUrl = item => {
     return item.is_container_group
@@ -199,8 +211,10 @@ function InstanceGroupList() {
       <PageSection>
         <Card>
           <PaginatedTable
-            contentError={contentError}
-            hasContentLoading={isLoading || deleteLoading}
+            contentError={contentError || settingsRequestError}
+            hasContentLoading={
+              isLoading || deleteLoading || isSettingsRequestLoading
+            }
             items={instanceGroups}
             itemCount={instanceGroupsCount}
             pluralizedItemName={pluralizedItemName}

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

@@ -1,17 +1,37 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { t } from '@lingui/macro';
 import { Route, Switch } from 'react-router-dom';
 
+import useRequest from '../../util/useRequest';
+import { SettingsAPI } from '../../api';
+
 import InstanceGroupAdd from './InstanceGroupAdd';
 import InstanceGroupList from './InstanceGroupList';
 import InstanceGroup from './InstanceGroup';
-
 import ContainerGroupAdd from './ContainerGroupAdd';
 import ContainerGroup from './ContainerGroup';
 import ScreenHeader from '../../components/ScreenHeader';
 
 function InstanceGroups() {
+  const {
+    request: settingsRequest,
+    isLoading: isSettingsRequestLoading,
+    error: settingsRequestError,
+    result: isKubernetes,
+  } = useRequest(
+    useCallback(async () => {
+      const {
+        data: { IS_K8S },
+      } = await SettingsAPI.readCategory('all');
+      return IS_K8S;
+    }, []),
+    { isLoading: true }
+  );
+  useEffect(() => {
+    settingsRequest();
+  }, [settingsRequest]);
+
   const [breadcrumbConfig, setBreadcrumbConfig] = useState({
     '/instance_groups': t`Instance Groups`,
     '/instance_groups/add': t`Create new instance group`,
@@ -39,6 +59,7 @@ function InstanceGroups() {
       [`/instance_groups/container_group/${instanceGroups.id}`]: `${instanceGroups.name}`,
     });
   }, []);
+
   return (
     <>
       <ScreenHeader
@@ -52,14 +73,20 @@ function InstanceGroups() {
         <Route path="/instance_groups/container_group/:id">
           <ContainerGroup setBreadcrumb={buildBreadcrumbConfig} />
         </Route>
-        <Route path="/instance_groups/add">
-          <InstanceGroupAdd />
-        </Route>
+        {!isSettingsRequestLoading && !isKubernetes ? (
+          <Route path="/instance_groups/add">
+            <InstanceGroupAdd />
+          </Route>
+        ) : null}
         <Route path="/instance_groups/:id">
           <InstanceGroup setBreadcrumb={buildBreadcrumbConfig} />
         </Route>
         <Route path="/instance_groups">
-          <InstanceGroupList />
+          <InstanceGroupList
+            isKubernetes={isKubernetes}
+            isSettingsRequestLoading={isSettingsRequestLoading}
+            settingsRequestError={settingsRequestError}
+          />
         </Route>
       </Switch>
     </>