feat: select blocker, blocking, and parent

web/components/web-view/add-comment.tsx

@@ -120,7 +120,11 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
       </div>
 
       <div className="inline">
-        <PrimaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
+        <PrimaryButton
+          type="submit"
+          disabled={isSubmitting || disabled}
+          className="mt-2 w-10 h-10 flex items-center justify-center"
+        >
           <Send className="w-4 h-4" />
         </PrimaryButton>
       </div>

web/components/web-view/index.ts

@@ -12,3 +12,6 @@ export * from "./issue-activity";
 export * from "./select-assignee";
 export * from "./select-estimate";
 export * from "./add-comment";
+export * from "./select-parent";
+export * from "./select-blocker";
+export * from "./select-blocked";

web/components/web-view/issue-activity.tsx

@@ -44,7 +44,6 @@ export const IssueActivity: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, issueId } = router.query;
 
   const { user } = useUser();
-  const { setToastAlert } = useToast();
 
   const { data: issueActivities, mutate: mutateIssueActivity } = useSWR(
     workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
@@ -104,11 +103,14 @@ export const IssueActivity: React.FC<Props> = (props) => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
+        console.log(
+          "toast",
+          JSON.stringify({
+            type: "error",
+            title: "Error!",
+            message: "Comment could not be posted. Please try again.",
+          })
+        )
       );
   };
 

web/components/web-view/issue-attachments.tsx

@@ -17,11 +17,8 @@ import { useDropzone } from "react-dropzone";
 // fetch key
 import { ISSUE_ATTACHMENTS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
-// hooks
-import useToast from "hooks/use-toast";
-
 // icons
-import { ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { FileText, ChevronRight, X, Image as ImageIcon } from "lucide-react";
 
 // components
 import { Label, WebViewModal } from "components/web-view";
@@ -34,6 +31,8 @@ type Props = {
   allowed: boolean;
 };
 
+const isImage = (fileName: string) => /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(fileName);
+
 export const IssueAttachments: React.FC<Props> = (props) => {
   const { allowed } = props;
 
@@ -46,8 +45,6 @@ export const IssueAttachments: React.FC<Props> = (props) => {
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
   const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
 
-  const { setToastAlert } = useToast();
-
   const onDrop = useCallback(
     (acceptedFiles: File[]) => {
       if (!acceptedFiles[0] || !workspaceSlug) return;
@@ -77,23 +74,30 @@ export const IssueAttachments: React.FC<Props> = (props) => {
             false
           );
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "File added successfully.",
-          });
+          console.log(
+            "toast",
+            JSON.stringify({
+              type: "success",
+              title: "Success!",
+              message: "File added successfully.",
+            })
+          );
+          setIsOpen(false);
           setIsLoading(false);
         })
         .catch((err) => {
           setIsLoading(false);
-          setToastAlert({
-            type: "error",
-            title: "error!",
-            message: "Something went wrong. please check file type & size (max 5 MB)",
-          });
+          console.log(
+            "toast",
+            JSON.stringify({
+              type: "error",
+              title: "error!",
+              message: "Something went wrong. please check file type & size (max 5 MB)",
+            })
+          );
         });
     },
-    [issueId, projectId, setToastAlert, workspaceSlug]
+    [issueId, projectId, workspaceSlug]
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -136,7 +140,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
             ) : (
               <>
                 <h3 className="text-lg">Upload</h3>
-                <ChevronRightIcon className="w-5 h-5" />
+                <ChevronRight className="w-5 h-5" />
               </>
             )}
           </div>
@@ -151,8 +155,13 @@ export const IssueAttachments: React.FC<Props> = (props) => {
             className="px-3 border border-custom-border-200 rounded-[4px] py-2 flex justify-between items-center bg-custom-background-100"
           >
             <Link href={attachment.asset}>
-              <a target="_blank" className="text-custom-text-200 truncate">
-                {attachment.attributes.name}
+              <a target="_blank" className="text-custom-text-200 truncate flex items-center">
+                {isImage(attachment.attributes.name) ? (
+                  <ImageIcon className="w-5 h-5 mr-2 flex-shrink-0 text-custom-text-400" />
+                ) : (
+                  <FileText className="w-5 h-5 mr-2 flex-shrink-0 text-custom-text-400" />
+                )}
+                <span className="truncate">{attachment.attributes.name}</span>
               </a>
             </Link>
             {allowed && (
@@ -163,15 +172,15 @@ export const IssueAttachments: React.FC<Props> = (props) => {
                   setAttachmentDeleteModal(true);
                 }}
               >
-                <XMarkIcon className="w-5 h-5 text-custom-text-100" />
+                <X className="w-[18px] h-[18px] text-custom-text-400" />
               </button>
             )}
           </div>
         ))}
         <button
           type="button"
           onClick={() => setIsOpen(true)}
-          className="bg-custom-primary-100/10 border border-dotted border-custom-primary-100 text-center py-2 w-full text-custom-primary-100"
+          className="bg-custom-primary-100/10 border border-dotted rounded-[4px] border-custom-primary-100 text-center py-2 w-full text-custom-primary-100"
         >
           Click to upload file here
         </button>

web/components/web-view/issue-link-list.tsx

@@ -12,7 +12,8 @@ import { mutate } from "swr";
 import issuesService from "services/issues.service";
 
 // icons
-import { LinkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+// import { LinkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react";
 
 // components
 import { Label, WebViewModal, CreateUpdateLinkForm } from "components/web-view";
@@ -108,15 +109,15 @@ export const IssueLinks: React.FC<Props> = (props) => {
                     setSelectedLink(link.id);
                   }}
                 >
-                  <PencilIcon className="w-5 h-5 text-custom-text-100" />
+                  <Pencil className="w-[18px] h-[18px] text-custom-text-400" />
                 </button>
                 <button
                   type="button"
                   onClick={() => {
                     handleDeleteLink(link.id);
                   }}
                 >
-                  <TrashIcon className="w-5 h-5 text-red-500 hover:bg-red-500/20" />
+                  <X className="w-[18px] h-[18px] text-custom-text-400" />
                 </button>
               </div>
             )}
@@ -128,7 +129,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
           onClick={() => setIsOpen(true)}
           className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
         >
-          <PlusIcon className="w-4 h-4 inline-block mr-1" />
+          <Plus className="w-[18px] h-[18px] inline-block mr-1" />
           <span>Add</span>
         </SecondaryButton>
       </div>