Add execution environment list to Organizations

Add execution environment list to Organizations

See: https://github.com/ansible/awx/issues/8210

awx/ui_next/src/api/models/Organizations.js

@@ -29,6 +29,17 @@ class Organizations extends InstanceGroupsMixin(NotificationsMixin(Base)) {
       params,
     });
   }
+  readExecutionEnvironments(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/execution_environments/`, {
+      params,
+    });
+  }
+
+  readExecutionEnvironmentsOptions(id, params) {
+    return this.http.options(`${this.baseUrl}${id}/execution_environments/`, {
+      params,
+    });
+  }
 
   createUser(id, data) {
     return this.http.post(`${this.baseUrl}${id}/users/`, data);

awx/ui_next/src/screens/Organization/Organization.jsx

@@ -22,6 +22,7 @@ import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
 import OrganizationTeams from './OrganizationTeams';
 import { OrganizationsAPI } from '../../api';
+import OrganizationExecEnvList from './OrganizationExecEnvList';
 
 function Organization({ i18n, setBreadcrumb, me }) {
   const location = useLocation();
@@ -122,6 +123,11 @@ function Organization({ i18n, setBreadcrumb, me }) {
     { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
     { name: i18n._(t`Access`), link: `${match.url}/access`, id: 1 },
     { name: i18n._(t`Teams`), link: `${match.url}/teams`, id: 2 },
+    {
+      name: i18n._(t`Execution Environments`),
+      link: `${match.url}/execution_environments`,
+      id: 4,
+    },
   ];
 
   if (canSeeNotificationsTab) {
@@ -208,6 +214,11 @@ function Organization({ i18n, setBreadcrumb, me }) {
               />
             </Route>
           )}
+          {organization && (
+            <Route path="/organizations/:id/execution_environments">
+              <OrganizationExecEnvList organization={organization} />
+            </Route>
+          )}
           <Route key="not-found" path="*">
             {!organizationLoading && !rolesLoading && (
               <ContentError isNotFound>

awx/ui_next/src/screens/Organization/Organization.test.jsx

@@ -68,7 +68,7 @@ describe('<Organization />', () => {
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',
-      el => el.length === 5
+      el => el.length === 6
     );
     expect(tabs.last().text()).toEqual('Notifications');
     wrapper.unmount();
@@ -92,7 +92,7 @@ describe('<Organization />', () => {
     const tabs = await waitForElement(
       wrapper,
       '.pf-c-tabs__item',
-      el => el.length === 4
+      el => el.length === 5
     );
     tabs.forEach(tab => expect(tab.text()).not.toEqual('Notifications'));
     wrapper.unmount();

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Card } from '@patternfly/react-core';
+
+import { OrganizationsAPI } from '../../../api';
+import { getQSConfig, parseQueryString } from '../../../util/qs';
+import useRequest from '../../../util/useRequest';
+import PaginatedDataList from '../../../components/PaginatedDataList';
+import DatalistToolbar from '../../../components/DataListToolbar';
+
+import OrganizationExecEnvListItem from './OrganizationExecEnvListItem';
+
+const QS_CONFIG = getQSConfig('organizations', {
+  page: 1,
+  page_size: 20,
+  order_by: 'image',
+});
+
+function OrganizationExecEnvList({ i18n, organization }) {
+  const { id } = organization;
+  const location = useLocation();
+
+  const {
+    error: contentError,
+    isLoading,
+    request: fetchExecutionEnvironments,
+    result: {
+      executionEnvironments,
+      executionEnvironmentsCount,
+      relatedSearchableKeys,
+      searchableKeys,
+    },
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+
+      const [response, responseActions] = await Promise.all([
+        OrganizationsAPI.readExecutionEnvironments(id, params),
+        OrganizationsAPI.readExecutionEnvironmentsOptions(id, params),
+      ]);
+
+      return {
+        executionEnvironments: response.data.results,
+        executionEnvironmentsCount: response.data.count,
+        actions: responseActions.data.actions,
+        relatedSearchableKeys: (
+          responseActions?.data?.related_search_fields || []
+        ).map(val => val.slice(0, -8)),
+        searchableKeys: Object.keys(
+          responseActions.data.actions?.GET || {}
+        ).filter(key => responseActions.data.actions?.GET[key].filterable),
+      };
+    }, [location, id]),
+    {
+      executionEnvironments: [],
+      executionEnvironmentsCount: 0,
+      actions: {},
+      relatedSearchableKeys: [],
+      searchableKeys: [],
+    }
+  );
+
+  useEffect(() => {
+    fetchExecutionEnvironments();
+  }, [fetchExecutionEnvironments]);
+
+  return (
+    <>
+      <Card>
+        <PaginatedDataList
+          contentError={contentError}
+          hasContentLoading={isLoading}
+          items={executionEnvironments}
+          itemCount={executionEnvironmentsCount}
+          pluralizedItemName={i18n._(t`Execution Environments`)}
+          qsConfig={QS_CONFIG}
+          toolbarSearchableKeys={searchableKeys}
+          toolbarRelatedSearchableKeys={relatedSearchableKeys}
+          toolbarSearchColumns={[
+            {
+              name: i18n._(t`Image`),
+              key: 'image__icontains',
+              isDefault: true,
+            },
+            {
+              name: i18n._(t`Created By (Username)`),
+              key: 'created_by__username__icontains',
+            },
+            {
+              name: i18n._(t`Modified By (Username)`),
+              key: 'modified_by__username__icontains',
+            },
+          ]}
+          toolbarSortColumns={[
+            {
+              name: i18n._(t`Image`),
+              key: 'image',
+            },
+            {
+              name: i18n._(t`Created`),
+              key: 'created',
+            },
+            {
+              name: i18n._(t`Modified`),
+              key: 'modified',
+            },
+          ]}
+          renderToolbar={props => (
+            <DatalistToolbar {...props} qsConfig={QS_CONFIG} />
+          )}
+          renderItem={executionEnvironment => (
+            <OrganizationExecEnvListItem
+              key={executionEnvironment.id}
+              executionEnvironment={executionEnvironment}
+              detailUrl={`/execution_environments/${executionEnvironment.id}`}
+            />
+          )}
+        />
+      </Card>
+    </>
+  );
+}
+
+export default withI18n()(OrganizationExecEnvList);

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.test.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../../testUtils/enzymeHelpers';
+
+import { OrganizationsAPI } from '../../../api';
+import OrganizationExecEnvList from './OrganizationExecEnvList';
+
+jest.mock('../../../api/');
+
+const executionEnvironments = {
+  data: {
+    count: 3,
+    results: [
+      {
+        id: 1,
+        type: 'execution_environment',
+        url: '/api/v2/execution_environments/1/',
+        related: {
+          organization: '/api/v2/organizations/1/',
+        },
+        organization: 1,
+        image: 'https://localhost.com/image/disk',
+        managed_by_tower: false,
+        credential: null,
+      },
+      {
+        id: 2,
+        type: 'execution_environment',
+        url: '/api/v2/execution_environments/2/',
+        related: {
+          organization: '/api/v2/organizations/1/',
+        },
+        organization: 1,
+        image: 'test/image123',
+        managed_by_tower: false,
+        credential: null,
+      },
+      {
+        id: 3,
+        type: 'execution_environment',
+        url: '/api/v2/execution_environments/3/',
+        related: {
+          organization: '/api/v2/organizations/1/',
+        },
+        organization: 1,
+        image: 'test/test',
+        managed_by_tower: false,
+        credential: null,
+      },
+    ],
+  },
+};
+
+const mockOrganization = {
+  id: 1,
+  type: 'organization',
+  name: 'Default',
+};
+
+const options = { data: { actions: { POST: {}, GET: {} } } };
+
+describe('<OrganizationExecEnvList/>', () => {
+  let wrapper;
+
+  test('should mount successfully', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <OrganizationExecEnvList organization={mockOrganization} />
+      );
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationExecEnvList',
+      el => el.length > 0
+    );
+  });
+
+  test('should have data fetched and render 3 rows', async () => {
+    OrganizationsAPI.readExecutionEnvironments.mockResolvedValue(
+      executionEnvironments
+    );
+
+    OrganizationsAPI.readExecutionEnvironmentsOptions.mockResolvedValue(
+      options
+    );
+
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <OrganizationExecEnvList organization={mockOrganization} />
+      );
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationExecEnvList',
+      el => el.length > 0
+    );
+
+    expect(wrapper.find('OrganizationExecEnvListItem').length).toBe(3);
+    expect(OrganizationsAPI.readExecutionEnvironments).toBeCalled();
+    expect(OrganizationsAPI.readExecutionEnvironmentsOptions).toBeCalled();
+  });
+
+  test('should not render add button', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <OrganizationExecEnvList organization={mockOrganization} />
+      );
+    });
+    waitForElement(wrapper, 'OrganizationExecEnvList', el => el.length > 0);
+    expect(wrapper.find('ToolbarAddButton').length).toBe(0);
+  });
+});

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Link } from 'react-router-dom';
+import {
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+} from '@patternfly/react-core';
+
+import DataListCell from '../../../components/DataListCell';
+import { ExecutionEnvironment } from '../../../types';
+
+function OrganizationExecEnvListItem({
+  executionEnvironment,
+  detailUrl,
+  i18n,
+}) {
+  const labelId = `check-action-${executionEnvironment.id}`;
+
+  return (
+    <DataListItem
+      key={executionEnvironment.id}
+      aria-labelledby={labelId}
+      id={`${executionEnvironment.id} `}
+    >
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell
+              key="image"
+              aria-label={i18n._(t`Execution environment image`)}
+            >
+              <Link to={`${detailUrl}`}>
+                <b>{executionEnvironment.image}</b>
+              </Link>
+            </DataListCell>,
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+OrganizationExecEnvListItem.prototype = {
+  executionEnvironment: ExecutionEnvironment.isRequired,
+  detailUrl: string.isRequired,
+};
+
+export default withI18n()(OrganizationExecEnvListItem);

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+
+import OrganizationExecEnvListItem from './OrganizationExecEnvListItem';
+
+describe('<OrganizationExecEnvListItem/>', () => {
+  let wrapper;
+  const executionEnvironment = {
+    id: 1,
+    image: 'https://registry.com/r/image/manifest',
+    organization: 1,
+    credential: null,
+  };
+
+  test('should mount successfully', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <OrganizationExecEnvListItem
+          executionEnvironment={executionEnvironment}
+          detailUrl="execution_environments/1/details"
+        />
+      );
+    });
+    expect(wrapper.find('OrganizationExecEnvListItem').length).toBe(1);
+  });
+
+  test('should render the proper data', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <OrganizationExecEnvListItem
+          executionEnvironment={executionEnvironment}
+          detailUrl="execution_environments/1/details"
+        />
+      );
+    });
+    expect(
+      wrapper
+        .find('DataListCell[aria-label="Execution environment image"]')
+        .text()
+    ).toBe(executionEnvironment.image);
+  });
+});

awx/ui_next/src/screens/Organization/OrganizationExecEnvList/index.js

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

awx/ui_next/src/screens/Organization/Organizations.jsx

@@ -34,6 +34,9 @@ function Organizations({ i18n }) {
         [`/organizations/${organization.id}/notifications`]: i18n._(
           t`Notifications`
         ),
+        [`/organizations/${organization.id}/execution_environments`]: i18n._(
+          t`Execution Environments`
+        ),
       };
       setBreadcrumbConfig(breadcrumb);
     },