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

Merge branch 'develop' of github.com:makeplane/plane into dev/private_bucket_for_attachments

Browse Source
This commit is contained in:
pablohashescobar 2023-09-22 13:22:14 +05:30
commit c76d1dc8db
19 changed files with 422 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apiserver/plane/bgtasks/exporter_expired_task.py
View File

@ -32,7 +32,7 @@ def delete_old_s3_link():
else: else:
s3 = boto3.client( s3 = boto3.client(
"s3", "s3",
region_name="ap-south-1", region_name=settings.AWS_REGION,
aws_access_key_id=settings.AWS_ACCESS_KEY_ID, aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY, aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
config=Config(signature_version="s3v4"), config=Config(signature_version="s3v4"),

107
docker-compose-hub.yml
View File

@ -1,113 +1,61 @@
version: "3.8" version: "3.8"
x-api-and-worker-env:
&api-and-worker-env
DEBUG: ${DEBUG}
SENTRY_DSN: ${SENTRY_DSN}
DJANGO_SETTINGS_MODULE: plane.settings.selfhosted
DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
REDIS_URL: redis://plane-redis:6379/
EMAIL_HOST: ${EMAIL_HOST}
EMAIL_HOST_USER: ${EMAIL_HOST_USER}
EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
EMAIL_PORT: ${EMAIL_PORT}
EMAIL_FROM: ${EMAIL_FROM}
EMAIL_USE_TLS: ${EMAIL_USE_TLS}
EMAIL_USE_SSL: ${EMAIL_USE_SSL}
AWS_REGION: ${AWS_REGION}
AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
WEB_URL: ${WEB_URL}
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}
DEFAULT_EMAIL: ${DEFAULT_EMAIL}
DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
USE_MINIO: ${USE_MINIO}
ENABLE_SIGNUP: ${ENABLE_SIGNUP}
services: services:
plane-web: web:
container_name: planefrontend container_name: web
image: makeplane/plane-frontend:latest image: makeplane/plane-frontend:latest
restart: always restart: always
command: /usr/local/bin/start.sh web/server.js web command: /usr/local/bin/start.sh web/server.js web
env_file: env_file:
- .env - ./web/.env
environment:
NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
NEXT_PUBLIC_GITHUB_APP_NAME: "0"
NEXT_PUBLIC_GITHUB_ID: "0"
NEXT_PUBLIC_SENTRY_DSN: "0"
NEXT_PUBLIC_ENABLE_OAUTH: "0"
NEXT_PUBLIC_ENABLE_SENTRY: "0"
NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
NEXT_PUBLIC_TRACK_EVENTS: "0"
depends_on: depends_on:
- plane-api - api
- plane-worker - worker
plane-deploy: space:
container_name: planedeploy container_name: space
image: makeplane/plane-deploy:latest image: makeplane/plane-space:latest
restart: always restart: always
command: /usr/local/bin/start.sh space/server.js space command: /usr/local/bin/start.sh space/server.js space
env_file: env_file:
- .env - ./space/.env
environment:
NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
depends_on: depends_on:
- plane-api - api
- plane-worker - worker
- plane-web - web
plane-api: api:
container_name: planebackend container_name: api
image: makeplane/plane-backend:latest image: makeplane/plane-backend:latest
restart: always restart: always
command: ./bin/takeoff command: ./bin/takeoff
env_file: env_file:
- .env - ./apiserver/.env
environment:
<<: *api-and-worker-env
depends_on: depends_on:
- plane-db - plane-db
- plane-redis - plane-redis
plane-worker: worker:
container_name: planebgworker container_name: bgworker
image: makeplane/plane-backend:latest image: makeplane/plane-backend:latest
restart: always restart: always
command: ./bin/worker command: ./bin/worker
env_file: env_file:
- .env - ./apiserver/.env
environment:
<<: *api-and-worker-env
depends_on: depends_on:
- plane-api - api
- plane-db - plane-db
- plane-redis - plane-redis
plane-beat-worker: beat-worker:
container_name: planebeatworker container_name: beatworker
image: makeplane/plane-backend:latest image: makeplane/plane-backend:latest
restart: always restart: always
command: ./bin/beat command: ./bin/beat
env_file: env_file:
- .env - ./apiserver/.env
environment:
<<: *api-and-worker-env
depends_on: depends_on:
- plane-api - api
- plane-db - plane-db
- plane-redis - plane-redis
@ -162,8 +110,8 @@ services:
- plane-minio - plane-minio
# Comment this if you already have a reverse proxy running # Comment this if you already have a reverse proxy running
plane-proxy: proxy:
container_name: planeproxy container_name: proxy
image: makeplane/plane-proxy:latest image: makeplane/plane-proxy:latest
ports: ports:
- ${NGINX_PORT}:80 - ${NGINX_PORT}:80
@ -173,8 +121,9 @@ services:
FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880} FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads} BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
depends_on: depends_on:
- plane-web - web
- plane-api - api
- space
volumes: volumes:
pgdata: pgdata:

43
docker-compose.yml
View File

@ -1,8 +1,8 @@
version: "3.8" version: "3.8"
services: services:
plane-web: web:
container_name: planefrontend container_name: web
build: build:
context: . context: .
dockerfile: ./web/Dockerfile.web dockerfile: ./web/Dockerfile.web
@ -11,11 +11,11 @@ services:
restart: always restart: always
command: /usr/local/bin/start.sh web/server.js web command: /usr/local/bin/start.sh web/server.js web
depends_on: depends_on:
- plane-api - api
- plane-worker - worker
plane-deploy: space:
container_name: planedeploy container_name: space
build: build:
context: . context: .
dockerfile: ./space/Dockerfile.space dockerfile: ./space/Dockerfile.space
@ -24,12 +24,12 @@ services:
restart: always restart: always
command: /usr/local/bin/start.sh space/server.js space command: /usr/local/bin/start.sh space/server.js space
depends_on: depends_on:
- plane-api - api
- plane-worker - worker
- plane-web - web
plane-api: api:
container_name: planebackend container_name: api
build: build:
context: ./apiserver context: ./apiserver
dockerfile: Dockerfile.api dockerfile: Dockerfile.api
@ -43,8 +43,8 @@ services:
- plane-db - plane-db
- plane-redis - plane-redis
plane-worker: worker:
container_name: planebgworker container_name: bgworker
build: build:
context: ./apiserver context: ./apiserver
dockerfile: Dockerfile.api dockerfile: Dockerfile.api
@ -55,12 +55,12 @@ services:
env_file: env_file:
- ./apiserver/.env - ./apiserver/.env
depends_on: depends_on:
- plane-api - api
- plane-db - plane-db
- plane-redis - plane-redis
plane-beat-worker: beat-worker:
container_name: planebeatworker container_name: beatworker
build: build:
context: ./apiserver context: ./apiserver
dockerfile: Dockerfile.api dockerfile: Dockerfile.api
@ -71,7 +71,7 @@ services:
env_file: env_file:
- ./apiserver/.env - ./apiserver/.env
depends_on: depends_on:
- plane-api - api
- plane-db - plane-db
- plane-redis - plane-redis
@ -123,8 +123,8 @@ services:
- plane-minio - plane-minio
# Comment this if you already have a reverse proxy running # Comment this if you already have a reverse proxy running
plane-proxy: proxy:
container_name: planeproxy container_name: proxy
build: build:
context: ./nginx context: ./nginx
dockerfile: Dockerfile dockerfile: Dockerfile
@ -136,8 +136,9 @@ services:
PUBLIC_BUCKET_NAME: ${AWS_PUBLIC_STORAGE_BUCKET_NAME:-uploads} PUBLIC_BUCKET_NAME: ${AWS_PUBLIC_STORAGE_BUCKET_NAME:-uploads}
PRIVATE_BUCKET_NAME: ${AWS_PRIVATE_STORAGE_BUCKET_NAME:-uploads-private} PRIVATE_BUCKET_NAME: ${AWS_PRIVATE_STORAGE_BUCKET_NAME:-uploads-private}
depends_on: depends_on:
- plane-web - web
- plane-api - api
- space
volumes: volumes:
pgdata: pgdata:

13
nginx/nginx.conf.template
View File

@ -1,25 +1,26 @@
events { } events {
}
http { http {
sendfile on; sendfile on;
server { server {
listen 80; listen 80;
root /www/data/; root /www/data/;
access_log /var/log/nginx/access.log; access_log /var/log/nginx/access.log;
client_max_body_size ${FILE_SIZE_LIMIT}; client_max_body_size ${FILE_SIZE_LIMIT};
location / { location / {
proxy_pass http://planefrontend:3000/; proxy_pass http://web:3000/;
} }
location /api/ { location /api/ {
proxy_pass http://planebackend:8000/api/; proxy_pass http://api:8000/api/;
} }
location /spaces/ { location /spaces/ {
proxy_pass http://planedeploy:3000/spaces/; proxy_pass http://space:3000/spaces/;
} }
location /${PUBLIC_BUCKET_NAME}/ { location /${PUBLIC_BUCKET_NAME}/ {

2
space/.env.example
View File

@ -1,4 +1,2 @@
# Google Client ID for Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENTID=""
# Flag to toggle OAuth # Flag to toggle OAuth
NEXT_PUBLIC_ENABLE_OAUTH=0 NEXT_PUBLIC_ENABLE_OAUTH=0

22
web/.env.example
View File

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

1
web/components/analytics/custom-analytics/graph/index.tsx
View File

@ -9,7 +9,6 @@ import { findStringWithMostCharacters } from "helpers/array.helper";
import { generateBarColor } from "helpers/analytics.helper"; import { generateBarColor } from "helpers/analytics.helper";
// types // types
import { IAnalyticsParams, IAnalyticsResponse } from "types"; import { IAnalyticsParams, IAnalyticsResponse } from "types";
// constants
type Props = { type Props = {
analytics: IAnalyticsResponse; analytics: IAnalyticsResponse;

44
web/components/core/activity.tsx
View File

@ -1,5 +1,9 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr";
// services
import issuesService from "services/issues.service";
// icons // icons
import { Icon, Tooltip } from "components/ui"; import { Icon, Tooltip } from "components/ui";
import { CopyPlus } from "lucide-react"; import { CopyPlus } from "lucide-react";
@ -10,6 +14,8 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { capitalizeFirstLetter } from "helpers/string.helper"; import { capitalizeFirstLetter } from "helpers/string.helper";
// types // types
import { IIssueActivity } from "types"; import { IIssueActivity } from "types";
// fetch-keys
import { WORKSPACE_LABELS } from "constants/fetch-keys";
const IssueLink = ({ activity }: { activity: IIssueActivity }) => { const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
const router = useRouter(); const router = useRouter();
@ -52,6 +58,26 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
); );
}; };
const LabelPill = ({ labelId }: { labelId: string }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: labels } = useSWR(
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
);
return (
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
}}
aria-hidden="true"
/>
);
};
const activityDetails: { const activityDetails: {
[key: string]: { [key: string]: {
message: ( message: (
@ -325,14 +351,8 @@ const activityDetails: {
return ( return (
<> <>
added a new label{" "} added a new label{" "}
<span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs"> <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<span <LabelPill labelId={activity.new_identifier ?? ""} />
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: "#000000",
}}
aria-hidden="true"
/>
<span className="font-medium text-custom-text-100">{activity.new_value}</span> <span className="font-medium text-custom-text-100">{activity.new_value}</span>
</span> </span>
{showIssue && ( {showIssue && (
@ -348,13 +368,7 @@ const activityDetails: {
<> <>
removed the label{" "} removed the label{" "}
<span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs"> <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<span <LabelPill labelId={activity.old_identifier ?? ""} />
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: "#000000",
}}
aria-hidden="true"
/>
<span className="font-medium text-custom-text-100">{activity.old_value}</span> <span className="font-medium text-custom-text-100">{activity.old_value}</span>
</span> </span>
{showIssue && ( {showIssue && (

2
web/components/core/views/board-view/all-boards.tsx
View File

@ -76,7 +76,7 @@ export const AllBoards: React.FC<Props> = ({
readOnly={disableUserActions} readOnly={disableUserActions}
/> />
{groupedIssues ? ( {groupedIssues ? (
<div className="horizontal-scroll-enable flex h-full gap-x-4 p-8"> <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
{Object.keys(groupedIssues).map((singleGroup, index) => { {Object.keys(groupedIssues).map((singleGroup, index) => {
const currentState = const currentState =
displayFilters?.group_by === "state" displayFilters?.group_by === "state"

4
web/components/issues/main-content.tsx
View File

@ -43,7 +43,7 @@ export const IssueMainContent: React.FC<Props> = ({
uneditable = false, uneditable = false,
}) => { }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query; const { workspaceSlug, projectId, issueId } = router.query;
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} /> <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
<SubIssuesRoot parentIssue={issueDetails} user={user} editable={uneditable} /> <SubIssuesRoot parentIssue={issueDetails} user={user} />
</div> </div>
</div> </div>
<div className="flex flex-col gap-3 py-3"> <div className="flex flex-col gap-3 py-3">

59
web/components/issues/sub-issues/issue.tsx
View File

@ -16,9 +16,9 @@ import { SubIssuesRootList } from "./issues-list";
import { IssueProperty } from "./properties"; import { IssueProperty } from "./properties";
// ui // ui
import { Tooltip, CustomMenu } from "components/ui"; import { Tooltip, CustomMenu } from "components/ui";
// types // types
import { ICurrentUserResponse, IIssue } from "types"; import { ICurrentUserResponse, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
export interface ISubIssues { export interface ISubIssues {
workspaceSlug: string; workspaceSlug: string;
@ -29,8 +29,8 @@ export interface ISubIssues {
user: ICurrentUserResponse | undefined; user: ICurrentUserResponse | undefined;
editable: boolean; editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void; removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
issuesVisibility: string[]; issuesLoader: ISubIssuesRootLoaders;
handleIssuesVisibility: (issueId: string) => void; handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
copyText: (text: string) => void; copyText: (text: string) => void;
handleIssueCrudOperation: ( handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete", key: "create" | "existing" | "edit" | "delete",
@ -48,8 +48,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
user, user,
editable, editable,
removeIssueFromSubIssues, removeIssueFromSubIssues,
issuesVisibility, issuesLoader,
handleIssuesVisibility, handleIssuesLoader,
copyText, copyText,
handleIssueCrudOperation, handleIssueCrudOperation,
}) => ( }) => (
@ -62,19 +62,21 @@ export const SubIssues: React.FC<ISubIssues> = ({
<div className="flex-shrink-0 w-[22px] h-[22px]"> <div className="flex-shrink-0 w-[22px] h-[22px]">
{issue?.sub_issues_count > 0 && ( {issue?.sub_issues_count > 0 && (
<> <>
{true ? ( {issuesLoader.sub_issues.includes(issue?.id) ? (
<div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div <div
className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer" className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
onClick={() => handleIssuesVisibility(issue?.id)} onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
> >
{issuesVisibility && issuesVisibility.includes(issue?.id) ? ( {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
<ChevronDown width={14} strokeWidth={2} /> <ChevronDown width={14} strokeWidth={2} />
) : ( ) : (
<ChevronRight width={14} strokeWidth={2} /> <ChevronRight width={14} strokeWidth={2} />
)} )}
</div> </div>
) : (
<Loader width={14} strokeWidth={2} className="animate-spin" />
)} )}
</> </>
)} )}
@ -92,7 +94,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
{issue.project_detail.identifier}-{issue?.sequence_id} {issue.project_detail.identifier}-{issue?.sequence_id}
</div> </div>
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}> <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
<div className="line-clamp-1 text-xs text-custom-text-100">{issue?.name}</div> <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
</Tooltip> </Tooltip>
</a> </a>
</Link> </Link>
@ -132,7 +134,11 @@ export const SubIssues: React.FC<ISubIssues> = ({
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={copyText}> <CustomMenu.MenuItem
onClick={() =>
copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
}
>
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<LinkIcon width={14} strokeWidth={2} /> <LinkIcon width={14} strokeWidth={2} />
<span>Copy issue link</span> <span>Copy issue link</span>
@ -142,17 +148,28 @@ export const SubIssues: React.FC<ISubIssues> = ({
</div> </div>
{editable && ( {editable && (
<div <>
className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden" {issuesLoader.delete.includes(issue?.id) ? (
onClick={() => removeIssueFromSubIssues(parentIssue?.id, issue)} <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
> <Loader width={14} strokeWidth={2} className="animate-spin" />
<X width={14} strokeWidth={2} /> </div>
</div> ) : (
<div
className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
onClick={() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
removeIssueFromSubIssues(parentIssue?.id, issue);
}}
>
<X width={14} strokeWidth={2} />
</div>
)}
</>
)} )}
</div> </div>
)} )}
{issuesVisibility.includes(issue?.id) && issue?.sub_issues_count > 0 && ( {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
<SubIssuesRootList <SubIssuesRootList
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
@ -161,8 +178,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
user={user} user={user}
editable={editable} editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues} removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesVisibility={issuesVisibility} issuesLoader={issuesLoader}
handleIssuesVisibility={handleIssuesVisibility} handleIssuesLoader={handleIssuesLoader}
copyText={copyText} copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation} handleIssueCrudOperation={handleIssueCrudOperation}
/> />

23
web/components/issues/sub-issues/issues-list.tsx
View File

@ -5,6 +5,7 @@ import useSWR from "swr";
import { SubIssues } from "./issue"; import { SubIssues } from "./issue";
// types // types
import { ICurrentUserResponse, IIssue } from "types"; import { ICurrentUserResponse, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
// services // services
import issuesService from "services/issues.service"; import issuesService from "services/issues.service";
// fetch keys // fetch keys
@ -18,8 +19,8 @@ export interface ISubIssuesRootList {
user: ICurrentUserResponse | undefined; user: ICurrentUserResponse | undefined;
editable: boolean; editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void; removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
issuesVisibility: string[]; issuesLoader: ISubIssuesRootLoaders;
handleIssuesVisibility: (issueId: string) => void; handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
copyText: (text: string) => void; copyText: (text: string) => void;
handleIssueCrudOperation: ( handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete", key: "create" | "existing" | "edit" | "delete",
@ -36,8 +37,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
user, user,
editable, editable,
removeIssueFromSubIssues, removeIssueFromSubIssues,
issuesVisibility, issuesLoader,
handleIssuesVisibility, handleIssuesLoader,
copyText, copyText,
handleIssueCrudOperation, handleIssueCrudOperation,
}) => { }) => {
@ -50,6 +51,16 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
: null : null
); );
React.useEffect(() => {
if (isLoading) {
handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
} else {
if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
}
}
}, [isLoading]);
return ( return (
<div className="relative"> <div className="relative">
{issues && {issues &&
@ -66,8 +77,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
user={user} user={user}
editable={editable} editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues} removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesVisibility={issuesVisibility} issuesLoader={issuesLoader}
handleIssuesVisibility={handleIssuesVisibility} handleIssuesLoader={handleIssuesLoader}
copyText={copyText} copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation} handleIssueCrudOperation={handleIssueCrudOperation}
/> />

2
web/components/issues/sub-issues/progressbar.tsx
View File

@ -14,7 +14,7 @@ export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
<div className="w-full"> <div className="w-full">
<div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow"> <div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
<div <div
className="bg-green-500 h-[6px] rounded-full" className="bg-green-500 h-[6px] rounded-full transition-all"
style={{ width: `${calPercentage(done, total)}%` }} style={{ width: `${calPercentage(done, total)}%` }}
/> />
</div> </div>

10
web/components/issues/sub-issues/properties.tsx
View File

@ -86,12 +86,14 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
}; };
const handleAssigneeChange = (data: any) => { const handleAssigneeChange = (data: any) => {
const newData = issue.assignees ?? []; let newData = issue.assignees ?? [];
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1); if (newData && newData.length > 0) {
else newData.push(data); if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
else newData = [...newData, data];
} else newData = [...newData, data];
partialUpdateIssue({ assignees_list: data }); partialUpdateIssue({ assignees_list: data, assignees: data });
trackEventServices.trackIssuePartialPropertyUpdateEvent( trackEventServices.trackIssuePartialPropertyUpdateEvent(
{ {

355
web/components/issues/sub-issues/root.tsx
View File

@ -14,6 +14,7 @@ import { ProgressBar } from "./progressbar";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
// hooks // hooks
import { useProjectMyMembership } from "contexts/project-member.context"; import { useProjectMyMembership } from "contexts/project-member.context";
import useToast from "hooks/use-toast";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
@ -25,18 +26,27 @@ import { SUB_ISSUES } from "constants/fetch-keys";
export interface ISubIssuesRoot { export interface ISubIssuesRoot {
parentIssue: IIssue; parentIssue: IIssue;
user: ICurrentUserResponse | undefined; user: ICurrentUserResponse | undefined;
editable: boolean;
} }
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, editable }) => { export interface ISubIssuesRootLoaders {
visibility: string[];
delete: string[];
sub_issues: string[];
}
export interface ISubIssuesRootLoadersHandler {
key: "visibility" | "delete" | "sub_issues";
issueId: string;
}
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { memberRole } = useProjectMyMembership(); const { memberRole } = useProjectMyMembership();
const { setToastAlert } = useToast();
const { data: issues } = useSWR( const { data: issues, isLoading } = useSWR(
workspaceSlug && projectId && parentIssue && parentIssue?.id workspaceSlug && projectId && parentIssue && parentIssue?.id
? SUB_ISSUES(parentIssue?.id) ? SUB_ISSUES(parentIssue?.id)
: null, : null,
@ -45,13 +55,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
: null : null
); );
const [issuesVisibility, setIssuesVisibility] = React.useState<string[]>([parentIssue?.id]); const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
const handleIssuesVisibility = (issueId: string) => { visibility: [parentIssue?.id],
if (issuesVisibility.includes(issueId)) { delete: [],
setIssuesVisibility(issuesVisibility.filter((i: string) => i !== issueId)); sub_issues: [],
} else { });
setIssuesVisibility([...issuesVisibility, issueId]); const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
} setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
...previousData,
[key]: previousData[key].includes(issueId)
? previousData[key].filter((i: string) => i !== issueId)
: [...previousData[key], issueId],
}));
}; };
const [issueCrudOperation, setIssueCrudOperation] = React.useState<{ const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
@ -100,7 +115,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
const payload = { const payload = {
sub_issue_ids: data.map((i) => i.id), sub_issue_ids: data.map((i) => i.id),
}; };
await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => { await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
if (issueId) mutate(SUB_ISSUES(issueId)); if (issueId) mutate(SUB_ISSUES(issueId));
}); });
@ -110,8 +124,22 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
if (!workspaceSlug || !parentIssue || !issue?.id) return; if (!workspaceSlug || !parentIssue || !issue?.id) return;
issuesService issuesService
.patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user) .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
.finally(() => { .then(async () => {
if (parentIssueId) mutate(SUB_ISSUES(parentIssueId)); if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
handleIssuesLoader({ key: "delete", issueId: issue?.id });
setToastAlert({
type: "success",
title: `Issue removed!`,
message: `Issue removed successfully.`,
});
})
.catch(() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
setToastAlert({
type: "warning",
title: `Error!`,
message: `Error, Please try again later.`,
});
}); });
}; };
@ -119,11 +147,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
const originURL = const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${text}`).then(() => { copyTextToClipboard(`${originURL}/${text}`).then(() => {
// setToastAlert({ setToastAlert({
// type: "success", type: "success",
// title: "Link Copied!", title: "Link Copied!",
// message: "Issue link copied to clipboard.", message: "Issue link copied to clipboard.",
// }); });
}); });
}; };
@ -135,148 +163,165 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
return ( return (
<div className="w-full h-full space-y-2"> <div className="w-full h-full space-y-2">
{parentIssue && parentIssue?.sub_issues_count > 0 ? ( {!issues && isLoading ? (
<div className="py-3 text-center text-sm text-custom-text-300 font-medium">Loading...</div>
) : (
<> <>
{/* header */} {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
<div className="relative flex items-center gap-4 text-xs"> <>
<div {/* header */}
className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none" <div className="relative flex items-center gap-4 text-xs">
onClick={() => handleIssuesVisibility(parentIssue?.id)} <div
> className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center"> onClick={() =>
{issuesVisibility.includes(parentIssue?.id) ? ( handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
<ChevronDown width={16} strokeWidth={2} /> }
) : ( >
<ChevronRight width={14} strokeWidth={2} /> <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
{issuesLoader.visibility.includes(parentIssue?.id) ? (
<ChevronDown width={16} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
<div>Sub-issues</div>
<div>({issues?.sub_issues?.length || 0})</div>
</div>
<div className="w-full max-w-[250px] select-none">
<ProgressBar
total={issues?.sub_issues?.length || 0}
done={
(issues?.state_distribution?.cancelled || 0) +
(issues?.state_distribution?.completed || 0)
}
/>
</div>
{isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
<div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
>
Add sub-issue
</div>
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</div>
</div>
)} )}
</div> </div>
<div>Sub-issues</div>
<div>({parentIssue?.sub_issues_count})</div>
</div>
<div className="w-full max-w-[250px] select-none"> {/* issues */}
<ProgressBar {issuesLoader.visibility.includes(parentIssue?.id) && (
total={parentIssue?.sub_issues_count} <div className="border border-b-0 border-custom-border-100">
done={ <SubIssuesRootList
(issues?.state_distribution?.cancelled || 0) + workspaceSlug={workspaceSlug}
(issues?.state_distribution?.completed || 0) projectId={projectId}
} parentIssue={parentIssue}
/> user={undefined}
</div> editable={isEditable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
{isEditable && issuesVisibility.includes(parentIssue?.id) && ( issuesLoader={issuesLoader}
<div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none"> handleIssuesLoader={handleIssuesLoader}
<div copyText={copyText}
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow" handleIssueCrudOperation={handleIssueCrudOperation}
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)} />
>
Add sub-issue
</div> </div>
<div )}
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</div>
</div>
)}
</div>
{/* issues */}
{issuesVisibility.includes(parentIssue?.id) && (
<div className="border border-b-0 border-custom-border-100">
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
user={undefined}
editable={isEditable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesVisibility={issuesVisibility}
handleIssuesVisibility={handleIssuesVisibility}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>
</div>
)}
</>
) : (
isEditable && (
<div className="text-xs py-2 text-custom-text-300 font-medium">
<div className="py-3 text-center">No sub issues are available</div>
<>
<CustomMenu
label={
<>
<Plus className="h-3 w-3" />
Add sub-issue
</>
}
buttonClassName="whitespace-nowrap"
position="left"
noBorder
noChevron
>
<CustomMenu.MenuItem
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
>
Create new
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
</> </>
</div> ) : (
) isEditable && (
)} <div className="text-xs py-2 text-custom-text-300 font-medium">
<div className="py-3 text-center">No sub issues are available</div>
{isEditable && issueCrudOperation?.create?.toggle && ( <>
<CreateUpdateIssueModal <CustomMenu
isOpen={issueCrudOperation?.create?.toggle} label={
prePopulateData={{ <>
parent: issueCrudOperation?.create?.issueId, <Plus className="h-3 w-3" />
}} Add sub-issue
handleClose={() => handleIssueCrudOperation("create", null)} </>
/> }
)} buttonClassName="whitespace-nowrap"
position="left"
{isEditable && noBorder
issueCrudOperation?.existing?.toggle && noChevron
issueCrudOperation?.existing?.issueId && ( >
<ExistingIssuesListModal <CustomMenu.MenuItem
isOpen={issueCrudOperation?.existing?.toggle} onClick={() => {
handleClose={() => handleIssueCrudOperation("existing", null)} mutateSubIssues(parentIssue?.id);
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }} handleIssueCrudOperation("create", parentIssue?.id);
handleOnSubmit={addAsSubIssueFromExistingIssues} }}
workspaceLevelToggle >
/> Create new
)} </CustomMenu.MenuItem>
<CustomMenu.MenuItem
{isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && ( onClick={() => {
<CreateUpdateIssueModal mutateSubIssues(parentIssue?.id);
isOpen={issueCrudOperation?.edit?.toggle} handleIssueCrudOperation("existing", parentIssue?.id);
handleClose={() => { }}
mutateSubIssues(issueCrudOperation?.edit?.issueId); >
handleIssueCrudOperation("edit", null, null); Add an existing issue
}} </CustomMenu.MenuItem>
data={issueCrudOperation?.edit?.issue} </CustomMenu>
/> </>
)} </div>
)
{isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && ( )}
<DeleteIssueModal {isEditable && issueCrudOperation?.create?.toggle && (
isOpen={issueCrudOperation?.delete?.toggle} <CreateUpdateIssueModal
handleClose={() => { isOpen={issueCrudOperation?.create?.toggle}
mutateSubIssues(issueCrudOperation?.delete?.issueId); prePopulateData={{
handleIssueCrudOperation("delete", null, null); parent: issueCrudOperation?.create?.issueId,
}} }}
data={issueCrudOperation?.delete?.issue} handleClose={() => {
user={user} mutateSubIssues(issueCrudOperation?.create?.issueId);
redirection={false} handleIssueCrudOperation("create", null);
/> }}
/>
)}
{isEditable &&
issueCrudOperation?.existing?.toggle &&
issueCrudOperation?.existing?.issueId && (
<ExistingIssuesListModal
isOpen={issueCrudOperation?.existing?.toggle}
handleClose={() => handleIssueCrudOperation("existing", null)}
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
handleOnSubmit={addAsSubIssueFromExistingIssues}
workspaceLevelToggle
/>
)}
{isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
<>
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.edit?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.edit?.issueId);
handleIssueCrudOperation("edit", null, null);
}}
data={issueCrudOperation?.edit?.issue}
/>
</>
)}
{isEditable &&
issueCrudOperation?.delete?.toggle &&
issueCrudOperation?.delete?.issueId && (
<DeleteIssueModal
isOpen={issueCrudOperation?.delete?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.delete?.issueId);
handleIssueCrudOperation("delete", null, null);
}}
data={issueCrudOperation?.delete?.issue}
user={user}
redirection={false}
/>
)}
</>
)} )}
</div> </div>
); );

1
web/components/profile/profile-issues-view.tsx
View File

@ -51,7 +51,6 @@ export const ProfileIssuesView = () => {
groupedIssues, groupedIssues,
mutateProfileIssues, mutateProfileIssues,
displayFilters, displayFilters,
setDisplayFilters,
isEmpty, isEmpty,
filters, filters,
setFilters, setFilters,

110
web/components/ui/product-updates-modal.tsx
View File

@ -1,15 +1,16 @@
import React from "react"; import React from "react";
import useSWR from "swr"; import useSWR from "swr";
// headless ui // headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// component
import { MarkdownRenderer, Spinner } from "components/ui";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
// services // services
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// helper // components
import { Loader, MarkdownRenderer } from "components/ui";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
// helpers
import { renderLongDateFormat } from "helpers/date-time.helper"; import { renderLongDateFormat } from "helpers/date-time.helper";
type Props = { type Props = {
@ -34,8 +35,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 h-full w-full">
<div className="grid place-items-center min-h-full text-center p-4"> <div className="grid place-items-center h-full w-full p-4">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -45,49 +46,62 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
<div className="max-h-[90vh] overflow-y-auto p-5"> <div className="flex flex-col p-4 max-h-[90vh] w-full">
<div className="sm:flex sm:items-start"> <Dialog.Title
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left"> as="h3"
<Dialog.Title className="flex items-center justify-between text-lg font-semibold"
as="h3" >
className="flex justify-between text-lg font-medium leading-6 text-custom-text-100" <span>Product Updates</span>
> <span>
<span>Product Updates</span> <button type="button" onClick={() => setIsOpen(false)}>
<span> <XMarkIcon
<button type="button" onClick={() => setIsOpen(false)}> className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
<XMarkIcon aria-hidden="true"
className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" />
aria-hidden="true" </button>
/> </span>
</button> </Dialog.Title>
</span> {updates && updates.length > 0 ? (
</Dialog.Title> <div className="h-full overflow-y-auto mt-4 space-y-4">
{updates && updates.length > 0 ? ( {updates.map((item, index) => (
updates.map((item, index) => ( <React.Fragment key={item.id}>
<React.Fragment key={item.id}> <div className="flex items-center gap-3 text-xs text-custom-text-200">
<div className="flex items-center gap-3 text-xs text-custom-text-200"> <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs"> {item.tag_name}
{item.tag_name} </span>
<span>{renderLongDateFormat(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
New
</span> </span>
<span>{renderLongDateFormat(item.published_at)}</span> )}
{index === 0 && ( </div>
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white"> <MarkdownRenderer markdown={item.body} />
New </React.Fragment>
</span> ))}
)}
</div>
<MarkdownRenderer markdown={item.body} />
</React.Fragment>
))
) : (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
Loading...
</div>
)}
</div> </div>
</div> ) : (
<div className="grid place-items-center w-full mt-4">
<Loader className="space-y-6 w-full">
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
</Loader>
</div>
)}
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>

7
web/contexts/profile-issues-context.tsx
View File

@ -71,9 +71,8 @@ export const reducer: ReducerFunctionType = (state, action) => {
...state, ...state,
display_filters: { display_filters: {
...state.display_filters, ...state.display_filters,
...payload, ...payload?.display_filters,
}, },
issueView: payload?.display_filters?.layout || "list",
}; };
return { return {
@ -100,7 +99,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
case "SET_PROPERTIES": { case "SET_PROPERTIES": {
const newState = { const newState = {
...state, ...state,
properties: { display_properties: {
...state.display_properties, ...state.display_properties,
...payload?.display_properties, ...payload?.display_properties,
}, },
@ -129,7 +128,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
type: "SET_DISPLAY_FILTERS", type: "SET_DISPLAY_FILTERS",
payload: { payload: {
display_filters: { display_filters: {
...state.display_filters,
...displayFilter, ...displayFilter,
}, },
}, },
@ -179,7 +177,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
type: "SET_PROPERTIES", type: "SET_PROPERTIES",
payload: { payload: {
display_properties: { display_properties: {
...state.display_properties,
[key]: !state.display_properties[key], [key]: !state.display_properties[key],
}, },
}, },

7
web/helpers/array.helper.ts
View File

@ -38,10 +38,13 @@ export const orderArrayBy = (
export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length; export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
export const findStringWithMostCharacters = (strings: string[]) => export const findStringWithMostCharacters = (strings: string[]): string => {
strings.reduce((longestString, currentString) => if (!strings || strings.length === 0) return "";
return strings.reduce((longestString, currentString) =>
currentString.length > longestString.length ? currentString : longestString currentString.length > longestString.length ? currentString : longestString
); );
};
export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => { export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
if (!arr1 || !arr2) return false; if (!arr1 || !arr2) return false;