From 8ff09021779e4f162292517ea2ec67b59a464dea Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Wed, 18 Dec 2019 11:44:38 -0800 Subject: [PATCH] Fix UserDateDetail translation Add UserDateDetail to Org detail & InventoryGroupDetail Add VariablesDetail to InventoryGroupDetail --- awx/ui_next/CONTRIBUTING.md | 4 +- .../CodeMirrorInput/VariablesDetail.jsx | 4 + .../components/DetailList/UserDateDetail.jsx | 15 ++-- .../InventoryDetail/InventoryDetail.jsx | 12 ++- .../InventoryGroup/InventoryGroup.jsx | 6 +- .../InventoryGroupDetail.jsx | 74 ++++++------------- .../Project/ProjectDetail/ProjectDetail.jsx | 41 +++------- .../JobTemplateDetail/JobTemplateDetail.jsx | 51 +++---------- 8 files changed, 67 insertions(+), 140 deletions(-) diff --git a/awx/ui_next/CONTRIBUTING.md b/awx/ui_next/CONTRIBUTING.md index 749dc8ab20..105935734f 100644 --- a/awx/ui_next/CONTRIBUTING.md +++ b/awx/ui_next/CONTRIBUTING.md @@ -112,7 +112,7 @@ afterEach(() => { ... ``` -**Test Attributes** - +**Test Attributes** - It should be noted that the `dataCy` prop, as well as its equivalent attribute `data-cy`, are used as flags for any UI test that wants to avoid relying on brittle CSS selectors such as `nth-of-type()`. ## Handling API Errors @@ -296,7 +296,7 @@ The lingui library provides various React helpers for dealing with both marking **Note:** Variables that are put inside the t-marked template tag will not be translated. If you have a variable string with text that needs translating, you must wrap it in ```i18n._(t``)``` where it is defined. -**Note:** We do not use the `I18n` consumer, `i18nMark` function, or `` component lingui gives us access to in this repo. i18nMark does not actually replace the string in the UI (leading to the potential for untranslated bugs), and the other helpers are redundant. Settling on a consistent, single pattern helps us ease the mental overhead of the need to understand the ins and outs of the lingui API. +**Note:** We try to avoid the `I18n` consumer, `i18nMark` function, or `` component lingui gives us access to in this repo. i18nMark does not actually replace the string in the UI (leading to the potential for untranslated bugs), and the other helpers are redundant. Settling on a consistent, single pattern helps us ease the mental overhead of the need to understand the ins and outs of the lingui API. You can learn more about the ways lingui and its React helpers at [this link](https://lingui.js.org/tutorials/react-patterns.html). diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx index 2ea8e15ff9..d89ea07b58 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx @@ -14,6 +14,10 @@ function VariablesDetail({ value, label, rows }) { const [currentValue, setCurrentValue] = useState(value); const [error, setError] = useState(null); + if (!value) { + return null; + } + return ( <> - {formatDateString(date)} - {user && ' by '} - {user && {user.username}} - + user ? ( + + {dateStr} by {username} + + ) : ( + dateStr + ) } /> ); diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx index d3e67e2da5..c0628b663c 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx @@ -68,13 +68,11 @@ function InventoryDetail({ inventory, i18n }) { } /> - {inventory.variables && ( - - )} + + - + ); } return ( diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx index 8cf97cffc0..8f09750642 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx @@ -3,23 +3,16 @@ import { t } from '@lingui/macro'; import { CardBody, Button } from '@patternfly/react-core'; import { withI18n } from '@lingui/react'; -import { withRouter, Link } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import styled from 'styled-components'; -import { VariablesInput as CodeMirrorInput } from '@components/CodeMirrorInput'; +import { VariablesDetail } from '@components/CodeMirrorInput'; import ErrorDetail from '@components/ErrorDetail'; import AlertModal from '@components/AlertModal'; -import { formatDateString } from '@util/dates'; import { GroupsAPI } from '@api'; -import { DetailList, Detail } from '@components/DetailList'; +import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; -const VariablesInput = styled(CodeMirrorInput)` - .pf-c-form__label { - font-weight: 600; - font-size: 16px; - } - margin: 20px 0; -`; +// TODO: extract this into a component for use in all relevant Detail views const ActionButtonWrapper = styled.div` display: flex; justify-content: flex-end; @@ -28,6 +21,7 @@ const ActionButtonWrapper = styled.div` margin-left: 20px; } `; + function InventoryGroupDetail({ i18n, history, match, inventoryGroup }) { const { summary_fields: { created_by, modified_by }, @@ -50,52 +44,26 @@ function InventoryGroupDetail({ i18n, history, match, inventoryGroup }) { } }; - let createdBy = ''; - if (created) { - if (created_by && created_by.username) { - createdBy = ( - - {i18n._(t`${formatDateString(inventoryGroup.created)} by`)}{' '} - {created_by.username} - - ); - } else { - createdBy = formatDateString(inventoryGroup.created); - } - } - - let modifiedBy = ''; - if (modified) { - if (modified_by && modified_by.username) { - modifiedBy = ( - - {i18n._(t`${formatDateString(inventoryGroup.modified)} by`)}{' '} - {modified_by.username} - - ); - } else { - modifiedBy = formatDateString(inventoryGroup.modified); - } - } - return ( - + - - - - {createdBy && } - {modifiedBy && ( - - )} + + +