From 92f717962c54bea60b60aa55c2efbf4c05ac0015 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:54:54 +0530 Subject: [PATCH] fix: minor bugs and ux improvements (#322) * fix: ellipsis added to issue title * feat: toolttip added * feat: assignees tooltip added * fix: build fix * fix: build fix * fix: build error * fix: minor bugs and ux improvements --------- Co-authored-by: Anmol Singh Bhatia --- .../core/board-view/single-issue.tsx | 43 ++++++++---- apps/app/components/core/link-modal.tsx | 30 ++++---- .../core/list-view/single-issue.tsx | 42 +++++++---- .../components/core/sidebar/links-list.tsx | 27 +++++--- .../components/cycles/single-cycle-card.tsx | 27 +++----- .../components/icons/external-link-icon.tsx | 38 ++++++++++ apps/app/components/icons/index.ts | 13 ++-- .../components/issues/description-form.tsx | 69 +++++++++---------- apps/app/components/issues/form.tsx | 16 +++-- .../components/issues/my-issues-list-item.tsx | 18 +++++ apps/app/components/issues/sidebar.tsx | 38 +++++----- .../app/components/issues/sub-issues-list.tsx | 37 +++++----- .../issues/view-select/assignee.tsx | 8 +-- apps/app/components/modules/sidebar.tsx | 4 +- .../components/modules/single-module-card.tsx | 29 ++++---- apps/app/components/project/sidebar-list.tsx | 28 ++++---- .../rich-text-editor/toolbar/index.tsx | 12 ++-- .../rich-text-editor/toolbar/link.tsx | 14 +++- .../rich-text-editor/toolbar/ordered-list.tsx | 28 -------- .../toolbar/unordered-list.tsx | 28 -------- apps/app/components/states/single-state.tsx | 6 +- apps/app/hooks/use-issue-properties.tsx | 16 ++--- apps/app/hooks/use-my-issues-filter.tsx | 8 +-- .../projects/[projectId]/settings/states.tsx | 2 +- apps/app/types/issues.d.ts | 8 +-- 25 files changed, 317 insertions(+), 272 deletions(-) create mode 100644 apps/app/components/icons/external-link-icon.tsx delete mode 100644 apps/app/components/rich-text-editor/toolbar/ordered-list.tsx delete mode 100644 apps/app/components/rich-text-editor/toolbar/unordered-list.tsx diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx index ea1a37a7a..1e9c4ddd5 100644 --- a/apps/app/components/core/board-view/single-issue.tsx +++ b/apps/app/components/core/board-view/single-issue.tsx @@ -165,19 +165,15 @@ export const SingleBoardIssue: React.FC = ({ const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`) - .then(() => { - setToastAlert({ - type: "success", - title: "Issue link copied to clipboard", - }); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Some error occurred", - }); + copyTextToClipboard( + `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}` + ).then(() => { + setToastAlert({ + type: "success", + title: "Link Copied!", + message: "Issue link copied to clipboard.", }); + }); }; useEffect(() => { @@ -201,14 +197,14 @@ export const SingleBoardIssue: React.FC = ({
{type && !isNotAllowed && ( - Edit + Edit issue {type !== "issue" && removeIssue && ( <>Remove from {type} )} handleDeleteIssue(issue)}> - Delete permanently + Delete issue Copy issue link @@ -236,7 +232,6 @@ export const SingleBoardIssue: React.FC = ({ issue={issue} partialUpdateIssue={partialUpdateIssue} isNotAllowed={isNotAllowed} - position="left" /> )} {properties.state && selectedGroup !== "state_detail.name" && ( @@ -258,6 +253,24 @@ export const SingleBoardIssue: React.FC = ({ {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
)} + {properties.labels && ( +
+ {issue.label_details.map((label) => ( + + + {label.name} + + ))} +
+ )} {properties.assignee && ( = ({ isOpen, handleClose, onFormSubmit } Add Link
-
- -
= ({ isOpen, handleClose, onFormSubmit } }} />
+
+ +
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index 69745f6e2..0dea00020 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/apps/app/components/core/list-view/single-issue.tsx @@ -124,19 +124,15 @@ export const SingleListIssue: React.FC = ({ const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`) - .then(() => { - setToastAlert({ - type: "success", - title: "Issue link copied to clipboard", - }); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Some error occurred", - }); + copyTextToClipboard( + `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}` + ).then(() => { + setToastAlert({ + type: "success", + title: "Link Copied!", + message: "Issue link copied to clipboard.", }); + }); }; const isNotAllowed = userAuth.isGuest || userAuth.isViewer; @@ -196,6 +192,24 @@ export const SingleListIssue: React.FC = ({ {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} )} + {properties.labels && ( +
+ {issue.label_details.map((label) => ( + + + {label.name} + + ))} +
+ )} {properties.assignee && ( = ({ )} {type && !isNotAllowed && ( - Edit + Edit issue {type !== "issue" && removeIssue && ( <>Remove from {type} )} handleDeleteIssue(issue)}> - Delete permanently + Delete issue Copy issue link diff --git a/apps/app/components/core/sidebar/links-list.tsx b/apps/app/components/core/sidebar/links-list.tsx index 2a30510eb..55f41775c 100644 --- a/apps/app/components/core/sidebar/links-list.tsx +++ b/apps/app/components/core/sidebar/links-list.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; // icons import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { ExternalLinkIcon } from "components/icons"; // helpers import { timeAgo } from "helpers/date-time.helper"; // types @@ -26,9 +27,17 @@ export const LinksList: React.FC = ({ links, handleDeleteLink, userAuth } return ( <> {links.map((link) => ( -
+
{!isNotAllowed && ( -
+
+ + + + +
)} - - + +
-
{link.title}
- {/*

- Added {timeAgo(link.created_at)} ago by {link.created_by_detail.email} -

*/} +
{link.title}
+

+ Added {timeAgo(link.created_at)} +
+ by {link.created_by_detail.email} +

diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx index 86589995f..40be88dc6 100644 --- a/apps/app/components/cycles/single-cycle-card.tsx +++ b/apps/app/components/cycles/single-cycle-card.tsx @@ -70,19 +70,16 @@ export const SingleCycleCard: React.FC = (props) => { const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`) - .then(() => { - setToastAlert({ - type: "success", - title: "Cycle link copied to clipboard", - }); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Some error occurred", - }); + + copyTextToClipboard( + `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}` + ).then(() => { + setToastAlert({ + type: "success", + title: "Link Copied!", + message: "Cycle link copied to clipboard.", }); + }); }; return ( @@ -99,11 +96,9 @@ export const SingleCycleCard: React.FC = (props) => { - Copy cycle link Edit cycle - - Delete cycle permanently - + Delete cycle + Copy cycle link
diff --git a/apps/app/components/icons/external-link-icon.tsx b/apps/app/components/icons/external-link-icon.tsx new file mode 100644 index 000000000..1782880b1 --- /dev/null +++ b/apps/app/components/icons/external-link-icon.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +import type { Props } from "./types"; + +export const ExternalLinkIcon: React.FC = ({ + width = "24", + height = "24", + className, + color = "black", +}) => ( + + + + + + // + // + // +); diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts index 66ad36664..dfcb2c5dc 100644 --- a/apps/app/components/icons/index.ts +++ b/apps/app/components/icons/index.ts @@ -1,19 +1,26 @@ export * from "./attachment-icon"; export * from "./blocked-icon"; export * from "./blocker-icon"; +export * from "./bolt-icon"; export * from "./calendar-month-icon"; export * from "./cancel-icon"; export * from "./clipboard-icon"; +export * from "./comment-icon"; export * from "./completed-cycle-icon"; export * from "./current-cycle-icon"; export * from "./cycle-icon"; +export * from "./discord-icon"; +export * from "./document-icon"; export * from "./edit-icon"; export * from "./ellipsis-horizontal-icon"; +export * from "./external-link-icon"; +export * from "./github-icon"; export * from "./heartbeat-icon"; export * from "./layer-diagonal-icon"; export * from "./lock-icon"; export * from "./menu-icon"; export * from "./plus-icon"; +export * from "./question-mark-circle-icon"; export * from "./setting-icon"; export * from "./signal-cellular-icon"; export * from "./tag-icon"; @@ -22,9 +29,3 @@ export * from "./upcoming-cycle-icon"; export * from "./user-group-icon"; export * from "./user-icon-circle"; export * from "./user-icon"; -export * from "./question-mark-circle-icon"; -export * from "./bolt-icon"; -export * from "./document-icon"; -export * from "./discord-icon"; -export * from "./github-icon"; -export * from "./comment-icon"; diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index 2caf5b635..2a82ec4da 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect, useMemo } from "react"; +import { FC, useCallback, useEffect, useMemo, useState } from "react"; import dynamic from "next/dynamic"; @@ -18,7 +18,6 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor }); // types import { IIssue, UserAuth } from "types"; -import useToast from "hooks/use-toast"; export interface IssueDescriptionFormValues { name: string; @@ -37,7 +36,7 @@ export const IssueDescriptionForm: FC = ({ handleFormSubmit, userAuth, }) => { - const { setToastAlert } = useToast(); + const [characterLimit, setCharacterLimit] = useState(false); const { handleSubmit, @@ -55,23 +54,7 @@ export const IssueDescriptionForm: FC = ({ const handleDescriptionFormSubmit = useCallback( (formData: Partial) => { - if (!formData.name || formData.name === "") { - setToastAlert({ - type: "error", - title: "Error in saving!", - message: "Title is required.", - }); - return; - } - - if (formData.name.length > 255) { - setToastAlert({ - type: "error", - title: "Error in saving!", - message: "Title cannot have more than 255 characters.", - }); - return; - } + if (!formData.name || formData.name.length === 0 || formData.name.length > 255) return; handleFormSubmit({ name: formData.name ?? "", @@ -79,7 +62,7 @@ export const IssueDescriptionForm: FC = ({ description_html: formData.description_html ?? "

", }); }, - [handleFormSubmit, setToastAlert] + [handleFormSubmit] ); const debounceHandler = useMemo( @@ -105,21 +88,37 @@ export const IssueDescriptionForm: FC = ({ return (
-