Add stub files for Instance Groups

Add stub files for Instance Groups. Routing system, and screens layout.

closes: https://github.com/ansible/awx/issues/7471

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+
+import InstanceGroupDetails from './InstanceGroupDetails';
+import InstanceGroupEdit from './InstanceGroupEdit';
+
+function InstanceGroup() {
+  return (
+    <Switch>
+      <Redirect
+        from="/instance_groups/:id"
+        to="/instance_groups/:id/details"
+        exact
+      />
+      <Route path="/instance_groups/:id/edit">
+        <InstanceGroupEdit />
+      </Route>
+      <Route path="/instance_groups/:id/details">
+        <InstanceGroupDetails />
+      </Route>
+    </Switch>
+  );
+}
+
+export default InstanceGroup;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function InstanceGroupAdd() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Instance Group Add</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default InstanceGroupAdd;

awx/ui_next/src/screens/InstanceGroup/InstanceGroupAdd/index.js

@@ -0,0 +1 @@
+export { default } from './InstanceGroupAdd';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function InstanceGroupDetails() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Instance Group Details</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default InstanceGroupDetails;

awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/index.js

@@ -0,0 +1 @@
+export { default } from './InstanceGroupDetails';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function InstanceGroupEdit() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Instance Group Edit</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default InstanceGroupEdit;

awx/ui_next/src/screens/InstanceGroup/InstanceGroupEdit/index.js

@@ -0,0 +1 @@
+export { default } from './InstanceGroupEdit';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function InstanceGroupList() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Instance Group List</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default InstanceGroupList;

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/index.js

@@ -0,0 +1 @@
+export { default } from './InstanceGroupList';

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

@@ -1,28 +1,48 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, useCallback } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
+import { Route, Switch } from 'react-router-dom';
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
 
-class InstanceGroups extends Component {
+import InstanceGroupAdd from './InstanceGroupAdd';
-  render() {
+import InstanceGroupList from './InstanceGroupList';
-    const { i18n } = this.props;
+import InstanceGroup from './InstanceGroup';
-    const { light } = PageSectionVariants;
+import Breadcrumbs from '../../components/Breadcrumbs';
 
-    return (
+function InstanceGroups({ i18n }) {
-      <Fragment>
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
-        <PageSection variant={light} className="pf-m-condensed">
+    '/instance_groups': i18n._(t`Instance Groups`),
-          <Title size="2xl" headingLevel="h2">
+    '/instance_groups/add': i18n._(t`Create Instance Groups`),
-            {i18n._(t`Instance Groups`)}
+  });
-          </Title>
+
-        </PageSection>
+  const buildBreadcrumbConfig = useCallback(
-        <PageSection />
+    instanceGroups => {
-      </Fragment>
+      if (!instanceGroups) {
-    );
+        return;
-  }
+      }
+      setBreadcrumbConfig({
+        '/instance_groups': i18n._(t`Instance Groups`),
+        '/instance_groups/add': i18n._(t`Create Instance Groups`),
+        [`/instance_groups/${instanceGroups.id}`]: `${instanceGroups.name}`,
+      });
+    },
+    [i18n]
+  );
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <Switch>
+        <Route path="/instance_groups/add">
+          <InstanceGroupAdd />
+        </Route>
+        <Route path="/instance_groups/:id">
+          <InstanceGroup setBreadcrumb={buildBreadcrumbConfig} />
+        </Route>
+        <Route path="/instance_groups">
+          <InstanceGroupList />
+        </Route>
+      </Switch>
+    </>
+  );
 }
 
 export default withI18n()(InstanceGroups);

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

@@ -4,15 +4,13 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import InstanceGroups from './InstanceGroups';
 
-describe('<InstanceGroups />', () => {
+describe('<InstanceGroups/>', () => {
   let pageWrapper;
   let pageSections;
-  let title;
 
   beforeEach(() => {
     pageWrapper = mountWithContexts(<InstanceGroups />);
     pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
   });
 
   afterEach(() => {
@@ -21,9 +19,7 @@ describe('<InstanceGroups />', () => {
 
   test('initially renders without crashing', () => {
     expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
+    expect(pageSections.length).toBe(1);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
     expect(pageSections.first().props().variant).toBe('light');
   });
 });