Added indicator for deprecated attributes (#424)

Author: Daan0709

src/main/frontend/app/routes/studio/context/context-input.tsx

@@ -1,8 +1,11 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import HelpIcon from '/icons/solar/Help.svg?react'
+import DangerTriangle from '/icons/solar/Danger Triangle.svg?react'
 import { useJavadocTransform } from '@frankframework/doc-library-react'
 import ContextInputField from './context-input-field'
 import type { Attribute, Elements } from '@frankframework/doc-library-core'
+import type { DeprecatedInfo } from './deprecated-list-popover'
+import { DeprecatedPopover } from '../canvas/nodetypes/components/deprecated-popover'
 
 export interface ContextInputProperties {
   id: string
@@ -28,12 +31,16 @@ export default function ContextInput({
   const type = attribute?.type
   const description = attribute?.description
   const required = attribute?.mandatory
+  const deprecated = attribute?.deprecated
 
   return (
     <div className="group font-small text-foreground relative block text-sm">
       <div className="flex items-center gap-2">
         {required && <span className="text-red-500">*</span>}
-        <label htmlFor={id}>{label}</label>
+        <label htmlFor={id} className={`${deprecated ? 'text-muted-foreground line-through' : 'text-foreground'}`}>
+          {label}
+        </label>
+        {deprecated && <DeprecatedIcon deprecated={deprecated} />}
         {description && <DescriptionHelpIcon description={description} elements={elements ?? null} />}
       </div>
 
@@ -74,3 +81,32 @@ function DescriptionHelpIcon({ description, elements }: Readonly<{ description:
     </div>
   )
 }
+
+function DeprecatedIcon({ deprecated }: Readonly<{ deprecated: DeprecatedInfo }>) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null)
+  const [show, setShow] = useState(false)
+
+  if (!deprecated) return null
+
+  const handleMouseEnter = () => {
+    if (ref.current) {
+      setAnchorRect(ref.current.getBoundingClientRect())
+      setShow(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setShow(false)
+  }
+
+  return (
+    <>
+      <div ref={ref} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className="inline-flex">
+        <DangerTriangle className="text-error h-auto w-4 cursor-pointer fill-current" />
+      </div>
+
+      {show && <DeprecatedPopover deprecated={deprecated} anchorRect={anchorRect} />}
+    </>
+  )
+}