Merge branch 'develop' into release/2.8

client/components/Coverages/CoverageIcons.tsx

@@ -94,7 +94,7 @@ export class CoverageIcons extends React.PureComponent<IProps> {
 
         return (
             <WithPopover
-                placement="bottom-end"
+                placement="auto-end"
                 zIndex={1051}
                 component={() => (
                     <div className="coverages-popup">

client/components/Coverages/coverage-icons.scss

@@ -3,7 +3,7 @@
     border-radius: var(--b-radius--medium);
     padding: 1.5rem;
     box-shadow: var(--sd-shadow__dropdown);
-    max-height: 100%;
+    max-height: 400px;
     overflow: auto;
 }
 

client/components/GeoLookupInput/AddGeoLookupInput.tsx

@@ -230,6 +230,7 @@ export class AddGeoLookupInput extends React.Component<IProps, IState> {
                 qcode: location.guid,
                 address: location.address,
                 details: location.details,
+                translations: location.translations,
             };
 
             // external address might not be there.
@@ -274,6 +275,7 @@ export class AddGeoLookupInput extends React.Component<IProps, IState> {
             <React.Fragment>
                 {initialValue?.name == null ? null : (
                     <LocationItem
+                        languageCode={this.props.language}
                         location={initialValue}
                         onRemoveLocation={this.removeLocation}
                         readOnly={readOnly}
@@ -297,6 +299,7 @@ export class AddGeoLookupInput extends React.Component<IProps, IState> {
 
                 {this.state.openSuggestsPopUp && (
                     <AddGeoLookupResultsPopUp
+                        languageCode={this.props.language}
                         localSuggests={this.state.localSearchResults}
                         suggests={this.state.searchResults}
                         onCancel={this.closeSuggestsPopUp}

client/components/GeoLookupInput/AddGeoLookupResultsPopUp.tsx

@@ -27,6 +27,7 @@ interface IProps {
     onAddNewLocation(): void;
     onPopupOpen?(): void;
     onPopupClose?(): void;
+    languageCode?: string;
 }
 
 enum TAB_INDEX {
@@ -78,29 +79,31 @@ export class AddGeoLookupResultsPopUp extends React.Component<IProps, IState> {
     }
 
     handleEnterKey() {
+        const {localSuggests, suggests} = this.props;
+        const localSuggestLen = localSuggests?.length ?? 0;
+
         if (this.state.activeOptionIndex > -1) {
-            if (this.state.activeOptionIndex < get(this.props.localSuggests, 'length', -1)) {
-                this.props.onChange(this.props.localSuggests[this.state.activeOptionIndex]);
+            if (this.state.activeOptionIndex < (localSuggests.length ?? -1)) {
+                this.props.onChange(localSuggests[this.state.activeOptionIndex]);
                 return;
             }
 
-            if (this.state.activeOptionIndex === get(this.props.localSuggests, 'length', 0)) {
+            if (this.state.activeOptionIndex === localSuggestLen) {
                 this.onSearch();
                 return;
             }
 
-            if (this.state.activeOptionIndex >= get(this.props.localSuggests, 'length', 0) + 1) {
-                this.props.onChange(this.props.suggests[
-                    this.state.activeOptionIndex - (get(this.props.localSuggests, 'length', 0) + 1)]);
+            if (this.state.activeOptionIndex >= localSuggestLen + 1) {
+                this.props.onChange(suggests[this.state.activeOptionIndex - localSuggestLen + 1]);
             }
         }
     }
 
     handleDownArrowKey() {
         if (this.state.activeOptionIndex <
             (1 + // External search button
-            get(this.props.localSuggests, 'length', 0) +
-            get(this.props.suggests, 'length', 0)) - 1
+            (this.props.localSuggests?.length ?? 0) +
+            (this.props.suggests?.length ?? 0)) - 1
         ) {
             this.setState({activeOptionIndex: this.state.activeOptionIndex + 1});
 
@@ -140,10 +143,8 @@ export class AddGeoLookupResultsPopUp extends React.Component<IProps, IState> {
 
     render() {
         const {gettext} = superdeskApi.localization;
-        const localSuggests = get(this.props.localSuggests, 'length') > 0 ?
-            this.props.localSuggests : [];
-        const suggests = get(this.props.suggests, 'length') > 0 ?
-            this.props.suggests : [];
+        const localSuggests = this.props.localSuggests ?? [];
+        const suggests = this.props.suggests ?? [];
         const tabLabels = [(
             <TabLabel
                 key="internal"
@@ -194,11 +195,12 @@ export class AddGeoLookupResultsPopUp extends React.Component<IProps, IState> {
                                     <LocationLookupResultItem
                                         key={index}
                                         location={suggest}
+                                        languageCode={this.props.languageCode}
                                         onClick={this.props.onChange.bind(null, suggest)}
                                         active={index === this.state.activeOptionIndex}
                                     />
                                 ))}
-                                {get(localSuggests, 'length') === 0 && (
+                                {localSuggests.length === 0 && (
                                     <li className="addgeolookup__item">
                                         {gettext('No results found')}
                                     </li>
@@ -218,14 +220,12 @@ export class AddGeoLookupResultsPopUp extends React.Component<IProps, IState> {
                                             key={index}
                                             location={suggest}
                                             onClick={this.props.onChange.bind(null, suggest)}
-                                            active={(
-                                                index +
-                                                get(this.props.localSuggests, 'length', 0) +
-                                                1
-                                            ) === this.state.activeOptionIndex}
+                                            active={(index + localSuggests.length + 1)
+                                                === this.state.activeOptionIndex
+                                            }
                                         />
                                     ))}
-                                    {get(suggests, 'length') === 0 && (
+                                    {suggests.length === 0 && (
                                         <li className="addgeolookup__item">
                                             {gettext('No results found')}
                                         </li>

client/components/GeoLookupInput/LocationItem.tsx

@@ -16,13 +16,18 @@ interface IProps {
     active?: boolean;
     readOnly?: boolean;
     onRemoveLocation?(): void;
+    languageCode?: string;
 }
 
 export class LocationItem extends React.PureComponent<IProps> {
     render() {
         const {gettext} = superdeskApi.localization;
         const location = this.props.location;
 
+        const locationNameComputed = this.props.languageCode
+            ? location.translations?.name[`name:${this.props.languageCode}`] ?? location.name
+            : location.name;
+
         return (
             <Item
                 noBg={!this.props.active}
@@ -33,10 +38,10 @@ export class LocationItem extends React.PureComponent<IProps> {
                 <Column grow={true} border={false}>
                     <Row paddingBottom>
                         <Location
-                            name={this.props.location.name}
+                            name={locationNameComputed}
                             address={formatLocationToAddress(this.props.location)}
                             multiLine={true}
-                            details={get(location, 'details[0]')}
+                            details={location.details?.[0]}
                         />
                         <ActionMenu className="pull-right">
                             {(this.props.readOnly || this.props.onRemoveLocation == null) ? null : (

client/components/GeoLookupInput/LocationLookupResultItem.tsx

@@ -9,6 +9,7 @@ interface IProps {
     onClick?(): void;
     active?: boolean;
     location: Partial<ILocation>;
+    languageCode?: string;
 }
 
 export class LocationLookupResultItem extends React.PureComponent<IProps> {
@@ -23,7 +24,7 @@ export class LocationLookupResultItem extends React.PureComponent<IProps> {
                 )}
             >
                 <span className="sd-overflow-ellipsis">
-                    {getLocationsShortName(this.props.location)}
+                    {getLocationsShortName(this.props.location, this.props.languageCode)}
                 </span>
             </li>
         );

client/components/GeoLookupInput/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {AddGeoLookupInput, GeoLookupInputComponent} from './AddGeoLookupInput';
+import {AddGeoLookupInput} from './AddGeoLookupInput';
 
 import {LineInput, Label} from '../UI/Form';
 import {ILocation} from '../../interfaces';
@@ -17,14 +17,14 @@ interface IProps {
     readOnly?: boolean;
     boxed?: boolean;
     noMargin?: boolean;
-    refNode?: React.RefObject<GeoLookupInputComponent>;
+    refNode?: React.RefObject<any>;
     language?: string;
     onChange(field: string, value?: Partial<ILocation>): void;
     onFocus?(): void;
     popupContainer?(): HTMLElement;
     onPopupOpen?(): void;
     onPopupClose?(): void;
-    showAddLocationForm(props: any): void;
+    showAddLocationForm?(props: any): Promise<ILocation | undefined>;
 }
 
 export class GeoLookupInput extends React.PureComponent<IProps> {

client/components/UI/Form/LineInput.tsx

@@ -2,13 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    required?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    boxed?: boolean;
+    isSelect?: boolean;
+    noMargin?: boolean;
+    noLabel?: boolean;
+    withButton?: boolean;
+    labelLeft?: boolean;
+    labelLeftAuto?: boolean;
+    hint?: string;
+    message?: string;
+    borderBottom?: boolean;
+    onClick?: (e: any) => void;
+    halfWidth?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+
 /**
  * @ngdoc react
  * @name LineInput
  * @description Component to style input component in a line-input style
  */
 export const LineInput = ({
-    children,
     required,
     invalid,
     readOnly,
@@ -19,13 +38,14 @@ export const LineInput = ({
     withButton,
     labelLeft,
     labelLeftAuto,
+    borderBottom = true,
+    halfWidth,
+    children,
     hint,
     message,
     className,
-    borderBottom,
     onClick,
-    halfWidth,
-}) => (
+}: IProps): JSX.Element => (
     <div
         className={classNames(
             'sd-line-input',
@@ -52,44 +72,3 @@ export const LineInput = ({
         {message && <div className="sd-line-input__message">{message}</div>}
     </div>
 );
-
-export const LineInputProps = {
-    required: PropTypes.bool,
-    invalid: PropTypes.bool,
-    readOnly: PropTypes.bool,
-    boxed: PropTypes.bool,
-    isSelect: PropTypes.bool,
-    noMargin: PropTypes.bool,
-    noLabel: PropTypes.bool,
-    withButton: PropTypes.bool,
-    labelLeft: PropTypes.bool,
-    labelLeftAuto: PropTypes.bool,
-    hint: PropTypes.string,
-    message: PropTypes.string,
-    borderBottom: PropTypes.bool,
-    onClick: PropTypes.func,
-    halfWidth: PropTypes.bool,
-};
-
-export const LineInputDefaultProps = {
-    required: false,
-    invalid: false,
-    readOnly: false,
-    boxed: false,
-    isSelect: false,
-    noMargin: false,
-    noLabel: false,
-    withButton: false,
-    labelLeft: false,
-    labelLeftAuto: false,
-    borderBottom: true,
-    halfWidth: false,
-};
-
-LineInput.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    ...LineInputProps,
-};
-
-LineInput.defaultProps = {...LineInputDefaultProps};

client/components/UI/List/ActionMenu.tsx

@@ -1,24 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    children: React.ReactNode;
+    row?: boolean;
+    className?: string;
+}
 /**
  * @ngdoc react
  * @name ActionMenu
  * @description Component to encapsulate three-dot action menu in list a item
  */
-export const ActionMenu = ({children, row}) => (
+export const ActionMenu = ({children, className, row = true}: IProps) => (
     <div
-        className={classNames('sd-list-item__action-menu',
-            {'sd-list-item__action-menu--direction-row': row})}
+        className={classNames(
+            'sd-list-item__action-menu',
+            {'sd-list-item__action-menu--direction-row': row},
+            className,
+        )}
     >
         {children}
     </div>
 );
-
-ActionMenu.propTypes = {
-    children: PropTypes.node.isRequired,
-    row: PropTypes.bool,
-};
-
-ActionMenu.defaultProps = {row: true};

client/components/UI/Popup/Content.tsx

@@ -2,12 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    children?: React.ReactNode;
+    className?: string;
+    noPadding?: boolean;
+}
 /**
  * @ngdoc react
  * @name Content
  * @description Component to hold contents of a popup
  */
-const Content = ({children, className, noPadding}) => (
+const Content = ({children, className, noPadding}: IProps) => (
     <div
         className={classNames(
             'popup__menu-content',
@@ -19,12 +24,4 @@ const Content = ({children, className, noPadding}) => (
     </div>
 );
 
-Content.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    noPadding: PropTypes.bool,
-};
-
-Content.defaultProps = {noPadding: false};
-
 export default Content;

client/components/fields/editor/Location.tsx

@@ -22,7 +22,7 @@ export class EditorFieldLocation extends React.PureComponent<IProps> {
                     {...this.props}
                     field={field}
                     label={this.props.label ?? gettext('Location')}
-                    value={get(this.props.item, field, this.props.defaultValue)}
+                    value={this.props.item[field] ?? this.props.defaultValue}
                     disableSearch={!this.props.enableExternalSearch}
                     disableAddLocation={this.props.disableAddLocation}
                     readOnly={this.props.disabled}

client/interfaces.ts

@@ -389,6 +389,7 @@ export interface IEventLocation {
         lat: number;
         lon: number;
     };
+    translations?: ILocation['translations'];
 }
 
 export interface IItemAction {