Smoke testing fixes

src/App.tsx

@@ -46,7 +46,7 @@ const App = (props: Props) => {
   const trigger = useTrigger();
 
   /* Base variables */
-  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [isMobile, setIsMobile] = useState<boolean>(MobileCheck());
 
   /* Set boot state to global state and check if device being used is mobile */
   trigger.SetTrigger(() => {

src/api/digitalSpecimen/GetDigitalSpecimenAggregations.ts

@@ -24,7 +24,7 @@ const GetDigitalSpecimenAggregations = async ({ searchFilters }: { searchFilters
         Object.entries(searchFilters).map(([key, values], index) => {
             /* Apply each value */
             values.forEach((value, valueIndex) => {
-                filters = filters.concat(`${(index > 0 || valueIndex > 0) ? '&' : '?'}${key}=${value}`);
+                filters = filters.concat(`${(index > 0 || valueIndex > 0) ? '&' : '?'}${key}=${encodeURIComponent(value)}`);
             });
         });
     };

src/api/digitalSpecimen/GetDigitalSpecimenSearchTermAggregations.ts

@@ -28,7 +28,7 @@ const GetDigitalSpecimenSearchTermAggregations = async ({ searchFilterName, valu
             url: "/digital-specimen/v1/searchTermValue",
             params: {
                 term: searchFilterName,
-                value
+                value: encodeURIComponent(value)
             },
             responseType: 'json'
         });

src/api/digitalSpecimen/GetDigitalSpecimenTaxonomyAggregations.ts

@@ -29,7 +29,7 @@ const GetDigitalSpecimenTaxonomyAggregations = async ({ searchFilters }: { searc
             /* Apply each value if value is relevant to taxonomy */
             if (taxonomicLevels.includes(key)) {
                 values.forEach((value, valueIndex) => {
-                    filters = filters.concat(`${(index > 0 || valueIndex > 0) ? '&' : '?'}${key}=${value}`);
+                    filters = filters.concat(`${(index > 0 || valueIndex > 0) ? '&' : '?'}${key}=${encodeURIComponent(value)}`);
                 });
             };
         });

src/api/digitalSpecimen/GetDigitalSpecimens.ts

@@ -35,7 +35,7 @@ const GetDigitalSpecimens = async ({ pageSize, pageNumber, searchFilters }:
         Object.entries(searchFilters).map(([key, values], index) => {
             /* Apply each value */
             values.forEach((value, valueIndex) => {
-                filters = filters.concat(`${(index > 0 || valueIndex > 0) ? '&' : '?'}${key}=${value}`);
+                filters = filters.concat(`${(index > 0 || valueIndex > 0) ? '&' : '?'}${key}=${encodeURIComponent(value)}`);
             });
         });
     };

src/app/config/idCard/DigitalSpecimenIdCardConfig.ts

@@ -38,7 +38,7 @@ const DigitalSpecimenIdCardConfig = ({ digitalSpecimen }: { digitalSpecimen: Dig
             jsonPath: "$['ods:livingOrPreserved']"
         },
         {
-            label: 'Licence',
+            label: 'License',
             jsonPath: "$['dcterms:license']"
         },
         {

src/components/digitalSpecimen/DigitalSpecimen.tsx

@@ -220,7 +220,9 @@ const DigitalSpecimen = () => {
                 </Row>
             </Container>
 
-            <DigitalSpecimenTourSteps SetSelectedTabIndex={setSelectedTabIndex} />
+            <DigitalSpecimenTourSteps hasMedia={!!digitalSpecimen?.['ods:isKnownToContainMedia']}
+                SetSelectedTabIndex={setSelectedTabIndex}
+            />
             <AnnotateTourSteps SetAnnotationMode={setAnnotationMode} />
             <MasTourSteps SetAnnotationMode={setAnnotationMode} />
         </div>

src/components/digitalSpecimen/components/contentBlock/components/Events.tsx

@@ -36,7 +36,7 @@ const Events = (props: Props) => {
         assertions?: Dict
     }[] = [];
     const jsonPaths: {
-       [propertySection: string]: string
+        [propertySection: string]: string
     } = {
         mainProperties: "$['ods:hasEvents'][index]",
         location: "$['ods:hasEvents'][index]['ods:hasLocation']",
@@ -87,16 +87,20 @@ const Events = (props: Props) => {
 
     return (
         <div className="h-100">
-            {events.map((event, index) => (
-                <ClassProperties key={event.mainProperties['@id']}
-                    index={index}
-                    title="event"
-                    properties={event}
-                    jsonPaths={jsonPaths}
-                    annotationMode={annotationMode}
-                    SetAnnotationTarget={SetAnnotationTarget}
-                />
-            ))}
+            {events.map((event, index) => {
+                const key: string = `event_${index}`;
+
+                return (
+                    <ClassProperties key={key}
+                        index={index}
+                        title="event"
+                        properties={event}
+                        jsonPaths={jsonPaths}
+                        annotationMode={annotationMode}
+                        SetAnnotationTarget={SetAnnotationTarget}
+                    />
+                );
+            })}
         </div>
     );
 };

src/components/digitalSpecimen/components/contentBlock/components/Identifications.tsx

@@ -65,16 +65,20 @@ const Identifications = (props: Props) => {
 
     return (
         <div>
-            {identifications.map((identification, index) => (
-                <ClassProperties key={identification.mainProperties['dwc:identificationID']}
-                    index={index}
-                    title="identification"
-                    properties={identification}
-                    jsonPaths={jsonPaths}
-                    annotationMode={annotationMode}
-                    SetAnnotationTarget={SetAnnotationTarget}
-                />
-            ))}
+            {identifications.map((identification, index) => {
+                const key: string = identification.mainProperties['dwc:identificationID'] ?? `identification_${index}`;
+
+                return (
+                    <ClassProperties key={key}
+                        index={index}
+                        title="identification"
+                        properties={identification}
+                        jsonPaths={jsonPaths}
+                        annotationMode={annotationMode}
+                        SetAnnotationTarget={SetAnnotationTarget}
+                    />
+                );
+            })}
         </div>
     );
 };

src/components/digitalSpecimen/components/topBar/TopBar.tsx

@@ -1,5 +1,6 @@
 /* Import Dependencies */
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
 import { useState } from "react";
 import { Row, Col } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
@@ -108,6 +109,12 @@ const TopBar = (props: Props) => {
         link.click();
     };
 
+    /* Class Names */
+    const midsLevelTitleClass = classNames({
+        'fs-3': !annotationMode,
+        'fs-4': annotationMode
+    });
+
     return (
         <div>
             {/* Digital specimen name */}
@@ -123,15 +130,15 @@ const TopBar = (props: Props) => {
                 {/* MIDS level and version select */}
                 <Col lg={{ span: 3 }}>
                     <Row>
-                        <Col className="d-flex align-items-center">
+                        <Col className="d-flex align-items-center pe-0">
                             <Tooltip text="Minimum Information about a Digital Specimen"
                                 placement="bottom"
                             >
                                 <FontAwesomeIcon icon={faInfoCircle}
                                     className="tc-accent"
                                 />
                             </Tooltip>
-                            <span className="fs-3 tc-accent fw-bold ms-2">
+                            <span className={`${midsLevelTitleClass} tr-fast tc-accent fw-bold ms-2`}>
                                 {`MIDS level ${digitalSpecimen["ods:midsLevel"]}`}
                             </span>
                         </Col>

src/components/digitalSpecimen/tourSteps/DigitalSpecimenTourSteps.tsx

@@ -16,17 +16,19 @@ import DigitalSpecimenTourStepsText from 'sources/tourText/digitalSpecimen.json'
 
 /* Props Type */
 type Props = {
+    hasMedia: boolean,
     SetSelectedTabIndex: Function
 };
 
 
 /**
  * Component that renders the tour steps for the digital specimen page
+ * @param hasMedia Boolean indicating if the digital specimen has any associated digital media
  * @param SetSelectedTabIndex Function to set the selected tab index
  * @returns JSX Component
  */
 const DigitalSpecimenTourSteps = (props: Props) => {
-    const { SetSelectedTabIndex } = props;
+    const { hasMedia, SetSelectedTabIndex } = props;
 
     /* Hooks */
     const dispatch = useAppDispatch();
@@ -56,16 +58,16 @@ const DigitalSpecimenTourSteps = (props: Props) => {
     const OnStepChange = (nextIndex: number, resolve: Function) => {
         const nextIndexToTabIndexMap = {
             6: 0,
-            7: 1,
-            8: 2,
-            9: 3,
-            10: 4,
-            11: 5
+            7: hasMedia ? 1 : 0,
+            8: hasMedia ? 2 : 1,
+            9: hasMedia ? 3 : 2,
+            10: hasMedia ? 4 : 3,
+            11: hasMedia ? 5 : 4
         };
 
         if (Object.keys(nextIndexToTabIndexMap).includes(`${nextIndex}`)) {
             /* On step 7: set tab to digital specimen */
-            SetSelectedTabIndex(0);
+            SetSelectedTabIndex(nextIndexToTabIndexMap[nextIndex as keyof typeof nextIndexToTabIndexMap]);
 
             resolve();
         } else {

src/components/elements/annotationSidePanel/components/AnnotationPolicyText.tsx

@@ -24,7 +24,7 @@ const AnnotationPolicyText = (props: Props) => {
     const { HidePolicyText } = props;
 
     return (
-        <div className="px-4 py-4 tc-white">
+        <div className="h-100 d-flex flex-column px-4 py-4 tc-white">
             {/* Top bar */}
             <Row>
                 <Col lg="auto"
@@ -47,7 +47,7 @@ const AnnotationPolicyText = (props: Props) => {
                 </Col>
             </Row>
             {/* Policy content */}
-            <Row className="mt-5">
+            <Row className="flex-grow-1 overflow-scroll mt-5">
                 <Col>
                     {/* Requirements for Annotations */}
                     <Row>

src/components/elements/annotationSidePanel/components/AnnotationsOverview.tsx

@@ -24,7 +24,7 @@ import { faGears, faPenToSquare, faX } from "@fortawesome/free-solid-svg-icons";
 /* Import Components */
 import AnnotationCard from "./AnnotationCard";
 import SortingFilters from "./SortingFilters";
-import { Button } from "components/elements/customUI/CustomUI";
+import { Button, Tooltip } from "components/elements/customUI/CustomUI";
 
 
 /* Props Type */
@@ -238,18 +238,25 @@ const AnnotationsOverview = (props: Props) => {
                         <Col lg="auto"
                             className="tourAnnotate6 ps-1"
                         >
+
                             <Button type="button"
                                 variant="accent"
                                 disabled={!KeycloakService.IsLoggedIn() || !KeycloakService.GetParsedToken()?.orcid}
                                 OnClick={() => (KeycloakService.IsLoggedIn() && KeycloakService.GetParsedToken()?.orcid) && StartAnnotationWizard()}
                             >
-                                <p>
-                                    <FontAwesomeIcon icon={faPenToSquare}
-                                        className="me-2"
-                                    />
-                                    Add Annotation
-                                </p>
+                                <Tooltip text="You must be logged in and have a valid ORCID attached to your profile to be able to annotate"
+                                    placement="top"
+                                    active={!KeycloakService.IsLoggedIn() || !KeycloakService.GetParsedToken()?.orcid}
+                                >
+                                    <p>
+                                        <FontAwesomeIcon icon={faPenToSquare}
+                                            className="me-2"
+                                        />
+                                        Add Annotation
+                                    </p>
+                                </Tooltip>
                             </Button>
+
                         </Col>
                         {/* Machine annotation services button */}
                         <Col lg="auto"

src/components/elements/annotationSidePanel/components/annotationWizard/AnnotationWizard.tsx

@@ -194,8 +194,6 @@ const AnnotationWizard = (props: Props) => {
         });
     });
 
-    console.log(annotationTarget);
-
     /**
      * Function to set the annotation target based on the user's selection (wizard step one)
      */

src/components/elements/annotationSidePanel/components/masMenu/MasMenu.tsx

@@ -20,7 +20,7 @@ import { Dict } from 'app/Types';
 
 /* Import Components */
 import { MasOverview, MasScheduleMenu } from './MasMenuComponents';
-import { Button } from 'components/elements/customUI/CustomUI';
+import { Button, Tooltip } from 'components/elements/customUI/CustomUI';
 
 
 /* Props Type */
@@ -90,9 +90,14 @@ const MASMenu = (props: Props) => {
                         disabled={!KeycloakService.IsLoggedIn()}
                         OnClick={() => setScheduleMasMenuToggle(!scheduleMasMenuToggle)}
                     >
-                        <p>
-                            {!scheduleMasMenuToggle ? 'Schedule a MAS' : 'Cancel scheduling'}
-                        </p>
+                        <Tooltip text="You must be logged in and have a valid ORCID attached to your profile to be able to schedule a MAS"
+                            placement="bottom"
+                            active={!KeycloakService.IsLoggedIn() || !KeycloakService.GetParsedToken()?.orcid}
+                        >
+                            <p>
+                                {!scheduleMasMenuToggle ? 'Schedule a MAS' : 'Cancel scheduling'}
+                            </p>
+                        </Tooltip>
                     </Button>
                 </Col>
             </Row>

src/components/elements/classProperties/EntityRelationships.tsx

@@ -90,16 +90,20 @@ const EntityRelationships = (props: Props) => {
                     />
                 </Card>
                 : <>
-                    {entityRelationships.map((entityRelationship, index) => (
-                        <ClassProperties key={entityRelationship.mainProperties['@id']}
-                            index={index}
-                            title="entityRelationship"
-                            properties={entityRelationship}
-                            jsonPaths={jsonPaths}
-                            annotationMode={annotationMode}
-                            SetAnnotationTarget={SetAnnotationTarget}
-                        />
-                    ))}
+                    {entityRelationships.map((entityRelationship, index) => {
+                        const key: string = `entityRelationship_${index}`;
+
+                        return (
+                            <ClassProperties key={key}
+                                index={index}
+                                title="entityRelationship"
+                                properties={entityRelationship}
+                                jsonPaths={jsonPaths}
+                                annotationMode={annotationMode}
+                                SetAnnotationTarget={SetAnnotationTarget}
+                            />
+                        );
+                    })}
                 </>
             }
 

src/components/elements/customUI/tooltip/Tooltip.tsx

@@ -12,6 +12,7 @@ import styles from './tooltip.module.scss';
 interface Props {
     text: string,
     placement: Placement,
+    active?: boolean,
     children: React.ReactElement,
 };
 
@@ -20,24 +21,29 @@ interface Props {
  * Component that renders a custom tooltip that helps giving hints of information to users
  * @param text The text that will appear in the tooltip
  * @param placement The relative position of the tooltip to the bounding component, options are: top, right, bottom or left
+ * @param active Boolean indicating if the the tooltip should be active and show upon hover
  * @returns JSX Component
  */
 const Tooltip = (props: Props) => {
-    const { text, placement, children } = props;
+    const { text, placement, active, children } = props;
 
     const tooltip = (
         <Popover className={`${styles.tooltip} tc-white text-center px-2 py-1`}>
             {text}
         </Popover>
     );
 
-    return (
-        <OverlayTrigger placement={placement}
-            overlay={tooltip}
-        >
-            {children}
-        </OverlayTrigger>
-    );
+    if ((typeof (active) === 'undefined' || active)) {
+        return (
+            <OverlayTrigger placement={placement}
+                overlay={tooltip}
+            >
+                {children}
+            </OverlayTrigger>
+        );
+    } else {
+        return children;
+    }
 };
 
 export default Tooltip;