thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: update profile and God mode routes (#2860)

Browse Source 
* chore: update profile and god mode routes

* fix: profile activity loader

* chore: update profile route in the change password page
This commit is contained in:
Aaryan Khandelwal 2023-11-24 12:16:37 +05:30 committed by sriram veeraghanta
parent 86de38d3a0
commit 267cf75004
18 changed files with 233 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/headers/profile-settings.tsx
View File

@ -19,7 +19,7 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
type="text"
label="My Profile"
icon={<Settings className="h-4 w-4 text-custom-text-300" />}
link={`/me/profile`}
link="/profile"
/>
<Breadcrumbs.BreadcrumbItem type="text" label={title} />
</Breadcrumbs>

2
web/components/headers/user-profile.tsx
View File

@ -6,7 +6,7 @@ export const UserProfileHeader = () => (
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem type="text" label="Activity Overview" link="/me/profile" />
<Breadcrumbs.BreadcrumbItem type="text" label="Activity Overview" link="/profile" />
</Breadcrumbs>
</div>
</div>

16
web/components/instance/sidebar-dropdown.tsx
View File

@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
import { observer } from "mobx-react-lite";
import Link from "next/link";
import { Menu, Transition } from "@headlessui/react";
import { Cog, LogIn, LogOut, Settings, UserCircle2 } from "lucide-react";
import { Cog, LogIn, LogOut, Settings } from "lucide-react";
import { mutate } from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
@ -16,16 +16,12 @@ import { AuthService } from "services/auth.service";
import { Avatar, Tooltip } from "@plane/ui";
// Static Data
const profileLinks = (workspaceSlug: string, userId: string) => [
{
name: "View profile",
icon: UserCircle2,
link: `/${workspaceSlug}/profile/${userId}`,
},
const PROFILE_LINKS = [
{
key: "settings",
name: "Settings",
icon: Settings,
link: `/me/profile`,
link: `/profile`,
},
];
@ -123,8 +119,8 @@ export const InstanceSidebarDropdown = observer(() => {
>
<div className="flex flex-col gap-2.5 pb-2">
<span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
{profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
<Menu.Item key={index} as="button" type="button">
{PROFILE_LINKS.map((link) => (
<Menu.Item key={link.key} as="button" type="button">
<Link href={link.link}>
<a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
<link.icon className="h-4 w-4 stroke-[1.5]" />

8
web/components/instance/sidebar-menu.tsx
View File

@ -12,25 +12,25 @@ const INSTANCE_ADMIN_LINKS = [
Icon: Cog,
name: "General",
description: "General settings here",
href: `/admin`,
href: `/god-mode`,
},
{
Icon: Mail,
name: "Email",
description: "Email related settings will go here",
href: `/admin/email`,
href: `/god-mode/email`,
},
{
Icon: Lock,
name: "Authorization",
description: "Autorization",
href: `/admin/authorization`,
href: `/god-mode/authorization`,
},
{
Icon: BrainCog,
name: "OpenAI",
description: "OpenAI configurations",
href: `/admin/openai`,
href: `/god-mode/openai`,
},
];

2
web/components/profile/sidebar.tsx
View File

@ -67,7 +67,7 @@ export const ProfileSidebar = () => {
<div className="relative h-32">
{user?.id === userId && (
<div className="absolute top-3.5 right-3.5 h-5 w-5 bg-white rounded grid place-items-center">
<Link href="me/profile">
<Link href="/profile">
<a className="grid place-items-center text-black">
<Pencil className="h-3 w-3" />
</a>

6
web/components/workspace/sidebar-dropdown.tsx
View File

@ -42,7 +42,7 @@ const profileLinks = (workspaceSlug: string, userId: string) => [
{
name: "Settings",
icon: Settings,
link: "/me/profile",
link: "/profile",
},
];
@ -291,7 +291,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
</Menu.Item>
))}
</div>
<div className="py-2">
<div className={`pt-2 ${isUserInstanceAdmin ? "pb-2" : ""}`}>
<Menu.Item
as="button"
type="button"
@ -305,7 +305,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{isUserInstanceAdmin && (
<div className="p-2 pb-0">
<Menu.Item as="button" type="button" className="w-full">
<Link href="/admin">
<Link href="/god-mode">
<a className="flex w-full items-center justify-center rounded px-2 py-1 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 bg-custom-primary-10 hover:bg-custom-primary-20">
God Mode
</a>

11
web/constants/workspace.ts
View File

@ -92,17 +92,16 @@ export const DEFAULT_GLOBAL_VIEWS_LIST: {
];
export const RESTRICTED_URLS = [
"api",
"installations",
"404",
"accounts",
"api",
"create-workspace",
"error",
"god-mode",
"installations",
"invitations",
"magic-sign-in",
"onboarding",
"profile",
"reset-password",
"sign-up",
"spaces",
"workspace-member-invitation",
"workspace-invitations",
];

7
web/layouts/admin-layout/header.tsx
View File

@ -22,12 +22,9 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
type="text"
icon={<Settings className="h-4 w-4 text-custom-text-300" />}
label="Settings"
link="/admin"
/>
<Breadcrumbs.BreadcrumbItem
type="text"
label={title}
link="/god-mode"
/>
<Breadcrumbs.BreadcrumbItem type="text" label={title} />
</Breadcrumbs>
</div>
</div>

8
web/layouts/settings-layout/profile/settings-sidebar.tsx
View File

@ -13,22 +13,22 @@ const PROFILE_LINKS: Array<{
{
key: "profile",
label: "Profile",
href: `/me/profile`,
href: `/profile`,
},
{
key: "change-password",
label: "Change password",
href: `/me/profile/change-password`,
href: `/profile/change-password`,
},
{
key: "activity",
label: "Activity",
href: `/me/profile/activity`,
href: `/profile/activity`,
},
{
key: "preferences",
label: "Preferences",
href: `/me/profile/preferences`,
href: `/profile/preferences`,
},
];

0
web/pages/admin/authorization.tsx → web/pages/god-mode/authorization.tsx
View File

14
web/pages/admin/email.tsx → web/pages/god-mode/email.tsx
View File

@ -26,15 +26,15 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
<InstanceEmailForm config={formattedConfig} />
) : (
<Loader className="space-y-4 m-8">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" width="25%" />
</Loader>
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" width="25%" />
<Loader.Item height="50px" width="25%" />
</Loader>
)}
</div>
)
);
});
InstanceAdminEmailPage.getLayout = function getLayout(page: ReactElement) {

0
web/pages/admin/index.tsx → web/pages/god-mode/index.tsx
View File

0
web/pages/admin/openai.tsx → web/pages/god-mode/openai.tsx
View File

199
web/pages/me/profile/activity.tsx
View File

@ -1,199 +0,0 @@
import { ReactElement } from "react";
import useSWR from "swr";
import { useRouter } from "next/router";
import Link from "next/link";
// services
import { UserService } from "services/user.service";
// layouts
import { ProfileSettingsLayout } from "layouts/settings-layout";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor";
import { ProfileSettingsHeader } from "components/headers";
// icons
import { History, MessageSquare } from "lucide-react";
// ui
import { ExternalLinkIcon, Loader } from "@plane/ui";
// fetch-keys
import { USER_ACTIVITY } from "constants/fetch-keys";
// helper
import { timeAgo } from "helpers/date-time.helper";
// type
import { NextPageWithLayout } from "types/app";
const userService = new UserService();
const ProfileActivityPage: NextPageWithLayout = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
return (
<>
{userActivity ? (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Activity</h3>
</div>
<div className={`flex flex-col gap-2 py-4 w-full`}>
<ul role="list" className="-mb-4">
{userActivity.results.map((activityItem: any) => {
if (activityItem.field === "comment") {
return (
<div key={activityItem.id} className="mt-2">
<div className="relative flex items-start space-x-3">
<div className="relative px-1">
{activityItem.field ? (
activityItem.new_value === "restore" && (
<History className="h-3.5 w-3.5 text-custom-text-200" />
)
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={30}
width={30}
className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
/>
) : (
<div
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
>
{activityItem.actor_detail.display_name?.charAt(0)}
</div>
)}
<span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
<MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
<div>
<div className="text-xs">
{activityItem.actor_detail.is_bot
? activityItem.actor_detail.first_name + " Bot"
: activityItem.actor_detail.display_name}
</div>
<p className="mt-0.5 text-xs text-custom-text-200">
Commented {timeAgo(activityItem.created_at)}
</p>
</div>
<div className="issue-comments-section p-0">
<RichReadOnlyEditor
value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
noBorder
borderOnFocus={false}
/>
</div>
</div>
</div>
</div>
);
}
const message =
activityItem.verb === "created" &&
activityItem.field !== "cycles" &&
activityItem.field !== "modules" &&
activityItem.field !== "attachment" &&
activityItem.field !== "link" &&
activityItem.field !== "estimate" ? (
<span className="text-custom-text-200">
created{" "}
<Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
<a className="inline-flex items-center hover:underline">
this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
</a>
</Link>
</span>
) : activityItem.field ? (
<ActivityMessage activity={activityItem} showIssue />
) : (
"created the issue."
);
if ("field" in activityItem && activityItem.field !== "updated_by") {
return (
<li key={activityItem.id}>
<div className="relative pb-1">
<div className="relative flex items-center space-x-2">
<>
<div>
<div className="relative px-1.5">
<div className="mt-1.5">
<div className="flex h-6 w-6 items-center justify-center">
{activityItem.field ? (
activityItem.new_value === "restore" ? (
<History className="h-5 w-5 text-custom-text-200" />
) : (
<ActivityIcon activity={activityItem} />
)
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={24}
width={24}
className="rounded-full h-full w-full object-cover"
/>
) : (
<div
className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
>
{activityItem.actor_detail.display_name?.charAt(0)}
</div>
)}
</div>
</div>
</div>
</div>
<div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
<div className="text-sm text-custom-text-200 break-words flex gap-1">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span>
) : activityItem.actor_detail.is_bot ? (
<span className="text-gray font-medium">
{activityItem.actor_detail.first_name} Bot
</span>
) : (
<Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
<a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
</Link>
)}{" "}
<div className="flex gap-1 truncate">
{message}{" "}
<span className="whitespace-nowrap flex-shrink-0">
{timeAgo(activityItem.created_at)}
</span>
</div>
</div>
</div>
</>
</div>
</div>
</li>
);
}
})}
</ul>
</div>
</section>
) : (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</>
);
};
ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Activity" />}>{page}</ProfileSettingsLayout>;
};
export default ProfileActivityPage;

197
web/pages/profile/activity.tsx Normal file
View File

@ -0,0 +1,197 @@
import { ReactElement } from "react";
import useSWR from "swr";
import { useRouter } from "next/router";
import Link from "next/link";
// services
import { UserService } from "services/user.service";
// layouts
import { ProfileSettingsLayout } from "layouts/settings-layout";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor";
import { ProfileSettingsHeader } from "components/headers";
// icons
import { History, MessageSquare } from "lucide-react";
// ui
import { ExternalLinkIcon, Loader } from "@plane/ui";
// fetch-keys
import { USER_ACTIVITY } from "constants/fetch-keys";
// helper
import { timeAgo } from "helpers/date-time.helper";
// type
import { NextPageWithLayout } from "types/app";
const userService = new UserService();
const ProfileActivityPage: NextPageWithLayout = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
return (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Activity</h3>
</div>
{userActivity ? (
<div className="flex flex-col gap-2 pb-4 w-full">
<ul role="list" className="-mb-4">
{userActivity.results.map((activityItem: any) => {
if (activityItem.field === "comment") {
return (
<div key={activityItem.id} className="mt-2">
<div className="relative flex items-start space-x-3">
<div className="relative px-1">
{activityItem.field ? (
activityItem.new_value === "restore" && (
<History className="h-3.5 w-3.5 text-custom-text-200" />
)
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={30}
width={30}
className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
/>
) : (
<div
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
>
{activityItem.actor_detail.display_name?.charAt(0)}
</div>
)}
<span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
<MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
<div>
<div className="text-xs">
{activityItem.actor_detail.is_bot
? activityItem.actor_detail.first_name + " Bot"
: activityItem.actor_detail.display_name}
</div>
<p className="mt-0.5 text-xs text-custom-text-200">
Commented {timeAgo(activityItem.created_at)}
</p>
</div>
<div className="issue-comments-section p-0">
<RichReadOnlyEditor
value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
noBorder
borderOnFocus={false}
/>
</div>
</div>
</div>
</div>
);
}
const message =
activityItem.verb === "created" &&
activityItem.field !== "cycles" &&
activityItem.field !== "modules" &&
activityItem.field !== "attachment" &&
activityItem.field !== "link" &&
activityItem.field !== "estimate" ? (
<span className="text-custom-text-200">
created{" "}
<Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
<a className="inline-flex items-center hover:underline">
this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
</a>
</Link>
</span>
) : activityItem.field ? (
<ActivityMessage activity={activityItem} showIssue />
) : (
"created the issue."
);
if ("field" in activityItem && activityItem.field !== "updated_by") {
return (
<li key={activityItem.id}>
<div className="relative pb-1">
<div className="relative flex items-center space-x-2">
<>
<div>
<div className="relative px-1.5">
<div className="mt-1.5">
<div className="flex h-6 w-6 items-center justify-center">
{activityItem.field ? (
activityItem.new_value === "restore" ? (
<History className="h-5 w-5 text-custom-text-200" />
) : (
<ActivityIcon activity={activityItem} />
)
) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.display_name}
height={24}
width={24}
className="rounded-full h-full w-full object-cover"
/>
) : (
<div
className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
>
{activityItem.actor_detail.display_name?.charAt(0)}
</div>
)}
</div>
</div>
</div>
</div>
<div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
<div className="text-sm text-custom-text-200 break-words flex gap-1">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span>
) : activityItem.actor_detail.is_bot ? (
<span className="text-gray font-medium">
{activityItem.actor_detail.first_name} Bot
</span>
) : (
<Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
<a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
</Link>
)}{" "}
<div className="flex gap-1 truncate">
{message}{" "}
<span className="whitespace-nowrap flex-shrink-0">
{timeAgo(activityItem.created_at)}
</span>
</div>
</div>
</div>
</>
</div>
</div>
</li>
);
}
})}
</ul>
</div>
) : (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</section>
);
};
ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Activity" />}>{page}</ProfileSettingsLayout>;
};
export default ProfileActivityPage;

4
web/pages/me/profile/change-password.tsx → web/pages/profile/change-password.tsx
View File

@ -87,9 +87,9 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
envConfig?.github_client_id
);
if (!enableEmailPassword) router.push("/me/profile");
if (!enableEmailPassword) router.push("/profile");
else setIsPageLoading(false);
}, []);
}, [envConfig, router]);
if (isPageLoading)
return (

0
web/pages/me/profile/index.tsx → web/pages/profile/index.tsx
View File

0
web/pages/me/profile/preferences.tsx → web/pages/profile/preferences.tsx
View File