forked from github/plane
[WEB-1046] fix: user activity overflow & repsonsiveness (#4262)
* fix: activity responsiveness * fix: activity icon placement * fix: build
This commit is contained in:
Lakhan Baheti
GitHub
parent
deaa63488b
commit
b711fedb65
@ -46,10 +46,10 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
|
||||
}`}`}
|
||||
target={activity.issue === null ? "_self" : "_blank"}
|
||||
rel={activity.issue === null ? "" : "noopener noreferrer"}
|
||||
className="font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "}
|
||||
<span className="font-normal">{activity.issue_detail?.name}</span>
|
||||
<span className="font-normal break-all">{activity.issue_detail?.name}</span>
|
||||
</a>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
|
||||
@ -105,7 +105,7 @@ const EstimatePoint = observer((props: { point: string }) => {
|
||||
const estimateValue = getEstimatePointValue(Number(point), null);
|
||||
|
||||
return (
|
||||
<span className="font-medium text-custom-text-100">
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">
|
||||
{areEstimatesEnabledForCurrentProject
|
||||
? estimateValue
|
||||
: `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
|
||||
@ -300,11 +300,13 @@ const activityDetails: {
|
||||
message: (activity, showIssue, workspaceSlug) => {
|
||||
if (activity.old_value === "")
|
||||
return (
|
||||
<>
|
||||
<span className="overflow-hidden">
|
||||
added a new label{" "}
|
||||
<span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
|
||||
<LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
|
||||
<span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
|
||||
<span className="flex-shrink font-medium text-custom-text-100 break-all line-clamp-1">
|
||||
{activity.new_value}
|
||||
</span>
|
||||
</span>
|
||||
{showIssue && (
|
||||
<span className="">
|
||||
@ -312,15 +314,17 @@ const activityDetails: {
|
||||
to <IssueLink activity={activity} />
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
</span>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<>
|
||||
removed the label{" "}
|
||||
<span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
|
||||
<LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
|
||||
<span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span>
|
||||
<span className="flex-shrink font-medium text-custom-text-100 break-all line-clamp-1">
|
||||
{activity.old_value}
|
||||
</span>
|
||||
</span>
|
||||
{showIssue && (
|
||||
<span>
|
||||
@ -404,29 +408,30 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
<span className="flex-shrink-0">
|
||||
added {showIssue ? <IssueLink activity={activity} /> : "this issue"} to the cycle{" "}
|
||||
added {showIssue ? <IssueLink activity={activity} /> : "this issue"}{" "}
|
||||
<span className="whitespace-nowrap">to the cycle</span>{" "}
|
||||
</span>
|
||||
<a
|
||||
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<span className="break-all">{activity.new_value}</span>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
else if (activity.verb === "updated")
|
||||
return (
|
||||
<>
|
||||
<span className="flex-shrink-0">set the cycle to </span>
|
||||
<span className="flex-shrink-0 whitespace-nowrap">set the cycle to </span>
|
||||
<a
|
||||
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<span className="break-all">{activity.new_value}</span>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
@ -438,9 +443,9 @@ const activityDetails: {
|
||||
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.old_value}</span>
|
||||
<span className="break-all">{activity.old_value}</span>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
@ -457,9 +462,9 @@ const activityDetails: {
|
||||
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<span className="break-all">{activity.new_value}</span>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
@ -471,9 +476,9 @@ const activityDetails: {
|
||||
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.new_value}</span>
|
||||
<span className="break-all">{activity.new_value}</span>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
@ -485,9 +490,9 @@ const activityDetails: {
|
||||
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
|
||||
className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
|
||||
>
|
||||
<span className="truncate">{activity.old_value}</span>
|
||||
<span className="break-all">{activity.old_value}</span>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
@ -497,7 +502,7 @@ const activityDetails: {
|
||||
name: {
|
||||
message: (activity, showIssue) => (
|
||||
<>
|
||||
<span className="truncate">set the name to {activity.new_value}</span>
|
||||
set the name to <span className="break-all">{activity.new_value}</span>
|
||||
{showIssue && (
|
||||
<>
|
||||
{" "}
|
||||
@ -513,7 +518,8 @@ const activityDetails: {
|
||||
if (!activity.new_value)
|
||||
return (
|
||||
<>
|
||||
removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span>
|
||||
removed the parent{" "}
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>
|
||||
{showIssue && (
|
||||
<>
|
||||
{" "}
|
||||
@ -525,7 +531,8 @@ const activityDetails: {
|
||||
else
|
||||
return (
|
||||
<>
|
||||
set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
|
||||
set the parent to{" "}
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>
|
||||
{showIssue && (
|
||||
<>
|
||||
{" "}
|
||||
@ -560,13 +567,14 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
marked that {showIssue ? <IssueLink activity={activity} /> : "this issue"} relates to{" "}
|
||||
<span className="font-medium text-custom-text-100">{activity.new_value}</span>.
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
|
||||
</>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<>
|
||||
removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
|
||||
removed the relation from{" "}
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
|
||||
</>
|
||||
);
|
||||
},
|
||||
@ -578,13 +586,14 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is blocking issue{" "}
|
||||
<span className="font-medium text-custom-text-100">{activity.new_value}</span>.
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
|
||||
</>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<>
|
||||
removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
|
||||
removed the blocking issue{" "}
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
|
||||
</>
|
||||
);
|
||||
},
|
||||
@ -596,14 +605,14 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is being blocked by{" "}
|
||||
<span className="font-medium text-custom-text-100">{activity.new_value}</span>.
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
|
||||
</>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<>
|
||||
removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} being blocked by issue{" "}
|
||||
<span className="font-medium text-custom-text-100">{activity.old_value}</span>.
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
|
||||
</>
|
||||
);
|
||||
},
|
||||
@ -615,14 +624,14 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} as duplicate of{" "}
|
||||
<span className="font-medium text-custom-text-100">{activity.new_value}</span>.
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
|
||||
</>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<>
|
||||
removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} as a duplicate of{" "}
|
||||
<span className="font-medium text-custom-text-100">{activity.old_value}</span>.
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
|
||||
</>
|
||||
);
|
||||
},
|
||||
@ -631,7 +640,7 @@ const activityDetails: {
|
||||
state: {
|
||||
message: (activity, showIssue) => (
|
||||
<>
|
||||
set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
|
||||
set the state to <span className="font-medium text-custom-text-100 break-all">{activity.new_value}</span>
|
||||
{showIssue && (
|
||||
<>
|
||||
{" "}
|
||||
@ -660,7 +669,9 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
set the start date to{" "}
|
||||
<span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">
|
||||
{renderFormattedDate(activity.new_value)}
|
||||
</span>
|
||||
{showIssue && (
|
||||
<>
|
||||
{" "}
|
||||
@ -690,7 +701,9 @@ const activityDetails: {
|
||||
return (
|
||||
<>
|
||||
set the due date to{" "}
|
||||
<span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
|
||||
<span className="font-medium text-custom-text-100 whitespace-nowrap">
|
||||
{renderFormattedDate(activity.new_value)}
|
||||
</span>
|
||||
{showIssue && (
|
||||
<>
|
||||
<IssueLink activity={activity} />
|
||||
|
||||
@ -42,7 +42,7 @@ export const DashboardWidgets = observer(() => {
|
||||
if (!workspaceSlug || !homeDashboardId) return null;
|
||||
|
||||
return (
|
||||
<div className="grid lg:grid-cols-2 gap-7">
|
||||
<div className="relative flex flex-col lg:grid lg:grid-cols-2 gap-7">
|
||||
{Object.entries(WIDGETS_LIST).map(([key, widget]) => {
|
||||
const WidgetComponent = widget.component;
|
||||
// if the widget doesn't exist, return null
|
||||
|
||||
@ -68,8 +68,8 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="-mt-1 break-words">
|
||||
<p className="text-sm text-custom-text-200">
|
||||
<div className="-mt-2 break-words">
|
||||
<p className="inline text-sm text-custom-text-200">
|
||||
<span className="font-medium text-custom-text-100">
|
||||
{currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail?.display_name}{" "}
|
||||
</span>
|
||||
@ -81,7 +81,9 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-custom-text-200">{calculateTimeAgo(activity.created_at)}</p>
|
||||
<p className="text-xs text-custom-text-200 whitespace-nowrap">
|
||||
{calculateTimeAgo(activity.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
// components
|
||||
import { Spinner } from "@plane/ui";
|
||||
import { DashboardWidgets } from "@/components/dashboard";
|
||||
@ -12,7 +11,11 @@ import { UserGreetingsView } from "@/components/user";
|
||||
// constants
|
||||
import { EmptyStateType } from "@/constants/empty-state";
|
||||
import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
|
||||
import useSize from "@/hooks/use-window-size";
|
||||
|
||||
export const WorkspaceDashboardView = observer(() => {
|
||||
// store hooks
|
||||
@ -25,6 +28,8 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard();
|
||||
const { joinedProjectIds } = useProject();
|
||||
|
||||
const [windowWidth] = useSize();
|
||||
|
||||
const handleTourCompleted = () => {
|
||||
updateTourCompleted()
|
||||
.then(() => {
|
||||
@ -57,7 +62,14 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
{joinedProjectIds.length > 0 ? (
|
||||
<>
|
||||
<IssuePeekOverview />
|
||||
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
|
||||
<div
|
||||
className={cn(
|
||||
"space-y-7 md:p-7 p-3 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto",
|
||||
{
|
||||
"vertical-scrollbar scrollbar-lg": windowWidth >= 768,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{currentUser && <UserGreetingsView user={currentUser} />}
|
||||
|
||||
<DashboardWidgets />
|
||||
|
||||
@ -97,10 +97,10 @@ export const ActivityList: React.FC<Props> = observer((props) => {
|
||||
return (
|
||||
<li key={activityItem.id}>
|
||||
<div className="relative pb-1">
|
||||
<div className="relative flex items-center space-x-2">
|
||||
<div className="relative flex items-start space-x-2">
|
||||
<>
|
||||
<div>
|
||||
<div className="relative px-1.5">
|
||||
<div className="relative px-1.5 mt-4">
|
||||
<div className="mt-1.5">
|
||||
<div className="flex h-6 w-6 items-center justify-center">
|
||||
{activityItem.field ? (
|
||||
@ -127,7 +127,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
|
||||
<div className="flex gap-1 break-words text-sm text-custom-text-200">
|
||||
<div className="break-words text-sm text-custom-text-200">
|
||||
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
|
||||
<span className="text-gray font-medium">Plane</span>
|
||||
) : activityItem.actor_detail.is_bot ? (
|
||||
@ -135,6 +135,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
|
||||
) : (
|
||||
<Link
|
||||
href={`/${activityItem.workspace_detail?.slug}/profile/${activityItem.actor_detail.id}`}
|
||||
className="inline"
|
||||
>
|
||||
<span className="text-gray font-medium">
|
||||
{currentUser?.id === activityItem.actor_detail.id
|
||||
@ -143,7 +144,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
|
||||
</span>
|
||||
</Link>
|
||||
)}{" "}
|
||||
<div className="flex gap-1 truncate">
|
||||
<div className="inline gap-1">
|
||||
{message}{" "}
|
||||
<span className="flex-shrink-0 whitespace-nowrap">
|
||||
{calculateTimeAgo(activityItem.created_at)}
|
||||
|
||||
@ -120,10 +120,10 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
|
||||
return (
|
||||
<li key={activityItem.id}>
|
||||
<div className="relative pb-1">
|
||||
<div className="relative flex items-center space-x-2">
|
||||
<div className="relative flex items-start space-x-2">
|
||||
<>
|
||||
<div>
|
||||
<div className="relative px-1.5">
|
||||
<div className="relative px-1.5 mt-4">
|
||||
<div className="mt-1.5">
|
||||
<div className="flex h-6 w-6 items-center justify-center">
|
||||
{activityItem.field ? (
|
||||
@ -150,7 +150,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
|
||||
<div className="flex gap-1 break-words text-sm text-custom-text-200">
|
||||
<div className="break-words text-sm text-custom-text-200">
|
||||
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
|
||||
<span className="text-gray font-medium">Plane</span>
|
||||
) : activityItem.actor_detail.is_bot ? (
|
||||
@ -158,6 +158,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
|
||||
) : (
|
||||
<Link
|
||||
href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
|
||||
className="inline"
|
||||
>
|
||||
<span className="text-gray font-medium">
|
||||
{currentUser?.id === activityItem.actor_detail.id
|
||||
@ -166,7 +167,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
|
||||
</span>
|
||||
</Link>
|
||||
)}{" "}
|
||||
<div className="flex gap-1 truncate">
|
||||
<div className="inline gap-1">
|
||||
{message}{" "}
|
||||
<span className="flex-shrink-0 whitespace-nowrap">
|
||||
{calculateTimeAgo(activityItem.created_at)}
|
||||
|
||||
@ -61,7 +61,7 @@ export const ProfileActivity = observer(() => {
|
||||
)}
|
||||
</div>
|
||||
<div className="-mt-1 w-4/5 break-words">
|
||||
<p className="text-sm text-custom-text-200">
|
||||
<p className="inline text-sm text-custom-text-200">
|
||||
<span className="font-medium text-custom-text-100">
|
||||
{currentUser?.id === activity.actor_detail?.id ? "You" : activity.actor_detail?.display_name}{" "}
|
||||
</span>
|
||||
@ -73,7 +73,7 @@ export const ProfileActivity = observer(() => {
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-custom-text-200">{calculateTimeAgo(activity.created_at)}</p>
|
||||
<p className="text-xs text-custom-text-200 whitespace-nowrap ">{calculateTimeAgo(activity.created_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -46,8 +46,8 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
|
||||
return (
|
||||
<>
|
||||
<PageHead title="Profile - Activity" />
|
||||
<section className="mx-auto h-full w-full flex flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
|
||||
<div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5 mt-5 md:mt-16">
|
||||
<section className="mx-auto mt-5 md:mt-16 h-full w-full flex flex-col overflow-hidden px-5 md:px-8 pb-8 lg:w-3/5">
|
||||
<div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
|
||||
<SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
|
||||
<h3 className="text-xl font-medium">Activity</h3>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user