Various improvements

client/src/components/AdvancedSearch.js

@@ -3,14 +3,14 @@ import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"
 import styled from "@emotion/styled"
 import { resetPagination, SEARCH_OBJECT_LABELS, setSearchQuery } from "actions"
 import ButtonToggleGroup from "components/ButtonToggleGroup"
+import DictionaryField from "components/DictionaryField"
 import RemoveButton from "components/RemoveButton"
 import {
   findCommonFiltersForAllObjectTypes,
   searchFilters,
   SearchQueryPropType
 } from "components/SearchFilters"
 import { Form, Formik } from "formik"
-import DictionaryField from "HOC/DictionaryField"
 import _cloneDeep from "lodash/cloneDeep"
 import { Organization, Position } from "models"
 import PropTypes from "prop-types"
@@ -79,10 +79,10 @@ const AdvancedSearch = ({
       {Object.entries(filterDefs).map(([filterKey, filterDef]) => {
         const dictProps = filterDef.dictProps
         const label = dictProps?.label || filterKey
-        const ChildComponent = dictProps
-          ? DictionaryField(Dropdown.Item)
-          : Dropdown.Item
-        const additionalProps = dictProps ? { dictProps } : {}
+        const ChildComponent = dictProps ? DictionaryField : Dropdown.Item
+        const additionalProps = dictProps
+          ? { wrappedComponent: Dropdown.Item, dictProps }
+          : {}
         return dictProps?.exclude ? null : (
           <ChildComponent
             disabled={existingKeys.includes(filterKey)}
@@ -342,10 +342,10 @@ const SearchFilter = ({
 }) => {
   const dictProps = element.dictProps
   const label = dictProps?.label || filter.key
-  const ChildComponent = dictProps
-    ? DictionaryField(element.component)
-    : element.component
-  const additionalProps = dictProps ? { dictProps } : {}
+  const ChildComponent = dictProps ? DictionaryField : element.component
+  const additionalProps = dictProps
+    ? { wrappedComponent: element.component, dictProps }
+    : {}
   const { queryKey } = element.props || undefined
 
   return dictProps?.exclude ? null : (

client/src/components/DictionaryField.js

@@ -0,0 +1,28 @@
+import _isEmpty from "lodash/isEmpty"
+import PropTypes from "prop-types"
+import React from "react"
+
+const DictionaryField = ({
+  wrappedComponent: WrappedComponent,
+  dictProps,
+  ...otherProps
+}) => {
+  // Only display field if the dictProps are defined
+  if (_isEmpty(dictProps) || dictProps?.exclude) {
+    return null
+  } else {
+    return (
+      <WrappedComponent
+        {...Object.without(dictProps, "exclude", "optional")}
+        {...otherProps}
+      />
+    )
+  }
+}
+
+DictionaryField.propTypes = {
+  wrappedComponent: PropTypes.any,
+  dictProps: PropTypes.object
+}
+
+export default DictionaryField

client/src/components/EditAdministratingPositionsModal.js

@@ -3,12 +3,12 @@ import API from "api"
 import AdvancedMultiSelect from "components/advancedSelectWidget/AdvancedMultiSelect"
 import { PositionOverlayRow } from "components/advancedSelectWidget/AdvancedSelectOverlayRow"
 import { customFieldsJSONString } from "components/CustomFields"
+import DictionaryField from "components/DictionaryField"
 import * as FieldHelper from "components/FieldHelper"
 import Messages from "components/Messages"
 import Model from "components/Model"
 import PositionTable from "components/PositionTable"
 import { FastField, Form, Formik } from "formik"
-import DictionaryField from "HOC/DictionaryField"
 import Organization from "models/Organization"
 import Position from "models/Position"
 import PropTypes from "prop-types"
@@ -37,7 +37,6 @@ const EditAdministratingPositionsModal = ({
         ?.administratingPositions) ??
     []
 
-  const DictFastField = DictionaryField(FastField)
   const positionsFilters = {
     allAdvisorPositions: {
       label: "All advisor positions",
@@ -74,7 +73,8 @@ const EditAdministratingPositionsModal = ({
                 <Container fluid>
                   <Row>
                     <Col md={12}>
-                      <DictFastField
+                      <DictionaryField
+                        wrappedComponent={FastField}
                         dictProps={orgSettings.administratingPositions}
                         name="administratingPositions"
                         component={FieldHelper.SpecialField}

client/src/components/EditOrganizationsAdministratedModal.js

@@ -2,12 +2,12 @@ import { gql } from "@apollo/client"
 import API from "api"
 import AdvancedMultiSelect from "components/advancedSelectWidget/AdvancedMultiSelect"
 import { OrganizationOverlayRow } from "components/advancedSelectWidget/AdvancedSelectOverlayRow"
+import DictionaryField from "components/DictionaryField"
 import * as FieldHelper from "components/FieldHelper"
 import Messages from "components/Messages"
 import Model from "components/Model"
 import OrganizationTable from "components/OrganizationTable"
 import { FastField, Form, Formik } from "formik"
-import DictionaryField from "HOC/DictionaryField"
 import Organization from "models/Organization"
 import Position from "models/Position"
 import PropTypes from "prop-types"
@@ -31,7 +31,6 @@ const EditOrganizationsAdministratedModal = ({
 }) => {
   const [error, setError] = useState(null)
 
-  const DictFastField = DictionaryField(FastField)
   const organizationsFilters = {
     allOrganizations: {
       label: "All organizations",
@@ -65,7 +64,8 @@ const EditOrganizationsAdministratedModal = ({
                 <Container fluid>
                   <Row>
                     <Col md={12}>
-                      <DictFastField
+                      <DictionaryField
+                        wrappedComponent={FastField}
                         dictProps={organizationsAdministratedSettings}
                         name="organizationsAdministrated"
                         component={FieldHelper.SpecialField}

client/src/components/SearchFilters.js

@@ -30,8 +30,8 @@ import {
   TaskOverlayRow
 } from "components/advancedSelectWidget/AdvancedSelectOverlayRow"
 import { getBreadcrumbTrailAsText } from "components/BreadcrumbTrail"
+import DictionaryField from "components/DictionaryField"
 import Model from "components/Model"
-import DictionaryField from "HOC/DictionaryField"
 import _isEmpty from "lodash/isEmpty"
 import _pickBy from "lodash/pickBy"
 import { Location, Organization, Person, Position, Report, Task } from "models"
@@ -444,7 +444,7 @@ export const searchFilters = function() {
           queryKey: "locationUuid"
         })
       },
-      [`Has ${Settings.fields.organization.profile}?`]: {
+      [`Has ${Settings.fields.organization.profile?.label}?`]: {
         component: RadioButtonFilter,
         deserializer: deserializeSelectFilter,
         props: {
@@ -600,10 +600,10 @@ const extraFilters = function() {
 const SearchFilterDisplay = ({ filter, element, showSeparator }) => {
   const dictProps = element.dictProps
   const label = dictProps?.label || filter.key
-  const ChildComponent = dictProps
-    ? DictionaryField(element.component)
-    : element.component
-  const additionalProps = dictProps ? { dictProps } : {}
+  const ChildComponent = dictProps ? DictionaryField : element.component
+  const additionalProps = dictProps
+    ? { wrappedComponent: element.component, dictProps }
+    : {}
   const sep = showSeparator ? ", " : ""
   return dictProps?.exclude ? null : (
     <>

client/src/components/editor/LinkSourceAnet.js

@@ -4,7 +4,8 @@ import { FastField, Form, Formik } from "formik"
 import PropTypes from "prop-types"
 import React, { useCallback } from "react"
 import { Button, Form as FormBS, Modal } from "react-bootstrap"
-import { Editor, Transforms } from "slate"
+import { getSelectedParentNode } from "richTextUtils"
+import { Transforms } from "slate"
 import { ReactEditor } from "slate-react"
 import { ANET_LINK, EXTERNAL_LINK, getEntityInfoFromUrl } from "utils_links"
 import * as yup from "yup"
@@ -79,29 +80,6 @@ const LinkSourceAnet = ({ editor, showModal, setShowModal, external }) => {
       </Modal.Body>
     </Modal>
   )
-
-  function getParentNodeProps(editor, external) {
-    const selectedParentNode =
-      editor.selection && Editor.parent(editor, editor.selection)
-    const selectedParent = selectedParentNode?.[0]
-    let value
-    if (external && selectedParent?.type === EXTERNAL_LINK) {
-      value = {
-        url: selectedParent.url,
-        text: selectedParent.children?.[0]?.text
-      }
-    } else if (!external && selectedParent?.type === ANET_LINK) {
-      value = {
-        objectType: selectedParent.entityType,
-        object: selectedParent.entityUuid
-          ? { uuid: selectedParent.entityUuid }
-          : null
-      }
-    } else {
-      value = null
-    }
-    return { replaceSelection: !!value, selectedParentNode, value }
-  }
 }
 
 LinkSourceAnet.propTypes = {
@@ -193,4 +171,26 @@ function createExternalLinkNode(url, text) {
   }
 }
 
+function getParentNodeProps(editor, external) {
+  const selectedParentNode = getSelectedParentNode(editor)
+  const selectedParent = selectedParentNode?.[0]
+  let value
+  if (external && selectedParent?.type === EXTERNAL_LINK) {
+    value = {
+      url: selectedParent.url,
+      text: selectedParent.children?.[0]?.text
+    }
+  } else if (!external && selectedParent?.type === ANET_LINK) {
+    value = {
+      objectType: selectedParent.entityType,
+      object: selectedParent.entityUuid
+        ? { uuid: selectedParent.entityUuid }
+        : null
+    }
+  } else {
+    value = null
+  }
+  return { replaceSelection: !!value, selectedParentNode, value }
+}
+
 export default LinkSourceAnet

client/src/components/editor/Toolbar.js

@@ -2,6 +2,7 @@ import { Icon } from "@blueprintjs/core"
 import { Tooltip2 } from "@blueprintjs/popover2"
 import PropTypes from "prop-types"
 import React from "react"
+import { getSelectedParentNode } from "richTextUtils"
 import { Editor, Transforms } from "slate"
 import { useSlate } from "slate-react"
 import { ANET_LINK, EXTERNAL_LINK } from "utils_links"
@@ -212,8 +213,7 @@ function isMarkActive(editor, format) {
 }
 
 function isModalActive(editor, format, showModal) {
-  const selectedParent =
-    editor.selection && Editor.parent(editor, editor.selection)?.[0]
+  const selectedParent = getSelectedParentNode(editor)?.[0]
   return showModal || selectedParent?.type === format
 }
 

client/src/components/previews/AttachmentPreview.js

@@ -1,9 +1,9 @@
 import { gql } from "@apollo/client"
 import API from "api"
+import DictionaryField from "components/DictionaryField"
 import { PreviewField } from "components/FieldHelper"
 import LinkTo from "components/LinkTo"
 import RichTextEditor from "components/RichTextEditor"
-import DictionaryField from "HOC/DictionaryField"
 import { Attachment } from "models"
 import PropTypes from "prop-types"
 import React from "react"
@@ -40,7 +40,6 @@ const AttachmentPreview = ({ className, uuid }) => {
 
   const attachment = new Attachment(data.attachment ? data.attachment : {})
   const { backgroundImage } = utils.getAttachmentIconDetails(attachment)
-  const DictPreviewField = DictionaryField(PreviewField)
 
   return (
     <div className={`${className} preview-content-scroll`}>
@@ -57,7 +56,8 @@ const AttachmentPreview = ({ className, uuid }) => {
                 style={{ width: "100%", borderRadius: "5px" }}
               />
             </Col>
-            <DictPreviewField
+            <DictionaryField
+              wrappedComponent={PreviewField}
               dictProps={Settings.fields.attachment.fileName}
               value={attachment.fileName}
             />
@@ -70,7 +70,8 @@ const AttachmentPreview = ({ className, uuid }) => {
               label="Content length"
               value={utils.humanReadableFileSize(attachment.contentLength)}
             />
-            <DictPreviewField
+            <DictionaryField
+              wrappedComponent={PreviewField}
               dictProps={Settings.fields.attachment.classification}
               value={Attachment.humanNameOfStatus(
                 attachment.classification

client/src/components/previews/LocationPreview.js

@@ -1,11 +1,11 @@
 import { gql } from "@apollo/client"
 import API from "api"
+import DictionaryField from "components/DictionaryField"
 import { PreviewField } from "components/FieldHelper"
 import GeoLocation from "components/GeoLocation"
 import Leaflet from "components/Leaflet"
 import RichTextEditor from "components/RichTextEditor"
 import { convertLatLngToMGRS } from "geoUtils"
-import DictionaryField from "HOC/DictionaryField"
 import _escape from "lodash/escape"
 import { Location } from "models"
 import PropTypes from "prop-types"
@@ -40,7 +40,6 @@ const LocationPreview = ({ className, uuid }) => {
 
   const location = new Location(data.location ? data.location : {})
   const label = Location.LOCATION_FORMAT_LABELS[Location.locationFormat]
-  const DictPreviewField = DictionaryField(PreviewField)
 
   const marker = {
     id: location.uuid || 0,
@@ -59,7 +58,8 @@ const LocationPreview = ({ className, uuid }) => {
         <h4 className="ellipsized-text">{`Location ${location.name}`}</h4>
       </div>
       <div className="preview-section">
-        <DictPreviewField
+        <DictionaryField
+          wrappedComponent={PreviewField}
           dictProps={Settings.fields.location.type}
           value={Location.humanNameOfType(location.type)}
         />
@@ -80,13 +80,15 @@ const LocationPreview = ({ className, uuid }) => {
           }
         />
 
-        <DictPreviewField
+        <DictionaryField
+          wrappedComponent={PreviewField}
           dictProps={Settings.fields.location.status}
           value={Location.humanNameOfStatus(location.status)}
         />
 
         {location.description && (
-          <DictPreviewField
+          <DictionaryField
+            wrappedComponent={PreviewField}
             dictProps={Settings.fields.location.description}
             value={<RichTextEditor readOnly value={location.description} />}
           />