api: Send workflow item currency with subproject details

CHANGELOG.md

@@ -15,7 +15,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 <!-- ### Removed -->
 
-<!-- ### Fixed-->
+### Fixed
+
+- Display correct currency when editing workflow items [#281](https://github.com/openkfw/TruBudget/issues/281)
 
 <!-- ### Security -->
 

api/src/subproject_view_details.ts

@@ -133,6 +133,7 @@ interface ExposedWorkflowitem {
   data: {
     id: string;
     creationUnixTs: string;
+    currency: string | null | undefined;
     displayName: string | null;
     exchangeRate: string | undefined | null;
     billingDate: string | undefined | null;
@@ -267,6 +268,7 @@ export function addHttpHandler(server: FastifyInstance, urlPrefix: string, servi
             creationUnixTs: toUnixTimestampStr(workflowitem.createdAt),
             displayName: workflowitem.displayName,
             exchangeRate: workflowitem.exchangeRate,
+            currency: workflowitem.currency,
             billingDate: workflowitem.billingDate,
             amountType: workflowitem.amountType,
             description: workflowitem.description,

e2e-test/cypress/integration/workflowitem_edit_spec.js

@@ -0,0 +1,115 @@
+describe("Workflowitem's history", function() {
+  let projectId;
+  let subprojectId;
+
+  before(() => {
+    cy.login();
+
+    cy.createProject("workflowitem edit test project", "workflowitem edit test", [])
+      .then(({ id }) => {
+        projectId = id;
+        return cy.createSubproject(projectId, "workflowitem edit test", "EUR");
+      })
+      .then(({ id }) => {
+        subprojectId = id;
+      });
+  });
+
+  beforeEach(function() {
+    cy.login();
+    cy.visit(`/projects/${projectId}/${subprojectId}`);
+  });
+
+  it("After creating an allocated workflowitem, the currency is equal to the subproject's currency", function() {
+    // Create a workflow item
+    cy.get("[data-test=createWorkflowitem]").click();
+    cy.get("[data-test=nameinput] input").type("Test");
+    cy.get("[data-test=commentinput] textarea")
+      .last()
+      .type("Test");
+    cy.get("[data-test=amount-type-allocated]").click();
+    cy.get("[data-test=dropdown-currencies-click]").should("contain", "EUR");
+
+    // When the currency is equal to the currency of the subproject
+    // the exchange rate field is disabled
+    cy.get("[data-test=rateinput] input").should("be.disabled");
+  });
+
+  it("After selecting another currencty, the exchange rate can be entered and is saved correctly", function() {
+    // Create a workflow item
+    cy.get("[data-test=createWorkflowitem]").click();
+    cy.get("[data-test=nameinput] input").type("Test");
+    cy.get("[data-test=commentinput] textarea")
+      .last()
+      .type("Test");
+    cy.get("[data-test=amount-type-allocated]").click();
+
+    // Select a different currency than the subproject currency
+    cy.get("[data-test=dropdown-currencies-click]").click();
+    cy.get("[data-value=USD]").click();
+
+    // Enter amount
+    cy.get("[data-test=amountinput] input").type("1234");
+
+    // The exchange rate field should be enabled because
+    // we selected a different currency
+    cy.get("[data-test=rateinput] input").should("be.enabled");
+    cy.get("[data-test=rateinput] input").type("1.5");
+    cy.get("[data-test=next]").click();
+    cy.get("[data-test=submit]").click();
+
+    // The workflow item amount should be displayed in the
+    // subproject's currency
+    cy.get("[data-test=workflowitem-amount]")
+      .first()
+      .should("contain", "€");
+
+    // The information on the workflow item amount
+    // and exchange rate is displayed in a tooltip
+    cy.get("[data-test=amount-explanation]")
+      .first()
+      .should("have.attr", "title")
+      .should("contain", "$");
+  });
+
+  it(
+    "When editing a workflow item with a different currency than the subproject currency, " +
+      "the selected currency is displayed",
+    function() {
+      // Create a workflow item and select a different currency
+      cy.get("[data-test=createWorkflowitem]").click();
+      cy.get("[data-test=nameinput] input").type("Test");
+      cy.get("[data-test=commentinput] textarea")
+        .last()
+        .type("Test");
+      cy.get("[data-test=amount-type-allocated]").click();
+      cy.get("[data-test=dropdown-currencies-click]").click();
+      cy.get("[data-value=USD]").click();
+      cy.get("[data-test=amountinput] input").type("1234");
+      cy.get("[data-test=rateinput] input").should("be.enabled");
+      cy.get("[data-test=rateinput] input").type("1.5");
+      cy.get("[data-test=next]").click();
+      cy.get("[data-test=submit]").click();
+
+      // Verify the selected values
+      cy.get("[data-test=workflowitem-amount]")
+        .first()
+        .should("contain", "€");
+      cy.get("[data-test=amount-explanation]")
+        .first()
+        .should("have.attr", "title")
+        .should("contain", "$");
+
+      // Edit the workflow item and verify that the
+      // pre-selected currency is the one we selected
+      // when the workflow item was created
+      cy.get("[data-test=edit-workflowitem]")
+        .last()
+        .click();
+      cy.get("[data-test=dropdown-currencies-click]").should("contain", "USD");
+
+      // Close the dialog
+      cy.get("[data-test=cancel]").click();
+    }
+  );
+});

frontend/src/pages/Common/Identifier.js

@@ -21,7 +21,7 @@ class Identifier extends Component {
           helperText={this.props.nameHintText}
           value={this.props.name}
           onChange={this.props.nameOnChange}
-          id="nameinput"
+          data-test={this.props.commentId || "nameinput"}
         />
 
         <TextInput
@@ -30,7 +30,7 @@ class Identifier extends Component {
           value={this.props.comment}
           onChange={this.props.commentOnChange}
           multiline={true}
-          id="commentinput"
+          data-test={this.props.commentId || "commentinput"}
         />
       </div>
     );

frontend/src/pages/Common/TextInput.js

@@ -20,7 +20,9 @@ const TextInput = ({
   multiline = false,
   type = "text",
   disabled = false,
-  id
+  id,
+  // eslint-disable-next-line no-useless-computed-key
+  ["data-test"]: dataTest
 }) => (
   <TextField
     label={label}
@@ -34,6 +36,7 @@ const TextInput = ({
     onChange={event => onChange(event.target.value)}
     onBlur={onBlur}
     pattern={pattern}
+    data-test={dataTest}
   />
 );
 

frontend/src/pages/Workflows/Workflow.js

@@ -38,7 +38,7 @@ const Workflow = props => {
         {/* Button is disabled either if the user is not allowed to edit or the user is in "sort" mode */}
         <Fab
           disabled={createDisabled}
-          id="createWorkflowItem"
+          data-test="createWorkflowitem"
           color="primary"
           onClick={() => props.showCreateDialog()}
           style={{

frontend/src/pages/Workflows/WorkflowContainer.js

@@ -21,7 +21,6 @@ import {
   enableSubProjectBudgetEdit,
   enableWorkflowEdit,
   fetchAllSubprojectDetails,
-  fetchWorkflowItems,
   hideWorkflowDetails,
   hideWorkflowDialog,
   hideWorkflowitemAdditionalData,
@@ -142,7 +141,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     closeSubproject: (pId, sId) => dispatch(closeSubproject(pId, sId, true)),
     closeWorkflowItem: (pId, sId, wId) => dispatch(closeWorkflowItem(pId, sId, wId, true)),
 
-    fetchWorkflowItems: streamName => dispatch(fetchWorkflowItems(streamName)),
     setSelectedView: (id, section) => dispatch(setSelectedView(id, section)),
 
     showWorkflowItemPermissions: wId => dispatch(showWorkflowItemPermissions(wId)),

frontend/src/pages/Workflows/WorkflowDialogAmount.js

@@ -67,16 +67,19 @@ class WorkflowDialogAmount extends Component {
               value="N/A"
               control={<Radio color="primary" />}
               label={strings.workflow.workflow_budget_na}
+              data-test="amount-type-na"
             />
             <FormControlLabel
               value="allocated"
               control={<Radio color="primary" />}
               label={strings.workflow.workflow_budget_allocated}
+              data-test="amount-type-allocated"
             />
             <FormControlLabel
               value="disbursed"
               control={<Radio color="primary" />}
               label={strings.workflow.workflow_budget_disbursed}
+              data-test="amount-type-disbursed"
             />
           </RadioGroup>
         </div>
@@ -133,7 +136,7 @@ class WorkflowDialogAmount extends Component {
           type="text"
           multiline={false}
           aria-label="amount"
-          id="amountinput"
+          data-test="amountinput"
           style={{
             width: "20%",
             paddingRight: 20
@@ -152,7 +155,7 @@ class WorkflowDialogAmount extends Component {
           }}
           type="text"
           aria-label="rate"
-          id="rateinput"
+          data-test="rateinput"
           disabled={workflowCurrency === subProjectCurrency}
           style={{
             width: "20%",

frontend/src/pages/Workflows/WorkflowItem.js

@@ -257,7 +257,7 @@ const getAmountField = (amount, type, exchangeRate, sourceCurrency, targetCurren
 
   const amountExplanationTitle = toAmountString(amount, sourceCurrency) + " x " + exchangeRate;
   const amountExplaination = (
-    <Tooltip title={amountExplanationTitle}>
+    <Tooltip data-test="amount-explanation" title={amountExplanationTitle}>
       <SwapIcon />
     </Tooltip>
   );
@@ -307,7 +307,17 @@ const getCardStyle = (workflowSortEnabled, status) => {
   return style;
 };
 
-const ActionButton = ({ notVisible, disabled, onClick, icon, title, workflowSortEnabled, status }) => {
+const ActionButton = ({
+  notVisible,
+  disabled,
+  onClick,
+  icon,
+  title,
+  workflowSortEnabled,
+  status,
+  // eslint-disable-next-line no-useless-computed-key
+  ["data-test"]: dataTest
+}) => {
   return (
     <div style={styles.actionButton}>
       <Tooltip
@@ -322,6 +332,7 @@ const ActionButton = ({ notVisible, disabled, onClick, icon, title, workflowSort
             onClick={onClick}
             style={notVisible ? { ...styles.hide } : getButtonStyle(workflowSortEnabled, status)}
             disabled={disabled}
+            data-test={dataTest}
           >
             {icon}
           </IconButton>
@@ -360,6 +371,7 @@ const renderActionButtons = (
           title={additionalDataDisabled ? "" : strings.common.additional_data}
           workflowSortEnabled={workflowSortEnabled}
           status={status}
+          data-test="additional-data-icon"
         />
         <ActionButton
           notVisible={workflowSortEnabled || status === "closed"}
@@ -369,6 +381,7 @@ const renderActionButtons = (
           title={editDisabled ? "" : strings.common.edit}
           workflowSortEnabled={workflowSortEnabled}
           status={status}
+          data-test="edit-workflowitem"
         />
         <ActionButton
           notVisible={workflowSortEnabled}
@@ -378,6 +391,7 @@ const renderActionButtons = (
           title={permissionsDisabled ? "" : strings.common.show_permissions}
           workflowSortEnabled={workflowSortEnabled}
           status={status}
+          data-test="show-permissions-icon"
         />
         <ActionButton
           notVisible={workflowSortEnabled || status === "closed"}
@@ -447,7 +461,7 @@ export const WorkflowItem = SortableElement(
               </Typography>
             </div>
             <div style={{ ...itemStyle, ...styles.listText, ...styles.workflowCell }}>
-              <Typography variant="body2" style={styles.typographs} component="div">
+              <Typography variant="body2" style={styles.typographs} component="div" data-test="workflowitem-amount">
                 {amountType === "N/A"
                   ? amountTypes(amountType)
                   : getAmountField(amount, amountType, exchangeRate, sourceCurrency, targetCurrency)}

frontend/src/pages/Workflows/actions.js

@@ -1,6 +1,3 @@
-export const FETCH_WORKFLOW_ITEMS = "FETCH_WORKFLOW_ITEMS";
-export const FETCH_WORKFLOW_ITEMS_SUCCESS = "FETCH_WORKFLOW_ITEMS_SUCCESS";
-
 export const SHOW_WORKFLOW_CREATE = "SHOW_WORKFLOW_CREATE";
 export const HIDE_WORKFLOW_DIALOG = "HIDE_WORKFLOW_DIALOG";
 
@@ -344,13 +341,6 @@ export function updateWorkflowOrderOnState(workflowItems) {
   };
 }
 
-export function fetchWorkflowItems(streamName) {
-  return {
-    type: FETCH_WORKFLOW_ITEMS,
-    streamName: streamName
-  };
-}
-
 export function storeWorkflowActions(actions) {
   return {
     type: STORE_WORKFLOWACTIONS,