Store location translations, render location name for selected language

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}

client/components/GeoLookupInput/LocationItem.tsx

@@ -9,20 +9,25 @@ import {Button} from '../UI';
 import {Location} from '../Location';
 
 import {onEventCapture} from '../../utils';
-import {formatLocationToAddress} from '../../utils/locations';
+import {formatLocationToAddress, getLocationsShortName} from '../../utils/locations';
 
 interface IProps {
  location?: ILocation | IEventLocation;
  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,7 +38,7 @@ 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]')}

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/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 {