fix(react-components): Make public/private visibility toggle work, add translation, bump 0.67.1

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.67.0",
+  "version": "0.67.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",

react-components/src/architecture/concrete/pointsOfInterest/CreatePointsOfInterestWithDescriptionCommand.ts

@@ -25,7 +25,10 @@ export class CreatePointsOfInterestWithDescriptionCommand extends BaseInputComma
   }
 
   public override getPlaceholder(t: TranslateDelegate): string | undefined {
-    return t('POI_DESCRIPTION_PLACEHOLDER', 'Write a points of interest description');
+    return t(
+      'POINT_OF_INTEREST_DESCRIPTION_PLACEHOLDER',
+      'Write a description for the Point of Interest'
+    );
   }
 
   public override get hasData(): true {

react-components/src/architecture/concrete/pointsOfInterest/InitiatePointsOfInterestCommand.ts

@@ -24,11 +24,11 @@ export class InitiatePointsOfInterestCommand extends RenderTargetCommand {
   }
 
   public override get tooltip(): TranslateKey {
-    return { key: 'CREATE_POI', fallback: 'Create point of interest' };
+    return { key: 'POINT_OF_INTEREST_CREATE', fallback: 'Create Point of Interest' };
   }
 
   public override getLabel(t: TranslateDelegate): string {
-    return t('CREATE_POI', 'Create point of interest');
+    return t('POINT_OF_INTEREST_CREATE', 'Create Point of Interest');
   }
 
   protected override invokeCore(): boolean {

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestCache.ts

@@ -63,14 +63,14 @@ export class PointsOfInterestCache<PoiId> {
     await this._poiProvider.deletePointsOfInterest(poiIds);
   }
 
-  public async savePointsOfInterest(
+  public async upsertPointsOfInterest(
     pois: Array<PointsOfInterestInstance<PoiId>>
   ): Promise<Array<PointsOfInterestInstance<PoiId>>> {
     if (pois.length === 0) {
       return [];
     }
 
-    return await this._poiProvider.createPointsOfInterest(pois);
+    return await this._poiProvider.upsertPointsOfInterest(pois);
   }
 
   public getDataProvider(): PointsOfInterestProvider<PoiId> {

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestDomainObject.ts

@@ -10,7 +10,11 @@ import { PointsOfInterestCache } from './PointsOfInterestCache';
 import { PanelInfo } from '../../base/domainObjectsHelpers/PanelInfo';
 import { type PointOfInterest, PointsOfInterestStatus } from './types';
 import { partition, remove } from 'lodash';
-import { type CommentProperties, type PointsOfInterestProperties } from './models';
+import {
+  type CommentProperties,
+  type PointsOfInterestProperties,
+  type PointsOfInterestInstance
+} from './models';
 import { Quantity } from '../../base/domainObjectsHelpers/Quantity';
 import { type PointsOfInterestProvider } from './PointsOfInterestProvider';
 
@@ -130,7 +134,7 @@ export class PointsOfInterestDomainObject<PoiIdType> extends VisualDomainObject
     const poisToCreate = this._pointsOfInterest.filter(
       (obs) => obs.status === PointsOfInterestStatus.PendingCreation
     );
-    const newPointsOfInterest = await this._poisCache.savePointsOfInterest(poisToCreate);
+    const newPointsOfInterest = await this._poisCache.upsertPointsOfInterest(poisToCreate);
 
     this._pointsOfInterest = notToRemove
       .filter((poi) => poi.status === PointsOfInterestStatus.Default)
@@ -153,6 +157,12 @@ export class PointsOfInterestDomainObject<PoiIdType> extends VisualDomainObject
     this.notify(Changes.selected);
   }
 
+  public async updatePointsOfInterest(
+    pois: Array<PointOfInterest<PoiIdType>>
+  ): Promise<Array<PointsOfInterestInstance<PoiIdType>>> {
+    return await this._poisCache.upsertPointsOfInterest(pois);
+  }
+
   public async postCommentForPoi(
     poi: PointOfInterest<PoiIdType>,
     content: string

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestProvider.ts

@@ -8,7 +8,7 @@ import {
 } from './models';
 
 export type PointsOfInterestProvider<ID> = {
-  createPointsOfInterest: (
+  upsertPointsOfInterest: (
     pois: Array<{ id: ID; properties: PointsOfInterestProperties }>
   ) => Promise<Array<PointsOfInterestInstance<ID>>>;
   fetchAllPointsOfInterest: () => Promise<Array<PointsOfInterestInstance<ID>>>;

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestSectionCommand.ts

@@ -11,6 +11,6 @@ export class PointsOfInterestSectionCommand extends SectionCommand {
   }
 
   public override get tooltip(): TranslateKey {
-    return { key: 'POINTS_OF_INTEREST', fallback: 'Points of Interest' };
+    return { key: 'POINT_OF_INTEREST_PLURAL', fallback: 'Points of Interest' };
   }
 }

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestTool.ts

@@ -23,7 +23,7 @@ export class PointsOfInterestTool<PoiIdType> extends NavigationTool {
   }
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'Create point of interest' };
+    return { key: 'POINT_OF_INTEREST_CREATE', fallback: 'Create Point of Interest' };
   }
 
   public override onActivate(): void {

react-components/src/architecture/concrete/pointsOfInterest/ads/PointsOfInterestAdsProvider.ts

@@ -37,7 +37,7 @@ export class PointsOfInterestAdsProvider implements PointsOfInterestProvider<Ext
 
   constructor(private readonly _sdk: CogniteClient) {}
 
-  async createPointsOfInterest(
+  async upsertPointsOfInterest(
     pois: Array<{ id: ExternalId; properties: PointsOfInterestProperties }>
   ): Promise<Array<PointsOfInterestInstance<ExternalId>>> {
     const result = await this._sdk.put<{ items: PoiItem[] }>(
@@ -50,7 +50,7 @@ export class PointsOfInterestAdsProvider implements PointsOfInterestProvider<Ext
               name: poi.title,
               position: [poi.positionX, poi.positionY, poi.positionZ],
               sceneState: {},
-              visibility: 'PRIVATE'
+              visibility: poi.visibility ?? 'PRIVATE'
             };
           })
         }
@@ -141,7 +141,8 @@ function poiItemToInstance(item: PoiItem): PointsOfInterestInstance<ExternalId>
       title: item.name,
       positionX: item.position[0],
       positionY: item.position[1],
-      positionZ: item.position[2]
+      positionZ: item.position[2],
+      visibility: item.visibility
     }
   };
 }

react-components/src/architecture/concrete/pointsOfInterest/fdm/PointsOfInterestFdmProvider.ts

@@ -20,7 +20,7 @@ import { POI_SOURCE } from './view';
 export class PointsOfInterestFdmProvider implements PointsOfInterestProvider<DmsUniqueIdentifier> {
   constructor(private readonly _fdmSdk: FdmSDK) {}
 
-  async createPointsOfInterest(
+  async upsertPointsOfInterest(
     pois: Array<{ id: DmsUniqueIdentifier; properties: PointsOfInterestProperties }>
   ): Promise<Array<PointsOfInterestInstance<DmsUniqueIdentifier>>> {
     return await createPointsOfInterestInstances(this._fdmSdk, pois);

react-components/src/common/i18n/en/reveal-react-components.json

@@ -6,6 +6,8 @@
   "ADD_SLICE_Z": "Add horizontal slice. Select a point.",
   "ALL": "All",
   "CAD_MODELS": "CAD models",
+  "CANCEL": "Cancel",
+  "COMMENT_PLACEHOLDER": "Write a comment",
   "CIRCLE": "Circle",
   "CLASSIFICATION": "Classification",
   "CLIP_APPLY": "Apply selected crop box to a model. Otherwise, apply to all slice planes",
@@ -22,6 +24,7 @@
   "CONTROLS_TYPE_TOOLTIP": "Set camera to orbit or fly mode",
   "COPY_TO_CLIPBOARD": "Copy to clipboard",
   "COPY_URL_TO_SHARE": "Copy URL to share",
+  "CREATE": "Create",
   "CROP_BOX": "Crop box",
   "DELETE": "Delete",
   "FIT_VIEW_TOOLTIP": "Fit view",
@@ -77,9 +80,17 @@
   "MOUSE_SELECT_INSTRUCTION": "Click on interactive objects",
   "MOUSE_TOUCH_NAVIGATION_SUBTITLE": "Navigate and select",
   "MOUSE_ZOOM": "Zoom / scroll",
+  "NAME": "Name",
   "NONE": "None",
   "PAN": "Pan",
   "PARABOLOID": "Paraboloid",
+  "POINT_OF_INTEREST_CREATE": "Create Point of Interest",
+  "POINT_OF_INTEREST_DESCRIPTION_PLACEHOLDER": "Write a description for the Point of Interest",
+  "POINT_OF_INTEREST_IS_PRIVATE": "Point of Interest is private",
+  "POINT_OF_INTEREST_IS_PUBLIC": "Point of Interest is public",
+  "POINT_OF_INTEREST_PLURAL": "Points of Interest",
+  "POINT_OF_INTEREST_PRIVATE_DESCRIPTION": "Point of interest is private and only visible to you",
+  "POINT_OF_INTEREST_PUBLIC_DESCRIPTION": "Point of Interest is public and visible to anyone",
   "POINT_CLOUDS": "Point clouds",
   "POINT_COLOR": "Point color",
   "POINT_SHAPE": "Point shape",
@@ -104,6 +115,7 @@
   "SLICE_XY": "Vertical slice",
   "SLICE_Y": "Vertical slice along X-axis",
   "SLICE_Z": "Horizontal slice",
+  "SEND": "Send",
   "SQUARE": "Square",
   "TOUCH_NAVIGATION_DESCRIPTION": "Use gestures to zoom, pan and select",
   "TOUCH_NAVIGATION_TITLE": "Touch",

react-components/src/components/Architecture/pointsOfInterest/PoiInfoPanelContent.tsx

@@ -45,7 +45,7 @@ const PanelHeader = (): ReactNode => {
       </Flex>
       <Divider direction="vertical" weight="2px" />
       <Flex direction="row" justifyContent="flex-start">
-        <Dropdown appendTo={document} placement="bottom-end" content={<PoiSharePanel />}>
+        <Dropdown placement="bottom-end" content={<PoiSharePanel />}>
           <Button icon=<ShareIcon /> type="ghost" />
         </Dropdown>
         <RevealButtons.DeleteSelectedPointOfInterest />

react-components/src/components/Architecture/pointsOfInterest/PoiSharePanel.tsx

@@ -53,11 +53,14 @@ const PoiVisibilityInfobox = ({
   const selectedPointOfInterest = poiDomainObject?.selectedPointsOfInterest;
   const markedPublic = poiVisibility === 'PUBLIC';
   const header = markedPublic
-    ? t('POI_IS_PUBLIC', 'Point of interest is public')
-    : t('POI_IS_PRIVATE', 'Point of interest is private');
+    ? t('POINT_OF_INTEREST_IS_PUBLIC', 'Point of interest is public')
+    : t('POINT_OF_INTEREST_IS_PRIVATE', 'Point of interest is private');
   const content = markedPublic
-    ? t('POI_PUBLIC_DESCRIPTION', 'Point of interest is public and visible to anyone')
-    : t('POI_PRIVATE_DESCRIPTION', 'Point of interest is private and only visible to you');
+    ? t('POINT_OF_INTEREST_PUBLIC_DESCRIPTION', 'Point of interest is public and visible to anyone')
+    : t(
+        'POINT_OF_INTEREST_PRIVATE_DESCRIPTION',
+        'Point of interest is private and only visible to you'
+      );
 
   if (poiDomainObject === undefined || selectedPointOfInterest === undefined) {
     return null;
@@ -70,6 +73,7 @@ const PoiVisibilityInfobox = ({
           checked={markedPublic}
           onChange={(_: InputEvent, checked: boolean) => {
             selectedPointOfInterest.properties.visibility = checked ? 'PUBLIC' : 'PRIVATE';
+            void poiDomainObject.updatePointsOfInterest([selectedPointOfInterest]);
             poiDomainObject.notify(Changes.geometry);
           }}
         />