Merge branch 'main' into dont_orphan_asset_on_annotation_patch

Author: naknomum

PhotoUploadDevNotes.md

@@ -0,0 +1,13 @@
+# Photo Upload
+
+There are currently three places to change the default photo upload size and default max count amount. These three places affect these pages or modals: `Submit -> Report an Encounter`, `Submit -> Report an Encounter (classic)`, `Submit -> Bulk Import`, `Submit -> Bulk Import -> See Instructions`.
+
+This is linked from comments in the relevant files which say: `Refer to PhotoUploadDevNotes.md for information/where else to change`. Non-development properties files are not annotated with this comment since those files will be changed by users.
+
+Order of using:
+1. `commonConfiguration.properties`, which each production Wildbook can change if needed
+    - ./devops/deploy/.dockerfiles/tomcat/commonConfiguration.properties
+    - ./devops/development/.dockerfiles/tomcat/commonConfiguration.properties
+    - ./src/main/resources/bundles/commonConfiguration.properties
+2. `org/ecocean/CommonConfiguration.java`, first fallback if properties are not initialized
+3. `frontend/src/constants/photoUpload.js`, second fallback if SiteSettings is not accessible

devops/deploy/.dockerfiles/tomcat/commonConfiguration.properties

@@ -329,7 +329,9 @@ biologicalMeasurementSamplingProtocols2 = No lipids extracted, uncorrected
 
 #Maximum uploadable media size in megabytes (MB)
 #This value is used for encounter images and videos as well as for file associations added to a MarkedIndividual.
-maxMediaSize = 40
+maxMediaSize = 3
+#Maximum number of media per encounter
+maximumMediaCountEncounter = 200
 
 #allow video download for not logged in users
 videoDLNotLoggedIn = false

devops/development/.dockerfiles/tomcat/commonConfiguration.properties

@@ -329,7 +329,10 @@ biologicalMeasurementSamplingProtocols2 = No lipids extracted, uncorrected
 
 #Maximum uploadable media size in megabytes (MB)
 #This value is used for encounter images and videos as well as for file associations added to a MarkedIndividual.
-maxMediaSize = 40
+# Refer to PhotoUploadDevNotes.md for information/where else to change
+maxMediaSize = 3
+#Maximum number of media per encounter
+maximumMediaCountEncounter = 200
 
 #allow video download for not logged in users
 videoDLNotLoggedIn = false

frontend/src/__tests__/pages/BulkImport/BulkImportTask.test.js

@@ -112,7 +112,6 @@ describe("BulkImportTask", () => {
     expect(
       screen.getByText("BULK_IMPORT_TASK_STATUS_in_progress"),
     ).toBeInTheDocument();
-    expect(screen.getByText("RESULTS_PER_PAGE")).toBeInTheDocument();
     expect(screen.getByTestId("simple-table")).toBeInTheDocument();
     expect(screen.getByText("E123")).toBeInTheDocument();
   });

frontend/src/components/AttributesAndValueComponent.jsx

@@ -1,14 +1,13 @@
-import React from "react";
-import { FormattedMessage } from "react-intl";
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 export const AttributesAndValueComponent = ({ attributeId, value }) => {
-  return (
-    <div className="mb-2 d-flex align-items-baseline gap-1">
-      <h6 className="mb-0 me-1">
-        <FormattedMessage id={attributeId} />
-        {":"}
-      </h6>
-      <p className="mb-0">{value}</p>
-    </div>
-  );
-};
+    return (
+        <div className="mb-2 d-flex align-items-baseline gap-1">
+            <h6 className="mb-0 me-1">
+                <FormattedMessage id={attributeId} />{":"}
+            </h6>
+            <p className="mb-0">{value}</p>
+        </div>
+    );
+}

frontend/src/components/Divider.jsx

@@ -1,15 +1,13 @@
-import React from "react";
+import React from 'react';
 
 export const Divider = () => {
-  return (
-    <div
-      style={{
-        width: "100%",
-        height: "10px",
-        borderBottom: "1px solid #ccc",
-        marginTop: "10px",
-        marginBottom: "20px",
-      }}
-    ></div>
-  );
-};
+    return (
+        <div style={{
+            width: '100%',
+            height: "10px",
+            borderBottom: '1px solid #ccc',
+            marginTop: '10px',
+            marginBottom: '20px',
+        }}></div>
+    );
+}

frontend/src/components/FollowUpSection.jsx

@@ -30,7 +30,7 @@ export const FollowUpSection = observer(({ store }) => {
                 store.setSubmitterName(e.target.value);
               }}
               value={store.followUpSection?.submitter?.name}
-            ></Form.Control>
+            />
           </Form.Group>
         </Col>
         <Col>
@@ -39,13 +39,20 @@ export const FollowUpSection = observer(({ store }) => {
               <FormattedMessage id="CONTACT_EMAIL" />
             </Form.Label>
             <Form.Control
-              type="text"
+              type="email"
               placeholder={intl.formatMessage({ id: "TYPE_HERE" })}
               onChange={(e) => {
                 store.setSubmitterEmail(e.target.value);
+                if (store.followUpSection?.submitter?.emailError) {
+                  store.setSubmitterEmailError(false);
+                }
               }}
               value={store.followUpSection?.submitter?.email}
-            ></Form.Control>
+              isInvalid={store.followUpSection?.submitter?.emailError}
+            />
+            <Form.Control.Feedback type="invalid">
+              <FormattedMessage id="INVALID_EMAIL_FORMAT" />
+            </Form.Control.Feedback>
           </Form.Group>
         </Col>
       </Row>
@@ -66,7 +73,7 @@ export const FollowUpSection = observer(({ store }) => {
                 store.setPhotographerName(e.target.value);
               }}
               value={store.followUpSection?.photographer?.name}
-            ></Form.Control>
+            />
           </Form.Group>
         </Col>
         <Col>
@@ -75,13 +82,20 @@ export const FollowUpSection = observer(({ store }) => {
               <FormattedMessage id="CONTACT_EMAIL" />
             </Form.Label>
             <Form.Control
-              type="text"
+              type="email"
               placeholder={intl.formatMessage({ id: "TYPE_HERE" })}
               onChange={(e) => {
                 store.setPhotographerEmail(e.target.value);
+                if (store.followUpSection?.photographer?.emailError) {
+                  store.setPhotographerEmailError(false);
+                }
               }}
               value={store.followUpSection?.photographer?.email}
-            ></Form.Control>
+              isInvalid={store.followUpSection?.photographer?.emailError}
+            />
+            <Form.Control.Feedback type="invalid">
+              <FormattedMessage id="INVALID_EMAIL_FORMAT" />
+            </Form.Control.Feedback>
           </Form.Group>
         </Col>
       </Row>
@@ -100,9 +114,16 @@ export const FollowUpSection = observer(({ store }) => {
           placeholder={intl.formatMessage({ id: "CSL_EMAILS_EXAMPLE" })}
           onChange={(e) => {
             store.setAdditionalEmails(e.target.value);
+            if (store.followUpSection?.additionalEmailsError) {
+              store.setAdditionalEmailsError(false);
+            }
           }}
           value={store.followUpSection?.additionalEmails}
+          isInvalid={store.followUpSection?.additionalEmailsError}
         />
+        <Form.Control.Feedback type="invalid">
+          <FormattedMessage id="INVALID_EMAIL_FORMAT" />
+        </Form.Control.Feedback>
       </Form.Group>
     </div>
   );

frontend/src/components/IdentifyIcon.jsx

@@ -2,31 +2,21 @@ import React from "react";
 import ThemeColorContext from "../ThemeColorProvider";
 
 export default function IdentifyIcon() {
-  const theme = React.useContext(ThemeColorContext);
-  return (
-    <div
-      style={{
-        display: "flex",
-        width: "36px",
-        height: " 36px",
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: "50%",
-        backgroundColor: theme.primaryColors.primary50,
-      }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-      >
-        <path
-          d="M13.9081 11.454V14.7267C13.9081 15.1767 13.5399 15.5449 13.0899 15.5449H3.27175C2.82175 15.5449 2.45356 15.1767 2.45356 14.7267V4.90851C2.45356 4.45851 2.82175 4.09033 3.27175 4.09033H5.74265C6.19265 4.09033 6.56084 3.72214 6.56084 3.27214C6.56084 2.82214 6.19265 2.45396 5.74265 2.45396H2.45356C1.55356 2.45396 0.8172 3.19033 0.8172 4.09033V15.5449C0.8172 16.4449 1.55356 17.1812 2.45356 17.1812H13.9081C14.8081 17.1812 15.5445 16.4449 15.5445 15.5449V11.454C15.5445 11.004 15.1763 10.6358 14.7263 10.6358C14.2763 10.6358 13.9081 11.004 13.9081 11.454ZM11.8627 13.9085H4.51538C4.17175 13.9085 3.98356 13.5158 4.19629 13.2458L5.61993 11.4212C5.78356 11.2167 6.09447 11.2085 6.25811 11.4131L7.53447 12.9512L9.4572 10.4803C9.62084 10.2676 9.94811 10.2676 10.1036 10.4885L12.1899 13.2621C12.3945 13.524 12.1981 13.9085 11.8627 13.9085ZM14.9717 6.45487C15.3645 5.82487 15.5854 5.08851 15.5363 4.27851C15.4299 2.51942 14.0308 1.03033 12.2881 0.842144C10.0627 0.59669 8.18084 2.32305 8.18084 4.49942C8.18084 6.53669 9.82538 8.18124 11.8545 8.18124C12.5745 8.18124 13.2454 7.96851 13.8099 7.60851L15.7817 9.58033C16.1008 9.89942 16.6245 9.89942 16.9436 9.58033C17.2627 9.26124 17.2627 8.7376 16.9436 8.41851L14.9717 6.45487ZM11.8627 6.54487C10.7336 6.54487 9.8172 5.62851 9.8172 4.49942C9.8172 3.37033 10.7336 2.45396 11.8627 2.45396C12.9917 2.45396 13.9081 3.37033 13.9081 4.49942C13.9081 5.62851 12.9917 6.54487 11.8627 6.54487Z"
-          fill="#00ACCE"
-        />
-      </svg>
-    </div>
-  );
-}
+    const theme = React.useContext(ThemeColorContext);
+    return (
+        <div
+            style={{
+                display: "flex",
+                width: "36px",
+                height: " 36px",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: "50%",
+                backgroundColor: theme.primaryColors.primary50,
+            }}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                <path d="M13.9081 11.454V14.7267C13.9081 15.1767 13.5399 15.5449 13.0899 15.5449H3.27175C2.82175 15.5449 2.45356 15.1767 2.45356 14.7267V4.90851C2.45356 4.45851 2.82175 4.09033 3.27175 4.09033H5.74265C6.19265 4.09033 6.56084 3.72214 6.56084 3.27214C6.56084 2.82214 6.19265 2.45396 5.74265 2.45396H2.45356C1.55356 2.45396 0.8172 3.19033 0.8172 4.09033V15.5449C0.8172 16.4449 1.55356 17.1812 2.45356 17.1812H13.9081C14.8081 17.1812 15.5445 16.4449 15.5445 15.5449V11.454C15.5445 11.004 15.1763 10.6358 14.7263 10.6358C14.2763 10.6358 13.9081 11.004 13.9081 11.454ZM11.8627 13.9085H4.51538C4.17175 13.9085 3.98356 13.5158 4.19629 13.2458L5.61993 11.4212C5.78356 11.2167 6.09447 11.2085 6.25811 11.4131L7.53447 12.9512L9.4572 10.4803C9.62084 10.2676 9.94811 10.2676 10.1036 10.4885L12.1899 13.2621C12.3945 13.524 12.1981 13.9085 11.8627 13.9085ZM14.9717 6.45487C15.3645 5.82487 15.5854 5.08851 15.5363 4.27851C15.4299 2.51942 14.0308 1.03033 12.2881 0.842144C10.0627 0.59669 8.18084 2.32305 8.18084 4.49942C8.18084 6.53669 9.82538 8.18124 11.8545 8.18124C12.5745 8.18124 13.2454 7.96851 13.8099 7.60851L15.7817 9.58033C16.1008 9.89942 16.6245 9.89942 16.9436 9.58033C17.2627 9.26124 17.2627 8.7376 16.9436 8.41851L14.9717 6.45487ZM11.8627 6.54487C10.7336 6.54487 9.8172 5.62851 9.8172 4.49942C9.8172 3.37033 10.7336 2.45396 11.8627 2.45396C12.9917 2.45396 13.9081 3.37033 13.9081 4.49942C13.9081 5.62851 12.9917 6.54487 11.8627 6.54487Z" fill="#00ACCE" />
+            </svg>
+        </div>
+    );
+}

frontend/src/components/InactivePill.jsx

@@ -1,3 +1,5 @@
+
+
 import React from "react";
 import PropTypes from "prop-types";
 import ThemeColorContext from "../ThemeColorProvider";
@@ -14,7 +16,7 @@ export default function InactivePill({ text, onClick, style }) {
         color: "#000",
         borderRadius: "20px",
         cursor: "pointer",
-        ...style,
+        ...style, 
       }}
     >
       {text}
@@ -24,4 +26,4 @@ export default function InactivePill({ text, onClick, style }) {
 InactivePill.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
-};
+};

frontend/src/components/MainButton.jsx

@@ -14,8 +14,8 @@ export default function MainButton({
   className = "",
   children,
   style,
-  noArrow,
-  target = false, // If true, opens link in a new tab
+  noArrow,  
+  target = false, // If true, opens link in a new tab  
   ...rest
 }) {
   const [isHovered, setIsHovered] = useState(false);
@@ -56,7 +56,6 @@ export default function MainButton({
         target={target ? "_blank" : "_self"}
         className="d-flex align-items-center justify-content-center text-decoration-none w-100 h-100"
         style={{ color: "inherit" }}
-        rel="noreferrer"
       >
         {children}
         <span className="ms-2"></span>