fix: comment tab errors in tag comparison

src/Components/JIP33Table/JIP33Table.tsx

@@ -48,6 +48,7 @@ function JIP33Table({
     const openConversationOnSheet = (paramsData: { property: string }) => {
         if (setSideSheetOpen && setCurrentProperty) {
             setSideSheetOpen(true)
+            console.log("setting current property to: ", paramsData.property)
             setCurrentProperty(paramsData.property)
             setActiveSheetTab(4)
         }

src/Components/SideSheet/Comments/CommentSideSheet.tsx

@@ -38,11 +38,7 @@ const ButtonRow = styled.div`
 
 const TopButton = styled(Button)`
     margin-left: 5px;
-    `
-
-type Props = {
-    currentProperty?: string;
-};
+`
 
 interface DisplayConversation {
     property: string,
@@ -53,14 +49,13 @@ interface DisplayConversation {
     participants: User[]
 }
 
-const CommentSideSheet: FC<Props> = ({
-    currentProperty,
-}) => {
+const CommentSideSheet: FC = () => {
     const {
         setConversations,
         activeTagData,
         conversations,
         setSideSheetScrollPos,
+        currentProperty,
         } = useContext(ViewContext)
     const [activeTab, setActiveTab] = useState(() => parseInt(localStorage.getItem("ActiveCommentTab") || "0", 10))
     const [conversationsData, setConversationsData] = useState<{[key in Components.Schemas.ConversationStatusDto] : DisplayConversation[]}>()

src/Components/SideSheet/Comments/Components/CommentView.tsx

@@ -233,7 +233,6 @@ const CommentView: React.FC<CommentViewProps> = ({
                         color="#007079"
                     />
                 </Button>
-
                 <Typography>
                     {formatCamelCase(currentProperty)}
                 </Typography>
@@ -253,7 +252,6 @@ const CommentView: React.FC<CommentViewProps> = ({
                     />
                 </ConversationDiv>
             </ConversationContainer>
-
             <Controls>
                 {showTagDropDown && (
                     <TagDropDown
@@ -263,7 +261,6 @@ const CommentView: React.FC<CommentViewProps> = ({
                         dummyData={userTags}
                     />
                 )}
-
                 <InputController
                     handleSubmit={handleSubmit}
                     reRenderCounter={reRenderCounter}

src/Components/SideSheet/Components/SheetContainer.tsx

@@ -89,15 +89,11 @@ type TabType = {
 
 type Props = {
     onClose: () => void
-    currentProperty: any
-    activeTagData: any
     tabs: TabType[],
 }
 
 const SheetContainer: React.FC<Props> = ({
-    activeTagData,
     onClose,
-    currentProperty,
     tabs,
 }) => {
     const {
@@ -109,7 +105,8 @@ const SheetContainer: React.FC<Props> = ({
         sideSheetOpen,
         sheetWidth,
         setSheetWidth,
-
+        currentProperty,
+        activeTagData,
     } = useContext(ViewContext)
     const scrollableRef = useRef<HTMLDivElement>(null)
 
@@ -221,7 +218,7 @@ const SheetContainer: React.FC<Props> = ({
                         <Typography variant="h4">
                             {
                                 currentProperty
-                                && <strong>{currentProperty.description}</strong>
+                                && <strong>{activeTagData.description}</strong>
                             }
                         </Typography>
                         <Button variant="ghost_icon" onClick={onClose}>

src/Components/SideSheet/TagPropertySideSheet.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React, { useContext, useEffect } from "react"
 import styled from "styled-components"
 import { Typography } from "@equinor/eds-core-react"
 import SheetContainer from "./Components/SheetContainer"
 import CommentsSideSheet from "./Comments/CommentSideSheet"
 import ChangeLogSideSheet from "./ChangeLog/ChangeLogSideSheet"
+import { ViewContext } from "../../Context/ViewContext"
 
 const Placeholder = styled.div`
     height: 100%;
@@ -12,34 +13,36 @@ const Placeholder = styled.div`
 
 type props = {
     onClose: () => void
-    currentProperty: any
-    activeTagData: any
 }
 
 const TagSideSheet: React.FC<props> = ({
-    activeTagData,
     onClose,
-    currentProperty,
+
 }) => {
+    const { activeTagData, activeSheetTab, setActiveSheetTab } = useContext(ViewContext)
     const placeholder = (
         <Placeholder>
             <Typography variant="body_short">Work in progress...</Typography>
         </Placeholder>
     )
+
+    // if user immediately goes from tagSideSheet to tagPropertySideSheet, the activeTab may be > 2. this resets it to 0 to avoid empty content
+    useEffect(() => {
+        if (activeSheetTab > 2) {
+            setActiveSheetTab(0)
+        }
+    }, [])
+
     return (
-        currentProperty ? (
-            <SheetContainer
-                key={activeTagData?.tagNo}
-                onClose={onClose}
-                activeTagData={activeTagData}
-                currentProperty={currentProperty}
-                tabs={[
+        <SheetContainer
+            key={activeTagData?.tagNo}
+            onClose={onClose}
+            tabs={[
                 { title: "Requirements", content: placeholder },
-                { title: "Comments", content: <CommentsSideSheet currentProperty={currentProperty} /> },
+                { title: "Comments", content: <CommentsSideSheet /> },
                 { title: "Changelog", content: <ChangeLogSideSheet /> },
             ]}
-            />
-        ) : null
+        />
     )
 }
 

src/Components/SideSheet/TagSideSheet.tsx

@@ -7,6 +7,7 @@ import AreaSideSheet from "./Area/AreaSideSheet"
 import ChangeLogSideSheet from "./ChangeLog/ChangeLogSideSheet"
 import EquipmentSideSheet from "./Equipment/EquipmentSideSheet"
 import ActivitySideSheet from "./Activity/ActivitySideSheet"
+import { ViewContext } from "../../Context/ViewContext"
 
 const Placeholder = styled.div`
   height: 100%;
@@ -15,15 +16,13 @@ const Placeholder = styled.div`
 
 type Props = {
   onClose: () => void;
-  currentProperty: any;
-  activeTagData: any;
 };
 
 const TagSideSheet: React.FC<Props> = ({
-  activeTagData,
   onClose,
-  currentProperty,
 }) => {
+  const { activeTagData } = useContext(ViewContext)
+
   const placeholder = (
       <Placeholder>
           <Typography variant="body_short">Work in progress...</Typography>
@@ -34,16 +33,14 @@ const TagSideSheet: React.FC<Props> = ({
       <SheetContainer
           key={activeTagData?.tagNo}
           onClose={onClose}
-          activeTagData={activeTagData}
-          currentProperty={currentProperty}
           tabs={[
                   { title: "Activity", content: <ActivitySideSheet /> },
                   { title: "Equipment", content: <EquipmentSideSheet /> },
                   { title: "Area", content: <AreaSideSheet /> },
                   { title: "Connections", content: placeholder },
                   {
                       title: "Comments",
-                      content: <CommentsSideSheet currentProperty={currentProperty} />,
+                      content: <CommentsSideSheet />,
                   },
                   { title: "Changelog", content: <ChangeLogSideSheet /> },
               ]}

src/Components/TagComparisonTable/TagComparisonTable.tsx

@@ -51,10 +51,11 @@ function TagComparisonTable({ tags }: Props) {
     const {
         setSideSheetOpen,
         sheetWidth,
+        setCurrentProperty,
+        activeTagData,
+        setActiveTagData,
     } = useContext(ViewContext)
     const [FilterSidebarIsOpen, SetFilterSidebarIsOpen] = useState<boolean>(false)
-    const [activeTagData, setActiveTagData] = useState<ActiveTagData | undefined>(undefined)
-    const [currentProperty, setCurrentProperty] = useState<any>(undefined)
     const [showTagSideSheet, setShowTagSideSheet] = useState<boolean>(false)
 
     const toggleFilterSidebar = () => SetFilterSidebarIsOpen(!FilterSidebarIsOpen)
@@ -147,19 +148,25 @@ function TagComparisonTable({ tags }: Props) {
     const closeSideSheet = () => {
         setSideSheetOpen(false)
         setActiveTagData(undefined)
-        setCurrentProperty(undefined)
     }
 
     const handleCellClicked = (event: any) => {
-        setShowTagSideSheet(event.colDef.field === "tagNo")
-        setCurrentProperty(event.colDef.field === "tagNo" ? undefined : { description: event.data.description })
+        const shouldOpenTaggSideSheet = event.colDef.field === "tagNo"
+        if (shouldOpenTaggSideSheet) {
+            setShowTagSideSheet(true)
+            setCurrentProperty("")
+        } else {
+            setShowTagSideSheet(false)
+            setCurrentProperty(event.data.description)
+        }
         setActiveTagData({ description: event.data.description, tagNo: event.data.tagNo })
     }
 
     // Opens side sheet when tag is clicked
     useEffect(() => {
         if (activeTagData !== undefined) {
             setSideSheetOpen(true)
+            console.log("opening sidesheet for this tag: ", activeTagData)
         }
     }, [activeTagData])
 
@@ -169,15 +176,11 @@ function TagComparisonTable({ tags }: Props) {
                 <TagSideSheet
                     key={activeTagData?.tagNo}
                     onClose={closeSideSheet}
-                    activeTagData={activeTagData}
-                    currentProperty={currentProperty}
                 />
             ) : (
                 <TagPropertySideSheet
                     key={activeTagData?.tagNo}
                     onClose={closeSideSheet}
-                    activeTagData={activeTagData}
-                    currentProperty={currentProperty}
                 />
             )}
             <ResizableTableContainer sheetWidth={sheetWidth}>

src/Views/JIP33InstrumentTabView.tsx

@@ -84,8 +84,6 @@ function JIP33InstrumentTabView({ }) {
             activeSheetTab,
             setActiveSheetTab,
             setConversations,
-            currentProperty,
-            setCurrentProperty,
             sideSheetOpen,
             setSideSheetOpen,
             sheetWidth,
@@ -97,13 +95,11 @@ function JIP33InstrumentTabView({ }) {
 
     const onCloseReviewSideSheet = useCallback(() => {
         setSideSheetOpen(false)
-        setCurrentProperty("")
     }, [setSideSheetOpen])
 
     const onOpenReviewSideSheet = useCallback((activatedTab: React.SetStateAction<number>) => {
         setActiveSheetTab(activatedTab)
         setSideSheetOpen(true)
-        setCurrentProperty("")
     }, [setSideSheetOpen])
 
     const getConversationsForTagReview = async (tagNo: string) => {
@@ -243,8 +239,6 @@ function JIP33InstrumentTabView({ }) {
             </TableView>
             <TagSideSheet
                 onClose={onCloseReviewSideSheet}
-                currentProperty={currentProperty}
-                activeTagData={activeTagData}
             />
         </View>
     )

src/utils/helpers.tsx

@@ -68,7 +68,6 @@ export function getPropertyName<T>(property: keyof T): keyof T {
  */
 export function processMessageInput(input: string): { processedString: string, mentions: string[] } {
     const mentions: string[] = []
-
     const mentionRegex = /<span data-mention="(\w+-\w+-\w+-\w+-\w+)" contenteditable="false">([^<]+)<\/span>/g
 
     let processedString = input.replace(mentionRegex, (fullMatch, mentionId, content) => {