Add success popup message when updating camera location (#285)

awslabs · Oct 21, 2022 · 4af9c07 · 4af9c07
1 parent cada75e
commit 4af9c07
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/packages/scene-composer/src/components/panels/scene-components/CameraComponentEditor.tsx b/packages/scene-composer/src/components/panels/scene-components/CameraComponentEditor.tsx
@@ -1,6 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { PerspectiveCamera } from 'three';
-import { Button, FormField, Grid, Select, SpaceBetween, TextContent } from '@awsui/components-react';
+import {
+  Button,
+  FormField,
+  Grid,
+  Popover,
+  Select,
+  SpaceBetween,
+  StatusIndicator,
+  TextContent,
+} from '@awsui/components-react';
 import { useIntl } from 'react-intl';
 
 import { IComponentEditorProps } from '../ComponentEditor';
@@ -439,28 +448,40 @@ const CameraComponentEditor: React.FC<ICameraComponentEditorProps> = ({
             description: 'Form field label',
           })}
         >
-          <Button
-            data-testid={'fix-camera-from-current-button'}
-            onClick={useCallback(() => {
-              if (mainCameraObject) {
-                const parent = getObject3DBySceneNodeRef(node.parentRef);
-                const newNode = createNodeWithTransform(
-                  node,
-                  mainCameraObject.position,
-                  mainCameraObject.rotation,
-                  mainCameraObject.scale,
-                  parent,
-                );
-                const updatedNodePartial = {
-                  transform: newNode.transform,
-                };
-
-                updateSceneNodeInternal(node.ref, updatedNodePartial);
-              }
-            }, [mainCameraObject, node])}
+          <Popover
+            dismissButton={false}
+            position={'top'}
+            size={'small'}
+            triggerType={'custom'}
+            content={
+              <StatusIndicator type='success'>
+                {intl.formatMessage({ defaultMessage: 'Camera view saved', description: 'Status indicator label' })}
+              </StatusIndicator>
+            }
           >
-            {intl.formatMessage({ defaultMessage: 'Fix view', description: 'Form button text' })}
-          </Button>
+            <Button
+              data-testid={'fix-camera-from-current-button'}
+              onClick={useCallback(() => {
+                if (mainCameraObject) {
+                  const parent = getObject3DBySceneNodeRef(node.parentRef);
+                  const newNode = createNodeWithTransform(
+                    node,
+                    mainCameraObject.position,
+                    mainCameraObject.rotation,
+                    mainCameraObject.scale,
+                    parent,
+                  );
+                  const updatedNodePartial = {
+                    transform: newNode.transform,
+                  };
+
+                  updateSceneNodeInternal(node.ref, updatedNodePartial);
+                }
+              }, [mainCameraObject, node])}
+            >
+              {intl.formatMessage({ defaultMessage: 'Fix view', description: 'Form button text' })}
+            </Button>
+          </Popover>
         </FormField>
       </SpaceBetween>
     </SpaceBetween>

diff --git a/packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json b/packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json
@@ -155,6 +155,10 @@
     "note": "label",
     "text": "Select speed"
   },
+  "A/Q8OL": {
+    "note": "Status indicator label",
+    "text": "Camera view saved"
+  },
   "B5EPL8": {
     "note": "Menu Item",
     "text": "Add 3D model"