Add execution environments files (#7909)

Update navigation bar and routing system to add execution environments.
Also, add stub files for the remaining related work.

See: https://github.com/ansible/awx/issues/7885
Also: https://github.com/ansible/awx/issues/7884

awx/ui_next/src/routeConfig.js

@@ -2,13 +2,13 @@ import { t } from '@lingui/macro';
 
 import ActivityStream from './screens/ActivityStream';
 import Applications from './screens/Application';
-import Credentials from './screens/Credential';
 import CredentialTypes from './screens/CredentialType';
+import Credentials from './screens/Credential';
 import Dashboard from './screens/Dashboard';
+import ExecutionEnvironments from './screens/ExecutionEnvironment';
 import Hosts from './screens/Host';
 import InstanceGroups from './screens/InstanceGroup';
 import Inventory from './screens/Inventory';
-import { Jobs } from './screens/Job';
 import ManagementJobs from './screens/ManagementJob';
 import NotificationTemplates from './screens/NotificationTemplate';
 import Organizations from './screens/Organization';
@@ -19,6 +19,7 @@ import Teams from './screens/Team';
 import Templates from './screens/Template';
 import Users from './screens/User';
 import WorkflowApprovals from './screens/WorkflowApproval';
+import { Jobs } from './screens/Job';
 
 // Ideally, this should just be a regular object that we export, but we
 // need the i18n. When lingui3 arrives, we will be able to import i18n
@@ -138,6 +139,11 @@ function getRouteConfig(i18n) {
           path: '/applications',
           screen: Applications,
         },
+        {
+          title: i18n._(t`Execution environments`),
+          path: '/execution_environments',
+          screen: ExecutionEnvironments,
+        },
       ],
     },
     {

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironment.jsx

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/ExecutionEnvironmentAdd.jsx

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/index.js

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function ExecutionEnvironmentDetails() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Execution environments details</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default ExecutionEnvironmentDetails;

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/index.js

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/ExecutionEnvironmentEdit.jsx

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/index.js

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/index.js

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

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironments.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Route, Switch } from 'react-router-dom';
+
+import ExecutionEnvironment from './ExecutionEnvironment';
+import ExecutionEnvironmentAdd from './ExecutionEnvironmentAdd';
+import ExecutionEnvironmentList from './ExecutionEnvironmentList';
+import Breadcrumbs from '../../components/Breadcrumbs';
+
+function ExecutionEnvironments({ i18n }) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/execution_environments': i18n._(t`Execution environments`),
+    '/execution_environments/add': i18n._(t`Create Execution environments`),
+  });
+
+  const buildBreadcrumbConfig = useCallback(
+    executionEnvironments => {
+      if (!executionEnvironments) {
+        return;
+      }
+      setBreadcrumbConfig({
+        '/execution_environments': i18n._(t`Execution environments`),
+        '/execution_environments/add': i18n._(t`Create Execution environments`),
+        [`/execution_environments/${executionEnvironments.id}`]: `${executionEnvironments.name}`,
+        [`/execution_environments/${executionEnvironments.id}/edit`]: i18n._(
+          t`Edit details`
+        ),
+        [`/execution_environments/${executionEnvironments.id}/details`]: i18n._(
+          t`Details`
+        ),
+      });
+    },
+    [i18n]
+  );
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <Switch>
+        <Route path="/execution_environments/add">
+          <ExecutionEnvironmentAdd />
+        </Route>
+        <Route path="/execution_environments/:id">
+          <ExecutionEnvironment setBreadcrumb={buildBreadcrumbConfig} />
+        </Route>
+        <Route path="/execution_environments">
+          <ExecutionEnvironmentList />
+        </Route>
+      </Switch>
+    </>
+  );
+}
+export default withI18n()(ExecutionEnvironments);

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironments.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+
+import ExecutionEnvironments from './ExecutionEnvironments';
+
+describe('<ExecutionEnvironments/>', () => {
+  let pageWrapper;
+  let pageSections;
+
+  beforeEach(() => {
+    pageWrapper = mountWithContexts(<ExecutionEnvironments />);
+    pageSections = pageWrapper.find('PageSection');
+  });
+
+  afterEach(() => {
+    pageWrapper.unmount();
+  });
+
+  test('initially renders without crashing', () => {
+    expect(pageWrapper.length).toBe(1);
+    expect(pageSections.length).toBe(1);
+    expect(pageSections.first().props().variant).toBe('light');
+  });
+});

awx/ui_next/src/screens/ExecutionEnvironment/index.js

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