github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:makeplane/plane into fix/notifications

Browse Source
This commit is contained in:
pablohashescobar 2023-07-12 00:06:11 +05:30
commit 2962dda4ac
47 changed files with 745 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.env.example
View File

@ -9,11 +9,11 @@ NEXT_PUBLIC_GITHUB_ID=""
NEXT_PUBLIC_GITHUB_APP_NAME=""
# Sentry DSN for error monitoring
NEXT_PUBLIC_SENTRY_DSN=""
# Enable/Disable OAUTH - default 0 for selfhosted instance
# Enable/Disable OAUTH - default 0 for selfhosted instance
NEXT_PUBLIC_ENABLE_OAUTH=0
# Enable/Disable sentry
NEXT_PUBLIC_ENABLE_SENTRY=0
# Enable/Disable session recording
# Enable/Disable session recording
NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
# Enable/Disable event tracking
NEXT_PUBLIC_TRACK_EVENTS=0
@ -59,15 +59,16 @@ AWS_S3_BUCKET_NAME="uploads"
FILE_SIZE_LIMIT=5242880
# GPT settings
OPENAI_API_KEY=""
GPT_ENGINE=""
OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
OPENAI_API_KEY="sk-" # add your openai key here
GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
# Github
GITHUB_CLIENT_SECRET="" # For fetching release notes
# Settings related to Docker
DOCKERIZED=1
# set to 1 If using the pre-configured minio setup
# set to 1 If using the pre-configured minio setup
USE_MINIO=1
# Nginx Configuration
@ -79,4 +80,4 @@ DEFAULT_PASSWORD="password123"
# SignUps
ENABLE_SIGNUP="1"
# Auto generated and Required that will be generated from setup.sh
# Auto generated and Required that will be generated from setup.sh

2
apiserver/plane/api/views/gpt.py
View File

@ -67,7 +67,7 @@ class GPTIntegrationEndpoint(BaseAPIView):
openai.api_key = settings.OPENAI_API_KEY
response = openai.Completion.create(
engine=settings.GPT_ENGINE,
model=settings.GPT_ENGINE,
prompt=final_text,
temperature=0.7,
max_tokens=1024,

19
apiserver/plane/bgtasks/issue_activites_task.py
View File

@ -561,7 +561,6 @@ def track_estimate_points(
def track_archive_at(
requested_data, current_instance, issue_id, project, actor, issue_activities
):
if requested_data.get("archived_at") is None:
issue_activities.append(
IssueActivity(
@ -572,6 +571,8 @@ def track_archive_at(
verb="updated",
actor=actor,
field="archvied_at",
old_value="archive",
new_value="restore",
)
)
else:
@ -584,6 +585,8 @@ def track_archive_at(
verb="updated",
actor=actor,
field="archvied_at",
old_value=None,
new_value="archive",
)
)
@ -982,11 +985,16 @@ def delete_attachment_activity(
)
# Receive message from room group
@shared_task
def issue_activity(
type, requested_data, current_instance, issue_id, actor_id, project_id, subscriber=True
type,
requested_data,
current_instance,
issue_id,
actor_id,
project_id,
subscriber=True,
):
try:
issue_activities = []
@ -998,12 +1006,13 @@ def issue_activity(
if issue is not None:
issue.updated_at = timezone.now()
issue.save()
if subscriber:
# add the user to issue subscriber
try:
_ = IssueSubscriber.objects.get_or_create(issue_id=issue_id, subscriber=actor)
_ = IssueSubscriber.objects.get_or_create(
issue_id=issue_id, subscriber=actor
)
except Exception as e:
pass

36
apiserver/plane/settings/local.py
View File

@ -10,9 +10,7 @@ from sentry_sdk.integrations.redis import RedisIntegration
from .common import * # noqa
DEBUG = int(os.environ.get(
"DEBUG", 1
)) == 1
DEBUG = int(os.environ.get("DEBUG", 1)) == 1
EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
@ -27,13 +25,11 @@ DATABASES = {
}
}
DOCKERIZED = int(os.environ.get(
"DOCKERIZED", 0
)) == 1
DOCKERIZED = int(os.environ.get("DOCKERIZED", 0)) == 1
USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
if DOCKERIZED:
DATABASES["default"] = dj_database_url.config()
@ -65,6 +61,27 @@ if os.environ.get("SENTRY_DSN", False):
traces_sample_rate=0.7,
profiles_sample_rate=1.0,
)
else:
LOGGING = {
"version": 1,
"disable_existing_loggers": False,
"handlers": {
"console": {
"class": "logging.StreamHandler",
},
},
"root": {
"handlers": ["console"],
"level": "DEBUG",
},
"loggers": {
"*": {
"handlers": ["console"],
"level": "DEBUG",
"propagate": True,
},
},
}
REDIS_HOST = "localhost"
REDIS_PORT = 6379
@ -83,8 +100,9 @@ PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)
ANALYTICS_SECRET_KEY = os.environ.get("ANALYTICS_SECRET_KEY", False)
ANALYTICS_BASE_API = os.environ.get("ANALYTICS_BASE_API", False)
OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
GPT_ENGINE = os.environ.get("GPT_ENGINE", "text-davinci-003")
GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN", False)
@ -95,4 +113,4 @@ CELERY_BROKER_URL = os.environ.get("REDIS_URL")
GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"

3
apiserver/plane/settings/production.py
View File

@ -246,8 +246,9 @@ PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)
ANALYTICS_SECRET_KEY = os.environ.get("ANALYTICS_SECRET_KEY", False)
ANALYTICS_BASE_API = os.environ.get("ANALYTICS_BASE_API", False)
OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
GPT_ENGINE = os.environ.get("GPT_ENGINE", "text-davinci-003")
GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN", False)

17
apiserver/plane/settings/staging.py
View File

@ -11,10 +11,9 @@ from sentry_sdk.integrations.django import DjangoIntegration
from sentry_sdk.integrations.redis import RedisIntegration
from .common import * # noqa
# Database
DEBUG = int(os.environ.get(
"DEBUG", 1
)) == 1
DEBUG = int(os.environ.get("DEBUG", 1)) == 1
DATABASES = {
"default": {
"ENGINE": "django.db.backends.postgresql_psycopg2",
@ -56,9 +55,7 @@ STORAGES = {
# Make true if running in a docker environment
DOCKERIZED = int(os.environ.get(
"DOCKERIZED", 0
)) == 1
DOCKERIZED = int(os.environ.get("DOCKERIZED", 0)) == 1
FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
@ -201,15 +198,19 @@ PROXY_BASE_URL = os.environ.get("PROXY_BASE_URL", False)
ANALYTICS_SECRET_KEY = os.environ.get("ANALYTICS_SECRET_KEY", False)
ANALYTICS_BASE_API = os.environ.get("ANALYTICS_BASE_API", False)
OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
GPT_ENGINE = os.environ.get("GPT_ENGINE", "text-davinci-003")
GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN", False)
LOGGER_BASE_URL = os.environ.get("LOGGER_BASE_URL", False)
redis_url = os.environ.get("REDIS_URL")
broker_url = f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
broker_url = (
f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
)
CELERY_RESULT_BACKEND = broker_url
CELERY_BROKER_URL = broker_url

4
apps/app/components/analytics/custom-analytics/sidebar.tsx
View File

@ -238,8 +238,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{project?.name.charAt(0)}
</span>
)}
<h5 className="break-words">
{project.name}
<h5 className="flex items-center gap-1">
<p className="break-words">{project.name}</p>
<span className="text-custom-text-200 text-xs ml-1">
({project.identifier})
</span>

4
apps/app/components/core/board-view/single-issue.tsx
View File

@ -334,9 +334,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
)}
<h5 className="text-sm group-hover:text-custom-primary break-words line-clamp-3">
{issue.name}
</h5>
<h5 className="text-sm break-words line-clamp-3">{issue.name}</h5>
</a>
</Link>
<div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">

88
apps/app/components/core/filters/issues-view-filter.tsx
View File

@ -23,10 +23,33 @@ import {
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { Properties } from "types";
import { Properties, TIssueViewOptions } from "types";
// constants
import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [
{
type: "list",
icon: <ListBulletIcon className="h-4 w-4" />,
},
{
type: "kanban",
icon: <Squares2X2Icon className="h-4 w-4" />,
},
{
type: "calendar",
icon: <CalendarDaysIcon className="h-4 w-4" />,
},
{
type: "spreadsheet",
icon: <Icon iconName="table_chart" />,
},
{
type: "gantt_chart",
icon: <Icon iconName="waterfall_chart" className="rotate-90" />,
},
];
export const IssuesFilterView: React.FC = () => {
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query;
@ -56,53 +79,20 @@ export const IssuesFilterView: React.FC = () => {
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-1">
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "list" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("list")}
>
<ListBulletIcon className="h-4 w-4 text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "kanban" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("kanban")}
>
<Squares2X2Icon className="h-4 w-4 text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "calendar" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("calendar")}
>
<CalendarDaysIcon className="h-4 w-4 text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "spreadsheet" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("spreadsheet")}
>
<Icon iconName="table_chart" className="text-custom-sidebar-text-200" />
</button>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
issueView === "gantt_chart" ? "bg-custom-sidebar-background-80" : ""
}`}
onClick={() => setIssueView("gantt_chart")}
>
<span className="material-symbols-rounded text-custom-sidebar-text-200 text-[18px] rotate-90">
waterfall_chart
</span>
</button>
{issueViewOptions.map((option) => (
<button
key={option.type}
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
issueView === option.type
? "bg-custom-sidebar-background-80"
: "text-custom-sidebar-text-200"
}`}
onClick={() => setIssueView(option.type)}
>
{option.icon}
</button>
))}
</div>
<SelectFilters
filters={filters}
@ -146,7 +136,7 @@ export const IssuesFilterView: React.FC = () => {
{({ open }) => (
<>
<Popover.Button
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none ${
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
open
? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
: "text-custom-sidebar-text-200"

6
apps/app/components/cycles/single-cycle-card.tsx
View File

@ -279,11 +279,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
e.preventDefault();
handleEditCycle();
}}
className="flex cursor-pointer items-center rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-90"
className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
>
<span>
<PencilIcon className="h-4 w-4" />
</span>
<PencilIcon className="h-4 w-4" />
</button>
)}

23
apps/app/components/cycles/single-cycle-list.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
// hooks
@ -157,7 +156,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
<a className="w-full">
<div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
<div className="flex items-center justify-between gap-1">
<span className="flex items-start gap-2">
<div className="flex items-start gap-2">
<ContrastIcon
className="mt-1 h-5 w-5"
color={`${
@ -179,15 +178,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
position="top-left"
>
<h3 className="break-words w-full text-base font-semibold">
{truncateText(cycle.name, 70)}
{truncateText(cycle.name, 60)}
</h3>
</Tooltip>
<p className="mt-2 text-custom-text-200 break-words w-full">
{cycle.description}
</p>
</div>
</span>
<span className="flex items-center gap-4 capitalize">
</div>
<div className="flex-shrink-0 flex items-center gap-4">
<span
className={`rounded-full px-1.5 py-0.5
${
@ -203,14 +202,14 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1">
<span className="flex gap-1 whitespace-nowrap">
<PersonRunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
{findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1">
<AlarmClockIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
{findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
</span>
) : cycleStatus === "completed" ? (
<span className="flex items-center gap-1">
@ -236,12 +235,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
{cycleStatus !== "draft" && (
<div className="flex items-center justify-start gap-2 text-custom-text-200">
<div className="flex items-start gap-1 ">
<div className="flex items-start gap-1 whitespace-nowrap">
<CalendarDaysIcon className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<ArrowRightIcon className="h-4 w-4" />
<div className="flex items-start gap-1 ">
<div className="flex items-start gap-1 whitespace-nowrap">
<TargetIcon className="h-4 w-4" />
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
@ -287,7 +286,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1">
<span className="flex gap-1 whitespace-nowrap">
{cycle.total_issues > 0 ? (
<>
<RadialProgressBar
@ -380,7 +379,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</span>
</div>
</div>
</div>
</a>

7
apps/app/components/estimates/single-estimate.tsx
View File

@ -72,7 +72,7 @@ export const SingleEstimate: React.FC<Props> = ({
<h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
{estimate.name}
{projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs capitalize text-green-500">
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
In use
</span>
)}
@ -83,7 +83,10 @@ export const SingleEstimate: React.FC<Props> = ({
</div>
<div className="flex items-center gap-2">
{projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
<SecondaryButton onClick={handleUseEstimate} className="py-1">
<SecondaryButton
onClick={handleUseEstimate}
className="!py-1 text-custom-text-200 hover:text-custom-text-100"
>
Use
</SecondaryButton>
)}

7
apps/app/components/issues/view-select/due-date.tsx
View File

@ -8,6 +8,7 @@ import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date
import trackEventServices from "services/track-event.service";
// types
import { ICurrentUserResponse, IIssue } from "types";
import useIssuesView from "hooks/use-issues-view";
type Props = {
issue: IIssue;
@ -29,6 +30,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug } = router.query;
const { issueView } = useIssuesView();
return (
<Tooltip
tooltipHeading="Due Date"
@ -71,7 +74,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
user
);
}}
className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
}`}
noBorder={noBorder}
disabled={isNotAllowed}
/>

41
apps/app/components/issues/view-select/label.tsx
View File

@ -71,9 +71,15 @@ export const ViewLabelSelect: React.FC<Props> = ({
position={tooltipPosition}
tooltipHeading="Labels"
tooltipContent={
issue.label_details.length > 0
? issue.label_details.map((label) => label.name ?? "").join(", ")
: "No Label"
issue.labels.length > 0
? issue.labels
.map((labelId) => {
const label = issueLabels?.find((l) => l.id === labelId);
return label?.name ?? "";
})
.join(", ")
: "No label"
}
>
<div
@ -81,20 +87,23 @@ export const ViewLabelSelect: React.FC<Props> = ({
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-2 text-custom-text-200`}
>
{issue.label_details.length > 0 ? (
{issue.labels.length > 0 ? (
<>
{issue.label_details.slice(0, 4).map((label, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100
`}
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
}}
/>
</div>
))}
{issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
{issue.labels.slice(0, 4).map((labelId, index) => {
const label = issueLabels?.find((l) => l.id === labelId);
return (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`}
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
</div>
);
})}
{issue.labels.length > 4 ? <span>+{issue.labels.length - 4}</span> : null}
</>
) : (
<>

3
apps/app/components/issues/view-select/state.tsx
View File

@ -10,7 +10,6 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { getStateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { getStatesList } from "helpers/state.helper";
// types
import { ICurrentUserResponse, IIssue } from "types";
@ -67,7 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
const stateLabel = (
<Tooltip
tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
tooltipContent={selectedOption?.name ?? ""}
position={tooltipPosition}
>
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">

4
apps/app/components/modules/single-module-card.tsx
View File

@ -185,12 +185,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4" />
<span>Start:</span>
<span>{renderShortDateWithYearFormat(startDate)}</span>
<span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
</div>
<div className="flex items-start gap-1">
<TargetIcon className="h-4 w-4" />
<span>End:</span>
<span>{renderShortDateWithYearFormat(endDate)}</span>
<span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
</div>
</div>
</div>

2
apps/app/components/project/create-project-modal.tsx
View File

@ -184,7 +184,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="transform rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
{watch("cover_image") !== null && (
<img

4
apps/app/components/project/single-sidebar-project.tsx
View File

@ -111,9 +111,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
)}
{!sidebarCollapse && (
<p className="overflow-hidden text-ellipsis text-[0.875rem]">
<h5 className={`overflow-hidden text-sm ${open ? "" : "text-custom-text-200"}`}>
{truncateText(project?.name, 20)}
</p>
</h5>
)}
</div>
{!sidebarCollapse && (

39
apps/app/components/ui/circular-progress.tsx Normal file
View File

@ -0,0 +1,39 @@
import React, { useEffect, useState } from "react";
export const CircularProgress = ({ progress }: { progress: number }) => {
const [circumference, setCircumference] = useState(0);
useEffect(() => {
const radius = 40;
const calcCircumference = 2 * Math.PI * radius;
setCircumference(calcCircumference);
}, []);
const progressAngle = (progress / 100) * 360 >= 360 ? 359.9 : (progress / 100) * 360;
const progressX = 50 + Math.cos((progressAngle - 90) * (Math.PI / 180)) * 40;
const progressY = 50 + Math.sin((progressAngle - 90) * (Math.PI / 180)) * 40;
return (
<div className="relative h-5 w-5">
<svg className="absolute top-0 left-0" viewBox="0 0 100 100">
<circle
className="stroke-current"
cx="50"
cy="50"
r="40"
strokeWidth="12"
fill="none"
strokeDasharray={`${circumference} ${circumference}`}
/>
<path
className="fill-current"
d={`M50 10
A40 40 0 ${progress > 50 ? 1 : 0} 1 ${progressX} ${progressY}
L50 50 Z`}
strokeWidth="12"
strokeLinecap="round"
/>
</svg>
</div>
);
};

2
apps/app/components/ui/custom-menu.tsx
View File

@ -59,7 +59,7 @@ const CustomMenu = ({
{ellipsis || verticalEllipsis ? (
<Menu.Button
type="button"
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 outline-none"
>
<EllipsisHorizontalIcon
className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}

6
apps/app/components/ui/custom-search-select.tsx
View File

@ -148,8 +148,8 @@ export const CustomSearchSelect = ({
value={option.value}
className={({ active, selected }) =>
`${active || selected ? "bg-custom-background-80" : ""} ${
selected ? "font-medium" : ""
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
selected ? "text-custom-text-100" : "text-custom-text-200"
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
}
>
{({ active, selected }) => (
@ -157,7 +157,7 @@ export const CustomSearchSelect = ({
{option.content}
{multiple ? (
<div
className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
active || selected ? "opacity-100" : "opacity-0"
}`}
>

4
apps/app/components/ui/custom-select.tsx
View File

@ -118,8 +118,8 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
value={value}
className={({ active, selected }) =>
`${className} ${active || selected ? "bg-custom-background-80" : ""} ${
selected ? "font-medium" : ""
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200`
selected ? "text-custom-text-100" : "text-custom-text-200"
} cursor-pointer select-none truncate rounded px-1 py-1.5`
}
>
{({ selected }) => (

4
apps/app/components/ui/datepicker.tsx
View File

@ -42,13 +42,13 @@ export const CustomDatePicker: React.FC<Props> = ({
: renderAs === "button"
? `px-2 py-1 text-xs shadow-sm ${
disabled ? "" : "hover:bg-custom-background-80"
} duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
} duration-300`
: ""
} ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} ${
noBorder ? "" : "border border-custom-border-100"
} w-full rounded-md bg-transparent caret-transparent ${className}`}
} w-full rounded-md caret-transparent outline-none ${className}`}
dateFormat="MMM dd, yyyy"
isClearable={isClearable}
disabled={disabled}

8
apps/app/components/ui/empty-space.tsx
View File

@ -64,13 +64,13 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
<Icon className="h-6 w-6 text-white" aria-hidden="true" />
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-custom-text-100">{title}</div>
{description ? <div className="text-sm text-custom-text-200">{description}</div> : null}
<div className="min-w-0 flex-1 text-custom-text-200">
<div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
{description ? <div className="text-sm">{description}</div> : null}
</div>
<div className="flex-shrink-0 self-center">
<ChevronRightIcon
className="h-5 w-5 text-custom-text-100 group-hover:text-custom-text-200"
className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
aria-hidden="true"
/>
</div>

1
apps/app/components/ui/index.ts
View File

@ -26,3 +26,4 @@ export * from "./product-updates-modal";
export * from "./integration-and-import-export-banner";
export * from "./range-datepicker";
export * from "./icon";
export * from "./circular-progress";

2
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -43,7 +43,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
<div>
<Menu.Button
onClick={() => setOpenChildFor(null)}
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
}`}
>

291
apps/app/components/workspace/help-section.tsx
View File

@ -1,7 +1,11 @@
import { useState, useRef, FC } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import useSWR from "swr";
// headless ui
import { Transition } from "@headlessui/react";
// hooks
@ -12,8 +16,19 @@ import {
ArrowLongLeftIcon,
ChatBubbleOvalLeftEllipsisIcon,
RocketLaunchIcon,
ArrowUpCircleIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { QuestionMarkCircleIcon, DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
// services
import workspaceService from "services/workspace.service";
// fetch-keys
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
// ui
import { CircularProgress } from "components/ui";
// components
import UpgradeToProModal from "./upgrade-to-pro-modal";
import useUser from "hooks/use-user";
const helpOptions = [
{
@ -43,7 +58,14 @@ export interface WorkspaceHelpSectionProps {
setSidebarActive: React.Dispatch<React.SetStateAction<boolean>>;
}
type progress = {
progress: number;
};
export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { setSidebarActive } = props;
// theme
const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
@ -54,105 +76,192 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
// hooks
useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
const { user } = useUser();
const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
return (
<div
className={`flex w-full items-center justify-between self-baseline border-t border-custom-sidebar-border-100 bg-custom-sidebar-background-100 px-6 py-2 ${
sidebarCollapse ? "flex-col" : ""
}`}
>
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "h",
});
document.dispatchEvent(e);
}}
title="Shortcuts"
>
<RocketLaunchIcon className="h-4 w-4 text-custom-sidebar-text-200" />
{!sidebarCollapse && <span>Shortcuts</span>}
</button>
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
title="Help"
>
<QuestionMarkCircleIcon className="h-4 w-4 text-custom-sidebar-text-200" />
{!sidebarCollapse && <span>Help</span>}
</button>
<button
type="button"
className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 md:hidden"
onClick={() => setSidebarActive(false)}
>
<ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
</button>
<button
type="button"
className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 md:flex ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => toggleCollapsed()}
>
<ArrowLongLeftIcon
className={`h-4 w-4 flex-shrink-0 text-custom-sidebar-text-200 duration-300 group-hover:text-custom-sidebar-text-100 ${
sidebarCollapse ? "rotate-180" : ""
}`}
/>
</button>
const [alert, setAlert] = useState(false);
<div className="relative">
<Transition
show={isNeedHelpOpen}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
const [upgradeModal, setUpgradeModal] = useState(false);
const { data: workspaceDetails } = useSWR(
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.getWorkspace(workspaceSlug as string) : null
);
const issueNumber = workspaceDetails?.total_issues || 0;
return (
<>
<UpgradeToProModal
isOpen={upgradeModal}
onClose={() => setUpgradeModal(false)}
user={user}
issueNumber={issueNumber}
/>
{!sidebarCollapse && (alert || (issueNumber && issueNumber >= 750)) ? (
<>
<div
className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-custom-sidebar-background-80 p-1 shadow-md`}
ref={helpOptionsRef}
className={`border-t p-4 ${
issueNumber >= 750
? "bg-red-50 text-red-600 border-red-200"
: issueNumber >= 500
? "bg-yellow-50 text-yellow-600 border-yellow-200"
: "text-green-600"
}`}
>
{helpOptions.map(({ name, Icon, href, onClick }) => {
if (href)
return (
<Link href={href} key={name}>
<a
target="_blank"
className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-sidebar-background-90"
<div className="flex items-center gap-2 w-full">
<CircularProgress progress={(issueNumber / 1024) * 100} />
<div className="">Free Plan</div>
{issueNumber < 750 && (
<div className="ml-auto text-custom-text-200" onClick={() => setAlert(false)}>
<XMarkIcon className="h-4 w-4" />
</div>
)}
</div>
<div className="text-custom-text-200 text-xs mt-2">
This workspace has used {issueNumber} of its 1024 issues creation limit (
{((issueNumber / 1024) * 100).toFixed(0)}
%).
</div>
</div>
</>
) : (
""
)}
<div
className={`flex w-full items-center justify-between self-baseline border-t border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-2 ${
sidebarCollapse ? "flex-col" : ""
}`}
>
{alert || (issueNumber && issueNumber >= 750) ? (
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 font-medium outline-none text-sm
${
issueNumber >= 750
? "bg-custom-primary-100 text-white"
: "bg-blue-50 text-custom-primary-100"
}
${sidebarCollapse ? "w-full justify-center" : ""}`}
title="Shortcuts"
onClick={() => setUpgradeModal(true)}
>
<ArrowUpCircleIcon className="h-4 w-4 " />
{!sidebarCollapse && <span> Learn more</span>}
</button>
) : (
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 font-medium outline-none text-sm ${
issueNumber >= 750
? "bg-red-50 text-red-600"
: issueNumber >= 500
? "bg-yellow-50 text-yellow-600"
: "bg-green-50 text-green-600"
}
${sidebarCollapse ? "w-full justify-center" : ""}`}
title="Shortcuts"
onClick={() => setAlert(true)}
>
<CircularProgress
progress={(issueNumber / 1024) * 100 > 100 ? 100 : (issueNumber / 1024) * 100}
/>
{!sidebarCollapse && <span>Free Plan</span>}
</button>
)}
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "h",
});
document.dispatchEvent(e);
}}
title="Shortcuts"
>
<RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
{/* {!sidebarCollapse && <span>Shortcuts</span>} */}
</button>
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
title="Help"
>
<QuestionMarkCircleIcon className="h-4 w-4 text-custom-text-200" />
{/* {!sidebarCollapse && <span>Help</span>} */}
</button>
<button
type="button"
className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
onClick={() => setSidebarActive(false)}
>
<ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200 group-hover:text-custom-text-100" />
</button>
<button
type="button"
className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:flex ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => toggleCollapsed()}
>
<ArrowLongLeftIcon
className={`h-4 w-4 flex-shrink-0 text-custom-text-200 duration-300 group-hover:text-custom-text-100 ${
sidebarCollapse ? "rotate-180" : ""
}`}
/>
</button>
<div className="relative">
<Transition
show={isNeedHelpOpen}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div
className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-custom-background-80 p-1 shadow-md`}
ref={helpOptionsRef}
>
{helpOptions.map(({ name, Icon, href, onClick }) => {
if (href)
return (
<Link href={href} key={name}>
<a
target="_blank"
className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-background-90"
>
<Icon className="h-4 w-4 text-custom-text-200" />
<span className="text-sm">{name}</span>
</a>
</Link>
);
else
return (
<button
key={name}
type="button"
onClick={onClick ? onClick : undefined}
className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-background-90"
>
<Icon className="h-4 w-4 text-custom-sidebar-text-200" />
<span className="text-sm">{name}</span>
</a>
</Link>
);
else
return (
<button
key={name}
type="button"
onClick={onClick ? onClick : undefined}
className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-sidebar-background-90"
>
<Icon className="h-4 w-4 text-custom-sidebar-text-200" />
<span className="text-sm">{name}</span>
</button>
);
})}
</div>
</Transition>
</button>
);
})}
</div>
</Transition>
</div>
</div>
</div>
</>
);
};

12
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -108,9 +108,9 @@ export const WorkspaceSidebarDropdown = () => {
</div>
{!sidebarCollapse && (
<p>
<h4 className="text-custom-text-100">
{activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
</p>
</h4>
)}
</div>
</Menu.Button>
@ -166,7 +166,13 @@ export const WorkspaceSidebarDropdown = () => {
)}
</span>
<h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
<h5
className={`text-sm ${
workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
}`}
>
{truncateText(workspace.name, 18)}
</h5>
</div>
<span className="p-1">
<CheckIcon

248
apps/app/components/workspace/upgrade-to-pro-modal.tsx Normal file
View File

@ -0,0 +1,248 @@
import React, { useState, useEffect } from "react";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// icons
import { XCircleIcon, RocketLaunchIcon } from "@heroicons/react/24/outline";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
// ui
import { CircularProgress } from "components/ui";
// types
import type { ICurrentUserResponse, IWorkspace } from "types";
declare global {
interface Window {
supabase: any;
}
}
type Props = {
isOpen: boolean;
onClose: () => void;
user: ICurrentUserResponse | undefined;
issueNumber: number;
};
const UpgradeToProModal: React.FC<Props> = ({ isOpen, onClose, user, issueNumber }) => {
const [supabaseClient, setSupabaseClient] = useState<any>(null);
useEffect(() => {
// Create a Supabase client
if (process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
const { createClient } = window.supabase;
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
{
auth: {
autoRefreshToken: false,
persistSession: false,
},
}
);
if (supabase) {
setSupabaseClient(supabase);
}
}
}, []);
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
onClose();
setIsLoading(false);
};
const proFeatures = [
"Everything in free",
"Unlimited users",
"Unlimited file uploads",
"Priority Support",
"Custom Theming",
"Access to Roadmap",
"Plane AI (GPT unlimited)",
];
const [errorMessage, setErrorMessage] = useState<null | { status: String; message: string }>(
null
);
const [loader, setLoader] = useState(false);
const submitEmail = async () => {
setLoader(true);
const payload = { email: user?.email || "" };
if (supabaseClient) {
if (payload?.email) {
const emailExists = await supabaseClient
.from("web-waitlist")
.select("id,email,count")
.eq("email", payload?.email);
if (emailExists.data.length === 0) {
const emailCreation = await supabaseClient
.from("web-waitlist")
.insert([{ email: payload?.email, count: 1, last_visited: new Date() }])
.select("id,email,count");
if (emailCreation.status === 201)
setErrorMessage({ status: "success", message: "Successfully registered." });
else setErrorMessage({ status: "insert_error", message: "Insertion Error." });
} else {
const emailCountUpdate = await supabaseClient
.from("web-waitlist")
.upsert({
id: emailExists.data[0]?.id,
count: emailExists.data[0]?.count + 1,
last_visited: new Date(),
})
.select("id,email,count");
if (emailCountUpdate.status === 201)
setErrorMessage({
status: "email_already_exists",
message: "Email already exists.",
});
else setErrorMessage({ status: "update_error", message: "Update Error." });
}
} else setErrorMessage({ status: "email_required", message: "Please provide email." });
} else
setErrorMessage({
status: "supabase_error",
message: "Network error. Please try again later.",
});
setLoader(false);
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
<div className="flex flex-wrap">
<div className="w-full md:w-3/5 p-6 flex flex-col gap-y-6">
<div className="flex gap-2">
<div
className={`font-semibold outline-none text-sm mt-1.5 ${
issueNumber >= 750
? "text-red-600"
: issueNumber >= 500
? "text-yellow-600"
: "text-green-600"
}`}
title="Shortcuts"
>
<CircularProgress
progress={
(issueNumber / 1024) * 100 > 100 ? 100 : (issueNumber / 1024) * 100
}
/>
</div>
<div className="">
<div className="font-semibold text-lg">Upgrade to pro</div>
<div className="text-custom-text-200 text-sm">
This workspace has used {issueNumber} of its 1024 issues creation limit (
{((issueNumber / 1024) * 100).toFixed(2)}%).
</div>
</div>
<div
onClick={handleClose}
className="w-5 h-5 text-custom-text-200 cursor-pointer mt-1.5 md:hidden block ml-auto"
>
<XCircleIcon />
</div>
</div>
<div className="flex gap-2 pt-6">
<div
className={`font-semibold outline-none text-sm mt-1.5 w-5 h-5 text-[#892FFF] flex-shrink-0`}
title="Shortcuts"
>
<RocketLaunchIcon />
</div>
<div className="">
<div className="font-semibold text-lg">Order summary</div>
<div className="text-custom-text-200 text-sm">
Priority support, file uploads, and access to premium features.
</div>
<div className="flex flex-wrap my-4">
{proFeatures.map((feature, index) => (
<div key={index} className="w-1/2 py-2 flex gap-2 my-1.5">
<div className="w-5 h-5 mt-0.5 text-green-600">
<CheckCircleIcon />
</div>
<div>{feature}</div>
</div>
))}
</div>
</div>
</div>
</div>
<div className="w-full md:w-2/5 bg-custom-background-90 p-6 flex flex-col">
<div className="flex justify-between items-center">
<div className="font-semibold text-lg">Summary</div>
<div
onClick={handleClose}
className="w-5 h-5 text-custom-text-200 cursor-pointer mt-1.5 hidden md:block"
>
<XCircleIcon />
</div>
</div>
<div className="text-custom-text-200 text-sm mt-4">
Plane application is currently in dev-mode. We will soon introduce Pro plans
once general availability has been established. Stay tuned for more updates.
In the meantime, Plane remains free and unrestricted.
<br /> <br />
We{"'"}ll ensure a smooth transition from the community version to the Pro
plan for you.
</div>
<button
disabled={loader}
onClick={() => submitEmail()}
type="button"
className="mt-5 md:mt-auto whitespace-nowrap max-w-min items-center gap-x-1 rounded-md px-3 py-2 font-medium outline-none text-sm bg-custom-primary-100 text-white"
>
{loader ? "Loading.." : " Join waitlist"}
</button>
{errorMessage && (
<div
className={`mt-1 text-sm ${
errorMessage && errorMessage?.status === "success"
? "text-green-500"
: " text-red-500"
}`}
>
{errorMessage?.message}
</div>
)}
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};
export default UpgradeToProModal;

2
apps/app/constants/issue.ts
View File

@ -73,6 +73,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
...prevData[issueIndex],
...formData,
assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
};
prevData.splice(issueIndex, 1, updatedIssue);
@ -90,6 +91,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
...oldGroup[issueIndex],
...formData,
assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
};
if (selectedGroupBy !== Object.keys(formData)[0])

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -140,7 +140,7 @@ const SingleCycle: React.FC = () => {
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}
className="!py-1.5 font-normal rounded-md text-custom-text-200"
className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
outline
>
Analytics

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View File

@ -63,7 +63,7 @@ const ProjectIssues: NextPage = () => {
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}
className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
outline
>
Analytics
@ -72,7 +72,7 @@ const ProjectIssues: NextPage = () => {
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
<a>
<SecondaryButton
className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
outline
>
<span>Inbox</span>

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -144,7 +144,7 @@ const SingleModule: React.FC = () => {
<IssuesFilterView />
<SecondaryButton
onClick={() => setAnalyticsModal(true)}
className="!py-1.5 font-normal rounded-md text-custom-text-200"
className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
outline
>
Analytics

12
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View File

@ -122,14 +122,14 @@ const EstimatesSettings: NextPage = () => {
</Breadcrumbs>
}
>
<div className="p-8">
<div className="h-full flex flex-col p-8 overflow-hidden">
<SettingsHeader />
<section className="flex items-center justify-between">
<h3 className="text-2xl font-semibold">Estimates</h3>
<div className="col-span-12 space-y-5 sm:col-span-7">
<div className="flex items-center gap-2">
<span
className="flex cursor-pointer items-center gap-2 text-theme"
<div
className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
onClick={() => {
setEstimateToUpdate(undefined);
setEstimateFormOpen(true);
@ -137,7 +137,7 @@ const EstimatesSettings: NextPage = () => {
>
<PlusIcon className="h-4 w-4" />
Create New Estimate
</span>
</div>
{projectDetails?.estimate && (
<SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
)}
@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
</section>
{estimatesList ? (
estimatesList.length > 0 ? (
<section className="mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6">
<section className="h-full mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6 overflow-y-auto">
{estimatesList.map((estimate) => (
<SingleEstimate
key={estimate.id}
@ -158,7 +158,7 @@ const EstimatesSettings: NextPage = () => {
))}
</section>
) : (
<div className="mt-5">
<div className="grid h-full w-full place-items-center">
<EmptyState
type="estimate"
title="Create New Estimate"

18
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View File

@ -188,7 +188,7 @@ const FeaturesSettings: NextPage = () => {
>
<div className="flex items-start gap-3">
{feature.icon}
<div>
<div className="">
<h4 className="text-lg font-semibold">{feature.title}</h4>
<p className="text-sm text-custom-text-200">{feature.description}</p>
</div>
@ -219,11 +219,21 @@ const FeaturesSettings: NextPage = () => {
</div>
))}
</div>
<div className="flex items-center gap-2">
<a href="https://plane.so/" target="_blank" rel="noreferrer">
<div className="flex items-center gap-2 text-custom-text-200">
<a
href="https://plane.so/"
target="_blank"
rel="noreferrer"
className="hover:text-custom-text-100"
>
<SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
</a>
<a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
<a
href="https://github.com/makeplane/plane"
target="_blank"
rel="noreferrer"
className="hover:text-custom-text-100"
>
<SecondaryButton outline>Star us on GitHub</SecondaryButton>
</a>
</div>

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
View File

@ -58,11 +58,11 @@ const ProjectIntegrations: NextPage = () => {
</Breadcrumbs>
}
>
<div className="p-8">
<div className="h-full flex flex-col p-8 overflow-hidden">
<SettingsHeader />
{workspaceIntegrations ? (
workspaceIntegrations.length > 0 ? (
<section className="space-y-8">
<section className="space-y-8 overflow-y-auto">
<IntegrationAndImportExportBanner bannerName="Integrations" />
<div className="space-y-5">
{workspaceIntegrations.map((integration) => (

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -85,10 +85,10 @@ const StatesSettings: NextPage = () => {
return (
<div key={key}>
<div className="mb-2 flex w-full justify-between">
<h4 className="font-medium capitalize">{key}</h4>
<h4 className="text-custom-text-200 capitalize">{key}</h4>
<button
type="button"
className="flex items-center gap-2 text-custom-primary outline-none"
className="flex items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200 outline-none"
onClick={() => setActiveGroup(key as keyof StateGroup)}
>
<PlusIcon className="h-4 w-4" />

1
apps/app/pages/_document.tsx
View File

@ -13,6 +13,7 @@ class MyDocument extends Document {
<link rel="apple-touch-icon" href="/icon.png" />
<meta name="theme-color" content="#fff" />
<script defer data-domain="app.plane.so" src="https://plausible.io/js/script.js" />
<script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2" />
{isSessionRecorderEnabled && process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY && (
<script
defer

22
apps/app/services/web-waitlist.service.ts Normal file
View File

@ -0,0 +1,22 @@
// services
import APIService from "services/api.service";
// types
import { IWebWaitListResponse } from "types";
class WebWailtListServices extends APIService {
constructor() {
const origin = typeof window !== "undefined" ? window.location.origin || "" : "";
super(origin);
}
async create({ email }: { email: string }): Promise<IWebWaitListResponse> {
return this.post(`/api/web-waitlist`, { email: email })
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
}
export default new WebWailtListServices();

16
apps/app/styles/globals.css
View File

@ -88,26 +88,26 @@
[data-theme="dark"] {
color-scheme: dark !important;
--color-background-100: 0, 0, 0; /* primary bg */
--color-background-100: 7, 7, 7; /* primary bg */
--color-background-90: 11, 11, 11; /* secondary bg */
--color-background-80: 23, 23, 23; /* tertiary bg */
--color-text-100: 255, 255, 255; /* primary text */
--color-text-200: 82, 82, 82; /* secondary text */
--color-text-300: 115, 115, 115; /* tertiary text */
--color-text-100: 241, 241, 241; /* primary text */
--color-text-200: 115, 115, 115; /* secondary text */
--color-text-300: 163, 163, 163; /* tertiary text */
--color-border-100: 34, 34, 34; /* subtle border= 1 */
--color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */
--color-border-400: 58, 58, 58; /* strong border- 2 */
--color-sidebar-background-100: 0, 0, 0; /* primary sidebar bg */
--color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
--color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
--color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
--color-sidebar-text-100: 255, 255, 255; /* primary sidebar text */
--color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
--color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
--color-sidebar-text-100: 241, 241, 241; /* primary sidebar text */
--color-sidebar-text-200: 115, 115, 115; /* secondary sidebar text */
--color-sidebar-text-300: 163, 163, 163; /* tertiary sidebar text */
--color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
--color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */

2
apps/app/tailwind.config.js
View File

@ -1,4 +1,4 @@
const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
module.exports = {
darkMode: "class",

1
apps/app/types/index.d.ts vendored
View File

@ -15,6 +15,7 @@ export * from "./importer";
export * from "./inbox";
export * from "./analytics";
export * from "./calendar";
export * from "./waitlist";
export type NestedKeyOf<ObjectType extends object> = {
[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object

3
apps/app/types/waitlist.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
export interface IWebWaitListResponse {
status: string;
}

1
apps/app/types/workspace.d.ts vendored
View File

@ -14,6 +14,7 @@ export interface IWorkspace {
readonly created_by: string;
readonly updated_by: string;
company_size: number | null;
total_issues: number | null;
}
export interface IWorkspaceLite {

8
docker-compose-hub.yml
View File

@ -1,6 +1,7 @@
version: "3.8"
x-api-and-worker-env: &api-and-worker-env
x-api-and-worker-env:
&api-and-worker-env
DEBUG: ${DEBUG}
SENTRY_DSN: ${SENTRY_DSN}
DJANGO_SETTINGS_MODULE: plane.settings.production
@ -23,6 +24,7 @@ x-api-and-worker-env: &api-and-worker-env
GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
DISABLE_COLLECTSTATIC: 1
DOCKERIZED: 1
OPENAI_API_BASE: ${OPENAI_API_BASE}
OPENAI_API_KEY: ${OPENAI_API_KEY}
GPT_ENGINE: ${GPT_ENGINE}
SECRET_KEY: ${SECRET_KEY}
@ -118,9 +120,7 @@ services:
createbuckets:
image: minio/mc
entrypoint: >
/bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY;
/usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME;
/usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
/bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
env_file:
- .env
depends_on:

8
docker-compose.yml
View File

@ -1,6 +1,7 @@
version: "3.8"
x-api-and-worker-env: &api-and-worker-env
x-api-and-worker-env:
&api-and-worker-env
DEBUG: ${DEBUG}
SENTRY_DSN: ${SENTRY_DSN}
DJANGO_SETTINGS_MODULE: plane.settings.production
@ -23,6 +24,7 @@ x-api-and-worker-env: &api-and-worker-env
GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
DISABLE_COLLECTSTATIC: 1
DOCKERIZED: 1
OPENAI_API_BASE: ${OPENAI_API_BASE}
OPENAI_API_KEY: ${OPENAI_API_KEY}
GPT_ENGINE: ${GPT_ENGINE}
SECRET_KEY: ${SECRET_KEY}
@ -126,9 +128,7 @@ services:
createbuckets:
image: minio/mc
entrypoint: >
/bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY;
/usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME;
/usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
/bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
env_file:
- .env
depends_on:

4
turbo.json
View File

@ -20,7 +20,9 @@
"NEXT_PUBLIC_SESSION_RECORDER_KEY",
"NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS",
"NEXT_PUBLIC_SLACK_CLIENT_ID",
"NEXT_PUBLIC_SLACK_CLIENT_SECRET"
"NEXT_PUBLIC_SLACK_CLIENT_SECRET",
"NEXT_PUBLIC_SUPABASE_URL",
"NEXT_PUBLIC_SUPABASE_ANON_KEY"
],
"pipeline": {
"build": {