[WEB-2442] fix: Timeline dependency bugs (#1649)

* fix dark mode for dependency path

* feature flag issue relation and also add activities for new relation

web/ee/components/gantt-chart/dependency/dependency-modal.tsx

@@ -17,7 +17,7 @@ import { getRelationType } from "@/plane-web/store/timeline/utils";
 import { Relation } from "@/plane-web/types";
 //
 import { IssueIdentifier } from "../../issues/issue-details";
-import { ISSUE_RELATION_OPTIONS } from "../../relations";
+import { useTimeLineRelationOptions } from "../../relations";
 
 type IssueBlockProps = {
   blockId: string;
@@ -96,6 +96,7 @@ export const DependencyPathModal = observer((props: DependencyPathProps) => {
   const relationType = relation
     ? getRelationType(relation.originDependencyPosition, relation.destinationDependencyPosition)
     : undefined;
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
   const relationObject = relationType ? ISSUE_RELATION_OPTIONS[relationType] : undefined;
 
   const {

web/ee/components/gantt-chart/dependency/dependency-path-item.tsx

@@ -39,9 +39,9 @@ export const TimelineDependencyPathItem = observer((props: TimelineDependencyPat
       >
         <g className="cursor-pointer pointer-events-auto" onClick={() => onPathClick(relation)}>
           <path
-            className="opacity-0 hover:opacity-100"
+            className="opacity-0 hover:opacity-5"
             d={`M${pathStart.x},${pathStart.y} C${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${pathEnd.x},${pathEnd.y} `}
-            stroke={"#F7F9FF"}
+            stroke={"#3F76FF"}
             stroke-width={`${strokeWidth}`}
             fill="none"
           />

web/ee/components/relations/activity.ts

@@ -0,0 +1,31 @@
+import { TIssueActivity } from "@plane/types";
+import { getRelationActivityContent as getCERelationActivityContent } from "ce/components/relations";
+
+export const getRelationActivityContent = (activity: TIssueActivity | undefined): string | undefined => {
+  if (!activity) return;
+
+  if (["blocking", "blocked_by", "duplicate", "relates_to"].includes(activity.field ?? "")) {
+    return getCERelationActivityContent(activity);
+  }
+
+  switch (activity.field) {
+    case "start_before":
+      return activity.old_value === ""
+        ? `marked this issue to start before `
+        : `removed the start before relation from issue `;
+    case "start_after":
+      return activity.old_value === ""
+        ? `marked this issue to start after `
+        : `removed the start after relation from issue `;
+    case "finish_before":
+      return activity.old_value === ""
+        ? `marked this issue to finish before `
+        : `removed the finish before relation from issue `;
+    case "finish_after":
+      return activity.old_value === ""
+        ? `marked this issue to finish after `
+        : `removed the finish after relation from issue `;
+  }
+
+  return;
+};

web/ee/components/relations/index.tsx

@@ -1,12 +1,18 @@
 import { CircleDot, CopyPlus, XCircle } from "lucide-react";
+import { useParams } from "next/navigation";
 // Plane
 import { RelatedIcon } from "@plane/ui";
 // components
 import { TRelationObject } from "@/components/issues";
 // Plane-web
+import { E_FEATURE_FLAGS, useFlag } from "@/plane-web/hooks/store";
 import { TIssueRelationTypes } from "@/plane-web/types";
+//
+import { ISSUE_RELATION_OPTIONS as CE_ISSUE_RELATION_OPTIONS } from "ce/components/relations";
 
-export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject> = {
+export * from "./activity";
+
+export const ISSUE_RELATION_OPTIONS: { [key in TIssueRelationTypes]?: TRelationObject } = {
   relates_to: {
     key: "relates_to",
     label: "Relates to",
@@ -64,3 +70,19 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
     placeholder: "None",
   },
 };
+
+export const useTimeLineRelationOptions = () => {
+  const { workspaceSlug } = useParams();
+
+  const isDependencyEnabled = useFlag(workspaceSlug.toString(), E_FEATURE_FLAGS.TIMELINE_DEPENDENCY);
+
+  return isDependencyEnabled
+    ? ISSUE_RELATION_OPTIONS
+    : {
+        ...CE_ISSUE_RELATION_OPTIONS,
+        start_before: undefined,
+        start_after: undefined,
+        finish_before: undefined,
+        finish_after: undefined,
+      };
+};