Merge branch 'develop' of https://github.com/makeplane/plane into feat/gantt_year_view

This commit is contained in:
Aaryan Khandelwal 2023-09-04 18:09:03 +05:30
commit 0a664be3de
26 changed files with 895 additions and 419 deletions

View File

@ -1,23 +0,0 @@
#!/bin/sh
. "$(dirname -- "$0")/_/husky.sh"
changed_files=$(git diff --name-only HEAD~1)
web_changed=$(echo "$changed_files" | grep -E '^web/' || true)
space_changed=$(echo "$changed_files" | grep -E '^space/' || true)
echo $web_changed
echo $space_changed
if [ -n "$web_changed" ] && [ -n "$space_changed" ]; then
echo "Changes detected in both web and space. Building..."
yarn run lint
yarn run build
elif [ -n "$web_changed" ]; then
echo "Changes detected in web app. Building..."
yarn run lint --filter=web
yarn run build --filter=web
elif [ -n "$space_changed" ]; then
echo "Changes detected in space app. Building..."
yarn run lint --filter=space
yarn run build --filter=space
fi

View File

@ -19,8 +19,7 @@
"devDependencies": {
"eslint-config-custom": "*",
"prettier": "latest",
"turbo": "latest",
"husky": "^8.0.3"
"turbo": "latest"
},
"packageManager": "yarn@1.22.19"
}

View File

@ -1 +1,8 @@
NEXT_PUBLIC_API_BASE_URL=''
# Base url for the API requests
NEXT_PUBLIC_API_BASE_URL=""
# Public boards deploy URL
NEXT_PUBLIC_DEPLOY_URL=""
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=""
# Flag to toggle OAuth
NEXT_PUBLIC_ENABLE_OAUTH=1

View File

@ -4,3 +4,5 @@ export * from "./email-reset-password-form";
export * from "./github-login-button";
export * from "./google-login";
export * from "./onboarding-form";
export * from "./sign-in";
export * from "./user-logged-in";

View File

@ -0,0 +1,156 @@
import React from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import authenticationService from "services/authentication.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
export const SignInView = observer(() => {
const { user: userStore } = useMobxStore();
const router = useRouter();
const { next_path } = router.query;
const { setToastAlert } = useToast();
const onSignInError = (error: any) => {
setToastAlert({
title: "Error signing in!",
type: "error",
message: error?.error || "Something went wrong. Please try again later or contact the support team.",
});
};
const onSignInSuccess = (response: any) => {
const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
userStore.setCurrentUser(response?.user);
if (!isOnboarded) {
router.push(`/onboarding?next_path=${next_path}`);
return;
}
router.push((next_path ?? "/").toString());
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handlePasswordSignIn = async (formData: any) => {
await authenticationService
.emailLogin(formData)
.then((response) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
})
.catch((err) => onSignInError(err));
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
};
return (
<div className="h-screen w-full overflow-hidden">
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
{/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
</div>
</div>
</>
) : (
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
)}
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
) : null}
</div>
</div>
</div>
);
});

View File

@ -0,0 +1,51 @@
import Image from "next/image";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
// assets
import UserLoggedInImage from "public/user-logged-in.svg";
import PlaneLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
export const UserLoggedIn = () => {
const { user: userStore } = useMobxStore();
const user = userStore.currentUser;
if (!user) return null;
return (
<div className="h-screen w-screen flex flex-col">
<div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
<div>
<Image src={PlaneLogo} alt="User already logged in" />
</div>
<div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
{user.avatar && user.avatar !== "" ? (
<div className="h-5 w-5 rounded-full">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
</div>
) : (
<div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
{(user.display_name ?? "U")[0]}
</div>
)}
<h6 className="text-xs font-medium">{user.display_name}</h6>
</div>
</div>
<div className="h-full w-full grid place-items-center p-6">
<div className="text-center">
<div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
<div className="h-32 w-32">
<Image src={UserLoggedInImage} alt="User already logged in" />
</div>
</div>
<h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
<p className="mt-4">
You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
</p>
</div>
</div>
</div>
);
};

View File

@ -0,0 +1,13 @@
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { SignInView, UserLoggedIn } from "components/accounts";
export const HomeView = observer(() => {
const { user: userStore } = useMobxStore();
if (!userStore.currentUser) return <SignInView />;
return <UserLoggedIn />;
});

View File

@ -0,0 +1 @@
export * from "./home";

View File

@ -1,5 +1,9 @@
import { useEffect } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
// components
import { IssueListView } from "components/issues/board-views/list";
@ -11,6 +15,8 @@ import { IssuePeekOverview } from "components/issues/peek-overview";
// mobx store
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
// assets
import SomethingWentWrongImage from "public/something-went-wrong.svg";
export const ProjectDetailsView = observer(() => {
const router = useRouter();
@ -55,8 +61,16 @@ export const ProjectDetailsView = observer(() => {
) : (
<>
{issueStore?.error ? (
<div className="text-sm text-center py-10 bg-custom-background-200 text-custom-text-100">
Something went wrong.
<div className="h-full w-full grid place-items-center p-6">
<div className="text-center">
<div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
<div className="h-32 w-32 grid place-items-center">
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
</div>
</div>
<h1 className="text-3xl font-semibold mt-12">Oops! Something went wrong.</h1>
<p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
</div>
</div>
) : (
projectStore?.activeBoard && (

View File

@ -13,6 +13,7 @@ const nextConfig = {
if (parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) {
const nextConfigWithNginx = withImages({ basePath: "/spaces", ...nextConfig });
module.exports = nextConfigWithNginx;
} else {
module.exports = nextConfig;
}

View File

@ -12,6 +12,8 @@ import MobxStoreInit from "lib/mobx/store-init";
// constants
import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "constants/seo";
const prefix = parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0") === 0 ? "/" : "/spaces/";
function MyApp({ Component, pageProps }: AppProps) {
return (
<MobxStoreProvider>
@ -25,11 +27,11 @@ function MyApp({ Component, pageProps }: AppProps) {
<meta property="og:description" content={SITE_DESCRIPTION} />
<meta name="keywords" content={SITE_KEYWORDS} />
<meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
<link rel="apple-touch-icon" sizes="180x180" href="/spaces/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/spaces/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/spaces/favicon/favicon-16x16.png" />
<link rel="manifest" href="/spaces/site.webmanifest.json" />
<link rel="shortcut icon" href="/spaces/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
<link rel="manifest" href={`${prefix}site.webmanifest.json`} />
<link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
</Head>
<ToastContextProvider>
<ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>

View File

@ -1,156 +1,8 @@
import React, { useEffect } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// assets
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import authenticationService from "services/authentication.service";
// hooks
import useToast from "hooks/use-toast";
import React from "react";
// components
import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
import { HomeView } from "components/views";
const HomePage = () => {
const { user: userStore } = useMobxStore();
const router = useRouter();
const { next_path } = router.query;
const { setToastAlert } = useToast();
const onSignInError = (error: any) => {
setToastAlert({
title: "Error signing in!",
type: "error",
message: error?.error || "Something went wrong. Please try again later or contact the support team.",
});
};
const onSignInSuccess = (response: any) => {
const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
userStore.setCurrentUser(response?.user);
if (!isOnboarded) {
router.push(`/onboarding?next_path=${next_path}`);
return;
}
router.push((next_path ?? "/").toString());
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
onSignInSuccess(response);
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
onSignInError(err);
}
};
const handlePasswordSignIn = async (formData: any) => {
await authenticationService
.emailLogin(formData)
.then((response) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
})
.catch((err) => onSignInError(err));
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
onSignInSuccess(response);
}
} catch (err: any) {
onSignInError(err);
}
};
return (
<div className="h-screen w-full overflow-hidden">
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
{/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
</div>
</div>
</>
) : (
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
)}
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
) : null}
</div>
</div>
</div>
);
};
const HomePage = () => <HomeView />;
export default HomePage;

View File

@ -0,0 +1,13 @@
{
"name": "Plane Space",
"short_name": "Plane Space",
"description": "Plane helps you plan your issues, cycles, and product modules.",
"start_url": ".",
"display": "standalone",
"background_color": "#f9fafb",
"theme_color": "#3f76ff",
"icons": [
{ "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}

View File

@ -0,0 +1,3 @@
<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M52.4226 95.3614C46.3393 95.3614 40.6853 94.2699 35.4608 92.0871C30.2363 89.9043 25.6917 86.8805 21.827 83.0158C17.9623 79.1511 14.9385 74.6065 12.7557 69.3819C10.5728 64.1574 9.48141 58.5035 9.48141 52.4202C9.48141 47.5535 10.1971 42.9731 11.6285 38.679C13.0598 34.3849 15.0638 30.4486 17.6402 26.8702L5.93876 15.1687C5.29464 14.5246 4.99048 13.7552 5.02626 12.8606C5.06205 11.966 5.402 11.1967 6.04612 10.5525C6.69023 9.90842 7.4596 9.58636 8.3542 9.58636C9.24881 9.58636 10.0182 9.90842 10.6623 10.5525L92.6799 92.6775C93.3241 93.3217 93.6461 94.0731 93.6461 94.9319C93.6461 95.7908 93.3241 96.5422 92.6799 97.1864C92.0358 97.8305 91.2665 98.1525 90.3718 98.1525C89.4772 98.1525 88.7079 97.8305 88.0638 97.1864L77.9726 87.2025C74.3942 89.779 70.4579 91.7829 66.1638 93.2143C61.8696 94.6457 57.2893 95.3614 52.4226 95.3614ZM52.4226 88.9202C56.3589 88.9202 60.0804 88.3655 63.5873 87.2562C67.0942 86.1469 70.3505 84.5903 73.3564 82.5864L54.3549 63.5849L48.3432 69.5967C47.6991 70.2408 46.9476 70.5807 46.0888 70.6165C45.2299 70.6523 44.4785 70.3481 43.8344 69.704L30.7373 56.4996C30.0932 55.8555 29.789 55.0503 29.8248 54.0842C29.8606 53.118 30.2005 52.3128 30.8446 51.6687C31.4888 51.0246 32.2939 50.7025 33.2601 50.7025C34.2263 50.7025 35.0314 51.0246 35.6755 51.6687L46.0888 62.1893L49.5241 58.754L22.2564 31.4864C20.2525 34.4922 18.6959 37.7486 17.5866 41.2555C16.4772 44.7623 15.9226 48.4839 15.9226 52.4202C15.9226 62.7976 19.4116 71.4753 26.3895 78.4533C33.3674 85.4312 42.0451 88.9202 52.4226 88.9202ZM87.2049 77.9702L82.5888 73.354C84.5927 70.3481 86.1493 67.0918 87.2586 63.5849C88.3679 60.078 88.9226 56.3565 88.9226 52.4202C88.9226 42.0427 85.4336 33.365 78.4557 26.3871C71.4777 19.4092 62.8 15.9202 52.4226 15.9202C48.4863 15.9202 44.7647 16.4748 41.2579 17.5842C37.751 18.6935 34.4946 20.2501 31.4888 22.254L26.8726 17.6378C30.451 15.0614 34.3873 13.0574 38.6814 11.6261C42.9755 10.1947 47.5559 9.479 52.4226 9.479C58.4343 9.479 64.0525 10.5883 69.277 12.8069C74.5015 15.0256 79.0461 18.0672 82.9108 21.9319C86.7755 25.7967 89.8172 30.3413 92.0358 35.5658C94.2544 40.7903 95.3638 46.4084 95.3638 52.4202C95.3638 57.2868 94.6481 61.8672 93.2167 66.1614C91.7853 70.4555 89.7814 74.3917 87.2049 77.9702ZM63.6946 54.3525L58.7564 49.5217L69.1696 39.1084C69.8138 38.4643 70.601 38.1422 71.5314 38.1422C72.4618 38.1422 73.2848 38.4643 74.0005 39.1084C74.7162 39.8241 75.0741 40.6471 75.0741 41.5775C75.0741 42.5079 74.7162 43.331 74.0005 44.0466L63.6946 54.3525Z" fill="#B9B9B9"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -0,0 +1,3 @@
<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5747 100.561C16.241 100.561 15.123 100.11 14.2207 99.2074C13.3184 98.3051 12.8672 97.187 12.8672 95.8533V88.9824C12.8672 86.218 13.5633 83.8025 14.9556 81.7359C16.3478 79.6694 18.1957 78.0518 20.4995 76.8832C24.9266 74.6263 29.6007 72.8 34.5217 71.4044C39.4429 70.0089 45.2455 69.3112 51.9296 69.3112C54.5337 69.3112 56.956 69.4164 59.1962 69.6267C61.4364 69.837 63.528 70.1525 65.4711 70.5732L58.5603 77.484C57.6054 77.3104 56.5721 77.2069 55.4603 77.1736C54.3485 77.1401 53.1716 77.1234 51.9296 77.1234C45.7664 77.1234 40.3661 77.8112 35.7286 79.1867C31.0912 80.5622 27.21 82.1181 24.085 83.8542C22.9032 84.4885 22.0401 85.2297 21.4958 86.0777C20.9517 86.9258 20.6796 87.8941 20.6796 88.9824V92.7484H52.23L60.0423 100.561H17.5747ZM80.3283 102.484C79.7051 102.484 79.1231 102.384 78.5822 102.183C78.0413 101.983 77.5241 101.636 77.0306 101.143L66.9135 91.0257C66.1925 90.3046 65.8235 89.3981 65.8068 88.3064C65.7901 87.2147 66.159 86.2916 66.9135 85.5371C67.6681 84.7825 68.5829 84.4052 69.6579 84.4052C70.7329 84.4052 71.6477 84.7825 72.4022 85.5371L80.335 93.4698L103.893 69.9121C104.614 69.1909 105.52 68.822 106.612 68.8053C107.704 68.7886 108.627 69.1575 109.381 69.9121C110.136 70.6666 110.513 71.5814 110.513 72.6564C110.513 73.7314 110.136 74.6461 109.381 75.4007L83.6302 101.152C83.1428 101.639 82.6264 101.983 82.0811 102.183C81.5358 102.384 80.9515 102.484 80.3283 102.484ZM51.9296 60.8974C46.9166 60.8974 42.6252 59.1125 39.0553 55.5427C35.4855 51.9728 33.7007 47.6814 33.7007 42.6685C33.7007 37.6555 35.4855 33.3641 39.0553 29.7943C42.6252 26.2244 46.9166 24.4395 51.9296 24.4395C56.9425 24.4395 61.2339 26.2244 64.8038 29.7943C68.3737 33.3641 70.1586 37.6555 70.1586 42.6685C70.1586 47.6814 68.3737 51.9728 64.8038 55.5427C61.2339 59.1125 56.9425 60.8974 51.9296 60.8974ZM51.9296 53.0852C54.7941 53.0852 57.2464 52.0652 59.2863 50.0253C61.3263 47.9853 62.3462 45.5331 62.3462 42.6685C62.3462 39.8039 61.3263 37.3517 59.2863 35.3117C57.2464 33.2718 54.7941 32.2518 51.9296 32.2518C49.065 32.2518 46.6127 33.2718 44.5728 35.3117C42.5329 37.3517 41.5129 39.8039 41.5129 42.6685C41.5129 45.5331 42.5329 47.9853 44.5728 50.0253C46.6127 52.0652 49.065 53.0852 51.9296 53.0852Z" fill="#9D9D9D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

26
web/.env.example Normal file
View File

@ -0,0 +1,26 @@
# Base url for the API requests
NEXT_PUBLIC_API_BASE_URL=""
# Extra image domains that need to be added for Next Image
NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=""
# GitHub App ID for GitHub OAuth
NEXT_PUBLIC_GITHUB_ID=""
# GitHub App Name for GitHub Integration
NEXT_PUBLIC_GITHUB_APP_NAME=""
# Sentry DSN for error monitoring
NEXT_PUBLIC_SENTRY_DSN=""
# Enable/Disable OAUTH - default 0 for selfhosted instance
NEXT_PUBLIC_ENABLE_OAUTH=0
# Enable/Disable Sentry
NEXT_PUBLIC_ENABLE_SENTRY=0
# Enable/Disable session recording
NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
# Enable/Disable event tracking
NEXT_PUBLIC_TRACK_EVENTS=0
# Slack Client ID for Slack Integration
NEXT_PUBLIC_SLACK_CLIENT_ID=""
# For Telemetry, set it to "app.plane.so"
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
# Public boards deploy URL
NEXT_PUBLIC_DEPLOY_URL=""

View File

@ -0,0 +1,211 @@
import React from "react";
// next imports
import { useRouter } from "next/router";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui
import { DangerButton, Input, SecondaryButton } from "components/ui";
// fetch-keys
import { PROJECTS_LIST } from "constants/fetch-keys";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// hooks
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
import useProjects from "hooks/use-projects";
// types
import { IProject } from "types";
type FormData = {
projectName: string;
confirmLeave: string;
};
const defaultValues: FormData = {
projectName: "",
confirmLeave: "",
};
export const ConfirmProjectLeaveModal: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
const store: RootStore = useMobxStore();
const { project } = store;
const { user } = useUser();
const { mutateProjects } = useProjects();
const { setToastAlert } = useToast();
const {
control,
formState: { isSubmitting },
handleSubmit,
reset,
watch,
} = useForm({ defaultValues });
const handleClose = () => {
project.handleProjectLeaveModal(null);
reset({ ...defaultValues });
};
const onSubmit = async (data: any) => {
if (data) {
if (data.projectName === project?.projectLeaveDetails?.name) {
if (data.confirmLeave === "Leave Project") {
return project
.leaveProject(
project.projectLeaveDetails.workspaceSlug.toString(),
project.projectLeaveDetails.id.toString(),
user
)
.then((res) => {
mutateProjects();
handleClose();
router.push(`/${workspaceSlug}/projects`);
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: "Something went wrong please try again later.",
});
});
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Please confirm leaving the project by typing the 'Leave Project'.",
});
}
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Please enter the project name as shown in the description.",
});
}
} else {
setToastAlert({
type: "error",
title: "Error!",
message: "Please fill all fields.",
});
}
};
return (
<Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</span>
<span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
</span>
</div>
<span>
<p className="text-sm leading-7 text-custom-text-200">
Are you sure you want to leave the project -
<span className="font-medium text-custom-text-100">{` "${project?.projectLeaveDetails?.name}" `}</span>
? All of the issues associated with you will become inaccessible.
</p>
</span>
<div className="text-custom-text-200">
<p className="break-words text-sm ">
Enter the project name{" "}
<span className="font-medium text-custom-text-100">
{project?.projectLeaveDetails?.name}
</span>{" "}
to continue:
</p>
<Controller
control={control}
name="projectName"
render={({ field: { onChange, value } }) => (
<Input
type="text"
placeholder="Enter project name"
className="mt-2"
value={value}
onChange={onChange}
/>
)}
/>
</div>
<div className="text-custom-text-200">
<p className="text-sm">
To confirm, type{" "}
<span className="font-medium text-custom-text-100">Leave Project</span> below:
</p>
<Controller
control={control}
name="confirmLeave"
render={({ field: { onChange, value } }) => (
<Input
type="text"
placeholder="Enter 'leave project'"
className="mt-2"
onChange={onChange}
value={value}
/>
)}
/>
</div>
<div className="flex justify-end gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton type="submit" loading={isSubmitting}>
{isSubmitting ? "Leaving..." : "Leave Project"}
</DangerButton>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
});

View File

@ -5,3 +5,4 @@ export * from "./settings-header";
export * from "./single-integration-card";
export * from "./single-project-card";
export * from "./single-sidebar-project";
export * from "./confirm-project-leave-modal";

View File

@ -85,7 +85,8 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
});
const uninvitedPeople = people?.filter((person) => {
const isInvited = members?.find((member) => member.display_name === person.member.display_name);
const isInvited = members?.find((member) => member.memberId === person.member.id);
return !isInvited;
});
@ -143,7 +144,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
content: (
<div className="flex items-center gap-2">
<Avatar user={person.member} />
{person.member.display_name}
{person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
</div>
),
}));

View File

@ -35,6 +35,7 @@ export const ProjectSidebarList: FC = () => {
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
const [deleteProjectModal, setDeleteProjectModal] = useState(false);
const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
// router
const [isScrolled, setIsScrolled] = useState(false);
@ -217,6 +218,7 @@ export const ProjectSidebarList: FC = () => {
snapshot={snapshot}
handleDeleteProject={() => handleDeleteProject(project)}
handleCopyText={() => handleCopyText(project.id)}
handleProjectLeave={() => setProjectToLeaveId(project.id)}
shortContextMenu
/>
</div>
@ -285,6 +287,7 @@ export const ProjectSidebarList: FC = () => {
provided={provided}
snapshot={snapshot}
handleDeleteProject={() => handleDeleteProject(project)}
handleProjectLeave={() => setProjectToLeaveId(project.id)}
handleCopyText={() => handleCopyText(project.id)}
/>
</div>

View File

@ -44,6 +44,7 @@ type Props = {
snapshot?: DraggableStateSnapshot;
handleDeleteProject: () => void;
handleCopyText: () => void;
handleProjectLeave: () => void;
shortContextMenu?: boolean;
};
@ -80,276 +81,293 @@ const navigation = (workspaceSlug: string, projectId: string) => [
},
];
export const SingleSidebarProject: React.FC<Props> = observer(
({
export const SingleSidebarProject: React.FC<Props> = observer((props) => {
const {
project,
sidebarCollapse,
provided,
snapshot,
handleDeleteProject,
handleCopyText,
handleProjectLeave,
shortContextMenu = false,
}) => {
const store: RootStore = useMobxStore();
const { projectPublish } = store;
} = props;
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const store: RootStore = useMobxStore();
const { projectPublish, project: projectStore } = store;
const { setToastAlert } = useToast();
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const isAdmin = project.member_role === 20;
const { setToastAlert } = useToast();
const handleAddToFavorites = () => {
if (!workspaceSlug) return;
const isAdmin = project.member_role === 20;
mutate<IProject[]>(
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
(prevData) =>
(prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
false
);
const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
projectService
.addProjectToFavorites(workspaceSlug as string, {
project: project.id,
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't remove the project from favorites. Please try again.",
})
);
};
const handleAddToFavorites = () => {
if (!workspaceSlug) return;
const handleRemoveFromFavorites = () => {
if (!workspaceSlug) return;
mutate<IProject[]>(
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
(prevData) =>
(prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
false
);
mutate<IProject[]>(
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
(prevData) =>
(prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
false
);
projectService.removeProjectFromFavorites(workspaceSlug as string, project.id).catch(() =>
projectService
.addProjectToFavorites(workspaceSlug as string, {
project: project.id,
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't remove the project from favorites. Please try again.",
})
);
};
};
return (
<Disclosure key={project.id} defaultOpen={projectId === project.id}>
{({ open }) => (
<>
<div
className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
snapshot?.isDragging ? "opacity-60" : ""
}`}
>
{provided && (
<Tooltip
tooltipContent={
project.sort_order === null
? "Join the project to rearrange"
: "Drag to rearrange"
}
position="top-right"
>
<button
type="button"
className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
sidebarCollapse ? "" : "group-hover:!flex"
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
{...provided?.dragHandleProps}
>
<EllipsisVerticalIcon className="h-4" />
<EllipsisVerticalIcon className="-ml-5 h-4" />
</button>
</Tooltip>
)}
const handleRemoveFromFavorites = () => {
if (!workspaceSlug) return;
mutate<IProject[]>(
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
(prevData) =>
(prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
false
);
projectService.removeProjectFromFavorites(workspaceSlug as string, project.id).catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't remove the project from favorites. Please try again.",
})
);
};
return (
<Disclosure key={project.id} defaultOpen={projectId === project.id}>
{({ open }) => (
<>
<div
className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
snapshot?.isDragging ? "opacity-60" : ""
}`}
>
{provided && (
<Tooltip
tooltipContent={`${project.name}`}
position="right"
className="ml-2"
disabled={!sidebarCollapse}
tooltipContent={
project.sort_order === null
? "Join the project to rearrange"
: "Drag to rearrange"
}
position="top-right"
>
<Disclosure.Button
as="div"
className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
sidebarCollapse ? "justify-center" : `justify-between`
<button
type="button"
className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
sidebarCollapse ? "" : "group-hover:!flex"
} ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
{...provided?.dragHandleProps}
>
<EllipsisVerticalIcon className="h-4" />
<EllipsisVerticalIcon className="-ml-5 h-4" />
</button>
</Tooltip>
)}
<Tooltip
tooltipContent={`${project.name}`}
position="right"
className="ml-2"
disabled={!sidebarCollapse}
>
<Disclosure.Button
as="div"
className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
sidebarCollapse ? "justify-center" : `justify-between`
}`}
>
<div
className={`flex items-center flex-grow w-full truncate gap-x-2 ${
sidebarCollapse ? "justify-center" : ""
}`}
>
<div
className={`flex items-center flex-grow w-full truncate gap-x-2 ${
sidebarCollapse ? "justify-center" : ""
}`}
>
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)}
</span>
) : project.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(project.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{project?.name.charAt(0)}
</span>
)}
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)}
</span>
) : project.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(project.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{project?.name.charAt(0)}
</span>
)}
{!sidebarCollapse && (
<p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
{project.name}
</p>
)}
</div>
{!sidebarCollapse && (
<ExpandMoreOutlined
fontSize="small"
className={`flex-shrink-0 ${
open ? "rotate-180" : ""
} !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
/>
<p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
{project.name}
</p>
)}
</Disclosure.Button>
</Tooltip>
</div>
{!sidebarCollapse && (
<ExpandMoreOutlined
fontSize="small"
className={`flex-shrink-0 ${
open ? "rotate-180" : ""
} !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
/>
)}
</Disclosure.Button>
</Tooltip>
{!sidebarCollapse && (
<CustomMenu
className="hidden group-hover:block flex-shrink-0"
buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
ellipsis
>
{!shortContextMenu && isAdmin && (
<CustomMenu.MenuItem onClick={handleDeleteProject}>
<span className="flex items-center justify-start gap-2 ">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem>
)}
{!project.is_favorite && (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem>
)}
{project.is_favorite && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy project link</span>
{!sidebarCollapse && (
<CustomMenu
className="hidden group-hover:block flex-shrink-0"
buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
ellipsis
>
{!shortContextMenu && isAdmin && (
<CustomMenu.MenuItem onClick={handleDeleteProject}>
<span className="flex items-center justify-start gap-2 ">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem>
)}
{!project.is_favorite && (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem>
)}
{project.is_favorite && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy project link</span>
</span>
</CustomMenu.MenuItem>
{/* publish project settings */}
{isAdmin && (
<CustomMenu.MenuItem
onClick={() => projectPublish.handleProjectModal(project?.id)}
>
<div className="flex-shrink-0 relative flex items-center justify-start gap-2">
<div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
<Icon iconName="ios_share" className="!text-base" />
</div>
<div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
{/* publish project settings */}
{isAdmin && (
<CustomMenu.MenuItem
onClick={() => projectPublish.handleProjectModal(project?.id)}
>
<div className="flex-shrink-0 relative flex items-center justify-start gap-2">
<div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
<Icon iconName="ios_share" className="!text-base" />
</div>
</CustomMenu.MenuItem>
)}
<div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
</div>
</CustomMenu.MenuItem>
)}
{project.archive_in > 0 && (
<CustomMenu.MenuItem
onClick={() =>
router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)
}
>
<div className="flex items-center justify-start gap-2">
<ArchiveOutlined fontSize="small" />
<span>Archived Issues</span>
</div>
</CustomMenu.MenuItem>
)}
{project.archive_in > 0 && (
<CustomMenu.MenuItem
onClick={() =>
router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)
router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)
}
>
<div className="flex items-center justify-start gap-2">
<Icon iconName="settings" className="!text-base !leading-4" />
<span>Settings</span>
<ArchiveOutlined fontSize="small" />
<span>Archived Issues</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
)}
</div>
)}
<CustomMenu.MenuItem
onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
>
<div className="flex items-center justify-start gap-2">
<Icon iconName="settings" className="!text-base !leading-4" />
<span>Settings</span>
</div>
</CustomMenu.MenuItem>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel
className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}
>
{navigation(workspaceSlug as string, project?.id).map((item) => {
if (
(item.name === "Cycles" && !project.cycle_view) ||
(item.name === "Modules" && !project.module_view) ||
(item.name === "Views" && !project.issue_views_view) ||
(item.name === "Pages" && !project.page_view)
)
return;
{/* leave project */}
{isViewerOrGuest && (
<CustomMenu.MenuItem
onClick={() =>
projectStore.handleProjectLeaveModal({
id: project?.id,
name: project?.name,
workspaceSlug: workspaceSlug as string,
})
}
>
<div className="flex items-center justify-start gap-2">
<Icon iconName="logout" className="!text-base !leading-4" />
<span>Leave Project</span>
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
)}
</div>
return (
<Link key={item.name} href={item.href}>
<a className="block w-full">
<Tooltip
tooltipContent={`${project?.name}: ${item.name}`}
position="right"
className="ml-2"
disabled={!sidebarCollapse}
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
{navigation(workspaceSlug as string, project?.id).map((item) => {
if (
(item.name === "Cycles" && !project.cycle_view) ||
(item.name === "Modules" && !project.module_view) ||
(item.name === "Views" && !project.issue_views_view) ||
(item.name === "Pages" && !project.page_view)
)
return;
return (
<Link key={item.name} href={item.href}>
<a className="block w-full">
<Tooltip
tooltipContent={`${project?.name}: ${item.name}`}
position="right"
className="ml-2"
disabled={!sidebarCollapse}
>
<div
className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
router.asPath.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${sidebarCollapse ? "justify-center" : ""}`}
>
<div
className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
router.asPath.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${sidebarCollapse ? "justify-center" : ""}`}
>
<item.Icon
sx={{
fontSize: 18,
}}
/>
{!sidebarCollapse && item.name}
</div>
</Tooltip>
</a>
</Link>
);
})}
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
);
}
);
<item.Icon
sx={{
fontSize: 18,
}}
/>
{!sidebarCollapse && item.name}
</div>
</Tooltip>
</a>
</Link>
);
})}
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
);
});

View File

@ -9,6 +9,7 @@ import {
} from "components/workspace";
import { ProjectSidebarList } from "components/project";
import { PublishProjectModal } from "components/project/publish-project/modal";
import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx store
@ -38,7 +39,10 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
<ProjectSidebarList />
<WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
</div>
{/* publish project modal */}
<PublishProjectModal />
{/* project leave modal */}
<ConfirmProjectLeaveModal />
</div>
);
});

View File

@ -21,7 +21,7 @@ const { NEXT_PUBLIC_API_BASE_URL } = process.env;
const trackEvent =
process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
class ProjectServices extends APIService {
export class ProjectServices extends APIService {
constructor() {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
@ -142,6 +142,30 @@ class ProjectServices extends APIService {
});
}
async leaveProject(
workspaceSlug: string,
projectId: string,
user: ICurrentUserResponse
): Promise<any> {
return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
.then((response) => {
if (trackEvent)
trackEventServices.trackProjectEvent(
"PROJECT_MEMBER_LEAVE",
{
workspaceSlug,
projectId,
...response?.data,
},
user
);
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async joinProjects(data: any): Promise<any> {
return this.post("/api/users/me/invitations/projects/", data)
.then((response) => response?.data)

View File

@ -35,7 +35,8 @@ type ProjectEventType =
| "CREATE_PROJECT"
| "UPDATE_PROJECT"
| "DELETE_PROJECT"
| "PROJECT_MEMBER_INVITE";
| "PROJECT_MEMBER_INVITE"
| "PROJECT_MEMBER_LEAVE";
type IssueEventType = "ISSUE_CREATE" | "ISSUE_UPDATE" | "ISSUE_DELETE";
@ -163,7 +164,11 @@ class TrackEventServices extends APIService {
user: ICurrentUserResponse | undefined
): Promise<any> {
let payload: any;
if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE")
if (
eventName !== "DELETE_PROJECT" &&
eventName !== "PROJECT_MEMBER_INVITE" &&
eventName !== "PROJECT_MEMBER_LEAVE"
)
payload = {
workspaceId: data?.workspace_detail?.id,
workspaceName: data?.workspace_detail?.name,

86
web/store/project.ts Normal file
View File

@ -0,0 +1,86 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "./root";
// services
import { ProjectServices } from "services/project.service";
export interface IProject {
id: string;
name: string;
workspaceSlug: string;
}
export interface IProjectStore {
loader: boolean;
error: any | null;
projectLeaveModal: boolean;
projectLeaveDetails: IProject | any;
handleProjectLeaveModal: (project: IProject | null) => void;
leaveProject: (workspace_slug: string, project_slug: string, user: any) => Promise<void>;
}
class ProjectStore implements IProjectStore {
loader: boolean = false;
error: any | null = null;
projectLeaveModal: boolean = false;
projectLeaveDetails: IProject | null = null;
// root store
rootStore;
// service
projectService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable,
error: observable,
projectLeaveModal: observable,
projectLeaveDetails: observable.ref,
// action
handleProjectLeaveModal: action,
leaveProject: action,
// computed
});
this.rootStore = _rootStore;
this.projectService = new ProjectServices();
}
handleProjectLeaveModal = (project: IProject | null = null) => {
if (project && project?.id) {
this.projectLeaveModal = !this.projectLeaveModal;
this.projectLeaveDetails = project;
} else {
this.projectLeaveModal = !this.projectLeaveModal;
this.projectLeaveDetails = null;
}
};
leaveProject = async (workspace_slug: string, project_slug: string, user: any) => {
try {
this.loader = true;
this.error = null;
const response = await this.projectService.leaveProject(workspace_slug, project_slug, user);
runInAction(() => {
this.loader = false;
this.error = null;
});
return response;
} catch (error) {
this.loader = false;
this.error = error;
return error;
}
};
}
export default ProjectStore;

View File

@ -3,20 +3,23 @@ import { enableStaticRendering } from "mobx-react-lite";
// store imports
import UserStore from "./user";
import ThemeStore from "./theme";
import IssuesStore from "./issues";
import ProjectStore, { IProjectStore } from "./project";
import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
import IssuesStore from "./issues";
enableStaticRendering(typeof window === "undefined");
export class RootStore {
user;
theme;
project: IProjectStore;
projectPublish: IProjectPublishStore;
issues: IssuesStore;
constructor() {
this.user = new UserStore(this);
this.theme = new ThemeStore(this);
this.project = new ProjectStore(this);
this.projectPublish = new ProjectPublishStore(this);
this.issues = new IssuesStore(this);
}