feat: OPTIC-1643: Copy Data Manager Quick View link to annotation or region

web/libs/datamanager/src/sdk/lsf-sdk.js

@@ -19,6 +19,7 @@ import {
   FF_DEV_3034,
   FF_LSDV_4620_3_ML,
   FF_OPTIC_2,
+  FF_REGION_VISIBILITY_FROM_URL,
   isFF,
 } from "../utils/feature-flags";
 import { isDefined } from "../utils/utils";
@@ -140,6 +141,9 @@ export class LSFWrapper {
         "annotations:tabs",
         "predictions:tabs",
       );
+      if (isFF(FF_REGION_VISIBILITY_FROM_URL)) {
+        interfaces.push("annotations:copy-link");
+      }
     }
 
     if (this.datamanager.hasInterface("instruction")) {

web/libs/editor/src/assets/icons/index.tsx

@@ -80,6 +80,7 @@ export { ReactComponent as IconCopy } from "./copy.svg";
 export { ReactComponent as IconText } from "./text.svg";
 export { ReactComponent as IconViewAll } from "./view-all.svg";
 export { ReactComponent as IconLink } from "./link.svg";
+export { ReactComponent as IconRelationLink } from "./link-relation.svg";
 export { ReactComponent as IconPlusAlt } from "./plus-alt.svg";
 export { ReactComponent as IconTrash } from "./trash.svg";
 export { ReactComponent as IconTrashAlt } from "./trash-alt.svg";

web/libs/editor/src/common/Dropdown/DropdownComponent.tsx

@@ -38,7 +38,7 @@ export interface DropdownProps {
   className?: string;
   dataTestId?: string;
   style?: CSSProperties;
-  children?: JSX.Element;
+  children?: React.ReactNode;
   onToggle?: (visible: boolean) => void;
 }
 

web/libs/editor/src/common/Dropdown/DropdownTrigger.tsx

@@ -36,8 +36,8 @@ const getMinIndex = (element?: HTMLElement) => {
 
 interface DropdownTriggerProps extends DropdownProps {
   tag?: string;
-  dropdown?: RefObject<JSX.Element>;
-  content?: JSX.Element;
+  dropdown?: RefObject<DropdownRef>;
+  content?: React.ReactNode;
   dataTestId?: string;
   toggle?: boolean;
   closeOnClickOutside?: boolean;

web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.scss

@@ -75,7 +75,7 @@
       color: var(--sand_900);
     }
 
-    & .annotation-button__ellipsisIcon {
+    & .annotation-button__trigger {
       visibility: visible;
     }
   }
@@ -91,7 +91,7 @@
       border-bottom-color: transparent;
     }
 
-    & .annotation-button__ellipsisIcon {
+    & .annotation-button__trigger {
       visibility: visible;
     }
 
@@ -119,7 +119,7 @@
     }
   }
 
-  &__ellipsisIcon {
+  &__trigger {
     transform: rotate(90deg);
     display: flex;
     border-radius: 4px;
@@ -166,70 +166,4 @@
       }
     }
   }
-
-  &_contextMenuOpen {
-    & .annotation-button {
-      &__ellipsisIcon {
-        color: var(--grape_500);
-        background: var(--grape_0);
-      }
-    }
-  }
-}
-
-.AnnotationButtonContextMenu {
-  border-radius: 4px;
-  box-shadow: 0 1px 3px 1px #26262626, 0 1px 2px 0 #2626264D;
-
-  &__seperator {
-    height: 1px;
-    background-color: var(--sand_100);
-  }
-
-  &__option {
-    display: flex;
-    margin: 8px;
-    align-items: center;
-    white-space: nowrap;
-    gap: 2px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    border-radius: 4px;
-    padding-right: 32px;
-
-    &:hover {
-      background-color: var(--grape_0);
-      color: var(--grape_500);
-    }
-
-    &_duplicate {
-      padding-top: 6px;
-      padding-bottom: 6px;
-
-      .AnnotationButtonContextMenu__icon {
-        display: flex;
-        padding: 0 8px 0 9px;
-        align-items: center;
-      }
-    }
-
-    &_delete {
-      padding-top: 6px;
-      padding-bottom: 6px;
-      color: var(--danger_color);
-
-      &:hover {
-        background-color: var(--red_1);
-        color: var(--danger_color);
-      }
-
-      & .AnnotationButtonContextMenu__icon {
-        display: flex;
-        padding: 4px 11px 4px 12px;
-        align-items: center;
-      }
-    }
-  }
-}
+}