create LaunchedByDetail to consolidate shared code between detail & list

ansible · Jan 6, 2021 · 2abcc8e · 2abcc8e
1 parent 20e5134
commit 2abcc8e
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 86 deletions.
diff --git a/awx/ui_next/src/components/DetailList/LaunchedByDetail.jsx b/awx/ui_next/src/components/DetailList/LaunchedByDetail.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import Detail from './Detail';
+
+const getLaunchedByDetails = ({ summary_fields = {}, related = {} }) => {
+  const {
+    created_by: createdBy,
+    job_template: jobTemplate,
+    schedule,
+  } = summary_fields;
+  const { schedule: relatedSchedule } = related;
+
+  if (!createdBy && !schedule) {
+    return {};
+  }
+
+  let link;
+  let value;
+
+  if (createdBy) {
+    link = `/users/${createdBy.id}`;
+    value = createdBy.username;
+  } else if (relatedSchedule && jobTemplate) {
+    link = `/templates/job_template/${jobTemplate.id}/schedules/${schedule.id}`;
+    value = schedule.name;
+  } else {
+    link = null;
+    value = schedule.name;
+  }
+
+  return { link, value };
+};
+
+export default function LaunchedByDetail({ job, i18n }) {
+  const { value: launchedByValue, link: launchedByLink } =
+    getLaunchedByDetails(job) || {};
+
+  return (
+    <Detail
+      label={i18n._(t`Launched By`)}
+      value={
+        launchedByLink ? (
+          <Link to={`${launchedByLink}`}>{launchedByValue}</Link>
+        ) : (
+          launchedByValue
+        )
+      }
+    />
+  );
+}
diff --git a/awx/ui_next/src/components/DetailList/index.js b/awx/ui_next/src/components/DetailList/index.js
@@ -4,6 +4,7 @@ export { default as DeletedDetail } from './DeletedDetail';
 export { default as UserDateDetail } from './UserDateDetail';
 export { default as DetailBadge } from './DetailBadge';
 export { default as ArrayDetail } from './ArrayDetail';
+export { default as LaunchedByDetail } from './LaunchedByDetail';
 /*
   NOTE: CodeDetail cannot be imported here, as it causes circular
   dependencies in testing environment. Import it directly from

diff --git a/awx/ui_next/src/components/JobList/JobListItem.jsx b/awx/ui_next/src/components/JobList/JobListItem.jsx
@@ -8,41 +8,12 @@ import { RocketIcon } from '@patternfly/react-icons';
 import { ActionsTd, ActionItem } from '../PaginatedTable';
 import LaunchButton from '../LaunchButton';
 import StatusLabel from '../StatusLabel';
-import { DetailList, Detail } from '../DetailList';
+import { DetailList, Detail, LaunchedByDetail } from '../DetailList';
 import ChipGroup from '../ChipGroup';
 import CredentialChip from '../CredentialChip';
 import { formatDateString } from '../../util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
-const getLaunchedByDetails = ({ summary_fields = {}, related = {} }) => {
-  const {
-    created_by: createdBy,
-    job_template: jobTemplate,
-    schedule,
-  } = summary_fields;
-  const { schedule: relatedSchedule } = related;
-
-  if (!createdBy && !schedule) {
-    return {};
-  }
-
-  let link;
-  let value;
-
-  if (createdBy) {
-    link = `/users/${createdBy.id}`;
-    value = createdBy.username;
-  } else if (relatedSchedule && jobTemplate) {
-    link = `/templates/job_template/${jobTemplate.id}/schedules/${schedule.id}`;
-    value = schedule.name;
-  } else {
-    link = null;
-    value = schedule.name;
-  }
-
-  return { link, value };
-};
-
 function JobListItem({
   i18n,
   job,
@@ -63,8 +34,6 @@ function JobListItem({
     workflow_job: i18n._(t`Workflow Job`),
   };
 
-  const { value: launchedByValue, link: launchedByLink } =
-    getLaunchedByDetails(job) || {};
   const { credentials, inventory, labels } = job.summary_fields;
 
   return (
@@ -141,16 +110,7 @@ function JobListItem({
                 label={i18n._(t`Finished`)}
                 value={formatDateString(job.started)}
               />
-              <Detail
-                label={i18n._(t`Launched By`)}
-                value={
-                  launchedByLink ? (
-                    <Link to={`${launchedByLink}`}>{launchedByValue}</Link>
-                  ) : (
-                    launchedByValue
-                  )
-                }
-              />
+              <LaunchedByDetail job={job} i18n={i18n} />
               {credentials && credentials.length > 0 && (
                 <Detail
                   fullWidth

diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -7,7 +7,11 @@ import { Button, Chip, Label } from '@patternfly/react-core';
 import styled from 'styled-components';
 
 import AlertModal from '../../../components/AlertModal';
-import { DetailList, Detail } from '../../../components/DetailList';
+import {
+  DetailList,
+  Detail,
+  LaunchedByDetail,
+} from '../../../components/DetailList';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import ChipGroup from '../../../components/ChipGroup';
 import CredentialChip from '../../../components/CredentialChip';
@@ -49,35 +53,6 @@ const VERBOSITY = {
   4: '4 (Connection Debug)',
 };
 
-const getLaunchedByDetails = ({ summary_fields = {}, related = {} }) => {
-  const {
-    created_by: createdBy,
-    job_template: jobTemplate,
-    schedule,
-  } = summary_fields;
-  const { schedule: relatedSchedule } = related;
-
-  if (!createdBy && !schedule) {
-    return null;
-  }
-
-  let link;
-  let value;
-
-  if (createdBy) {
-    link = `/users/${createdBy.id}`;
-    value = createdBy.username;
-  } else if (relatedSchedule && jobTemplate) {
-    link = `/templates/job_template/${jobTemplate.id}/schedules/${schedule.id}`;
-    value = schedule.name;
-  } else {
-    link = null;
-    value = schedule.name;
-  }
-
-  return { link, value };
-};
-
 function JobDetail({ job, i18n }) {
   const {
     credential,
@@ -101,9 +76,6 @@ function JobDetail({ job, i18n }) {
     workflow_job: i18n._(t`Workflow Job`),
   };
 
-  const { value: launchedByValue, link: launchedByLink } =
-    getLaunchedByDetails(job) || {};
-
   const deleteJob = async () => {
     try {
       switch (job.type) {
@@ -191,16 +163,7 @@ function JobDetail({ job, i18n }) {
           />
         )}
         <Detail label={i18n._(t`Job Type`)} value={jobTypes[job.type]} />
-        <Detail
-          label={i18n._(t`Launched By`)}
-          value={
-            launchedByLink ? (
-              <Link to={`${launchedByLink}`}>{launchedByValue}</Link>
-            ) : (
-              launchedByValue
-            )
-          }
-        />
+        <LaunchedByDetail job={job} i18n={i18n} />
         {inventory && (
           <Detail
             label={i18n._(t`Inventory`)}
@@ -349,4 +312,3 @@ JobDetail.propTypes = {
 };
 
 export default withI18n()(JobDetail);
-export { getLaunchedByDetails };