ui: add attachment file icon in workflow

CHANGELOG.md

@@ -31,7 +31,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fixed Actions table of confirmation dialog alignment [#677](https://github.com/openkfw/TruBudget/issues/677)
 
 ### Added
-
+- Added attachmentfile icon in workflow table [#234](https://github.com/openkfw/TruBudget/issues/234)
 - Added multiple selection to user selection for groups [#679](https://github.com/openkfw/TruBudget/issues/679)
 
 ## [1.17.0] - 2020-12-10

e2e-test/cypress/integration/suproject_view_details_spec.js

@@ -0,0 +1,52 @@
+describe("Attachment icon", function() {
+  let projectId;
+  let subprojectId;
+
+  before(() => {
+    cy.login();
+
+    cy.createProject("workflowitem create test project", "workflowitem create test", [])
+      .then(({ id }) => {
+        projectId = id;
+        return cy.createSubproject(projectId, "workflowitem create test", "EUR");
+      })
+      .then(({ id }) => {
+        subprojectId = id;
+      });
+  });
+
+  beforeEach(function() {
+    cy.login();
+    cy.visit(`/projects/${projectId}/${subprojectId}`);
+  });
+
+  it("If documents array is empty, the attachedFile icon badge is not displayed", function() {
+    // Create a workflow item
+    cy.createWorkflowitem(projectId, subprojectId, "workflowitem assign test", {
+      amountType: "N/A",
+      documents: []
+    }).then(({ id }) => {
+      let workflowitemId = id;
+      // Check if attach file icon badge is NOT displayed
+      cy.get(`[data-test^='attachment-file-badge-show-${workflowitemId}']`).should("not.be.visible");
+    });
+  });
+
+  it("If documents array is not empty, the attachedFile icon badge is displayed", function() {
+    // Create a workflow item
+    cy.createWorkflowitem(projectId, subprojectId, "workflowitem assign test", {
+      amountType: "N/A",
+      documents: [
+        {
+          id: "classroom-contract",
+          base64: "dGVzdCBiYXNlNjRTdHJpbmc=",
+          fileName: "test-document"
+        }
+      ]
+    }).then(({ id }) => {
+      let workflowitemId = id;
+      // Check if attach file icon badge is NOT displayed
+      cy.get(`[data-test^='attachment-file-badge-show-${workflowitemId}']`).should("be.visible");
+    });
+  });
+});

frontend/src/pages/Workflows/WorkflowItem.js

@@ -9,6 +9,7 @@ import Typography from "@material-ui/core/Typography";
 import DoneIcon from "@material-ui/icons/Check";
 import EditIcon from "@material-ui/icons/Edit";
 import InfoIcon from "@material-ui/icons/InfoOutlined";
+import AttachmentIcon from '@material-ui/icons/Attachment';
 import PermissionIcon from "@material-ui/icons/LockOpen";
 import MoreIcon from "@material-ui/icons/MoreHoriz";
 import OpenIcon from "@material-ui/icons/Remove";
@@ -31,6 +32,14 @@ const styles = theme => {
     text: {
       fontSize: "14px"
     },
+    tooltip: {
+      margin: '0px',
+      padding: '0px 5px 0px 15px'
+    },
+    tooltipItem: {
+      fontSize: '12px',
+      margin: '5px 0'
+    },
     dots: {
       height: 20,
       width: 20,
@@ -289,6 +298,41 @@ const getInfoButton = (classes, { openWorkflowDetails }, status, workflowSortEna
   );
 };
 
+const getAttachmentButton = (classes, { openWorkflowDetails }, status, workflowSortEnabled, workflow) => {
+  const {documents} = workflow;
+  const showAttachFileBadge = documents && documents.length > 0;
+  const attachmentFileTooltip = () => showAttachFileBadge &&
+    <ul className={classes.tooltip}>
+      {documents.map((item, index) => <li key={`${item.id}_${index}`} className={classes.tooltipItem}>{item.id}</li>)}
+    </ul>;
+  return (
+    <div>
+      {
+        showAttachFileBadge &&
+          <Tooltip
+            id={`tooltip-workflow-attachfile-${workflow.id}`}
+            data-test={`tooltip-workflow-attachfile-data-${workflow.id}`}
+            title={attachmentFileTooltip()}
+          >
+            <StyledBadge
+              variant="dot"
+              invisible={!showAttachFileBadge}
+              data-test={`attachment-file-badge-show-${workflow.id}`}
+              className={classes.buttonStyle}
+            >
+              <IconButton
+                style={{cursor: 'default'}}
+                data-test={`workflowitem-attachment-file-button-${workflow.id}`}
+              >
+                <AttachmentIcon />
+              </IconButton>
+            </StyledBadge>
+          </Tooltip>
+      }
+    </div>
+  );
+}
+
 const isWorkflowSelectable = (currentWorkflowSelectable, workflowSortEnabled, status) => {
   const workflowSortable = status === "open";
   return workflowSortEnabled ? workflowSortable : currentWorkflowSelectable;
@@ -459,6 +503,7 @@ export const WorkflowItem = withTheme(
         const itemStyle = workflowSelectable ? {} : { opacity: 0.31 };
         const showEdit = canUpdateWorkflowItem(allowedIntents) && status !== "closed";
         const infoButton = getInfoButton(classes, props, status, workflowSortEnabled, workflow.data);
+        const attachmentButton = getAttachmentButton(classes, props, status, workflowSortEnabled, workflow.data);
         const canAssign = canAssignWorkflowItem(allowedIntents) && status !== "closed";
         const canCloseWorkflowitem = currentUser === assignee;
         const showClose = canCloseWorkflowitem && workflowSelectable && status !== "closed";
@@ -484,6 +529,7 @@ export const WorkflowItem = withTheme(
             >
               <div className={classes.workflowContent} data-test={`workflowitem-${id}`}>
                 <div className={classes.infoCell}>{infoButton}</div>
+                <div className={classes.infoCell}>{attachmentButton}</div>
                 <div className={`${classes.text} ${classes.workflowCell}`} style={itemStyle}>
                   <Typography variant="body2" className={classes.typographs}>
                     {displayName}