Implement attachments

anet-dictionary.yml

@@ -288,7 +288,36 @@ fields:
             label: Red
             color: '#ff8279'
 
+  attachment:
+    disabled: false
+    shortLabel: Attachment
+    shortName:
+      label: Attachment Name
+      placeholder: Enter an attachment name, example....
+    description: Attachment description
+    classification:
+      type: enum
+      label: UNDEFINED / NATO_UNCLASSIFIED / NATO_UNCLASSIFIED_Releasable_to_EU
+      choices:
+        UNDEFINED:
+          value: UNDEFINED
+          label: undefined
+        NATO_UNCLASSIFIED:
+          value: NATO_UNCLASSIFIED
+          label: NATO UNCLASSIFIED
+        NATO_UNCLASSIFIED_Releasable_to_EU:
+          value: NATO_UNCLASSIFIED_Releasable_to_EU
+          label: NATO UNCLASSIFIED Releasable to EU
+    mimeTypes:
+      - application/pdf
+      - image/jpeg
+      - image/jpg
+      - image/png
+      - text/plain
+
   report:
+    attachments:
+      label: Attachments
     canUnpublishReports: true
     intent: Engagement purpose
     atmosphere: Atmospherics

build.gradle

@@ -85,6 +85,8 @@ dependencies {
 	implementation "io.dropwizard:dropwizard-auth:${dropwizardVersion}"
 	implementation "io.dropwizard:dropwizard-views-freemarker:${dropwizardVersion}"
 	implementation 'io.dropwizard-bundles:dropwizard-configurable-assets-bundle:1.3.5'
+	implementation "io.dropwizard:dropwizard-forms:${dropwizardVersion}"
+	implementation "org.jdbi:jdbi3-postgres:3.37.1"
 
 	implementation 'ru.vyarus.guicey:guicey-jdbi3:5.9.0'
 	implementation 'com.google.guava:guava:31.1-jre' // Pick the non-Android version of Guice
@@ -122,6 +124,8 @@ dependencies {
 	// used for writing Excel documents
 	implementation 'org.apache.poi:poi:5.2.3'
 	implementation 'org.apache.poi:poi-ooxml:5.2.3'
+	// For inferring MIME types of attachments
+	implementation 'org.apache.tika:tika-core:2.8.0'
 
 	// For parsing HTML to check for 'empty' input
 	implementation 'org.jsoup:jsoup:1.16.1'
@@ -394,16 +398,23 @@ task pushPsqlBaseData(type: DockerCopyFileToContainer) {
 	hostPath = "${projectDir}/insertBaseData-psql.sql"
 	remotePath = psqlPushDataPath
 }
-
 pushPsqlBaseData.mustRunAfter('dockerStartDB')
 
-task dbLoad(dependsOn: pushPsqlBaseData, type: DockerExecContainer) {
+task pushPsqlImageData(type: DockerCopyFileToContainer) {
+	group = "database runtime"
+	description = "Push SQL base data to PostgreSQL"
+	containerId = dbContainerName
+	hostPath = "${projectDir}/src/test/resources/assets/default_avatar.png"
+	remotePath = psqlPushDataPath
+}
+pushPsqlImageData.mustRunAfter('dockerStartDB')
+
+task dbLoad(dependsOn: [pushPsqlBaseData, pushPsqlImageData], type: DockerExecContainer) {
 	group = "database runtime"
 	description = "Runs the ANET database load command for PostgreSQL; loads demo data."
 	containerId = dbContainerName
 	commands = [ ["psql", "-U", run.environment["ANET_DB_USERNAME"], "-d", run.environment["ANET_DB_NAME"], "-f", "${psqlPushDataPath}/insertBaseData-psql.sql"] as String[] ]
 }
-
 dbLoad.mustRunAfter('dbMigrate')
 
 task deleteDbDump(type: DockerExecContainer) {

client/package.json

@@ -126,6 +126,7 @@
     "@fullcalendar/react": "6.1.7",
     "@fullcalendar/timegrid": "6.1.7",
     "@projectstorm/react-diagrams": "7.0.2",
+    "axios": "1.4.0",
     "bootstrap": "5.1.3",
     "change-case": "4.1.2",
     "classnames": "2.3.2",

client/src/components/Attachment/Attachment.css

@@ -0,0 +1,110 @@
+/******** FILE UPLOAD AREA ********/
+.file-upload-container {
+  margin: 10px 0;
+  display: flex;
+  position: relative;
+  padding: 35px 20px;
+  border-radius: 6px;
+  align-items: center;
+  flex-direction: column;
+  background-color: #f2f2f2;
+  border: 2px dotted lightgray;
+}
+
+.file-upload-container:hover {
+  background-color: #dddbdb;
+}
+
+.form-field {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  width: 100%;
+  border: none;
+  display: block;
+  cursor: pointer;
+  font-size: 18px;
+  position: absolute;
+  text-transform: none;
+}
+
+.drag-drop-text {
+  display: flex;
+  margin-top: 0;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+  letter-spacing: 2.2px;
+}
+
+.drag-drop-text > img {
+  margin-bottom: 10px;
+  width: fit-content;
+}
+
+.image-preview {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}
+
+.file-info {
+  display: none;
+}
+.info-show:hover .file-info {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff73;
+  justify-content: space-between;
+}
+.info-line {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.file-info > .bp4-popover2-target {
+  height: 100%;
+  width: 100%;
+}
+.detail-btn {
+  display: grid;
+  width: 100%;
+  height: 120px;
+  place-content: center;
+}
+.icon:hover {
+  cursor: pointer;
+}
+.edit:hover {
+  color: blue;
+}
+.delete:hover {
+  color: #cd2222;
+}
+
+/******** ATTACHMENT CARD ********/
+.card-image {
+  width: 100%;
+  height: 120px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 0.10rem 0.10rem 0 0;
+}
+
+/******** ATTACHMENT SHOW PAGE ********/
+.img-preview {
+  height: 100%;
+  overflow: hidden;
+}
+.attachment-image {
+  width: 100%;
+  border-radius: 5px;
+  transition: transform .5s ease;
+}
+.img-hover-zoom:hover .attachment-image {
+  cursor: zoom-in;
+  transform: scale(1.5);
+}

client/src/components/Attachment/AttachmentCard.js

@@ -0,0 +1,127 @@
+import { gql } from "@apollo/client"
+import { Icon } from "@blueprintjs/core"
+import { IconNames } from "@blueprintjs/icons"
+import API from "api"
+import ConfirmDestructive from "components/ConfirmDestructive"
+import LinkTo from "components/LinkTo"
+import PropTypes from "prop-types"
+import React from "react"
+import { Card } from "react-bootstrap"
+import { toast } from "react-toastify"
+import utils from "utils"
+import "./Attachment.css"
+
+const GQL_DELETE_ATTACHMENT = gql`
+  mutation ($uuid: String!) {
+    deleteAttachment(uuid: $uuid)
+  }
+`
+
+const AttachmentCard = ({
+  attachment,
+  edit,
+  remove,
+  setError,
+  setRemove,
+  uploadedList,
+  setUploadedList
+}) => {
+  const { backgroundSize, backgroundImage } = utils.getAttachmentIconDetails(
+    attachment,
+    true
+  )
+
+  return (
+    <div id="attachmentCard" key={attachment.uuid} style={{ width: "20%" }}>
+      <Card>
+        <div
+          className="image-preview info-show card-image"
+          style={{
+            backgroundSize,
+            backgroundImage: `url(${backgroundImage})`
+          }}
+        >
+          <div className="file-info image-info">
+            <div style={{ display: "grid" }}>
+              <LinkTo
+                className="detail-btn"
+                modelType="Attachment"
+                model={attachment}
+              >
+                {" "}
+              </LinkTo>
+            </div>
+          </div>
+        </div>
+        <Card.Body className="p-1 d-block">
+          <Card.Title style={{ fontSize: "15px" }} className="info-line">
+            {utils.ellipsize(attachment?.fileName, 8)}
+            <span>
+              {utils.humanReadableFileSize(attachment?.contentLength)}
+            </span>
+          </Card.Title>
+          {edit && (
+            <div className="info-line">
+              <div>
+                <LinkTo
+                  modelType="Attachment"
+                  edit
+                  model={attachment}
+                  button="outline-primary"
+                >
+                  <Icon icon={IconNames.EDIT} className="icon edit" />
+                </LinkTo>
+              </div>
+              <ConfirmDestructive
+                onConfirm={() => deleteAttachment(attachment)}
+                objectType="attachment"
+                objectDisplay={"#" + attachment.uuid}
+                title="Delete attachment"
+                variant="outline-danger"
+                buttonSize="xs"
+              >
+                <Icon icon={IconNames.TRASH} />
+              </ConfirmDestructive>
+            </div>
+          )}
+        </Card.Body>
+      </Card>
+    </div>
+  )
+
+  function deleteAttachment(attachment) {
+    const newAttachments = uploadedList.filter(
+      item => item.uuid !== attachment.uuid
+    )
+    API.mutation(GQL_DELETE_ATTACHMENT, { uuid: attachment.uuid })
+      .then(data => {
+        setUploadedList(newAttachments)
+        if (!remove) {
+          setRemove(true)
+        }
+        toast.success(
+          `Your attachment ${attachment.fileName} has been successfully deleted`
+        )
+      })
+      .catch(error => {
+        setError(error)
+      })
+  }
+}
+
+AttachmentCard.propTypes = {
+  attachment: PropTypes.object,
+  edit: PropTypes.bool,
+  remove: PropTypes.bool,
+  setError: PropTypes.func,
+  setRemove: PropTypes.func,
+  uploadedList: PropTypes.array,
+  setUploadedList: PropTypes.func
+}
+
+AttachmentCard.defaultProps = {
+  edit: true,
+  remove: undefined
+}
+
+export default AttachmentCard

client/src/components/Attachment/AttachmentRelatedObjectsTable.js

@@ -0,0 +1,38 @@
+import LinkTo from "components/LinkTo"
+import Model from "components/Model"
+import React from "react"
+import { Table } from "react-bootstrap"
+
+const AttachmentRelatedObjectsTable = ({ relatedObjects }) => {
+  return (
+    <div id="related_objects">
+      {!relatedObjects?.length ? (
+        <em>No linked objects</em>
+      ) : (
+        <Table striped hover responsive className="related_objects_table">
+          <tbody>
+            {relatedObjects.map(attachRelObj => (
+              <tr key={attachRelObj.relatedObjectUuid}>
+                <td>
+                  <LinkTo
+                    modelType={attachRelObj.relatedObjectType}
+                    model={{
+                      uuid: attachRelObj.relatedObjectUuid,
+                      ...attachRelObj.relatedObject
+                    }}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      )}
+    </div>
+  )
+}
+
+AttachmentRelatedObjectsTable.propTypes = {
+  relatedObjects: Model.attachmentRelatedObjectsPropType.isRequired
+}
+
+export default AttachmentRelatedObjectsTable