Add expanded row section to project list

awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx

@@ -170,7 +170,7 @@ function ProjectList({ i18n }) {
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
             headerRow={
-              <HeaderRow qsConfig={QS_CONFIG}>
+              <HeaderRow qsConfig={QS_CONFIG} isExpandable>
                 <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
                 <HeaderCell>{i18n._(t`Status`)}</HeaderCell>
                 <HeaderCell>{i18n._(t`Type`)}</HeaderCell>

awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx

@@ -3,7 +3,7 @@ import React, { Fragment, useState, useCallback } from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { Tr, Td } from '@patternfly/react-table';
+import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
@@ -15,6 +15,12 @@ import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { formatDateString, timeOfDay } from '../../../util/dates';
 import { ProjectsAPI } from '../../../api';
 import ClipboardCopyButton from '../../../components/ClipboardCopyButton';
+import {
+  DetailList,
+  Detail,
+  DeletedDetail,
+} from '../../../components/DetailList';
+import ExecutionEnvironmentDetail from '../../../components/ExecutionEnvironmentDetail';
 import StatusLabel from '../../../components/StatusLabel';
 import { toTitleCase } from '../../../util/strings';
 import CopyButton from '../../../components/CopyButton';
@@ -39,6 +45,7 @@ function ProjectListItem({
   rowIndex,
   i18n,
 }) {
+  const [isExpanded, setIsExpanded] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
   ProjectListItem.propTypes = {
     project: Project.isRequired,
@@ -87,7 +94,15 @@ function ProjectListItem({
     project.custom_virtualenv && !project.default_environment;
 
   return (
+    <>
       <Tr id={`${project.id}`}>
+        <Td
+          expand={{
+            rowIndex,
+            isExpanded,
+            onToggle: () => setIsExpanded(!isExpanded),
+          }}
+        />
         <Td
           select={{
             rowIndex,
@@ -185,6 +200,53 @@ function ProjectListItem({
           </ActionItem>
         </ActionsTd>
       </Tr>
+      <Tr isExpanded={isExpanded} id={`expanded-project-row-${project.id}`}>
+        <Td colSpan={2} />
+        <Td colSpan={5}>
+          <ExpandableRowContent>
+            <DetailList>
+              <Detail
+                label={i18n._(t`Description`)}
+                value={project.description}
+                dataCy={`project-${project.id}-description`}
+              />
+              {project.summary_fields.organization ? (
+                <Detail
+                  label={i18n._(t`Organization`)}
+                  value={
+                    <Link
+                      to={`/organizations/${project.summary_fields.organization.id}/details`}
+                    >
+                      {project.summary_fields.organization.name}
+                    </Link>
+                  }
+                  dataCy={`project-${project.id}-organization`}
+                />
+              ) : (
+                <DeletedDetail label={i18n._(t`Organization`)} />
+              )}
+              <ExecutionEnvironmentDetail
+                virtualEnvironment={project.custom_virtualenv}
+                executionEnvironment={
+                  project.summary_fields?.default_environment
+                }
+                isDefaultEnvironment
+              />
+              <Detail
+                label={i18n._(t`Last modified`)}
+                value={formatDateString(project.modified)}
+                dataCy={`project-${project.id}-last-modified`}
+              />
+              <Detail
+                label={i18n._(t`Last used`)}
+                value={formatDateString(project.last_job_run)}
+                dataCy={`project-${project.id}-last-used`}
+              />
+            </DetailList>
+          </ExpandableRowContent>
+        </Td>
+      </Tr>
+    </>
   );
 }
 export default withI18n()(ProjectListItem);