Properly marks string for translation and removes unused component

awx/ui/src/components/DetailList/NumberSinceDetail.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { node, string } from 'prop-types';
-import { t } from '@lingui/macro';
-import styled from 'styled-components';
-import _Detail from './Detail';
-
-const Detail = styled(_Detail)`
-  word-break: break-word;
-`;
-
-function NumberSinceDetail({ label, number, date, dataCy = null }) {
-  return (
-    <Detail label={label} dataCy={dataCy} value={t`${number} since ${date}`} />
-  );
-}
-NumberSinceDetail.propTypes = {
-  label: node.isRequired,
-  number: string.isRequired,
-  date: string.isRequired,
-};
-
-export default NumberSinceDetail;

awx/ui/src/components/DetailList/index.js

@@ -5,7 +5,6 @@ export { default as UserDateDetail } from './UserDateDetail';
 export { default as DetailBadge } from './DetailBadge';
 export { default as ArrayDetail } from './ArrayDetail';
 export { default as LaunchedByDetail } from './LaunchedByDetail';
-export { default as NumberSinceDetail } from './NumberSinceDetail';
 /*
   NOTE: CodeDetail cannot be imported here, as it causes circular
   dependencies in testing environment. Import it directly from

awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js

@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-icons';
 import RoutedTabs from 'components/RoutedTabs';
 import { CardBody, CardActionsRow } from 'components/Card';
-import { DetailList, Detail, NumberSinceDetail } from 'components/DetailList';
+import { DetailList, Detail } from 'components/DetailList';
 import { useConfig } from 'contexts/Config';
 import { formatDateString, secondsToDays } from 'util/dates';
 
@@ -127,15 +127,17 @@ function SubscriptionDetail() {
             label={t`Hosts imported`}
             value={license_info.current_instances}
           />
-          <NumberSinceDetail
+          <Detail
             dataCy="subscription-hosts-automated"
             label={t`Hosts automated`}
-            number={license_info.automated_instances}
-            date={
-              license_info.automated_since &&
-              formatDateString(
-                new Date(license_info.automated_since * 1000).toISOString()
-              )
+            value={
+              <>
+                {license_info.automated_instances} <Trans>since</Trans>{' '}
+                {license_info.automated_since &&
+                  formatDateString(
+                    new Date(license_info.automated_since * 1000).toISOString()
+                  )}
+              </>
             }
           />
           <Detail