forked from github/plane
Merge branch 'develop' of github.com:makeplane/plane into chore/instance
This commit is contained in:
pablohashescobar
commit
59da03e23e
54
.github/workflows/build-branch.yml
vendored
54
.github/workflows/build-branch.yml
vendored
@ -15,7 +15,7 @@ env:
|
||||
TARGET_BRANCH: ${{ github.event.pull_request.base.ref }}
|
||||
|
||||
jobs:
|
||||
branch_build_and_push:
|
||||
branch_build_setup:
|
||||
if: ${{ (github.event_name == 'pull_request' && github.event.action =='closed' && github.event.pull_request.merged == true) }}
|
||||
name: Build-Push Web/Space/API/Proxy Docker Image
|
||||
runs-on: ubuntu-20.04
|
||||
@ -59,18 +59,18 @@ jobs:
|
||||
|
||||
branch_build_push_frontend:
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [branch_build_and_push]
|
||||
needs: [branch_build_setup]
|
||||
env:
|
||||
FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
|
||||
FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
|
||||
steps:
|
||||
- name: Set Frontend Docker Tag
|
||||
run: |
|
||||
if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:latest"
|
||||
elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:preview"
|
||||
if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:latest
|
||||
elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:preview
|
||||
else
|
||||
TAG=${{ env.FRONTEND_TAG }}"
|
||||
TAG=${{ env.FRONTEND_TAG }}
|
||||
fi
|
||||
echo "FRONTEND_TAG=${TAG}" >> $GITHUB_ENV
|
||||
- name: Set up Docker Buildx
|
||||
@ -101,18 +101,18 @@ jobs:
|
||||
|
||||
branch_build_push_space:
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [branch_build_and_push]
|
||||
needs: [branch_build_setup]
|
||||
env:
|
||||
SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
|
||||
SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
|
||||
steps:
|
||||
- name: Set Space Docker Tag
|
||||
run: |
|
||||
if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest"
|
||||
elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:preview"
|
||||
if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
|
||||
elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:preview
|
||||
else
|
||||
TAG=${{ env.SPACE_TAG }}"
|
||||
TAG=${{ env.SPACE_TAG }}
|
||||
fi
|
||||
echo "SPACE_TAG=${TAG}" >> $GITHUB_ENV
|
||||
- name: Set up Docker Buildx
|
||||
@ -143,16 +143,16 @@ jobs:
|
||||
|
||||
branch_build_push_backend:
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [branch_build_and_push]
|
||||
needs: [branch_build_setup]
|
||||
env:
|
||||
BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
|
||||
BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
|
||||
steps:
|
||||
- name: Set Backend Docker Tag
|
||||
run: |
|
||||
if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:latest"
|
||||
elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:preview",${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:preview"
|
||||
if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:latest
|
||||
elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:preview
|
||||
else
|
||||
TAG=${{ env.BACKEND_TAG }}
|
||||
fi
|
||||
@ -185,16 +185,16 @@ jobs:
|
||||
|
||||
branch_build_push_proxy:
|
||||
runs-on: ubuntu-20.04
|
||||
needs: [branch_build_and_push]
|
||||
needs: [branch_build_setup]
|
||||
env:
|
||||
PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
|
||||
PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
|
||||
steps:
|
||||
- name: Set Proxy Docker Tag
|
||||
run: |
|
||||
if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:latest"
|
||||
elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:preview"
|
||||
if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:latest
|
||||
elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
|
||||
TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:preview
|
||||
else
|
||||
TAG=${{ env.PROXY_TAG }}
|
||||
fi
|
||||
|
||||
@ -76,7 +76,6 @@ NEXT_PUBLIC_ENABLE_OAUTH=0
|
||||
# Backend
|
||||
# Debug value for api server use it as 0 for production use
|
||||
DEBUG=0
|
||||
DJANGO_SETTINGS_MODULE="plane.settings.selfhosted" # deprecated
|
||||
|
||||
# Error logs
|
||||
SENTRY_DSN=""
|
||||
|
||||
@ -35,7 +35,6 @@ services:
|
||||
command: ./bin/takeoff
|
||||
environment:
|
||||
- DEBUG=${DEBUG:-0}
|
||||
- DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
|
||||
- SENTRY_DSN=${SENTRY_DSN:-""}
|
||||
- PGUSER=${PGUSER:-plane}
|
||||
- PGPASSWORD=${PGPASSWORD:-plane}
|
||||
@ -84,7 +83,6 @@ services:
|
||||
command: ./bin/worker
|
||||
environment:
|
||||
- DEBUG=${DEBUG:-0}
|
||||
- DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
|
||||
- SENTRY_DSN=${SENTRY_DSN:-""}
|
||||
- PGUSER=${PGUSER:-plane}
|
||||
- PGPASSWORD=${PGPASSWORD:-plane}
|
||||
@ -131,7 +129,6 @@ services:
|
||||
command: ./bin/beat
|
||||
environment:
|
||||
- DEBUG=${DEBUG:-0}
|
||||
- DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
|
||||
- SENTRY_DSN=${SENTRY_DSN:-""}
|
||||
- PGUSER=${PGUSER:-plane}
|
||||
- PGPASSWORD=${PGPASSWORD:-plane}
|
||||
|
||||
@ -7,7 +7,6 @@ API_REPLICAS=1
|
||||
NGINX_PORT=80
|
||||
WEB_URL=http://localhost
|
||||
DEBUG=0
|
||||
DJANGO_SETTINGS_MODULE=plane.settings.selfhosted # deprecated
|
||||
NEXT_PUBLIC_ENABLE_OAUTH=0
|
||||
NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
|
||||
SENTRY_DSN=""
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// hooks
|
||||
// import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Input } from "components/ui";
|
||||
import { Button } from "@plane/ui";
|
||||
@ -30,10 +24,9 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
|
||||
});
|
||||
|
||||
const forgotPassword = async (formData: any) => {
|
||||
const payload = {
|
||||
email: formData.email,
|
||||
};
|
||||
|
||||
// const payload = {
|
||||
// email: formData.email,
|
||||
// };
|
||||
// await userService
|
||||
// .forgotPassword(payload)
|
||||
// .then(() =>
|
||||
@ -60,7 +53,7 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
|
||||
<form className="mx-auto mt-10 w-full space-y-4 sm:w-[360px]" onSubmit={handleSubmit(forgotPassword)}>
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
id="email"
|
||||
@ -73,11 +66,11 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
|
||||
) || "Email address is not valid",
|
||||
})}
|
||||
placeholder="Enter registered email address.."
|
||||
className="border-custom-border-300 h-[46px]"
|
||||
className="h-[46px] border-custom-border-300"
|
||||
/>
|
||||
{errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
|
||||
</div>
|
||||
<div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
|
||||
<div className="mt-5 flex flex-col-reverse items-center gap-2 sm:flex-row">
|
||||
<Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
|
||||
Go Back
|
||||
</Button>
|
||||
|
||||
@ -1,19 +1,10 @@
|
||||
import { useRouter } from "next/router";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx hook
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// interfaces
|
||||
import { IIssueState } from "types/issue";
|
||||
// constants
|
||||
import { issueGroupFilter } from "constants/data";
|
||||
|
||||
export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
|
||||
const store = useMobxStore();
|
||||
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
|
||||
|
||||
const stateGroup = issueGroupFilter(state.group);
|
||||
|
||||
const removeStateFromFilter = () => {
|
||||
@ -28,12 +19,12 @@ export const RenderIssueState = observer(({ state }: { state: IIssueState }) =>
|
||||
if (stateGroup === null) return <></>;
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
|
||||
<div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
|
||||
<div className="flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
|
||||
{/* <stateGroup.icon /> */}
|
||||
</div>
|
||||
<div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
|
||||
<div className="whitespace-nowrap text-xs font-medium">{state?.name}</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
|
||||
className="flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
|
||||
onClick={removeStateFromFilter}
|
||||
>
|
||||
<span className="material-symbols-rounded text-xs">close</span>
|
||||
|
||||
@ -7,7 +7,7 @@ import { useRouter } from "next/router";
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { NavbarSearch } from "./search";
|
||||
// import { NavbarSearch } from "./search";
|
||||
import { NavbarIssueBoardView } from "./issue-board-view";
|
||||
import { NavbarTheme } from "./theme";
|
||||
// ui
|
||||
@ -83,45 +83,43 @@ const IssueNavbar = observer(() => {
|
||||
}, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
|
||||
|
||||
return (
|
||||
<div className="px-5 relative w-full flex items-center gap-4">
|
||||
<div className="relative flex w-full items-center gap-4 px-5">
|
||||
{/* project detail */}
|
||||
<div className="flex-shrink-0 flex items-center gap-2">
|
||||
<div className="w-4 h-4 flex justify-center items-center">
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
<div className="flex h-4 w-4 items-center justify-center">
|
||||
{projectStore?.project && projectStore?.project?.emoji ? (
|
||||
renderEmoji(projectStore?.project?.emoji)
|
||||
) : (
|
||||
<Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
|
||||
<Image src="/plane-logo.webp" alt="plane logo" className="h-[24px] w-[24px]" height="24" width="24" />
|
||||
)}
|
||||
</div>
|
||||
<div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
|
||||
<div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
|
||||
{projectStore?.project?.name || `...`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* issue search bar */}
|
||||
<div className="w-full">
|
||||
<NavbarSearch />
|
||||
</div>
|
||||
<div className="w-full">{/* <NavbarSearch /> */}</div>
|
||||
|
||||
{/* issue views */}
|
||||
<div className="flex-shrink-0 relative flex items-center gap-1 transition-all ease-in-out delay-150">
|
||||
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
|
||||
<NavbarIssueBoardView />
|
||||
</div>
|
||||
|
||||
{/* theming */}
|
||||
<div className="flex-shrink-0 relative">
|
||||
<div className="relative flex-shrink-0">
|
||||
<NavbarTheme />
|
||||
</div>
|
||||
|
||||
{user ? (
|
||||
<div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
|
||||
<div className="flex items-center gap-2 rounded border border-custom-border-200 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">
|
||||
<div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
|
||||
{(user.display_name ?? "A")[0]}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -7,28 +7,30 @@ import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
|
||||
export const NavbarIssueBoardView = observer(() => {
|
||||
const { project: projectStore, issue: issueStore }: RootStore = useMobxStore();
|
||||
|
||||
const {
|
||||
project: { viewOptions, setActiveBoard, activeBoard },
|
||||
}: RootStore = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
|
||||
|
||||
const handleCurrentBoardView = (boardView: string) => {
|
||||
projectStore.setActiveBoard(boardView);
|
||||
setActiveBoard(boardView);
|
||||
router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{projectStore?.viewOptions &&
|
||||
Object.keys(projectStore?.viewOptions).map((viewKey: string) => {
|
||||
if (projectStore?.viewOptions[viewKey]) {
|
||||
{viewOptions &&
|
||||
Object.keys(viewOptions).map((viewKey: string) => {
|
||||
if (viewOptions[viewKey]) {
|
||||
return (
|
||||
<div
|
||||
key={viewKey}
|
||||
className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer ${
|
||||
viewKey === projectStore?.activeBoard
|
||||
className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
|
||||
viewKey === activeBoard
|
||||
? `bg-custom-background-80 text-custom-text-200`
|
||||
: `hover:bg-custom-background-80 text-custom-text-300`
|
||||
: `text-custom-text-300 hover:bg-custom-background-80`
|
||||
}`}
|
||||
onClick={() => handleCurrentBoardView(viewKey)}
|
||||
title={viewKey}
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
|
||||
export const NavbarIssueView = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
|
||||
return <div>View</div>;
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
|
||||
export const NavbarSearch = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
|
||||
return <div> </div>;
|
||||
});
|
||||
@ -1,7 +1,4 @@
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// lib
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import {
|
||||
PeekOverviewHeader,
|
||||
@ -22,19 +19,19 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
||||
const { handleClose, issueDetails } = props;
|
||||
|
||||
return (
|
||||
<div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
|
||||
<div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
|
||||
<div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="w-full p-5">
|
||||
<PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
|
||||
</div>
|
||||
{issueDetails ? (
|
||||
<div className="h-full w-full px-6 overflow-y-auto">
|
||||
<div className="h-full w-full overflow-y-auto px-6">
|
||||
{/* issue title and description */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueDetails issueDetails={issueDetails} />
|
||||
</div>
|
||||
{/* divider */}
|
||||
<div className="h-[1] w-full border-t border-custom-border-200 my-5" />
|
||||
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity issueDetails={issueDetails} />
|
||||
@ -43,7 +40,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
||||
) : (
|
||||
<Loader className="px-6">
|
||||
<Loader.Item height="30px" />
|
||||
<div className="space-y-2 mt-3">
|
||||
<div className="mt-3 space-y-2">
|
||||
<Loader.Item height="20px" width="70%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
|
||||
@ -18,16 +18,18 @@ type Props = {
|
||||
issueDetails: IIssue;
|
||||
};
|
||||
|
||||
export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
|
||||
export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug } = router.query;
|
||||
|
||||
const { issueDetails: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
|
||||
|
||||
// store
|
||||
const {
|
||||
issueDetails: issueDetailStore,
|
||||
project: projectStore,
|
||||
user: { currentUser },
|
||||
} = useMobxStore();
|
||||
const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
|
||||
|
||||
const user = userStore?.currentUser;
|
||||
|
||||
return (
|
||||
<div className="pb-10">
|
||||
<h4 className="font-medium">Activity</h4>
|
||||
@ -38,17 +40,17 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
|
||||
<CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
|
||||
))}
|
||||
</div>
|
||||
{user ? (
|
||||
{currentUser ? (
|
||||
<>
|
||||
{projectStore.deploySettings?.comments && (
|
||||
<div className="mt-4">
|
||||
<AddComment disabled={!userStore.currentUser} />
|
||||
<AddComment disabled={!currentUser} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded mt-4">
|
||||
<p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
|
||||
<div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
|
||||
<p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
|
||||
<Icon iconName="lock" className="!text-sm" />
|
||||
Sign in to add your comment
|
||||
</p>
|
||||
|
||||
@ -13,16 +13,15 @@ import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
type Props = {};
|
||||
|
||||
export const IssuePeekOverview: React.FC<Props> = observer((props) => {
|
||||
export const IssuePeekOverview: React.FC<Props> = observer(() => {
|
||||
// states
|
||||
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
|
||||
const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, peekId, board } = router.query;
|
||||
// store
|
||||
const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
|
||||
|
||||
const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
@ -75,7 +74,7 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
|
||||
<Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
|
||||
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
@ -105,7 +104,7 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
|
||||
>
|
||||
<Dialog.Panel>
|
||||
<div
|
||||
className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
|
||||
className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-custom-background-100 shadow-custom-shadow-xl transition-all duration-300 ${
|
||||
issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
|
||||
// next-themes
|
||||
import { useTheme } from "next-themes";
|
||||
// tooltip2
|
||||
@ -50,9 +49,9 @@ export const Tooltip: React.FC<Props> = ({
|
||||
hoverCloseDelay={closeDelay}
|
||||
content={
|
||||
<div
|
||||
className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md border border-custom-border-200 ${
|
||||
className={`relative z-50 max-w-xs gap-1 rounded-md border border-custom-border-200 p-2 text-xs shadow-md ${
|
||||
theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
|
||||
} break-words overflow-hidden ${className}`}
|
||||
} overflow-hidden break-words ${className}`}
|
||||
>
|
||||
{tooltipHeading && (
|
||||
<h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
|
||||
|
||||
@ -10,7 +10,7 @@ export const LoginView = observer(() => {
|
||||
return (
|
||||
<>
|
||||
{userStore?.loader ? (
|
||||
<div className="relative w-screen h-screen flex justify-center items-center">Loading</div>
|
||||
<div className="relative flex h-screen w-screen items-center justify-center">Loading</div> // TODO: Add spinner instead
|
||||
) : (
|
||||
<>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
|
||||
)}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
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";
|
||||
@ -20,7 +17,7 @@ import SomethingWentWrongImage from "public/something-went-wrong.svg";
|
||||
|
||||
export const ProjectDetailsView = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, states, labels, priorities, board, peekId } = router.query;
|
||||
const { workspace_slug, project_slug, states, labels, priorities, peekId } = router.query;
|
||||
|
||||
const {
|
||||
issue: issueStore,
|
||||
@ -53,22 +50,22 @@ export const ProjectDetailsView = observer(() => {
|
||||
}, [peekId, issueDetailStore, project_slug, workspace_slug]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
<div className="relative h-full w-full overflow-hidden">
|
||||
{workspace_slug && <IssuePeekOverview />}
|
||||
|
||||
{issueStore?.loader && !issueStore.issues ? (
|
||||
<div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
|
||||
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
{issueStore?.error ? (
|
||||
<div className="h-full w-full grid place-items-center p-6">
|
||||
<div className="grid h-full w-full 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">
|
||||
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
|
||||
<div className="grid h-32 w-32 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>
|
||||
<h1 className="mt-12 text-3xl font-semibold">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>
|
||||
@ -76,12 +73,12 @@ export const ProjectDetailsView = observer(() => {
|
||||
projectStore?.activeBoard && (
|
||||
<>
|
||||
{projectStore?.activeBoard === "list" && (
|
||||
<div className="relative w-full h-full overflow-y-auto">
|
||||
<div className="relative h-full w-full overflow-y-auto">
|
||||
<IssueListView />
|
||||
</div>
|
||||
)}
|
||||
{projectStore?.activeBoard === "kanban" && (
|
||||
<div className="relative w-full h-full mx-auto p-5">
|
||||
<div className="relative mx-auto h-full w-full p-5">
|
||||
<IssueKanbanView />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
// next imports
|
||||
import { useRouter } from "next/router";
|
||||
@ -15,12 +13,6 @@ const MobxStoreInit = () => {
|
||||
const router = useRouter();
|
||||
const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
|
||||
|
||||
// useEffect(() => {
|
||||
// store.issue.userSelectedLabels = labels || [];
|
||||
// store.issue.userSelectedPriorities = priorities || [];
|
||||
// store.issue.userSelectedStates = states || [];
|
||||
// }, [store.issue]);
|
||||
|
||||
useEffect(() => {
|
||||
const authToken = Cookie.get("accessToken") || null;
|
||||
if (authToken) userStore.fetchCurrentUser();
|
||||
|
||||
@ -17,10 +17,10 @@
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@headlessui/react": "^1.7.13",
|
||||
"@mui/material": "^5.14.1",
|
||||
"@plane/document-editor": "*",
|
||||
"@plane/lite-text-editor": "*",
|
||||
"@plane/rich-text-editor": "*",
|
||||
"@plane/ui": "*",
|
||||
"@plane/document-editor": "*",
|
||||
"axios": "^1.3.4",
|
||||
"clsx": "^2.0.0",
|
||||
"js-cookie": "^3.0.1",
|
||||
@ -28,7 +28,7 @@
|
||||
"lucide-react": "^0.293.0",
|
||||
"mobx": "^6.10.0",
|
||||
"mobx-react-lite": "^4.0.3",
|
||||
"next": "12.3.2",
|
||||
"next": "^14.0.3",
|
||||
"next-images": "^1.8.5",
|
||||
"next-themes": "^0.2.1",
|
||||
"nprogress": "^0.2.0",
|
||||
|
||||
@ -5,7 +5,6 @@ import { ThemeProvider } from "next-themes";
|
||||
import "styles/globals.css";
|
||||
import "styles/editor.css";
|
||||
import "styles/table.css";
|
||||
|
||||
// contexts
|
||||
import { ToastContextProvider } from "contexts/toast.context";
|
||||
// mobx store provider
|
||||
|
||||
@ -5,7 +5,7 @@ class MyDocument extends Document {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body className="antialiased bg-custom-background-100 w-100">
|
||||
<body className="w-100 bg-custom-background-100 antialiased">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
@ -74,7 +75,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s get a new password
|
||||
</h1>
|
||||
|
||||
@ -117,16 +118,23 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Create password"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
minLength={8}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-onboarding-text-200 mt-3">
|
||||
<p className="text-xs text-onboarding-text-200 mt-3 pb-2">
|
||||
Whatever you choose now will be your account{"'"}s password until you change it.
|
||||
</p>
|
||||
</div>
|
||||
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
|
||||
{isSubmitting ? "Submitting..." : "Go to workspace"}
|
||||
</Button>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -83,10 +83,10 @@ export const EmailForm: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Get on your flight deck!
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
Sign in with the email you used to sign up for Plane
|
||||
</p>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// ui
|
||||
import { Button, Input } from "@plane/ui";
|
||||
@ -37,12 +38,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">Set a password</h1>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
|
||||
If you{"'"}d to do away with codes, set a password here.
|
||||
If you{"'"}d to do away with codes, set a password here
|
||||
</p>
|
||||
|
||||
<form className="mt-5 sm:w-96 mx-auto">
|
||||
<form className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
@ -65,7 +66,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2.5 mt-4">
|
||||
<div className="grid grid-cols-2 gap-2.5">
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
@ -88,6 +89,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
||||
{isGoingToWorkspace ? "Going to app..." : "Go to workspace"}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click <span className="text-custom-primary-100">Go to workspace</span> above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { XCircle } from "lucide-react";
|
||||
// services
|
||||
@ -184,17 +185,25 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleForgotPassword}
|
||||
className="text-xs font-medium text-right w-full text-custom-primary-100"
|
||||
className="text-xs font-medium text-custom-primary-100"
|
||||
>
|
||||
Forgot your password?
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
|
||||
{isSubmitting ? "Signing in..." : "Go to workspace"}
|
||||
</Button>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -23,6 +23,8 @@ type Props = {
|
||||
handleSignInRedirection: () => Promise<void>;
|
||||
};
|
||||
|
||||
const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
|
||||
|
||||
export const SignInRoot: React.FC<Props> = (props) => {
|
||||
const { handleSignInRedirection } = props;
|
||||
// states
|
||||
@ -72,7 +74,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{signInStep !== ESignInSteps.OPTIONAL_SET_PASSWORD && (
|
||||
{!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
|
||||
<OAuthOptions
|
||||
updateEmail={(newEmail) => setEmail(newEmail)}
|
||||
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { XCircle } from "lucide-react";
|
||||
// services
|
||||
@ -48,6 +49,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||
|
||||
await authService
|
||||
.emailCheck(payload)
|
||||
.then(() =>
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "We have sent a new link to your email.",
|
||||
})
|
||||
)
|
||||
.catch((err) =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
@ -60,15 +68,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Get on your flight deck!
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Get on your flight deck
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
|
||||
We have sent a link to <span className="font-medium text-custom-primary-100">{email},</span> so you can set a
|
||||
We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
|
||||
password
|
||||
</p>
|
||||
|
||||
<form className="mt-5 sm:w-96 mx-auto">
|
||||
<form className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||
<div className="space-y-1">
|
||||
<Controller
|
||||
control={control}
|
||||
@ -103,7 +111,6 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
@ -115,7 +122,12 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||
>
|
||||
{isSendingNewLink ? "Sending new link..." : "Get link again"}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { CornerDownLeft, XCircle } from "lucide-react";
|
||||
// services
|
||||
@ -44,7 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
// timer
|
||||
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer();
|
||||
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
@ -131,11 +132,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Moving to the runway
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
|
||||
Paste the code you got at <span className="font-medium text-custom-primary-100">{email}</span> below.
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Moving to the runway</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||
@ -196,16 +195,19 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
hasError={Boolean(errors.token)}
|
||||
placeholder="gets-sets-fays"
|
||||
placeholder="gets-sets-flys"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRequestNewCode}
|
||||
className={`text-xs text-right w-full text-onboarding-text-200 ${
|
||||
isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100"
|
||||
className={`text-xs ${
|
||||
isRequestNewCodeDisabled
|
||||
? "text-onboarding-text-300"
|
||||
: "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
}`}
|
||||
disabled={isRequestNewCodeDisabled}
|
||||
>
|
||||
@ -216,6 +218,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
: "Request new code"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
@ -226,6 +229,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
>
|
||||
{isSubmitting ? "Signing in..." : "Confirm"}
|
||||
</Button>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click Confirm above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -55,22 +55,10 @@ export const CommandPalette: FC = observer(() => {
|
||||
toggleBulkDeleteIssueModal,
|
||||
isDeleteIssueModalOpen,
|
||||
toggleDeleteIssueModal,
|
||||
|
||||
isAnyModalOpen,
|
||||
createIssueStoreType,
|
||||
} = commandPalette;
|
||||
|
||||
const isAnyModalOpen = Boolean(
|
||||
isCreateIssueModalOpen ||
|
||||
isCreateCycleModalOpen ||
|
||||
isCreatePageModalOpen ||
|
||||
isCreateProjectModalOpen ||
|
||||
isCreateModuleModalOpen ||
|
||||
isCreateViewModalOpen ||
|
||||
isShortcutModalOpen ||
|
||||
isBulkDeleteIssueModalOpen ||
|
||||
isDeleteIssueModalOpen
|
||||
);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: issueDetails } = useSWR(
|
||||
|
||||
@ -1,35 +1,36 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useTheme } from "next-themes";
|
||||
// icons
|
||||
import { Lightbulb } from "lucide-react";
|
||||
// images
|
||||
import signInIssues from "public/onboarding/onboarding-issues.svg";
|
||||
import latestFeatures from "public/onboarding/onboarding-pages.svg";
|
||||
|
||||
export const LatestFeatureBlock = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
|
||||
>
|
||||
<div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className={`text-sm text-left text-onboarding-text-100`}>
|
||||
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}>
|
||||
See new features
|
||||
</span>
|
||||
<p className="text-sm text-left text-onboarding-text-100">
|
||||
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
|
||||
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
|
||||
<div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
|
||||
<div className="h-[90%]">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
src={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -46,7 +46,7 @@ export const NewEmptyState: React.FC<Props> = ({
|
||||
<h3 className="font-semibold text-2xl">{title}</h3>
|
||||
{description && <p className=" text-lg">{description}</p>}
|
||||
<div className="relative w-full max-w-6xl">
|
||||
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
|
||||
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-start relative">
|
||||
|
||||
@ -33,7 +33,10 @@ export interface ICyclesBoardCard {
|
||||
export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
|
||||
const { cycle, workspaceSlug, projectId } = props;
|
||||
// store
|
||||
const { cycle: cycleStore, trackEvent: { setTrackElement } } = useMobxStore();
|
||||
const {
|
||||
cycle: cycleStore,
|
||||
trackEvent: { setTrackElement },
|
||||
} = useMobxStore();
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
// states
|
||||
@ -152,7 +155,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
|
||||
/>
|
||||
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
|
||||
<span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
|
||||
<div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-3 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
@ -268,7 +271,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -153,7 +153,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
projectId={projectId}
|
||||
/>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
|
||||
<span className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-3 w-full truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
@ -262,7 +262,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -2,8 +2,6 @@ import { useCallback, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
@ -17,6 +15,7 @@ import { List, PlusIcon, Sheet } from "lucide-react";
|
||||
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
|
||||
// constants
|
||||
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
|
||||
import { EFilterType } from "store/issues/types";
|
||||
|
||||
const GLOBAL_VIEW_LAYOUTS = [
|
||||
{ key: "list", title: "List", link: "/workspace-views", icon: List },
|
||||
@ -27,73 +26,55 @@ type Props = {
|
||||
activeLayout: "list" | "spreadsheet";
|
||||
};
|
||||
|
||||
const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
|
||||
|
||||
export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
const { activeLayout } = props;
|
||||
|
||||
const [createViewModal, setCreateViewModal] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
const { workspaceSlug } = router.query as { workspaceSlug: string };
|
||||
|
||||
const {
|
||||
globalViewFilters: globalViewFiltersStore,
|
||||
workspaceFilter: workspaceFilterStore,
|
||||
workspace: workspaceStore,
|
||||
workspace: { workspaceLabels },
|
||||
workspaceMember: { workspaceMembers },
|
||||
project: projectStore,
|
||||
} = useMobxStore();
|
||||
project: { workspaceProjects },
|
||||
|
||||
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
|
||||
workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
|
||||
} = useMobxStore();
|
||||
|
||||
const handleFiltersUpdate = useCallback(
|
||||
(key: keyof IIssueFilterOptions, value: string | string[]) => {
|
||||
if (!workspaceSlug || !globalViewId) return;
|
||||
|
||||
const newValues = storedFilters?.[key] ?? [];
|
||||
if (!workspaceSlug) return;
|
||||
const newValues = issueFilters?.filters?.[key] ?? [];
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((val) => {
|
||||
if (!newValues.includes(val)) newValues.push(val);
|
||||
});
|
||||
} else {
|
||||
if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
else newValues.push(value);
|
||||
}
|
||||
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
[key]: newValues,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
|
||||
},
|
||||
[globalViewId, globalViewFiltersStore, storedFilters, workspaceSlug]
|
||||
[workspaceSlug, issueFilters, updateFilters]
|
||||
);
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
const handleDisplayFilters = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
|
||||
display_filters: updatedDisplayFilter,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
|
||||
},
|
||||
[workspaceFilterStore, workspaceSlug]
|
||||
[workspaceSlug, updateFilters]
|
||||
);
|
||||
|
||||
const handleDisplayPropertiesUpdate = useCallback(
|
||||
const handleDisplayProperties = useCallback(
|
||||
(property: Partial<IIssueDisplayProperties>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
|
||||
display_properties: property,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.DISPLAY_PROPERTIES, property);
|
||||
},
|
||||
[workspaceFilterStore, workspaceSlug]
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
|
||||
workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
|
||||
[workspaceSlug, updateFilters]
|
||||
);
|
||||
|
||||
return (
|
||||
@ -137,32 +118,31 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeLayout === "spreadsheet" && (
|
||||
<>
|
||||
{!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
|
||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||
<FilterSelection
|
||||
filters={storedFilters ?? {}}
|
||||
handleFiltersUpdate={handleFiltersUpdate}
|
||||
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
||||
labels={workspaceStore.workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member) ?? undefined}
|
||||
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
|
||||
filters={issueFilters?.filters ?? {}}
|
||||
handleFiltersUpdate={handleFiltersUpdate}
|
||||
labels={workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
projects={workspaceProjects ?? undefined}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
)}
|
||||
|
||||
<FiltersDropdown title="Display" placement="bottom-end">
|
||||
<DisplayFiltersSelection
|
||||
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
|
||||
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
|
||||
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
|
||||
handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
|
||||
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
|
||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||
handleDisplayFiltersUpdate={handleDisplayFilters}
|
||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||
handleDisplayPropertiesUpdate={handleDisplayProperties}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
|
||||
New View
|
||||
</Button>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus } from "lucide-react";
|
||||
@ -15,18 +14,16 @@ export const ProjectViewsHeader: React.FC = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// states
|
||||
const [createViewModal, setCreateViewModal] = useState(false);
|
||||
|
||||
const { project: projectStore } = useMobxStore();
|
||||
const { project: projectStore, commandPalette } = useMobxStore();
|
||||
const { currentProjectDetails } = projectStore;
|
||||
|
||||
return (
|
||||
<>
|
||||
{workspaceSlug && projectId && (
|
||||
<CreateUpdateProjectViewModal
|
||||
isOpen={createViewModal}
|
||||
onClose={() => setCreateViewModal(false)}
|
||||
isOpen={commandPalette.isCreateViewModalOpen}
|
||||
onClose={() => commandPalette.toggleCreateViewModal(false)}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
/>
|
||||
@ -69,7 +66,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
|
||||
variant="primary"
|
||||
size="sm"
|
||||
prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
|
||||
onClick={() => setCreateViewModal(true)}
|
||||
onClick={() => commandPalette.toggleCreateViewModal(true)}
|
||||
>
|
||||
Create View
|
||||
</Button>
|
||||
|
||||
@ -27,7 +27,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
|
||||
<span>
|
||||
<div
|
||||
id={issue.id}
|
||||
className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-200 hover:bg-custom-primary/5 ${
|
||||
@ -91,7 +90,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
@ -98,12 +98,12 @@ export const InstanceHelpSection: FC = () => {
|
||||
if (href)
|
||||
return (
|
||||
<Link href={href} key={name} target="_blank">
|
||||
<span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
|
||||
<div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
|
||||
<div className="grid place-items-center flex-shrink-0">
|
||||
<Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
|
||||
</div>
|
||||
<span className="text-xs">{name}</span>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
else
|
||||
|
||||
@ -67,12 +67,10 @@ export const InstanceAdminRestriction: FC<InstanceAdminRestrictionProps> = ({ re
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<span>
|
||||
<Button variant="primary" size="sm">
|
||||
<LayoutGrid width={16} height={16} />
|
||||
To the workspace
|
||||
</Button>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
// image
|
||||
// images
|
||||
import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
|
||||
import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
|
||||
import PlaneDarkLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
|
||||
import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
|
||||
|
||||
export const InstanceNotReady = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneDarkLogo;
|
||||
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
|
||||
<div className={`h-screen w-full pt-24`}>
|
||||
<div className="h-auto bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 p-4 rounded-md mx-auto shadow-sm border border-custom-border-100 ">
|
||||
<div className={`relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-md`}>
|
||||
<div className="h-full w-full pt-24">
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-100">
|
||||
<div className="relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md">
|
||||
<div className="flex items-center py-10 justify-center">
|
||||
<Image src={planeLogo} className="h-44 w-full" alt="image" />
|
||||
<Image src={planeLogo} className="h-44 w-full" alt="Plane logo" />
|
||||
</div>
|
||||
<div className="mt-20">
|
||||
<Image src={instanceNotReady} className="h-46 w-full" alt="image" />
|
||||
<Image src={instanceNotReady} className="h-56 w-full" alt="Instance not ready" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-5 items-center py-12 pb-20 w-full">
|
||||
<h3 className="text-2xl font-medium">Your Plane instance isn’t ready yet</h3>
|
||||
<h3 className="text-2xl font-medium">Your Plane instance isn{"'"}t ready yet</h3>
|
||||
<p className="text-sm">Ask your Instance Admin to complete set-up first.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,43 +1,66 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
import { UserCog2 } from "lucide-react";
|
||||
// image
|
||||
// images
|
||||
import instanceSetupDone from "public/instance-setup-done.svg";
|
||||
import PlaneLogo from "public/plane-logos/blue-without-text.png";
|
||||
import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
|
||||
import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export const InstanceSetupDone = () => (
|
||||
<div className="h-screen w-full overflow-hidden">
|
||||
<div className={`bg-onboarding-gradient-100 h-screen w-full pt-12`}>
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div
|
||||
className={`flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-auto`}
|
||||
>
|
||||
<div className="flex items-center gap-5 py-10 justify-center">
|
||||
<Image src={PlaneLogo} height={44} width={44} alt="image" />
|
||||
<span className="text-4xl font-semibold">To the stratosphere now!</span>
|
||||
export const InstanceSetupDone = () => {
|
||||
// states
|
||||
const [isRedirecting, setIsRedirecting] = useState(false);
|
||||
// next-themes
|
||||
const { resolvedTheme } = useTheme();
|
||||
// mobx store
|
||||
const {
|
||||
instance: { fetchInstanceInfo },
|
||||
} = useMobxStore();
|
||||
|
||||
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
|
||||
|
||||
const redirectToGodMode = async () => {
|
||||
setIsRedirecting(true);
|
||||
|
||||
await fetchInstanceInfo().finally(() => setIsRedirecting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div className="bg-onboarding-gradient-100 h-full w-full pt-12 overflow-hidden">
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 overflow-hidden">
|
||||
<div className="flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-y-auto pb-8">
|
||||
<div className="flex py-10 justify-center">
|
||||
<div className="h-[30px]">
|
||||
<Image src={planeLogo} className="h-full w-full" alt="Plane logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center">
|
||||
<Image src={instanceSetupDone} height={360} width={444} alt="image" />
|
||||
<div className="grid place-items-center my-8">
|
||||
<div className="w-[444px]">
|
||||
<Image src={instanceSetupDone} className="h-full w-full" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-8 items-center py-12 w-full">
|
||||
<span className="text-xl font-medium">
|
||||
<div className="flex flex-col gap-8 items-center w-full sm:px-4">
|
||||
<div className="bg-purple-500/20 border border-purple-500 py-2.5 px-3 rounded text-center space-y-3">
|
||||
<h6 className="text-base font-semibold">
|
||||
Your instance is now ready for more security, more controls, and more intelligence.
|
||||
</span>
|
||||
<Button size="lg" prependIcon={<UserCog2 />}>
|
||||
Go to God Mode
|
||||
</h6>
|
||||
<p className="text-xs font-medium">
|
||||
Use this wisely. Remember, with great power comes great responsibility.
|
||||
</p>
|
||||
</div>
|
||||
<Button size="lg" prependIcon={<UserCog2 />} onClick={redirectToGodMode} loading={isRedirecting}>
|
||||
{isRedirecting ? "Redirecting..." : "Go to God Mode"}
|
||||
</Button>
|
||||
|
||||
<div className="flex p-2.5 text-custom-primary-100 bg-custom-primary-10 border border-custom-primary-100 text-sm text-left mx-auto rounded">
|
||||
Use this wisely. Remember, with great power comes great responsibility.🕷️
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FC } from "react";
|
||||
import { FC, useState } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { Input, Button } from "@plane/ui";
|
||||
@ -24,6 +24,8 @@ export interface IInstanceSetupEmailCodeForm {
|
||||
|
||||
export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => {
|
||||
const { handleNextStep, email, moveBack } = props;
|
||||
// states
|
||||
const [isResendingCode, setIsResendingCode] = useState(false);
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
@ -40,10 +42,10 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
|
||||
const { setToastAlert } = useToast();
|
||||
const { timer, setTimer } = useTimer(30);
|
||||
// computed
|
||||
const isResendDisabled = timer > 0 || isSubmitting;
|
||||
const isResendDisabled = timer > 0 || isResendingCode;
|
||||
|
||||
const handleEmailCodeFormSubmit = (formValues: InstanceSetupEmailCodeFormValues) =>
|
||||
authService
|
||||
const handleEmailCodeFormSubmit = async (formValues: InstanceSetupEmailCodeFormValues) =>
|
||||
await authService
|
||||
.instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
|
||||
.then(() => {
|
||||
reset();
|
||||
@ -51,42 +53,40 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
title: "Oops!",
|
||||
type: "error",
|
||||
message: err?.error,
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
|
||||
const resendMagicCode = () => {
|
||||
setTimer(30);
|
||||
authService
|
||||
const resendMagicCode = async () => {
|
||||
setIsResendingCode(true);
|
||||
|
||||
await authService
|
||||
.instanceAdminEmailCode({ email })
|
||||
.then(() => {
|
||||
// setCodeResending(false);
|
||||
setTimer(30);
|
||||
})
|
||||
.then(() => setTimer(30))
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
title: "Oops!",
|
||||
type: "error",
|
||||
message: err?.error,
|
||||
});
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
})
|
||||
.finally(() => setIsResendingCode(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
|
||||
<div className="pb-2">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Let’s secure your instance
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s secure your instance
|
||||
</h1>
|
||||
<div className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
<p>Paste the code you got at </p>
|
||||
<span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{email}</span>
|
||||
<span className="text-onboarding-text-200">below.</span>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
Paste the code you got at
|
||||
<br />
|
||||
<span className="text-custom-primary-100 font-semibold">{email}</span> below.
|
||||
</p>
|
||||
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
|
||||
<div>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
@ -98,7 +98,7 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
@ -116,27 +116,22 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={`flex w-full justify-end text-xs outline-none ${
|
||||
isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
|
||||
} `}
|
||||
>
|
||||
{timer > 0 ? (
|
||||
<span className="text-right">Request new code in {timer}s</span>
|
||||
) : isSubmitting ? (
|
||||
"Sending new code..."
|
||||
) : (
|
||||
<div className="flex justify-end w-full">
|
||||
<div className="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
|
||||
onClick={resendMagicCode}
|
||||
className={`text-xs ${
|
||||
isResendDisabled ? "text-onboarding-text-300" : "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
}`}
|
||||
disabled={isResendDisabled}
|
||||
>
|
||||
<span className="font-medium">Resend</span>
|
||||
{timer > 0
|
||||
? `Request new code in ${timer}s`
|
||||
: isSubmitting
|
||||
? "Requesting new code..."
|
||||
: "Request new code"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Controller
|
||||
name="token"
|
||||
@ -150,18 +145,16 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="gets-sets-flys"
|
||||
placeholder="gets-sets-fays"
|
||||
className="border-onboarding-border-100 h-[46px] w-full "
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Verifying..." : "Next step"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@ -44,23 +44,23 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
title: "Oops!",
|
||||
type: "error",
|
||||
message: err?.error,
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleEmailFormSubmit)}>
|
||||
<div className="pb-2">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Let’s secure your instance
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s secure your instance
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
Explore privacy options. Get AI features. Secure access. <br /> Takes 2 minutes.
|
||||
Explore privacy options. Get AI features. Secure access.
|
||||
<br />
|
||||
Takes 2 minutes.
|
||||
</p>
|
||||
|
||||
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
|
||||
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
@ -91,15 +91,13 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-custom-text-400 mt-0 py-2">
|
||||
<p className="text-xs text-custom-text-200 pb-2">
|
||||
Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not.
|
||||
</p>
|
||||
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Sending code..." : "Send unique code"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { Input, Button } from "@plane/ui";
|
||||
@ -43,14 +44,14 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handlePasswordSubmit)}>
|
||||
<div className="pb-2">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Moving to the runway
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
{"Let's set a password so you can do away with codes."}
|
||||
Let{"'"}s set a password so you can do away with codes.
|
||||
</p>
|
||||
|
||||
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
|
||||
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
@ -79,8 +80,7 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
@ -106,13 +106,19 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs mt-2 text-onboarding-text-200">
|
||||
{"Whatever you choose now will be your account's password"}
|
||||
<p className="text-xs mt-3 text-onboarding-text-200 pb-2">
|
||||
Whatever you choose now will be your account{"'"}s password
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Submitting..." : "Next Step"}
|
||||
{isSubmitting ? "Submitting..." : "Next step"}
|
||||
</Button>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -21,13 +21,11 @@ export const InstanceSetupFormRoot = () => {
|
||||
return (
|
||||
<>
|
||||
{setupStep === EInstanceSetupSteps.DONE ? (
|
||||
<div>
|
||||
<InstanceSetupDone />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div className={`px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto`}>
|
||||
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200">
|
||||
<div className="bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
|
||||
<div className="mx-auto flex flex-col">
|
||||
{setupStep === EInstanceSetupSteps.EMAIL && (
|
||||
<InstanceSetupEmailForm
|
||||
handleNextStep={(email) => {
|
||||
|
||||
@ -24,7 +24,7 @@ export const InstanceSetupView = observer(() => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`bg-onboarding-gradient-100 h-full w-full`}>
|
||||
<div className="bg-onboarding-gradient-100 h-full w-full flex flex-col">
|
||||
<div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
|
||||
<div className="flex gap-x-2 py-10 items-center">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
|
||||
|
||||
@ -54,7 +54,7 @@ export const InstanceAdminSidebarMenu = () => {
|
||||
|
||||
return (
|
||||
<Link key={index} href={item.href}>
|
||||
<span className="block w-full">
|
||||
<div>
|
||||
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
|
||||
@ -84,7 +84,7 @@ export const InstanceAdminSidebarMenu = () => {
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -59,8 +59,7 @@ export const IssueAttachments = () => {
|
||||
key={file.id}
|
||||
className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
|
||||
>
|
||||
<Link href={file.asset} target="_blank">
|
||||
<span>
|
||||
<Link href={file.asset} target="_blank" rel="noopener noreferrer">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -85,7 +84,6 @@ export const IssueAttachments = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
|
||||
@ -226,9 +226,10 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
|
||||
reset({
|
||||
...defaultValues,
|
||||
project: projectId,
|
||||
...initialData,
|
||||
});
|
||||
}, [setFocus, reset]);
|
||||
}, [setFocus, initialData, reset]);
|
||||
|
||||
// update projectId in form when projectId changes
|
||||
useEffect(() => {
|
||||
|
||||
@ -25,9 +25,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
|
||||
const appliedFilters: IIssueFilterOptions = {};
|
||||
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
|
||||
if (!value) return;
|
||||
|
||||
if (Array.isArray(value) && value.length === 0) return;
|
||||
|
||||
appliedFilters[key as keyof IIssueFilterOptions] = value;
|
||||
});
|
||||
|
||||
|
||||
@ -12,85 +12,73 @@ import { Button } from "@plane/ui";
|
||||
import { areFiltersDifferent } from "helpers/filter.helper";
|
||||
// types
|
||||
import { IIssueFilterOptions } from "types";
|
||||
import { EFilterType } from "store/issues/types";
|
||||
|
||||
export const GlobalViewsAppliedFiltersRoot = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
|
||||
|
||||
const {
|
||||
globalViews: globalViewsStore,
|
||||
globalViewFilters: globalViewFiltersStore,
|
||||
project: projectStore,
|
||||
workspace: workspaceStore,
|
||||
project: { workspaceProjects },
|
||||
workspace: { workspaceLabels },
|
||||
workspaceMember: { workspaceMembers },
|
||||
workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
|
||||
} = useMobxStore();
|
||||
|
||||
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
|
||||
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
|
||||
|
||||
const userFilters = issueFilters?.filters;
|
||||
|
||||
// filters whose value not null or empty array
|
||||
const appliedFilters: IIssueFilterOptions = {};
|
||||
Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
|
||||
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
|
||||
if (!value) return;
|
||||
|
||||
if (Array.isArray(value) && value.length === 0) return;
|
||||
|
||||
appliedFilters[key as keyof IIssueFilterOptions] = value;
|
||||
});
|
||||
|
||||
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
|
||||
if (!globalViewId) return;
|
||||
|
||||
// remove all values of the key if value is null
|
||||
if (!value) {
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
[key]: null,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: null });
|
||||
return;
|
||||
}
|
||||
|
||||
// remove the passed value from the key
|
||||
let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
|
||||
let newValues = userFilters?.[key] ?? [];
|
||||
newValues = newValues.filter((val) => val !== value);
|
||||
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
[key]: newValues,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
|
||||
};
|
||||
|
||||
const handleClearAllFilters = () => {
|
||||
if (!globalViewId || !storedFilters) return;
|
||||
|
||||
if (!workspaceSlug) return;
|
||||
const newFilters: IIssueFilterOptions = {};
|
||||
Object.keys(storedFilters).forEach((key) => {
|
||||
Object.keys(userFilters ?? {}).forEach((key) => {
|
||||
newFilters[key as keyof IIssueFilterOptions] = null;
|
||||
});
|
||||
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
|
||||
...newFilters,
|
||||
});
|
||||
updateFilters(workspaceSlug, EFilterType.FILTERS, { ...newFilters });
|
||||
};
|
||||
|
||||
const handleUpdateView = () => {
|
||||
if (!workspaceSlug || !globalViewId || !viewDetails) return;
|
||||
// const handleUpdateView = () => {
|
||||
// if (!workspaceSlug || !globalViewId || !viewDetails) return;
|
||||
|
||||
globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
|
||||
query_data: {
|
||||
...viewDetails.query_data,
|
||||
filters: {
|
||||
...(storedFilters ?? {}),
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
// globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
|
||||
// query_data: {
|
||||
// ...viewDetails.query_data,
|
||||
// filters: {
|
||||
// ...(storedFilters ?? {}),
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
// update stored filters when view details are fetched
|
||||
useEffect(() => {
|
||||
if (!globalViewId || !viewDetails) return;
|
||||
// useEffect(() => {
|
||||
// if (!globalViewId || !viewDetails) return;
|
||||
|
||||
if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
|
||||
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
|
||||
}, [globalViewId, globalViewFiltersStore, viewDetails]);
|
||||
// if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
|
||||
// globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
|
||||
// }, [globalViewId, globalViewFiltersStore, viewDetails]);
|
||||
|
||||
// return if no filters are applied
|
||||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
@ -98,18 +86,19 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
|
||||
return (
|
||||
<div className="flex items-start justify-between gap-4 p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={storedFilters ?? {}}
|
||||
labels={workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
projects={workspaceProjects ?? undefined}
|
||||
appliedFilters={appliedFilters ?? {}}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
handleRemoveFilter={handleRemoveFilter}
|
||||
labels={workspaceStore.workspaceLabels ?? undefined}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
|
||||
/>
|
||||
{storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
|
||||
|
||||
{/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
|
||||
<Button variant="primary" onClick={handleUpdateView}>
|
||||
Update view
|
||||
</Button>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -3,6 +3,9 @@ export * from "./filters";
|
||||
export * from "./empty-states";
|
||||
export * from "./quick-action-dropdowns";
|
||||
|
||||
// roots
|
||||
export * from "./roots";
|
||||
|
||||
// layouts
|
||||
export * from "./list";
|
||||
export * from "./calendar";
|
||||
@ -10,6 +13,5 @@ export * from "./gantt";
|
||||
export * from "./kanban";
|
||||
export * from "./spreadsheet";
|
||||
|
||||
// properties
|
||||
export * from "./properties";
|
||||
|
||||
export * from "./roots";
|
||||
|
||||
@ -267,6 +267,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
enableQuickIssueCreate={enableQuickAdd}
|
||||
isReadOnly={!enableInlineEditing || !isEditingAllowed}
|
||||
currentStore={currentStore}
|
||||
quickAddCallback={issueStore?.quickAddIssue}
|
||||
addIssuesToView={(issues) => {
|
||||
console.log("kanban existingIds", issues);
|
||||
|
||||
|
||||
@ -89,6 +89,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
<IssuePropertyState
|
||||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.state || null}
|
||||
defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
|
||||
onChange={handleState}
|
||||
disabled={isReadOnly}
|
||||
hideDropdownArrow
|
||||
@ -110,6 +111,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
<IssuePropertyLabels
|
||||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.labels || null}
|
||||
defaultOptions={issue?.label_details ? issue.label_details : []}
|
||||
onChange={handleLabel}
|
||||
disabled={isReadOnly}
|
||||
hideDropdownArrow
|
||||
@ -141,6 +143,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
||||
<IssuePropertyAssignee
|
||||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.assignees || null}
|
||||
defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
|
||||
hideDropdownArrow
|
||||
onChange={handleAssignee}
|
||||
disabled={isReadOnly}
|
||||
|
||||
@ -91,6 +91,12 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
|
||||
currentStore?: EProjectStore;
|
||||
enableQuickIssueCreate: boolean;
|
||||
isReadOnly: boolean;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
data: IIssue,
|
||||
viewId?: string
|
||||
) => Promise<IIssue | undefined>;
|
||||
}
|
||||
const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
const {
|
||||
@ -118,6 +124,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
enableQuickIssueCreate,
|
||||
isReadOnly,
|
||||
addIssuesToView,
|
||||
quickAddCallback,
|
||||
} = props;
|
||||
|
||||
const calculateIssueCount = (column_id: string) => {
|
||||
@ -176,6 +183,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
isDragStarted={isDragStarted}
|
||||
isReadOnly={isReadOnly}
|
||||
addIssuesToView={addIssuesToView}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -208,6 +216,12 @@ export interface IKanBanSwimLanes {
|
||||
currentStore?: EProjectStore;
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
|
||||
enableQuickIssueCreate: boolean;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
data: IIssue,
|
||||
viewId?: string
|
||||
) => Promise<IIssue | undefined>;
|
||||
isReadOnly: boolean;
|
||||
}
|
||||
|
||||
@ -236,6 +250,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
isReadOnly,
|
||||
currentStore,
|
||||
addIssuesToView,
|
||||
quickAddCallback,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
@ -378,6 +393,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -406,6 +422,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -434,6 +451,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -462,6 +480,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -490,6 +509,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -518,6 +538,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -546,6 +567,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -574,6 +596,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadOnly={isReadOnly}
|
||||
quickAddCallback={quickAddCallback}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -60,6 +60,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
||||
<IssuePropertyState
|
||||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.state || null}
|
||||
defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
|
||||
hideDropdownArrow
|
||||
onChange={handleState}
|
||||
disabled={isReadonly}
|
||||
@ -81,6 +82,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
||||
<IssuePropertyLabels
|
||||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.labels || null}
|
||||
defaultOptions={issue?.label_details ? issue.label_details : []}
|
||||
onChange={handleLabel}
|
||||
disabled={isReadonly}
|
||||
hideDropdownArrow
|
||||
@ -92,6 +94,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
||||
<IssuePropertyAssignee
|
||||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.assignees || null}
|
||||
defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
|
||||
hideDropdownArrow
|
||||
onChange={handleAssignee}
|
||||
disabled={isReadonly}
|
||||
|
||||
@ -8,10 +8,12 @@ import { Check, ChevronDown, Search, User2 } from "lucide-react";
|
||||
import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
|
||||
// types
|
||||
import { Placement } from "@popperjs/core";
|
||||
import { IProjectMember } from "types";
|
||||
|
||||
export interface IIssuePropertyAssignee {
|
||||
projectId: string | null;
|
||||
value: string[] | string;
|
||||
defaultOptions?: any;
|
||||
onChange: (data: string[]) => void;
|
||||
disabled?: boolean;
|
||||
hideDropdownArrow?: boolean;
|
||||
@ -27,6 +29,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
const {
|
||||
projectId,
|
||||
value,
|
||||
defaultOptions = [],
|
||||
onChange,
|
||||
disabled = false,
|
||||
hideDropdownArrow = false,
|
||||
@ -40,8 +43,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
// store
|
||||
const {
|
||||
workspace: workspaceStore,
|
||||
project: projectStore,
|
||||
workspaceMember: { workspaceMembers, fetchWorkspaceMembers },
|
||||
projectMember: { projectMembers: _projectMembers, fetchProjectMembers },
|
||||
} = useMobxStore();
|
||||
const workspaceSlug = workspaceStore?.workspaceSlug;
|
||||
// states
|
||||
@ -50,20 +52,16 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<Boolean>(false);
|
||||
|
||||
// const fetchProjectMembers = () => {
|
||||
// setIsLoading(true);
|
||||
// if (workspaceSlug && projectId)
|
||||
// workspaceSlug &&
|
||||
// projectId &&
|
||||
// projectStore.fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
|
||||
// };
|
||||
|
||||
const getWorkspaceMembers = () => {
|
||||
setIsLoading(true);
|
||||
if (workspaceSlug) workspaceSlug && fetchWorkspaceMembers(workspaceSlug).then(() => setIsLoading(false));
|
||||
if (workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const options = (workspaceMembers ?? [])?.map((member) => ({
|
||||
const updatedDefaultOptions: IProjectMember[] =
|
||||
defaultOptions.map((member: any) => ({ member: { ...member } })) ?? [];
|
||||
const projectMembers = _projectMembers ?? updatedDefaultOptions;
|
||||
|
||||
const options = projectMembers?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query: member.member.display_name,
|
||||
content: (
|
||||
@ -82,7 +80,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
|
||||
// if multiple assignees
|
||||
if (Array.isArray(value)) {
|
||||
const assignees = workspaceMembers?.filter((m) => value.includes(m.member.id));
|
||||
const assignees = projectMembers?.filter((m) => value.includes(m.member.id));
|
||||
|
||||
if (!assignees || assignees.length === 0) return "No Assignee";
|
||||
|
||||
@ -93,7 +91,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
}
|
||||
|
||||
// if single assignee
|
||||
const assignee = workspaceMembers?.find((m) => m.member.id === value)?.member;
|
||||
const assignee = projectMembers?.find((m) => m.member.id === value)?.member;
|
||||
|
||||
if (!assignee) return "No Assignee";
|
||||
|
||||
@ -107,7 +105,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{value.map((assigneeId) => {
|
||||
const member = workspaceMembers?.find((m) => m.member.id === assigneeId)?.member;
|
||||
const member = projectMembers?.find((m) => m.member.id === assigneeId)?.member;
|
||||
if (!member) return null;
|
||||
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
|
||||
})}
|
||||
@ -149,7 +147,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
onClick={() => !workspaceMembers && getWorkspaceMembers()}
|
||||
onClick={() => !projectMembers && getWorkspaceMembers()}
|
||||
>
|
||||
{label}
|
||||
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
|
||||
|
||||
@ -10,10 +10,12 @@ import { Check, ChevronDown, Search } from "lucide-react";
|
||||
// types
|
||||
import { Placement } from "@popperjs/core";
|
||||
import { RootStore } from "store/root";
|
||||
import { IIssueLabel } from "types";
|
||||
|
||||
export interface IIssuePropertyLabels {
|
||||
projectId: string | null;
|
||||
value: string[];
|
||||
defaultOptions?: any;
|
||||
onChange: (data: string[]) => void;
|
||||
disabled?: boolean;
|
||||
hideDropdownArrow?: boolean;
|
||||
@ -29,6 +31,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
const {
|
||||
projectId,
|
||||
value,
|
||||
defaultOptions = [],
|
||||
onChange,
|
||||
disabled,
|
||||
hideDropdownArrow = false,
|
||||
@ -42,7 +45,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
|
||||
const {
|
||||
workspace: workspaceStore,
|
||||
projectLabel: { fetchProjectLabels, projectLabels },
|
||||
projectLabel: { fetchProjectLabels, labels },
|
||||
}: RootStore = useMobxStore();
|
||||
const workspaceSlug = workspaceStore?.workspaceSlug;
|
||||
|
||||
@ -59,7 +62,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
|
||||
if (!value) return null;
|
||||
|
||||
const options = (projectLabels ? projectLabels : []).map((label) => ({
|
||||
let projectLabels: IIssueLabel[] = defaultOptions;
|
||||
const storeLabels = projectId && labels ? labels[projectId] : [];
|
||||
if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
|
||||
|
||||
const options = projectLabels.map((label) => ({
|
||||
value: label.id,
|
||||
query: label.name,
|
||||
content: (
|
||||
@ -95,7 +102,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
{value.length > 0 ? (
|
||||
value.length <= maxRender ? (
|
||||
<>
|
||||
{(projectLabels ? projectLabels : [])
|
||||
{projectLabels
|
||||
?.filter((l) => value.includes(l.id))
|
||||
.map((label) => (
|
||||
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
|
||||
@ -123,7 +130,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
<Tooltip
|
||||
position="top"
|
||||
tooltipHeading="Labels"
|
||||
tooltipContent={(projectLabels ? projectLabels : [])
|
||||
tooltipContent={projectLabels
|
||||
?.filter((l) => value.includes(l.id))
|
||||
.map((l) => l.name)
|
||||
.join(", ")}
|
||||
@ -167,7 +174,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
? "cursor-pointer"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
onClick={() => !projectLabels && fetchLabels()}
|
||||
onClick={() => !storeLabels && fetchLabels()}
|
||||
>
|
||||
{label}
|
||||
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
|
||||
@ -200,8 +207,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80
|
||||
${selected ? "text-custom-text-100" : "text-custom-text-200"}`
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
|
||||
selected ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
|
||||
@ -17,6 +17,7 @@ import { RootStore } from "store/root";
|
||||
export interface IIssuePropertyState {
|
||||
projectId: string | null;
|
||||
value: any | string | null;
|
||||
defaultOptions?: any;
|
||||
onChange: (state: IState) => void;
|
||||
disabled?: boolean;
|
||||
hideDropdownArrow?: boolean;
|
||||
@ -30,6 +31,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
||||
const {
|
||||
projectId,
|
||||
value,
|
||||
defaultOptions = [],
|
||||
onChange,
|
||||
disabled,
|
||||
hideDropdownArrow = false,
|
||||
@ -47,10 +49,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<Boolean>(false);
|
||||
|
||||
const projectStates: IState[] = [];
|
||||
const projectStatesByGroup = projectStateStore.groupedProjectStates;
|
||||
if (projectStatesByGroup)
|
||||
for (const group in projectStatesByGroup) projectStates.push(...projectStatesByGroup[group]);
|
||||
let projectStates: IState[] = defaultOptions;
|
||||
const storeStates = projectId ? projectStateStore.states[projectId] : [];
|
||||
if (storeStates && storeStates.length > 0) projectStates = storeStates;
|
||||
|
||||
const fetchProjectStates = () => {
|
||||
setIsLoading(true);
|
||||
@ -120,7 +121,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
||||
className={`flex items-center justify-between h-5 gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
onClick={() => !projectStatesByGroup && fetchProjectStates()}
|
||||
onClick={() => !storeStates && fetchProjectStates()}
|
||||
>
|
||||
{label}
|
||||
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
|
||||
|
||||
@ -0,0 +1,114 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
import { Copy, Link, Pencil, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { EProjectStore } from "store/command-palette.store";
|
||||
|
||||
export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, handleUpdate } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// states
|
||||
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleCopyIssueLink = () => {
|
||||
copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link copied",
|
||||
message: "Issue link copied to clipboard",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteIssueModal
|
||||
data={issue}
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
onSubmit={handleDelete}
|
||||
/>
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={createUpdateIssueModal}
|
||||
handleClose={() => {
|
||||
setCreateUpdateIssueModal(false);
|
||||
setIssueToEdit(null);
|
||||
}}
|
||||
// pre-populate date only if not editing
|
||||
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
|
||||
data={issueToEdit}
|
||||
onSubmit={async (data) => {
|
||||
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
|
||||
}}
|
||||
currentStore={EProjectStore.PROJECT}
|
||||
/>
|
||||
<CustomMenu placement="bottom-start" ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleCopyIssueLink();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link className="h-3 w-3" />
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIssueToEdit(issue);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -2,3 +2,4 @@ export * from "./cycle-issue";
|
||||
export * from "./module-issue";
|
||||
export * from "./project-issue";
|
||||
export * from "./archived-issue";
|
||||
export * from "./all-issue";
|
||||
|
||||
@ -0,0 +1,134 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot } from "components/issues";
|
||||
import { SpreadsheetView } from "components/issues/issue-layouts";
|
||||
import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// types
|
||||
import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
|
||||
import { IIssueUnGroupedStructure } from "store/issue";
|
||||
import { EIssueActions } from "../types";
|
||||
|
||||
import { EFilterType, TUnGroupedIssues } from "store/issues/types";
|
||||
|
||||
type Props = {
|
||||
type?: TStaticViewTypes | null;
|
||||
};
|
||||
|
||||
export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
|
||||
const { type = null } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
|
||||
|
||||
const currentIssueView = type ?? globalViewId;
|
||||
|
||||
const {
|
||||
workspaceMember: { workspaceMembers },
|
||||
workspace: { workspaceLabels },
|
||||
globalViews: { fetchAllGlobalViews },
|
||||
workspaceGlobalIssues: { loader, getIssues, getIssuesIds, fetchIssues, updateIssue, removeIssue },
|
||||
workspaceGlobalIssuesFilter: { currentView, issueFilters, fetchFilters, updateFilters, setCurrentView },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
|
||||
if (workspaceSlug) {
|
||||
await fetchAllGlobalViews(workspaceSlug);
|
||||
}
|
||||
});
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && currentIssueView ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${currentIssueView}` : null,
|
||||
async () => {
|
||||
if (workspaceSlug && currentIssueView) {
|
||||
setCurrentView(currentIssueView);
|
||||
await fetchAllGlobalViews(workspaceSlug);
|
||||
await fetchFilters(workspaceSlug, currentIssueView);
|
||||
await fetchIssues(workspaceSlug, currentIssueView, getIssues ? "mutation" : "init-loader");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isEditingAllowed = false;
|
||||
|
||||
const issuesResponse = getIssues;
|
||||
const issueIds = (getIssuesIds ?? []) as TUnGroupedIssues;
|
||||
const issues = issueIds?.filter((id) => id && issuesResponse?.[id]).map((id) => issuesResponse?.[id]);
|
||||
|
||||
const issueActions = {
|
||||
[EIssueActions.UPDATE]: async (issue: IIssue) => {
|
||||
const projectId = issue.project;
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
await updateIssue(workspaceSlug, projectId, issue.id, issue, currentIssueView);
|
||||
},
|
||||
[EIssueActions.DELETE]: async (issue: IIssue) => {
|
||||
const projectId = issue.project;
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
await removeIssue(workspaceSlug, projectId, issue.id, currentIssueView);
|
||||
},
|
||||
};
|
||||
|
||||
const handleIssues = useCallback(
|
||||
async (issue: IIssue, action: EIssueActions) => {
|
||||
if (action === EIssueActions.UPDATE) await issueActions[action]!(issue);
|
||||
if (action === EIssueActions.DELETE) await issueActions[action]!(issue);
|
||||
},
|
||||
[getIssues]
|
||||
);
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
|
||||
},
|
||||
[updateFilters, workspaceSlug]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
{currentView != currentIssueView && loader === "init-loader" ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<GlobalViewsAppliedFiltersRoot />
|
||||
|
||||
{Object.keys(getIssues ?? {}).length == 0 && !loader ? (
|
||||
<>{/* <GlobalViewEmptyState /> */}</>
|
||||
) : (
|
||||
<div className="w-full h-full relative overflow-auto">
|
||||
<SpreadsheetView
|
||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
|
||||
issues={issues as IIssueUnGroupedStructure}
|
||||
quickActions={(issue) => (
|
||||
<AllIssueQuickActions
|
||||
issue={issue}
|
||||
handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
|
||||
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
|
||||
/>
|
||||
)}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
labels={workspaceLabels || undefined}
|
||||
handleIssues={handleIssues}
|
||||
disableUserActions={isEditingAllowed}
|
||||
viewId={currentIssueView}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -1,118 +0,0 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// types
|
||||
import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
|
||||
|
||||
type Props = {
|
||||
type?: TStaticViewTypes;
|
||||
};
|
||||
|
||||
export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
|
||||
const { type } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const {
|
||||
globalViews: globalViewsStore,
|
||||
globalViewIssues: globalViewIssuesStore,
|
||||
globalViewFilters: globalViewFiltersStore,
|
||||
workspaceFilter: workspaceFilterStore,
|
||||
workspace: workspaceStore,
|
||||
workspaceMember: { workspaceMembers },
|
||||
issueDetail: issueDetailStore,
|
||||
project: projectStore,
|
||||
} = useMobxStore();
|
||||
|
||||
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
|
||||
|
||||
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
|
||||
|
||||
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && globalViewId && viewDetails ? `GLOBAL_VIEW_ISSUES_${globalViewId.toString()}` : null,
|
||||
workspaceSlug && globalViewId && viewDetails
|
||||
? () => {
|
||||
globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && type ? `GLOBAL_VIEW_ISSUES_${type.toString()}` : null,
|
||||
workspaceSlug && type
|
||||
? () => {
|
||||
globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
|
||||
display_filters: updatedDisplayFilter,
|
||||
});
|
||||
},
|
||||
[workspaceFilterStore, workspaceSlug]
|
||||
);
|
||||
|
||||
const handleUpdateIssue = useCallback(
|
||||
(issue: IIssue, data: Partial<IIssue>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
const payload = {
|
||||
...issue,
|
||||
...data,
|
||||
};
|
||||
|
||||
globalViewIssuesStore.updateIssueStructure(type ?? globalViewId!.toString(), payload);
|
||||
// issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, data);
|
||||
},
|
||||
[globalViewId, globalViewIssuesStore, workspaceSlug, issueDetailStore]
|
||||
);
|
||||
|
||||
const issues = type
|
||||
? globalViewIssuesStore.viewIssues?.[type]
|
||||
: globalViewId
|
||||
? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
|
||||
: undefined;
|
||||
|
||||
if (!issues)
|
||||
return (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<GlobalViewsAppliedFiltersRoot />
|
||||
{issues?.length === 0 || !projects || projects?.length === 0 ? (
|
||||
<GlobalViewEmptyState />
|
||||
) : (
|
||||
<div className="h-full w-full overflow-auto">
|
||||
{/* <SpreadsheetView
|
||||
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
|
||||
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
|
||||
issues={issues}
|
||||
members={workspaceMembers?.map((m) => m.member)}
|
||||
labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
|
||||
disableUserActions={false}
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
export * from "./cycle-layout-root";
|
||||
export * from "./global-view-layout-root";
|
||||
export * from "./all-issue-layout-root";
|
||||
export * from "./module-layout-root";
|
||||
export * from "./project-layout-root";
|
||||
export * from "./project-view-layout-root";
|
||||
|
||||
@ -26,20 +26,12 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
|
||||
projectIssuesFilter: { issueFilters, fetchFilters },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
|
||||
async () => {
|
||||
useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
|
||||
if (workspaceSlug && projectId) {
|
||||
await fetchFilters(workspaceSlug, projectId);
|
||||
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
|
||||
}
|
||||
},
|
||||
{
|
||||
onErrorRetry: (error) => {
|
||||
if (error.status === 404) return;
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const activeLayout = issueFilters?.displayFilters?.layout;
|
||||
|
||||
|
||||
@ -25,6 +25,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
|
||||
<IssuePropertyAssignee
|
||||
projectId={issue.project_detail?.id ?? null}
|
||||
value={issue.assignees}
|
||||
defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
|
||||
onChange={(data) => onChange({ assignees: data })}
|
||||
className="h-full w-full"
|
||||
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
|
||||
|
||||
@ -27,6 +27,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
|
||||
<IssuePropertyLabels
|
||||
projectId={issue.project_detail?.id ?? null}
|
||||
value={issue.labels}
|
||||
defaultOptions={issue?.label_details ? issue.label_details : []}
|
||||
onChange={(data) => onChange({ labels: data })}
|
||||
className="h-full w-full"
|
||||
buttonClassName="px-2.5 h-full"
|
||||
|
||||
@ -27,6 +27,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
|
||||
<IssuePropertyState
|
||||
projectId={issue.project_detail?.id ?? null}
|
||||
value={issue.state_detail.id}
|
||||
defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
|
||||
onChange={(data) => onChange({ state: data.id, state_detail: data })}
|
||||
className="h-full w-full"
|
||||
buttonClassName="!shadow-none !border-0 h-full w-full"
|
||||
|
||||
@ -77,8 +77,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
console.log("spreadsheet issues", issues);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -108,7 +108,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`}
|
||||
>
|
||||
<a className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className="block h-2 w-2 rounded-full"
|
||||
@ -123,7 +123,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
|
||||
<span className="truncate text-custom-text-100">
|
||||
{issueDetails.parent_detail?.name.substring(0, 50)}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<CustomMenu ellipsis optionsClassName="px-1.5">
|
||||
|
||||
@ -104,7 +104,8 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<>
|
||||
{filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
@ -121,7 +122,21 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
))}
|
||||
<Combobox.Option
|
||||
key="none"
|
||||
value=""
|
||||
className={({ active }) =>
|
||||
`flex items-center justify-between gap-2 ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 truncate">
|
||||
<span className="truncate flex-grow">None</span>
|
||||
</div>
|
||||
</Combobox.Option>
|
||||
</>
|
||||
) : (
|
||||
<span className="flex items-center gap-2 p-1">
|
||||
<p className="text-left text-custom-text-200 ">No matching results</p>
|
||||
|
||||
@ -98,7 +98,8 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<>
|
||||
{filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
@ -115,7 +116,21 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
))}
|
||||
<Combobox.Option
|
||||
key="none"
|
||||
value=""
|
||||
className={({ active }) =>
|
||||
`flex items-center justify-between gap-2 ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 truncate">
|
||||
<span className="truncate flex-grow">None</span>
|
||||
</div>
|
||||
</Combobox.Option>
|
||||
</>
|
||||
) : (
|
||||
<span className="flex items-center gap-2 p-1">
|
||||
<p className="text-left text-custom-text-200 ">No matching results</p>
|
||||
|
||||
@ -139,7 +139,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
|
||||
<div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Tooltip tooltipContent={module.name} position="top">
|
||||
@ -249,7 +249,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -128,7 +128,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<span className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-3 w-full truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
@ -225,7 +225,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -24,7 +24,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange, setTryDiffAccount
|
||||
} = useForm<IWorkspace>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
slug: `${window.location.host}/`,
|
||||
slug: "",
|
||||
},
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
@ -229,9 +229,7 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
|
||||
<div className={`space-y-1 p-4`}>
|
||||
<div className={`flex items-center justify-between w-full px-1 mb-3 gap-2 mt-4 `}>
|
||||
<div
|
||||
className={`relative flex items-center justify-between w-full rounded gap-1 group
|
||||
px-3 shadow-custom-shadow-2xs border-onboarding-border-100 border
|
||||
`}
|
||||
className={`relative flex items-center justify-between w-full rounded gap-1 group px-3 shadow-custom-shadow-2xs border-onboarding-border-100 border`}
|
||||
>
|
||||
<div className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none`}>
|
||||
<PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
|
||||
|
||||
@ -40,8 +40,6 @@ export const Workspace: React.FC<Props> = (props) => {
|
||||
|
||||
const handleCreateWorkspace = async (formData: IWorkspace) => {
|
||||
if (isSubmitting) return;
|
||||
const slug = formData.slug.split("/");
|
||||
formData.slug = slug[slug.length - 1];
|
||||
|
||||
await workspaceService
|
||||
.workspaceSlugCheck(formData.slug)
|
||||
@ -118,11 +116,7 @@ export const Workspace: React.FC<Props> = (props) => {
|
||||
onChange={(event) => {
|
||||
onChange(event.target.value);
|
||||
setValue("name", event.target.value);
|
||||
if (window && window.location.host) {
|
||||
const host = window.location.host;
|
||||
const slug = event.currentTarget.value.split("/");
|
||||
setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
|
||||
}
|
||||
setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
|
||||
}}
|
||||
placeholder="Enter workspace name..."
|
||||
ref={ref}
|
||||
@ -137,26 +131,25 @@ export const Workspace: React.FC<Props> = (props) => {
|
||||
<Controller
|
||||
control={control}
|
||||
name="slug"
|
||||
render={({ field: { value, ref } }) => (
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
render={({ field: { value, ref, onChange } }) => (
|
||||
<div
|
||||
className={`flex items-center px-3 relative rounded-md bg-onboarding-background-200 border ${
|
||||
invalidSlug ? "border-red-500" : "border-onboarding-border-100"
|
||||
} `}
|
||||
>
|
||||
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
|
||||
<Input
|
||||
id="slug"
|
||||
name="slug"
|
||||
type="text"
|
||||
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
|
||||
onChange={(e) => {
|
||||
const host = window.location.host;
|
||||
const slug = e.currentTarget.value.split("/");
|
||||
if (slug.length > 1) {
|
||||
/^[a-zA-Z0-9_-]+$/.test(slug[slug.length - 1]) ? setInvalidSlug(false) : setInvalidSlug(true);
|
||||
setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
|
||||
} else {
|
||||
setValue("slug", `${host}/`);
|
||||
}
|
||||
/^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true);
|
||||
onChange(e.target.value.toLowerCase());
|
||||
}}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.slug)}
|
||||
className="w-full h-[46px] border-onboarding-border-100"
|
||||
className="w-full h-[46px] !px-0 border-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -13,7 +13,7 @@ import { SignInRoot } from "components/account";
|
||||
import { Loader, Spinner } from "@plane/ui";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
import signInIssues from "public/onboarding/onboarding-issues.svg";
|
||||
import latestFeatures from "public/onboarding/onboarding-pages.svg";
|
||||
// types
|
||||
import { IUser, IUserSettings } from "types";
|
||||
|
||||
@ -108,26 +108,22 @@ export const SignInView = observer(() => {
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className="text-sm text-left text-onboarding-text-100">
|
||||
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
|
||||
<Link href="https://plane.so/changelog">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-sm underline hover:cursor-pointer"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
|
||||
<div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
|
||||
<div className="h-[90%]">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
src={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -157,7 +157,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
|
||||
<DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} data={page} />
|
||||
<li>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
|
||||
<span>
|
||||
<div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex overflow-hidden items-center gap-2">
|
||||
@ -295,7 +294,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
|
||||
@ -5,12 +5,12 @@ import { Plus } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { EmptyState } from "components/common";
|
||||
import { PagesListItem } from "./list-item";
|
||||
import { NewEmptyState } from "components/common/new-empty-state";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// images
|
||||
import emptyPage from "public/empty-state/page.svg";
|
||||
import emptyPage from "public/empty-state/empty_page.webp";
|
||||
// types
|
||||
import { IPage } from "types";
|
||||
|
||||
@ -41,13 +41,19 @@ export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptyState
|
||||
title="Have your thoughts in place"
|
||||
description="You can think of Pages as an AI-powered notepad."
|
||||
<NewEmptyState
|
||||
title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
|
||||
description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
|
||||
image={emptyPage}
|
||||
comicBox={{
|
||||
title: "A page can be a doc or a doc of docs.",
|
||||
description:
|
||||
"We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
|
||||
direction: "right",
|
||||
}}
|
||||
primaryButton={{
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "New Page",
|
||||
text: "Create your first page",
|
||||
onClick: () => commandPaletteStore.toggleCreatePageModal(true),
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -5,11 +5,11 @@ import { Plus } from "lucide-react";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { PagesListView } from "components/pages/pages-list";
|
||||
import { EmptyState } from "components/common";
|
||||
import { NewEmptyState } from "components/common/new-empty-state";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// assets
|
||||
import emptyPage from "public/empty-state/page.svg";
|
||||
import emptyPage from "public/empty-state/empty_page.webp";
|
||||
// helpers
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
|
||||
@ -51,13 +51,19 @@ export const RecentPagesList: FC = observer(() => {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EmptyState
|
||||
title="Have your thoughts in place"
|
||||
description="You can think of Pages as an AI-powered notepad."
|
||||
<NewEmptyState
|
||||
title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
|
||||
description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
|
||||
image={emptyPage}
|
||||
comicBox={{
|
||||
title: "A page can be a doc or a doc of docs.",
|
||||
description:
|
||||
"We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
|
||||
direction: "right",
|
||||
}}
|
||||
primaryButton={{
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "New Page",
|
||||
text: "Create your first page",
|
||||
onClick: () => commandPaletteStore.toggleCreatePageModal(true),
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -8,6 +8,7 @@ import useToast from "hooks/use-toast";
|
||||
import { ProjectViewForm } from "components/views";
|
||||
// types
|
||||
import { IProjectView } from "types";
|
||||
import { debounce } from "lodash";
|
||||
|
||||
type Props = {
|
||||
data?: IProjectView | null;
|
||||
@ -33,7 +34,9 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
|
||||
await projectViewsStore
|
||||
.createView(workspaceSlug, projectId, payload)
|
||||
.then(() => {
|
||||
console.log("after calling store");
|
||||
handleClose();
|
||||
console.log("after closing");
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
@ -67,6 +70,8 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
|
||||
else await updateView(formData);
|
||||
};
|
||||
|
||||
const debouncedFormSubmit = debounce(handleFormSubmit, 10, { leading: false, trailing: true });
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
@ -97,7 +102,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
|
||||
<ProjectViewForm
|
||||
data={data}
|
||||
handleClose={handleClose}
|
||||
handleFormSubmit={handleFormSubmit}
|
||||
handleFormSubmit={debouncedFormSubmit as (formData: IProjectView) => Promise<void>}
|
||||
preLoadedData={preLoadedData}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
|
||||
@ -57,7 +57,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
|
||||
<DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
|
||||
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
|
||||
<span className="flex items-center justify-between relative rounded p-4 w-full">
|
||||
<div className="flex items-center justify-between relative rounded p-4 w-full">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4 overflow-hidden">
|
||||
<div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
|
||||
@ -128,7 +128,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -6,11 +6,11 @@ import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { ProjectViewListItem } from "components/views";
|
||||
import { EmptyState } from "components/common";
|
||||
import { NewEmptyState } from "components/common/new-empty-state";
|
||||
// ui
|
||||
import { Input, Loader } from "@plane/ui";
|
||||
// assets
|
||||
import emptyView from "public/empty-state/view.svg";
|
||||
import emptyView from "public/empty-state/empty_view.webp";
|
||||
// icons
|
||||
import { Plus, Search } from "lucide-react";
|
||||
|
||||
@ -59,13 +59,18 @@ export const ProjectViewsList = observer(() => {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState
|
||||
title="Get focused with views"
|
||||
description="Views aid in saving your issues by applying various filters and grouping options."
|
||||
<NewEmptyState
|
||||
title="Save filtered views for your project. Create as many as you need."
|
||||
description="Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best."
|
||||
image={emptyView}
|
||||
comicBox={{
|
||||
title: "Views work atop Issue properties.",
|
||||
description: "You can create a view from here with as many properties as filters as you see fit.",
|
||||
direction: "right",
|
||||
}}
|
||||
primaryButton={{
|
||||
icon: <Plus size={14} strokeWidth={2} />,
|
||||
text: "New View",
|
||||
text: "Build your first view",
|
||||
onClick: () => commandPaletteStore.toggleCreateViewModal(true),
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -18,7 +18,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
|
||||
return (
|
||||
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
|
||||
<Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
|
||||
<span className="flex items-center justify-between relative rounded px-5 py-4 w-full">
|
||||
<div className="flex items-center justify-between relative rounded px-5 py-4 w-full">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
|
||||
@ -29,7 +29,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,8 +2,6 @@ import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
@ -21,11 +19,6 @@ export const GlobalViewsHeader: React.FC = observer(() => {
|
||||
|
||||
const { globalViews: globalViewsStore } = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
|
||||
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
|
||||
);
|
||||
|
||||
// bring the active view to the centre of the header
|
||||
useEffect(() => {
|
||||
if (!globalViewId) return;
|
||||
|
||||
@ -32,7 +32,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
|
||||
<DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
|
||||
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
|
||||
<Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
|
||||
<span className="flex items-center justify-between relative rounded p-4 w-full">
|
||||
<div className="flex items-center justify-between relative rounded p-4 w-full">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
|
||||
@ -77,7 +77,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -113,7 +113,7 @@ export const ISSUE_EXTRA_OPTIONS: {
|
||||
title: string;
|
||||
}[] = [
|
||||
{ key: "sub_issue", title: "Show sub-issues" }, // in spreadsheet its always false
|
||||
{ key: "show_empty_groups", title: "Show empty states" }, // filter on front-end
|
||||
{ key: "show_empty_groups", title: "Show empty groups" }, // filter on front-end
|
||||
];
|
||||
|
||||
export const ISSUE_LAYOUTS: {
|
||||
@ -297,7 +297,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
|
||||
filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
|
||||
display_properties: true,
|
||||
display_filters: {
|
||||
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
|
||||
type: [null, "active", "backlog"],
|
||||
},
|
||||
extra_options: {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { FC, ReactNode } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// layouts
|
||||
import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
@ -12,20 +13,14 @@ export interface IInstanceAdminLayout {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
|
||||
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = observer((props) => {
|
||||
const { children } = props;
|
||||
// store
|
||||
const {
|
||||
instance: { instance },
|
||||
user: { currentUser },
|
||||
} = useMobxStore();
|
||||
// fetch
|
||||
|
||||
console.log("instance", instance);
|
||||
|
||||
if (instance?.is_setup_done === false) {
|
||||
return <InstanceSetupView />;
|
||||
}
|
||||
if (instance?.is_setup_done === false) return <InstanceSetupView />;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -46,4 +41,4 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
|
||||
</UserAuthWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -21,7 +21,6 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
|
||||
fetchCurrentUser,
|
||||
fetchCurrentUserInstanceAdminStatus,
|
||||
fetchCurrentUserSettings,
|
||||
|
||||
},
|
||||
workspace: { fetchWorkspaces },
|
||||
} = useMobxStore();
|
||||
|
||||
@ -24,7 +24,9 @@ const InstanceLayout: FC<Props> = observer(({ children }) => {
|
||||
const router = useRouter();
|
||||
const isGodMode = router.pathname.includes("god-mode");
|
||||
|
||||
useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
|
||||
useSWR("INSTANCE_INFO", () => fetchInstanceInfo(), {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (instance?.is_activated === false) {
|
||||
|
||||
@ -103,7 +103,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
>
|
||||
<div className="h-full w-full flex flex-col gap-y-4">
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<a
|
||||
<div
|
||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
@ -114,7 +114,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
||||
)}
|
||||
</a>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
|
||||
{!sidebarCollapsed && (
|
||||
@ -125,8 +125,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
|
||||
|
||||
return (
|
||||
<Link key={link.key} href={link.href}>
|
||||
<a className="block w-full">
|
||||
<Link key={link.key} href={link.href} className="block w-full">
|
||||
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
@ -139,7 +138,6 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
{!sidebarCollapsed && link.label}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
@ -189,8 +187,7 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
)}
|
||||
<div className="mt-1.5">
|
||||
{WORKSPACE_ACTION_LINKS.map((link) => (
|
||||
<Link key={link.key} href={link.href}>
|
||||
<a className="block w-full">
|
||||
<Link className="block w-full" key={link.key} href={link.href}>
|
||||
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
|
||||
@ -201,7 +198,6 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
{!sidebarCollapsed && link.label}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,6 @@ export const ProjectSettingsSidebar = () => {
|
||||
<div className="flex flex-col gap-1 w-full">
|
||||
{projectLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href}>
|
||||
<span>
|
||||
<div
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md ${
|
||||
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
|
||||
@ -60,7 +59,6 @@ export const ProjectSettingsSidebar = () => {
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -8,11 +8,11 @@ import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
|
||||
import { WorkspaceAnalyticsHeader } from "components/headers";
|
||||
import { EmptyState } from "components/common";
|
||||
import { NewEmptyState } from "components/common/new-empty-state";
|
||||
// icons
|
||||
import { Plus } from "lucide-react";
|
||||
// assets
|
||||
import emptyAnalytics from "public/empty-state/analytics.svg";
|
||||
import emptyAnalytics from "public/empty-state/empty_analytics.webp";
|
||||
// constants
|
||||
import { ANALYTICS_TABS } from "constants/analytics";
|
||||
// type
|
||||
@ -58,13 +58,20 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<EmptyState
|
||||
title="You can see your all projects' analytics here"
|
||||
description="Let's create your first project and analyze the stats with various graphs."
|
||||
<NewEmptyState
|
||||
title="Track progress, workloads, and allocations. Spot trends, remove blockers, and move work faster."
|
||||
description="See scope versus demand, estimates, and scope creep. Get performance by team members and teams, and make sure your project runs on time."
|
||||
image={emptyAnalytics}
|
||||
comicBox={{
|
||||
title: "Analytics works best with Cycles + Modules",
|
||||
description:
|
||||
"First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.",
|
||||
direction: "right",
|
||||
extraPadding: true,
|
||||
}}
|
||||
primaryButton={{
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "New Project",
|
||||
text: "Create Cycles and Modules first",
|
||||
onClick: () => {
|
||||
setTrackElement("ANALYTICS_EMPTY_STATE");
|
||||
toggleCreateProjectModal(true);
|
||||
|
||||
@ -1,41 +1,21 @@
|
||||
import { ReactElement } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
const GlobalViewIssuesPage: NextPageWithLayout = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, globalViewId } = router.query;
|
||||
|
||||
const {
|
||||
globalViews: { fetchGlobalViewDetails },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && globalViewId ? `GLOBAL_VIEW_DETAILS_${globalViewId.toString()}` : null,
|
||||
workspaceSlug && globalViewId
|
||||
? () => fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
return (
|
||||
const GlobalViewIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot />
|
||||
<AllIssueLayoutRoot />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactElement } from "react";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues/issue-layouts";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// types
|
||||
@ -12,7 +12,7 @@ const GlobalViewAllIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="all-issues" />
|
||||
<AllIssueLayoutRoot type="all-issues" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactElement } from "react";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues/issue-layouts";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// types
|
||||
@ -12,7 +12,7 @@ const GlobalViewAssignedIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="assigned" />
|
||||
<AllIssueLayoutRoot type="assigned" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactElement } from "react";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// types
|
||||
@ -12,7 +12,7 @@ const GlobalViewCreatedIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="created" />
|
||||
<AllIssueLayoutRoot type="created" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { GlobalViewsHeader } from "components/workspace";
|
||||
import { GlobalIssuesHeader } from "components/headers";
|
||||
import { GlobalViewLayoutRoot } from "components/issues";
|
||||
import { AllIssueLayoutRoot } from "components/issues";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
@ -12,7 +12,7 @@ const GlobalViewSubscribedIssuesPage: NextPageWithLayout = () => (
|
||||
<div className="h-full overflow-hidden bg-custom-background-100">
|
||||
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
|
||||
<GlobalViewsHeader />
|
||||
<GlobalViewLayoutRoot type="subscribed" />
|
||||
<AllIssueLayoutRoot type="subscribed" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ReactElement } from "react";
|
||||
import { ReactElement, useCallback } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
@ -15,11 +15,14 @@ import DefaultLayout from "layouts/default-layout";
|
||||
import { Button, Input } from "@plane/ui";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
import signInIssues from "public/onboarding/onboarding-issues.svg";
|
||||
import latestFeatures from "public/onboarding/onboarding-pages.svg";
|
||||
// helpers
|
||||
import { checkEmailValidity } from "helpers/string.helper";
|
||||
// type
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// types
|
||||
import { IUser, IUserSettings } from "types";
|
||||
|
||||
type TResetPasswordFormValues = {
|
||||
email: string;
|
||||
@ -42,6 +45,10 @@ const HomePage: NextPageWithLayout = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
// mobx store
|
||||
const {
|
||||
user: { fetchCurrentUser, fetchCurrentUserSettings },
|
||||
} = useMobxStore();
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
@ -54,6 +61,31 @@ const HomePage: NextPageWithLayout = () => {
|
||||
},
|
||||
});
|
||||
|
||||
const handleSignInRedirection = useCallback(
|
||||
async (user: IUser) => {
|
||||
// if the user is not onboarded, redirect them to the onboarding page
|
||||
if (!user.is_onboarded) {
|
||||
router.push("/onboarding");
|
||||
return;
|
||||
}
|
||||
|
||||
// if the user is onboarded, fetch their last workspace details
|
||||
await fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
|
||||
const workspaceSlug =
|
||||
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
|
||||
if (workspaceSlug) router.push(`/${workspaceSlug}`);
|
||||
else router.push("/profile");
|
||||
});
|
||||
},
|
||||
[fetchCurrentUserSettings, router]
|
||||
);
|
||||
|
||||
const mutateUserInfo = useCallback(async () => {
|
||||
await fetchCurrentUser().then(async (user) => {
|
||||
await handleSignInRedirection(user);
|
||||
});
|
||||
}, [fetchCurrentUser, handleSignInRedirection]);
|
||||
|
||||
const handleResetPassword = async (formData: TResetPasswordFormValues) => {
|
||||
if (!uidb64 || !token || !email) return;
|
||||
|
||||
@ -61,7 +93,10 @@ const HomePage: NextPageWithLayout = () => {
|
||||
new_password: formData.password,
|
||||
};
|
||||
|
||||
await authService.resetPassword(uidb64.toString(), token.toString(), payload).catch((err) =>
|
||||
await authService
|
||||
.resetPassword(uidb64.toString(), token.toString(), payload)
|
||||
.then(() => mutateUserInfo())
|
||||
.catch((err) =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
@ -82,7 +117,7 @@ const HomePage: NextPageWithLayout = () => {
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
|
||||
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s get a new password
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(handleResetPassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||
@ -123,6 +158,7 @@ const HomePage: NextPageWithLayout = () => {
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Choose password"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
minLength={8}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -143,7 +179,7 @@ const HomePage: NextPageWithLayout = () => {
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<a className="font-semibold underline">terms and conditions of service.</a>
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
@ -152,22 +188,17 @@ const HomePage: NextPageWithLayout = () => {
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className="text-sm text-left text-onboarding-text-100">
|
||||
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
|
||||
<Link href="https://plane.so/changelog">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium text-sm underline hover:cursor-pointer"
|
||||
>
|
||||
See new features
|
||||
</a>
|
||||
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer">See new features</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
|
||||
<div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
|
||||
<div className="h-[90%]">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
src={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
@ -175,6 +206,7 @@ const HomePage: NextPageWithLayout = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
BIN
web/public/empty-state/empty_analytics.webp
Normal file
BIN
web/public/empty-state/empty_analytics.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 18 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user