[WEB-1679] feat: issue detail widgets (#5034)

* chore: issue detail sidebar and main content improvement and code refactor

* dev: issue relation list component added

* chore: code refactor

* dev: issue detail widget implementation

* dev: update issue relation endpoint to return same response as sub issue

* chore: changed updated_by in issue attachment

* fix: peek view link ui

* chore: move collapsible button component to plane ui package

* chore: issue list component code refactor

* chore: relation icon updated

* chore: relation icon updated

* chore: issue quick action ui updated

* chore: wrap title indicatorElement component with useMemo

* chore: code refactor

* fix: build error

packages/ui/src/collapsible/collapsible-button.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { DropdownIcon } from "../icons";
+import { cn } from "../../helpers";
+
+type Props = {
+  isOpen: boolean;
+  title: string;
+  hideChevron?: boolean;
+  indicatorElement?: React.ReactNode;
+  actionItemElement?: React.ReactNode;
+};
+
+export const CollapsibleButton: FC<Props> = (props) => {
+  const { isOpen, title, hideChevron = false, indicatorElement, actionItemElement } = props;
+  return (
+    <div className="flex items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-custom-border-100">
+      <div className="flex items-center gap-3.5">
+        <div className="flex items-center gap-3">
+          {!hideChevron && (
+            <DropdownIcon
+              className={cn("size-2 text-custom-text-300 hover:text-custom-text-200 duration-300", {
+                "-rotate-90": !isOpen,
+              })}
+            />
+          )}
+          <span className="text-base text-custom-text-100 font-medium">{title}</span>
+        </div>
+        {indicatorElement && indicatorElement}
+      </div>
+      {actionItemElement && isOpen && actionItemElement}
+    </div>
+  );
+};

packages/ui/src/collapsible/index.ts

@@ -1 +1,2 @@
 export * from "./collapsible";
+export * from "./collapsible-button";

packages/ui/src/icons/index.ts

@@ -21,5 +21,4 @@ export * from "./related-icon";
 export * from "./side-panel-icon";
 export * from "./transfer-icon";
 export * from "./info-icon";
-export * from "./relations-icon";
 export * from "./dropdown-icon";

packages/ui/src/icons/relations-icon.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const RelationsIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 16 16"
-    className={`${className}`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...rest}
-  >
-    <path d="M7.99998 4.66536C8.92045 4.66536 9.66665 3.91917 9.66665 2.9987C9.66665 2.07822 8.92045 1.33203 7.99998 1.33203C7.07951 1.33203 6.33331 2.07822 6.33331 2.9987C6.33331 3.91917 7.07951 4.66536 7.99998 4.66536Z" />
-    <path d="M6.80001 4.19922L4.20001 6.79922" />
-    <path d="M2.99998 9.66536C3.92045 9.66536 4.66665 8.91917 4.66665 7.9987C4.66665 7.07822 3.92045 6.33203 2.99998 6.33203C2.07951 6.33203 1.33331 7.07822 1.33331 7.9987C1.33331 8.91917 2.07951 9.66536 2.99998 9.66536Z" />
-    <path d="M4.66669 8H11.3334" />
-    <path d="M13 9.66536C13.9205 9.66536 14.6666 8.91917 14.6666 7.9987C14.6666 7.07822 13.9205 6.33203 13 6.33203C12.0795 6.33203 11.3333 7.07822 11.3333 7.9987C11.3333 8.91917 12.0795 9.66536 13 9.66536Z" />
-    <path d="M9.20001 11.7992L11.8 9.19922" />
-    <path d="M7.99998 14.6654C8.92045 14.6654 9.66665 13.9192 9.66665 12.9987C9.66665 12.0782 8.92045 11.332 7.99998 11.332C7.07951 11.332 6.33331 12.0782 6.33331 12.9987C6.33331 13.9192 7.07951 14.6654 7.99998 14.6654Z" />
-  </svg>
-);