binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: deactivate user option added (#2841)

Browse source 
* dev: deactivate user option added

* chore: new layout for profile settings

* fix: build errors

* fix: user profile activity
This commit is contained in:
Aaryan Khandelwal 2023-11-23 14:44:06 +05:30 • committed by sriram veeraghanta
parent 3c89ef8cc3
commit db75eced0a
53 changed files with 799 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

207
web/pages/[workspaceSlug]/me/profile/activity.tsx
View file

@ -1,207 +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 { WorkspaceSettingLayout } from "layouts/settings-layout";
import { AppLayout } from "layouts/app-layout";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor";
import { WorkspaceSettingHeader } 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(
workspaceSlug ? USER_ACTIVITY : null,
workspaceSlug ? () => userService.getUserWorkspaceActivity(workspaceSlug.toString()) : null
);
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 (
<AppLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);
};
export default ProfileActivityPage;

407
web/pages/[workspaceSlug]/me/profile/index.tsx
View file

@ -1,407 +0,0 @@
import React, { useEffect, useState, ReactElement } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
// services
import { FileService } from "services/file.service";
import { UserService } from "services/user.service";
// hooks
import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import { ImagePickerPopover, ImageUploadModal } from "components/core";
import { WorkspaceSettingHeader } from "components/headers";
// ui
import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
// icons
import { User2, UserCircle2 } from "lucide-react";
// types
import type { IUser } from "types";
import type { NextPageWithLayout } from "types/app";
// constants
import { USER_ROLES } from "constants/workspace";
import { TIME_ZONES } from "constants/timezones";
const defaultValues: Partial<IUser> = {
avatar: "",
cover_image: "",
first_name: "",
last_name: "",
email: "",
role: "Product / Project Manager",
user_timezone: "Asia/Kolkata",
};
const fileService = new FileService();
const userService = new UserService();
const ProfilePage: NextPageWithLayout = () => {
const [isRemoving, setIsRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// form info
const {
handleSubmit,
reset,
watch,
setValue,
control,
formState: { errors, isSubmitting },
} = useForm<IUser>({ defaultValues });
const { setToastAlert } = useToast();
const { user: myProfile, mutateUser } = useUserAuth();
useEffect(() => {
reset({ ...defaultValues, ...myProfile });
}, [myProfile, reset]);
const onSubmit = async (formData: IUser) => {
if (formData.first_name === "" || formData.last_name === "") {
setToastAlert({
type: "error",
title: "Error!",
message: "First and last names are required.",
});
return;
}
const payload: Partial<IUser> = {
first_name: formData.first_name,
last_name: formData.last_name,
avatar: formData.avatar,
cover_image: formData.cover_image,
role: formData.role,
display_name: formData.display_name,
user_timezone: formData.user_timezone,
};
await userService
.updateUser(payload)
.then((res) => {
mutateUser((prevData: any) => {
if (!prevData) return prevData;
return { ...prevData, ...res };
}, false);
setToastAlert({
type: "success",
title: "Success!",
message: "Profile updated successfully.",
});
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "There was some error in updating your profile. Please try again.",
})
);
};
const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => {
if (!url) return;
setIsRemoving(true);
fileService.deleteUserFile(url).then(() => {
if (updateUser)
userService
.updateUser({ avatar: "" })
.then(() => {
setToastAlert({
type: "success",
title: "Success!",
message: "Profile picture removed successfully.",
});
mutateUser((prevData: any) => {
if (!prevData) return prevData;
return { ...prevData, avatar: "" };
}, false);
setIsRemoving(false);
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "There was some error in deleting your profile picture. Please try again.",
});
})
.finally(() => setIsRemoving(false));
});
};
const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
value: timeZone.value,
query: timeZone.label + " " + timeZone.value,
content: timeZone.label,
}));
return (
<>
<ImageUploadModal
isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)}
isRemoving={isRemoving}
handleDelete={() => handleDelete(myProfile?.avatar, true)}
onSuccess={(url) => {
setValue("avatar", url);
handleSubmit(onSubmit)();
setIsImageUploadModalOpen(false);
}}
value={watch("avatar") !== "" ? watch("avatar") : undefined}
userImage
/>
{myProfile ? (
<form onSubmit={handleSubmit(onSubmit)} className="h-full w-full">
<div className={`flex flex-col gap-8 pr-9 py-9 w-full h-full overflow-y-auto`}>
<div className="relative h-44 w-full mt-6">
<img
src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
className="h-44 w-full rounded-lg object-cover"
alt={myProfile?.first_name ?? "Cover image"}
/>
<div className="flex items-end justify-between absolute left-8 -bottom-6">
<div className="flex gap-3">
<div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
<User2 className="h-full w-full text-custom-text-200" />
</div>
) : (
<div className="relative h-16 w-16 overflow-hidden">
<img
src={watch("avatar")}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
onClick={() => setIsImageUploadModalOpen(true)}
alt={myProfile.display_name}
/>
</div>
)}
</button>
</div>
</div>
</div>
<div className="flex absolute right-3 bottom-3">
<Controller
control={control}
name="cover_image"
render={() => (
<ImagePickerPopover
label={"Change cover"}
onChange={(imageUrl) => {
setValue("cover_image", imageUrl);
}}
control={control}
value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
/>
)}
/>
</div>
</div>
<div className="flex item-center justify-between px-8 mt-4">
<div className="flex flex-col">
<div className="flex item-center text-lg font-semibold text-custom-text-100">
<span>{`${watch("first_name")} ${watch("last_name")}`}</span>
</div>
<span className="text-sm tracking-tight">{watch("email")}</span>
</div>
<Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
<a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
<span className="h-4 w-4">
<UserCircle2 className="h-4 w-4" />
</span>
View Profile
</a>
</Link>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
<div className="flex flex-col gap-1">
<h4 className="text-sm">First Name</h4>
<Controller
control={control}
name="first_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your first name"
className="rounded-md font-medium w-full"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Last Name</h4>
<Controller
control={control}
name="last_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="last_name"
name="last_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.last_name)}
placeholder="Enter your last name"
className="rounded-md font-medium w-full"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Email</h4>
<Controller
control={control}
name="email"
render={({ field: { value, onChange, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your last name"
className="rounded-md font-medium w-full"
disabled
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Role</h4>
<Controller
name="role"
control={control}
rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : "border-none"}
className="rounded-md border !border-custom-border-200"
width="w-full"
input
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Display name </h4>
<Controller
control={control}
name="display_name"
rules={{
required: "Display name is required.",
validate: (value) => {
if (value.trim().length < 1) return "Display name can't be empty.";
if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
if (value.replace(/\s/g, "").length < 1)
return "Display name must be at least 1 characters long.";
if (value.replace(/\s/g, "").length > 20)
return "Display name must be less than 20 characters long.";
return true;
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.display_name)}
placeholder="Enter your display name"
className="w-full"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Timezone </h4>
<Controller
name="user_timezone"
control={control}
rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
options={timeZoneOptions}
onChange={onChange}
optionsClassName="w-full"
buttonClassName={"border-none"}
className="rounded-md border !border-custom-border-200"
input
/>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex items-center justify-between py-2">
<Button variant="primary" type="submit" loading={isSubmitting}>
{isSubmitting ? "Updating Profile..." : "Update Profile"}
</Button>
</div>
</div>
</div>
</form>
) : (
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</>
);
};
ProfilePage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="My Profile" />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);
};
export default ProfilePage;

86
web/pages/[workspaceSlug]/me/profile/preferences.tsx
View file

@ -1,86 +0,0 @@
import { useEffect, useState, ReactElement } from "react";
import { observer } from "mobx-react-lite";
import { useTheme } from "next-themes";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import { CustomThemeSelector, ThemeSwitch } from "components/core";
import { WorkspaceSettingHeader } from "components/headers";
// ui
import { Spinner } from "@plane/ui";
// constants
import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes";
// type
import { NextPageWithLayout } from "types/app";
const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
const {
user: { currentUser, updateCurrentUserTheme },
} = useMobxStore();
// states
const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
// computed
const userTheme = currentUser?.theme;
// hooks
const { setTheme } = useTheme();
const { setToastAlert } = useToast();
useEffect(() => {
if (userTheme) {
const userThemeOption = THEME_OPTIONS.find((t) => t.value === userTheme?.theme);
if (userThemeOption) {
setCurrentTheme(userThemeOption);
}
}
}, [userTheme]);
const handleThemeChange = (themeOption: I_THEME_OPTION) => {
setTheme(themeOption.value);
updateCurrentUserTheme(themeOption.value).catch(() => {
setToastAlert({
title: "Failed to Update the theme",
type: "error",
});
});
};
return (
<>
{currentUser ? (
<div 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">Preferences</h3>
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
<p className="text-sm text-custom-text-200">Select or customize your interface color scheme.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
</div>
</div>
{userTheme?.theme === "custom" && <CustomThemeSelector />}
</div>
) : (
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</>
);
});
ProfilePreferencesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);
};
export default ProfilePreferencesPage;

4
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View file

@ -4,7 +4,7 @@ import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
@ -65,7 +65,7 @@ const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader title="Assigned" />}>
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);

4
web/pages/[workspaceSlug]/profile/[userId]/created.tsx
View file

@ -6,7 +6,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
@ -61,7 +61,7 @@ const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader title="Created" />}>
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);

4
web/pages/[workspaceSlug]/profile/[userId]/index.tsx
View file

@ -5,7 +5,7 @@ import useSWR from "swr";
import { UserService } from "services/user.service";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import {
@ -56,7 +56,7 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader title="Summary" />}>
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper>{page}</ProfileAuthWrapper>
</AppLayout>
);

4
web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
View file

@ -6,7 +6,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
@ -61,7 +61,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader title="Subscribed" />}>
<AppLayout header={<UserProfileHeader />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);

15
web/pages/[workspaceSlug]/settings/members.tsx
View file

@ -14,10 +14,11 @@ import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/w
import { Button } from "@plane/ui";
// icons
import { Search } from "lucide-react";
// helpers
import { trackEvent } from "helpers/event-tracker.helper";
// types
import { NextPageWithLayout } from "types/app";
import { IWorkspaceBulkInviteFormData } from "types";
import { trackEvent } from "helpers/event-tracker.helper";
const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
const router = useRouter();
@ -36,7 +37,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
if (!workspaceSlug) return;
return inviteMembersToWorkspace(workspaceSlug.toString(), data)
.then(async (res) => {
.then(async () => {
setInviteModal(false);
trackEvent("WORKSPACE_USER_INVITE");
setToastAlert({
@ -67,14 +68,14 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
<h4 className="text-xl font-medium">Members</h4>
<div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
<Search className="h-3.5 w-3.5" />
<div className="flex items-center gap-1.5 ml-auto rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
<Search className="h-3.5 w-3.5 text-custom-text-400" />
<input
className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
placeholder="Search"
className="max-w-[234px] w-full border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
placeholder="Search..."
value={searchQuery}
autoFocus={true}
onChange={(e) => setSearchQuery(e.target.value)}
autoFocus
/>
</div>
<Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>