chore(react-components): Move close button to side panel header (#4906)

cognitedata · Nov 28, 2024 · 4527648 · 4527648
1 parent 67b2e5b
commit 4527648
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/react-components/src/components/Architecture/pointsOfInterest/PoiInfoPanelContent.tsx b/react-components/src/components/Architecture/pointsOfInterest/PoiInfoPanelContent.tsx
@@ -5,6 +5,7 @@ import {
   Accordion,
   Avatar,
   Button,
+  CloseIcon,
   Divider,
   Flex,
   ShareIcon,
@@ -24,6 +25,7 @@ import { useCommentsForPoiQuery } from './useCommentsForPoiQuery';
 import { RevealButtons } from '../RevealButtons';
 import { useSelectedPoi } from './useSelectedPoi';
 import { useTranslation } from '../../i18n/I18n';
+import { usePoiDomainObject } from './usePoiDomainObject';
 
 export const PoiInfoPanelContent = (): ReactNode => {
   return (
@@ -37,6 +39,8 @@ export const PoiInfoPanelContent = (): ReactNode => {
 const PanelHeader = (): ReactNode => {
   const { t } = useTranslation();
 
+  const poiDomainObject = usePoiDomainObject();
+
   const selectedPoi = useSelectedPoi();
   if (selectedPoi === undefined) {
     return undefined;
@@ -55,6 +59,10 @@ const PanelHeader = (): ReactNode => {
           </Tooltip>
         </Dropdown>
         <RevealButtons.DeleteSelectedPointOfInterest toolbarPlacement={'top'} />
+        <Button
+          icon=<CloseIcon />
+          onClick={() => poiDomainObject?.setSelectedPointOfInterest(undefined)}
+        />
       </Flex>
     </Flex>
   );