From 69f461b1a79b0a29e91142242184a14c648b06b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vetle=20Kopperg=C3=A5rd?= <vetk@equinor.com>
Date: Tue, 14 Dec 2021 14:25:56 +0100
Subject: [PATCH] Add extra robot info button

---
 src/components/InfoButton/InfoButton.tsx      | 38 +++++++++++++++++
 .../RobotOverview/RobotInfoButton.tsx         | 42 +++++++++++++++++++
 .../RobotOverview/RobotOverview.tsx           |  9 ++--
 .../RobotOverview/robotOverview.module.css    | 16 +++++++
 4 files changed, 100 insertions(+), 5 deletions(-)
 create mode 100644 src/components/InfoButton/InfoButton.tsx
 create mode 100644 src/components/RobotOverview/RobotInfoButton.tsx

diff --git a/src/components/InfoButton/InfoButton.tsx b/src/components/InfoButton/InfoButton.tsx
new file mode 100644
index 000000000..e396dd3e6
--- /dev/null
+++ b/src/components/InfoButton/InfoButton.tsx
@@ -0,0 +1,38 @@
+import { info_circle } from "@equinor/eds-icons";
+import { Button, Icon } from "@equinor/eds-core-react";
+import { Popover } from "@equinor/eds-core-react";
+import { useRef, useState } from "react";
+
+Icon.add({ info_circle });
+
+interface InfoButtonProps {
+  title: string;
+  content: JSX.Element;
+}
+
+const InfoButton = ({ title, content }: InfoButtonProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const closePopover = () => setIsOpen(false);
+  const toggleOpen = () => setIsOpen(!isOpen);
+  return (
+    <>
+      <Button ref={anchorRef} variant="ghost_icon" onClick={toggleOpen}>
+        <Icon name="info_circle" size={24} color="primary" />
+      </Button>
+      <Popover
+        id="click-popover"
+        aria-expanded={isOpen}
+        anchorEl={anchorRef.current}
+        onClose={closePopover}
+        open={isOpen}
+      >
+        <Popover.Title>{title}</Popover.Title>
+        <Popover.Content>{content}</Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+export default InfoButton;
diff --git a/src/components/RobotOverview/RobotInfoButton.tsx b/src/components/RobotOverview/RobotInfoButton.tsx
new file mode 100644
index 000000000..e8f52d295
--- /dev/null
+++ b/src/components/RobotOverview/RobotInfoButton.tsx
@@ -0,0 +1,42 @@
+import { Typography } from "@equinor/eds-core-react";
+import { Pose } from "models/pose";
+import { Robot } from "models/robot";
+import InfoButton from "../InfoButton/InfoButton";
+import styles from "./robotOverview.module.css";
+
+interface RobotInfoButtonProps {
+  robot: Robot;
+}
+
+interface RobotPoseInfoProps {
+  pose: Pose;
+}
+
+const RobotPoseInfo = ({ pose }: RobotPoseInfoProps): JSX.Element => {
+  return (
+    <div className={styles.infoContentWrapper}>
+      <div className={styles.poseWrapper}>
+        <Typography variant="body_short_bold">Position:</Typography>
+        <div className={styles.poseItem}>
+          <Typography>X: {pose.position.x}</Typography>
+          <Typography>Y: {pose.position.x}</Typography>
+          <Typography>Z: {pose.position.x}</Typography>
+        </div>
+        <Typography variant="body_short_bold">Orientation:</Typography>
+        <div className={styles.poseItem}>
+          <Typography>X: {pose.orientation.x}</Typography>
+          <Typography>Y: {pose.orientation.y}</Typography>
+          <Typography>Z: {pose.orientation.z}</Typography>
+          <Typography>W: {pose.orientation.w}</Typography>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RobotInfoButton = ({ robot }: RobotInfoButtonProps): JSX.Element => {
+  const content = <RobotPoseInfo pose={robot.pose} />;
+  return <InfoButton title="Robot Info" content={content}></InfoButton>;
+};
+
+export default RobotInfoButton;
diff --git a/src/components/RobotOverview/RobotOverview.tsx b/src/components/RobotOverview/RobotOverview.tsx
index 8183eb954..de3fe0ddc 100644
--- a/src/components/RobotOverview/RobotOverview.tsx
+++ b/src/components/RobotOverview/RobotOverview.tsx
@@ -1,6 +1,7 @@
 import { Icon, Typography, Table } from "@equinor/eds-core-react";
 import { info_circle } from "@equinor/eds-icons";
 import { Robot } from "../../models/robot";
+import RobotInfoButton from "./RobotInfoButton";
 import styles from "./robotOverview.module.css";
 import RobotOverviewHeader from "./RobotOverviewHeader";
 
@@ -23,8 +24,8 @@ const RobotStatus: React.FC<RobotProps> = ({ robot }: RobotProps) => {
       <Table.Cell className={styles.tableBatteryCell} variant="numeric">
         {battery}
       </Table.Cell>
-      <Table.Cell className={styles.tableInfoCell} variant="icon">
-        <Icon name="info_circle" size={24} color="primary" />
+      <Table.Cell className={styles.tableInfoCell}>
+        <RobotInfoButton robot={robot} />
       </Table.Cell>
     </Table.Row>
   );
@@ -46,9 +47,7 @@ const RobotOverview: React.FC<RobotOverviewProps> = ({
         <Typography variant="h2">Robot Overview</Typography>
       </Table.Caption>
       <RobotOverviewHeader />
-      <Table.Body className={styles.tableBodyWrapper}>
-        {rows}
-      </Table.Body>
+      <Table.Body className={styles.tableBodyWrapper}>{rows}</Table.Body>
     </Table>
   );
 };
diff --git a/src/components/RobotOverview/robotOverview.module.css b/src/components/RobotOverview/robotOverview.module.css
index 177c9873a..a9d672afc 100644
--- a/src/components/RobotOverview/robotOverview.module.css
+++ b/src/components/RobotOverview/robotOverview.module.css
@@ -72,3 +72,19 @@
 .label {
   margin-right: 24px;
 }
+
+.poseItem {
+  margin-left: 12px;
+  margin-bottom: 12px;
+}
+
+.poseWrapper  {
+  margin: 12px;
+}
+
+.infoContentWrapper {
+  width: 90%;
+  max-height: 146px;
+  overflow-y: auto;
+  margin: 12px;
+}