diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx index e648bcf92e..18ab793bfe 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx @@ -170,7 +170,7 @@ function ProjectList({ i18n }) { toolbarSearchableKeys={searchableKeys} toolbarRelatedSearchableKeys={relatedSearchableKeys} headerRow={ - + {i18n._(t`Name`)} {i18n._(t`Status`)} {i18n._(t`Type`)} diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx index b9c902c4a8..ebdb83e36c 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx +++ b/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,104 +94,159 @@ function ProjectListItem({ project.custom_virtualenv && !project.default_environment; return ( - - - - - - {project.name} - - - {missingExecutionEnvironment && ( - - - - - - )} - - - {project.summary_fields.last_job && ( - - - - - - )} - - - {project.scm_type === '' - ? i18n._(t`Manual`) - : toTitleCase(project.scm_type)} - - - {project.scm_revision.substring(0, 7)} - {!project.scm_revision && ( - - )} - + + setIsExpanded(!isExpanded), + }} /> - - - - - - - - - - + + + + {project.name} + + + {missingExecutionEnvironment && ( + + + + + + )} + + + {project.summary_fields.last_job && ( + + + + + + )} + + + {project.scm_type === '' + ? i18n._(t`Manual`) + : toTitleCase(project.scm_type)} + + + {project.scm_revision.substring(0, 7)} + {!project.scm_revision && ( + + )} + - - - + + + + + + + + + + + + + + + + + + + + {project.summary_fields.organization ? ( + + {project.summary_fields.organization.name} + + } + dataCy={`project-${project.id}-organization`} + /> + ) : ( + + )} + + + + + + + + ); } export default withI18n()(ProjectListItem);