Skip to content

Commit

Permalink
Translation history modal to show leveraging and integrity check mess…
Browse files Browse the repository at this point in the history 
…ages

This helps to bring visibility to the translation status by showing the root cause of a "rejected" string or a "need translation" string due to leveraging or integrity checks.

If there are "comments" on a text unit variant then an accordion will be display. Expanding the accordion will show log style information, typically leveraging and integrity checks messages
  • Loading branch information
@aurambaj
aurambaj committed Jul 14, 2023
1 parent d49be87 commit f0a8ef7
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 91 deletions.
90 changes: 45 additions & 45 deletions webapp/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion webapp/src/main/resources/public/js/actions/workbench/TranslationHistoryActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ class TranslationHistoryActions {
"openWithTextUnit",
"getTranslationHistorySuccess",
"getTranslationHistoryError",
"close"
"close",
"changeOpenTmTextUnitVariant"
);
}
}
Expand Down
5 changes: 3 additions & 2 deletions webapp/src/main/resources/public/js/components/widgets/StatusGlyph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ class StatusGlyph extends React.Component {
TextUnitSDK.STATUS.REVIEW_NEEDED,
TextUnitSDK.STATUS.TRANSLATION_NEEDED,
TextUnitSDK.STATUS.REJECTED]).isRequired,
"onClick": PropTypes.func.isRequired
"onClick": PropTypes.func.isRequired,
"noButton" : PropTypes.bool,
};

getGlyphTypeAndTitle = (type) => {
Expand Down Expand Up @@ -49,7 +50,7 @@ class StatusGlyph extends React.Component {
glyph={glyph.type}
title={glyph.title}
onClick={this.props.onClick}
className="btn"
className={this.props.noButton ? "" : "btn"}
/>);
}
}
Expand Down
129 changes: 87 additions & 42 deletions webapp/src/main/resources/public/js/components/workbench/TranslationHistoryModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import PropTypes from "prop-types";
import React from "react";
import { FormattedMessage, injectIntl } from "react-intl";
import { Button, Modal } from "react-bootstrap";
import { Button, Glyphicon, Modal } from "react-bootstrap";
import { Table } from "react-bootstrap";
import StatusGlyph from "../widgets/StatusGlyph";
import TextUnitSDK from "../../sdk/TextUnit";
Expand All @@ -12,29 +12,74 @@ class translationHistoryModal extends React.Component {
show: PropTypes.bool.isRequired,
textUnit: PropTypes.object.isRequired,
translationHistory: PropTypes.object.isRequired,
onChangeOpenTmTextUnitVariant: PropTypes.func.isRequired,
};
}

renderHistoryItem = (item) => {
const { textUnit } = this.props;
const { textUnit, openTmTextUnitVariantId } = this.props;
const rowClass = textUnit.getTmTextUnitVariantId() === item.id ? "history-current-variant" : "";
const status = item.id && !item.includedInLocalizedFile ? TextUnitSDK.STATUS.REJECTED : item.status;
const isOpenTmTextUnitVariant = openTmTextUnitVariantId === item.id;

return item ? (
<tr className={rowClass}>
<td className="history-none">
{item.createdByUser === null ? (
<FormattedMessage id="textUnit.translationHistoryModal.NoUser" />
) : (
item.createdByUser.username
)}
</td>
<td>{item.content}</td>
<td>{this.convertDateTime(item.createdDate)}</td>
<td>
<StatusGlyph status={status} onClick={() => ""} />
</td>
</tr>
<React.Fragment key={item.id}>
<tr className={rowClass} key={`${item.id}-1`}>
<td>
{item.tmTextUnitVariantComments.length == 0 ? (
""
) : (
<Button
bsSize="xsmall"
onClick={() => this.props.onChangeOpenTmTextUnitVariant(isOpenTmTextUnitVariant ? null : item.id)}
>
<Glyphicon
glyph={isOpenTmTextUnitVariant ? "chevron-down" : "chevron-right"}
className="color-gray-light"
/>
</Button>
)}
</td>
<td className="history-none">
{item.createdByUser === null ? (
<FormattedMessage id="textUnit.translationHistoryModal.NoUser" />
) : (
item.createdByUser.username
)}
</td>
<td>{item.content}</td>
<td>{this.convertDateTime(item.createdDate)}</td>
<td>
<StatusGlyph status={status} noButton={true} onClick={() => ""} />
</td>
</tr>
{isOpenTmTextUnitVariant ? (
<tr key={`${item.id}-2`}>
<td colSpan={5}>
<Table>
<thead>
<tr>
<th className="col-md-1">type</th>
<th className="col-md-1">severity</th>
<th className="col-md-14">content</th>
</tr>
</thead>
<tbody>
{item.tmTextUnitVariantComments.map((tmTextUnitVariantComment) => (
<tr key={tmTextUnitVariantComment.id}>
<td>{tmTextUnitVariantComment.type}</td>
<td>{tmTextUnitVariantComment.severity}</td>
<td>{tmTextUnitVariantComment.content}</td>
</tr>
))}
</tbody>
</Table>
</td>
</tr>
) : (
""
)}
</React.Fragment>
) : (
""
);
Expand All @@ -44,40 +89,40 @@ class translationHistoryModal extends React.Component {
* @returns {*} Generated content for the git blame information section
*/
rendertranslationHistory = () => {
const { translationHistory, textUnit, intl } = this.props;
const { translationHistory, textUnit, intl, openTmTextUnitVariantId } = this.props;

return (
<Table className="repo-table table-padded-sides">
<thead>
<tr>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.User" />
</th>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.Translation" />
</th>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.Date" />
</th>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.Status" />
</th>
</tr>
<tr>
<th className="col-md-1"></th>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.User" />
</th>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.Translation" />
</th>
<th className="col-md-4">
<FormattedMessage id="textUnit.translationHistoryModal.Date" />
</th>
<th className="col-md-3">
<FormattedMessage id="textUnit.translationHistoryModal.Status" />
</th>
</tr>
</thead>
<tbody>
{translationHistory && translationHistory.length ? translationHistory.map(this.renderHistoryItem.bind(this)) : ""}
{this.renderHistoryItem({
createdByUser: {
username: "mojito",
},
content: (
<span class="history-none">
{translationHistory && translationHistory.length ? translationHistory.map(this.renderHistoryItem.bind(this)) : ""}
<tr key={`${textUnit.id}-0`}>
<td></td>
<td>-</td>
<td>
<span className="history-none">
<FormattedMessage id="textUnit.translationHistoryModal.InitialPush" />
</span>
),
createdDate: textUnit.getTmTextUnitCreatedDate(),
status: TextUnitSDK.STATUS.TRANSLATION_NEEDED,
})}
</td>
<td>{this.convertDateTime(textUnit.getCreatedDate())}</td>
<td></td>
</tr>
</tbody>
</Table>
);
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/main/resources/public/js/components/workbench/Workbench.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,8 @@ let Workbench = createReactClass({
/>
</AltContainer>
<AltContainer store={TranslationHistoryStore}>
<TranslationHistoryModal onCloseModal={TranslationHistoryActions.close}/>
<TranslationHistoryModal onCloseModal={TranslationHistoryActions.close}
onChangeOpenTmTextUnitVariant={TranslationHistoryActions.changeOpenTmTextUnitVariant}/>
</AltContainer>
</div>
);
Expand Down
Loading

0 comments on commit f0a8ef7

Please sign in to comment.