chore: components restructure and improvements (#5383)
* chore: update issue identifier component. * fix: browser tab closed on closing emoji picker issue fixed. * chore: revert back changes in logo props. * chore: update sortable. * chore: minor componenets restructuring. * minor ui update. * fix: issue identifier display in command palette search. * style: issue activity icons consistency.
This commit is contained in:
Prateek Shourya
GitHub
parent
c829b52c0f
commit
807dfec7ad
59 changed files with 470 additions and 266 deletions
|
|
@ -165,7 +165,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Users2Icon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <Users2Icon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
archived_at: {
|
||||
message: (activity) => {
|
||||
|
|
@ -182,7 +182,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <ArchiveIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <ArchiveIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
attachment: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -219,7 +219,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <PaperclipIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <PaperclipIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
description: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -233,7 +233,7 @@ const activityDetails: {
|
|||
)}
|
||||
</>
|
||||
),
|
||||
icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <MessageSquareIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
estimate_point: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -262,7 +262,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <TriangleIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <TriangleIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
issue: {
|
||||
message: (activity) => {
|
||||
|
|
@ -279,7 +279,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <LayersIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <LayersIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
labels: {
|
||||
message: (activity, showIssue, workspaceSlug) => {
|
||||
|
|
@ -320,7 +320,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <TagIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <TagIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
link: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -385,7 +385,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Link2Icon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <Link2Icon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
cycles: {
|
||||
message: (activity, showIssue, workspaceSlug) => {
|
||||
|
|
@ -435,7 +435,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <ContrastIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <ContrastIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
modules: {
|
||||
message: (activity, showIssue, workspaceSlug) => {
|
||||
|
|
@ -482,7 +482,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <DiceIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
|
||||
icon: <DiceIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
name: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -496,7 +496,7 @@ const activityDetails: {
|
|||
)}
|
||||
</>
|
||||
),
|
||||
icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <MessageSquareIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
parent: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -527,7 +527,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <UsersIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
|
||||
icon: <UsersIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
priority: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -544,7 +544,7 @@ const activityDetails: {
|
|||
)}
|
||||
</>
|
||||
),
|
||||
icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <SignalMediumIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
relates_to: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -563,7 +563,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <RelatedIcon height="12" width="12" color="#6b7280" />,
|
||||
icon: <RelatedIcon height="12" width="12" className="text-custom-text-200" />,
|
||||
},
|
||||
blocking: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -582,7 +582,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
|
||||
icon: <BlockerIcon height="12" width="12" className="text-custom-text-200" />,
|
||||
},
|
||||
blocked_by: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -601,7 +601,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
|
||||
icon: <BlockedIcon height="12" width="12" className="text-custom-text-200" />,
|
||||
},
|
||||
duplicate: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -620,7 +620,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <CopyPlus size={12} color="#6b7280" />,
|
||||
icon: <CopyPlus size={12} className="text-custom-text-200" />,
|
||||
},
|
||||
state: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -634,7 +634,7 @@ const activityDetails: {
|
|||
)}
|
||||
</>
|
||||
),
|
||||
icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <LayoutGridIcon size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
start_date: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -666,7 +666,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <Calendar size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
target_date: {
|
||||
message: (activity, showIssue) => {
|
||||
|
|
@ -697,7 +697,7 @@ const activityDetails: {
|
|||
</>
|
||||
);
|
||||
},
|
||||
icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
|
||||
icon: <Calendar size={12} className="text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
inbox: {
|
||||
message: (activity, showIssue) => (
|
||||
|
|
@ -712,7 +712,7 @@ const activityDetails: {
|
|||
{activity.verb === "2" && ` from intake by marking a duplicate issue.`}
|
||||
</>
|
||||
),
|
||||
icon: <Intake className="size-3" color="#6b7280" aria-hidden="true" />,
|
||||
icon: <Intake className="size-3 text-custom-text-200" aria-hidden="true" />,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -734,7 +734,7 @@ export const ActivityMessage = ({ activity, showIssue = false }: ActivityMessage
|
|||
{activityDetails[activity.field as keyof typeof activityDetails]?.message(
|
||||
activity,
|
||||
showIssue,
|
||||
workspaceSlug ? workspaceSlug.toString() : activity.workspace_detail?.slug ?? ""
|
||||
workspaceSlug ? workspaceSlug.toString() : (activity.workspace_detail?.slug ?? "")
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@ import { observer } from "mobx-react";
|
|||
import { Combobox } from "@headlessui/react";
|
||||
// hooks
|
||||
import { ISearchIssueResponse } from "@plane/types";
|
||||
// plane web hooks
|
||||
import { IssueIdentifier } from "@/plane-web/components/issues";
|
||||
|
||||
interface Props {
|
||||
issue: ISearchIssueResponse;
|
||||
canDeleteIssueIds: boolean;
|
||||
identifier: string | undefined;
|
||||
}
|
||||
|
||||
export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props) => {
|
||||
const { issue, canDeleteIssueIds, identifier } = props;
|
||||
const { issue, canDeleteIssueIds } = props;
|
||||
|
||||
const color = issue.state__color;
|
||||
|
||||
|
|
@ -20,7 +21,7 @@ export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props
|
|||
as="div"
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 my-0.5 ${
|
||||
active ? "bg-custom-background-80 text-custom-text-100" : ""
|
||||
}`
|
||||
}
|
||||
|
|
@ -33,9 +34,7 @@ export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props
|
|||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs">
|
||||
{identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
<IssueIdentifier issueId={issue.id} projectId={issue.project_id} textContainerClassName="text-xs" />
|
||||
<span>{issue.name}</span>
|
||||
</div>
|
||||
</Combobox.Option>
|
||||
|
|
|
|||
|
|
@ -6,22 +6,21 @@ import { useParams } from "next/navigation";
|
|||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { Search } from "lucide-react";
|
||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||
//plane
|
||||
// types
|
||||
import { ISearchIssueResponse, IUser } from "@plane/types";
|
||||
// ui
|
||||
import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
//components
|
||||
// components
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
//constants
|
||||
// constants
|
||||
import { EmptyStateType } from "@/constants/empty-state";
|
||||
import { EIssuesStoreType } from "@/constants/issue";
|
||||
//hooks
|
||||
import { useIssues, useProject } from "@/hooks/store";
|
||||
// hooks
|
||||
import { useIssues } from "@/hooks/store";
|
||||
import useDebounce from "@/hooks/use-debounce";
|
||||
// services
|
||||
import { ProjectService } from "@/services/project";
|
||||
// ui
|
||||
// icons
|
||||
// components
|
||||
// local components
|
||||
import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item";
|
||||
|
||||
type FormInput = {
|
||||
|
|
@ -41,7 +40,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
|
|||
// router params
|
||||
const { workspaceSlug, projectId } = useParams();
|
||||
// hooks
|
||||
const { getProjectById } = useProject();
|
||||
const {
|
||||
issues: { removeBulkIssues },
|
||||
} = useIssues(EIssuesStoreType.PROJECT);
|
||||
|
|
@ -115,8 +113,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
|
|||
);
|
||||
};
|
||||
|
||||
const projectDetails = getProjectById(projectId as string);
|
||||
|
||||
const issueList =
|
||||
issues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
|
|
@ -127,7 +123,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
|
|||
{issues.map((issue) => (
|
||||
<BulkDeleteIssuesModalItem
|
||||
issue={issue}
|
||||
identifier={projectDetails?.identifier}
|
||||
canDeleteIssueIds={watch("delete_issue_ids").includes(issue.id)}
|
||||
key={issue.id}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { Button, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@pl
|
|||
// hooks
|
||||
import useDebounce from "@/hooks/use-debounce";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
// plane web components
|
||||
import { IssueIdentifier } from "@/plane-web/components/issues";
|
||||
// services
|
||||
import { ProjectService } from "@/services/project";
|
||||
// components
|
||||
|
|
@ -149,7 +151,13 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
|
|||
key={issue.id}
|
||||
className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
|
||||
>
|
||||
{issue.project__identifier}-{issue.sequence_id}
|
||||
<IssueIdentifier
|
||||
projectId={issue.project_id}
|
||||
issueTypeId={issue.type_id}
|
||||
projectIdentifier={issue.project__identifier}
|
||||
issueSequenceId={issue.sequence_id}
|
||||
textContainerClassName="text-xs text-custom-text-200"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="group p-1"
|
||||
|
|
@ -232,7 +240,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
|
|||
htmlFor={`issue-${issue.id}`}
|
||||
value={issue}
|
||||
className={({ active }) =>
|
||||
`group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
|
||||
`group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-custom-text-200 ${
|
||||
active ? "bg-custom-background-80 text-custom-text-100" : ""
|
||||
} ${selected ? "text-custom-text-100" : ""}`
|
||||
}
|
||||
|
|
@ -245,8 +253,14 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
|
|||
backgroundColor: issue.state__color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs">
|
||||
{issue.project__identifier}-{issue.sequence_id}
|
||||
<span className="flex-shrink-0">
|
||||
<IssueIdentifier
|
||||
projectId={issue.project_id}
|
||||
issueTypeId={issue.type_id}
|
||||
projectIdentifier={issue.project__identifier}
|
||||
issueSequenceId={issue.sequence_id}
|
||||
textContainerClassName="text-xs text-custom-text-200"
|
||||
/>
|
||||
</span>
|
||||
{issue.name}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue