forked from github/plane
style: project settings theming (#936)
* style: project and workspace members theming * style: project features theming * style: project settings states theming * style: project settings labels theming * style: project settings integrations theming
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
c80094581e
commit
169a60723b
@ -108,28 +108,26 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5 ${
|
||||
className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5 ${
|
||||
labelForm ? "" : "hidden"
|
||||
}`}
|
||||
ref={ref}
|
||||
>
|
||||
<div className="h-8 w-8 flex-shrink-0">
|
||||
<Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
|
||||
<Popover className="relative z-10 flex h-full w-full items-center justify-center">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
|
||||
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
|
||||
open ? "text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
<span
|
||||
className="h-4 w-4 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "#000",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
className="h-5 w-5 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color"),
|
||||
}}
|
||||
/>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
|
||||
@ -66,7 +66,11 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Disclosure as="div" className="rounded-[10px] border border-brand-base bg-brand-surface-1 p-5 text-brand-base" defaultOpen>
|
||||
<Disclosure
|
||||
as="div"
|
||||
className="rounded-[10px] border border-brand-base bg-brand-base p-5 text-brand-base"
|
||||
defaultOpen
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex cursor-pointer items-center justify-between gap-2">
|
||||
@ -74,7 +78,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
<span>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<h6 className="font-medium text-brand-base">{label.name}</h6>
|
||||
<h6>{label.name}</h6>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CustomMenu ellipsis>
|
||||
@ -122,7 +126,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
|
||||
key={child.id}
|
||||
className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
|
||||
>
|
||||
<h5 className="flex items-center gap-3 text-brand-base">
|
||||
<h5 className="flex items-center gap-3">
|
||||
<span
|
||||
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
|
||||
@ -5,7 +5,7 @@ import { CustomMenu } from "components/ui";
|
||||
// types
|
||||
import { IIssueLabels } from "types";
|
||||
//icons
|
||||
import { RectangleGroupIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
import { RectangleGroupIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type Props = {
|
||||
label: IIssueLabels;
|
||||
@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
|
||||
editLabel,
|
||||
handleLabelDelete,
|
||||
}) => (
|
||||
<div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
@ -29,7 +29,7 @@ export const SingleLabel: React.FC<Props> = ({
|
||||
backgroundColor: label.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
<h6 className="font-medium text-brand-base">{label.name}</h6>
|
||||
<h6 className="text-sm">{label.name}</h6>
|
||||
</div>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
|
||||
|
||||
@ -18,7 +18,6 @@ import SlackLogo from "public/services/slack.png";
|
||||
import { IWorkspaceIntegration } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
|
||||
import { comboMatches } from "@blueprintjs/core";
|
||||
|
||||
type Props = {
|
||||
integration: IWorkspaceIntegration;
|
||||
@ -27,14 +26,12 @@ type Props = {
|
||||
const integrationDetails: { [key: string]: any } = {
|
||||
github: {
|
||||
logo: GithubLogo,
|
||||
installed:
|
||||
"Activate GitHub integrations on individual projects to sync with specific repositories.",
|
||||
notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.",
|
||||
description: "Select GitHub repository to enable sync.",
|
||||
},
|
||||
slack: {
|
||||
logo: SlackLogo,
|
||||
installed: "Activate Slack integrations on individual projects to sync with specific cahnnels.",
|
||||
notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
|
||||
description:
|
||||
"Connect your slack channel to this project to get regular updates. Control which notification you want to receive.",
|
||||
},
|
||||
};
|
||||
|
||||
@ -67,19 +64,19 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
|
||||
} = repo;
|
||||
|
||||
projectService
|
||||
.syncGiuthubRepository(workspaceSlug as string, projectId as string, integration.id, {
|
||||
.syncGithubRepository(workspaceSlug as string, projectId as string, integration.id, {
|
||||
name,
|
||||
owner: login,
|
||||
repository_id: id,
|
||||
url: html_url,
|
||||
})
|
||||
.then((res) => {
|
||||
.then(() => {
|
||||
mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: `${login}/${name} respository synced with the project successfully.`,
|
||||
message: `${login}/${name} repository synced with the project successfully.`,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -88,7 +85,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Respository could not be synced with the project. Please try again.",
|
||||
message: "Repository could not be synced with the project. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -96,24 +93,20 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
|
||||
return (
|
||||
<>
|
||||
{integration && (
|
||||
<div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-12 w-12 flex-shrink-0">
|
||||
<Image
|
||||
src={integrationDetails[integration.integration_detail.provider].logo}
|
||||
alt="GithubLogo"
|
||||
alt={`${integration.integration_detail.title} Logo`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="flex items-center gap-4 text-xl font-semibold">
|
||||
{integration.integration_detail.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
{integration.integration_detail.provider === "github"
|
||||
? "Select GitHub repository to enable sync."
|
||||
: integration.integration_detail.provider === "slack"
|
||||
? "Connect your slack channel to this project to get regular updates. Control which notification you want to receive"
|
||||
: null}
|
||||
<p className="text-sm text-brand-secondary">
|
||||
{integrationDetails[integration.integration_detail.provider].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -155,7 +155,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex items-center gap-x-2 rounded-[10px] bg-brand-surface-1 p-5"
|
||||
className="flex items-center gap-x-2 rounded-[10px] bg-brand-base p-5"
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<Popover className="relative flex h-full w-full items-center justify-center">
|
||||
@ -163,7 +163,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
|
||||
open ? "text-gray-900" : "text-gray-500"
|
||||
open ? "text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
|
||||
@ -134,21 +134,19 @@ export const SingleState: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group flex items-center justify-between gap-2 border-brand-base bg-brand-surface-1 p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
|
||||
>
|
||||
<div className="group flex items-center justify-between gap-2 border-brand-base bg-brand-base p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
|
||||
<div className="flex items-center gap-3">
|
||||
{getStateGroupIcon(state.group, "20", "20", state.color)}
|
||||
<div>
|
||||
<h6 className="text-brand-muted-1 font-medium">{addSpaceIfCamelCase(state.name)}</h6>
|
||||
<p className="text-xs text-gray-400">{state.description}</p>
|
||||
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
|
||||
<p className="text-xs text-brand-secondary">{state.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{index !== 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
|
||||
className="hidden text-brand-secondary group-hover:inline-block"
|
||||
onClick={() => handleMove(state, "up")}
|
||||
>
|
||||
<ArrowUpIcon className="h-4 w-4" />
|
||||
@ -157,18 +155,18 @@ export const SingleState: React.FC<Props> = ({
|
||||
{!(index === groupLength - 1) && (
|
||||
<button
|
||||
type="button"
|
||||
className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
|
||||
className="hidden text-brand-secondary group-hover:inline-block"
|
||||
onClick={() => handleMove(state, "down")}
|
||||
>
|
||||
<ArrowDownIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
{state.default ? (
|
||||
<span className="text-xs text-gray-400">Default</span>
|
||||
<span className="text-xs text-brand-secondary">Default</span>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="hidden text-xs text-gray-400 hover:text-brand-base group-hover:inline-block"
|
||||
className="hidden text-xs text-brand-secondary group-hover:inline-block"
|
||||
onClick={handleMakeDefault}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
@ -177,7 +175,7 @@ export const SingleState: React.FC<Props> = ({
|
||||
)}
|
||||
|
||||
<button type="button" className="grid place-items-center" onClick={handleEditState}>
|
||||
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
|
||||
<PencilSquareIcon className="h-4 w-4 text-brand-secondary" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@ -189,14 +187,14 @@ export const SingleState: React.FC<Props> = ({
|
||||
>
|
||||
{state.default ? (
|
||||
<Tooltip tooltipContent="Cannot delete the default state.">
|
||||
<TrashIcon className="h-4 w-4 text-red-400" />
|
||||
<TrashIcon className="h-4 w-4 text-red-500" />
|
||||
</Tooltip>
|
||||
) : groupLength === 1 ? (
|
||||
<Tooltip tooltipContent="Cannot have an empty group.">
|
||||
<TrashIcon className="h-4 w-4 text-red-400" />
|
||||
<TrashIcon className="h-4 w-4 text-red-500" />
|
||||
</Tooltip>
|
||||
) : (
|
||||
<TrashIcon className="h-4 w-4 text-red-400" />
|
||||
<TrashIcon className="h-4 w-4 text-red-500" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@ import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
import trackEventServices from "services/track-event.service";
|
||||
import trackEventServices, { MiscellaneousEventType } from "services/track-event.service";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// hooks
|
||||
@ -23,6 +23,52 @@ import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
const featuresList = [
|
||||
{
|
||||
title: "Cycles",
|
||||
description:
|
||||
"Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
|
||||
icon: <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />,
|
||||
property: "cycle_view",
|
||||
},
|
||||
{
|
||||
title: "Modules",
|
||||
description:
|
||||
"Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
|
||||
icon: <PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />,
|
||||
property: "module_view",
|
||||
},
|
||||
{
|
||||
title: "Views",
|
||||
description:
|
||||
"Views are enabled for all the projects in this workspace. Access it from the sidebar.",
|
||||
icon: <ViewListIcon color="#05c3ff" width={28} height={28} className="flex-shrink-0" />,
|
||||
property: "issue_views_view",
|
||||
},
|
||||
{
|
||||
title: "Pages",
|
||||
description:
|
||||
"Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
|
||||
icon: <DocumentTextIcon color="#fcbe1d" width={28} height={28} className="flex-shrink-0" />,
|
||||
property: "page_view",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType => {
|
||||
switch (feature) {
|
||||
case "Cycles":
|
||||
return toggle ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF";
|
||||
case "Modules":
|
||||
return toggle ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF";
|
||||
case "Views":
|
||||
return toggle ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF";
|
||||
case "Pages":
|
||||
return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
|
||||
default:
|
||||
return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
|
||||
}
|
||||
};
|
||||
|
||||
const FeaturesSettings: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
@ -91,170 +137,57 @@ const FeaturesSettings: NextPage = () => {
|
||||
<section className="space-y-8">
|
||||
<h3 className="text-2xl font-semibold">Features</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<ContrastIcon color="#3F76FF" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-xl font-semibold">Cycles</h4>
|
||||
<p className="text-brand-secondary">
|
||||
Cycles are enabled for all the projects in this workspace. Access them from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.cycle_view ? "bg-green-500" : "bg-brand-surface-2"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.cycle_view}
|
||||
onClick={() => {
|
||||
trackEventServices.trackMiscellaneousEvent(
|
||||
{
|
||||
workspaceId: (projectDetails?.workspace as any)?.id,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
projectIdentifier: projectDetails?.identifier,
|
||||
projectName: projectDetails?.name,
|
||||
},
|
||||
!projectDetails?.cycle_view ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF"
|
||||
);
|
||||
handleSubmit({ cycle_view: !projectDetails?.cycle_view });
|
||||
}}
|
||||
{featuresList.map((feature) => (
|
||||
<div
|
||||
key={feature.property}
|
||||
className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-base p-5"
|
||||
>
|
||||
<span className="sr-only">Use cycles</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<PeopleGroupIcon color="#FF6B00" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
|
||||
<p className="text-brand-secondary">
|
||||
Modules are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
<div className="flex items-start gap-3">
|
||||
{feature.icon}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold">{feature.title}</h4>
|
||||
<p className="text-sm text-brand-secondary">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.module_view ? "bg-green-500" : "bg-brand-surface-2"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.module_view}
|
||||
onClick={() => {
|
||||
trackEventServices.trackMiscellaneousEvent(
|
||||
{
|
||||
workspaceId: (projectDetails?.workspace as any)?.id,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
projectIdentifier: projectDetails?.identifier,
|
||||
projectName: projectDetails?.name,
|
||||
},
|
||||
!projectDetails?.module_view ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF"
|
||||
);
|
||||
handleSubmit({ module_view: !projectDetails?.module_view });
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Use cycles</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.[feature.property as keyof IProject]
|
||||
? "bg-green-500"
|
||||
: "bg-brand-surface-2"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<ViewListIcon color="#05C3FF" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="-mt-1.5 text-xl font-semibold">Views</h4>
|
||||
<p className="text-brand-secondary">
|
||||
Views are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.[feature.property as keyof IProject]}
|
||||
onClick={() => {
|
||||
trackEventServices.trackMiscellaneousEvent(
|
||||
{
|
||||
workspaceId: (projectDetails?.workspace as any)?.id,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
projectIdentifier: projectDetails?.identifier,
|
||||
projectName: projectDetails?.name,
|
||||
},
|
||||
!projectDetails?.[feature.property as keyof IProject]
|
||||
? getEventType(feature.title, true)
|
||||
: getEventType(feature.title, false)
|
||||
);
|
||||
handleSubmit({
|
||||
[feature.property]: !projectDetails?.[feature.property as keyof IProject],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Use {feature.title}</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.[feature.property as keyof IProject]
|
||||
? "translate-x-5"
|
||||
: "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.issue_views_view ? "bg-green-500" : "bg-brand-surface-2"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.issue_views_view}
|
||||
onClick={() => {
|
||||
trackEventServices.trackMiscellaneousEvent(
|
||||
{
|
||||
workspaceId: (projectDetails?.workspace as any)?.id,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
projectIdentifier: projectDetails?.identifier,
|
||||
projectName: projectDetails?.name,
|
||||
},
|
||||
!projectDetails?.issue_views_view ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF"
|
||||
);
|
||||
handleSubmit({ issue_views_view: !projectDetails?.issue_views_view });
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Use views</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.issue_views_view ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<DocumentTextIcon color="#FCBE1D" width={28} height={28} className="flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-xl font-semibold">Pages</h4>
|
||||
<p className="text-brand-secondary">
|
||||
Pages are enabled for all the projects in this workspace. Access them from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.page_view ? "bg-green-500" : "bg-brand-surface-2"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.page_view}
|
||||
onClick={() => {
|
||||
trackEventServices.trackMiscellaneousEvent(
|
||||
{
|
||||
workspaceId: (projectDetails?.workspace as any)?.id,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
projectIdentifier: projectDetails?.identifier,
|
||||
projectName: projectDetails?.name,
|
||||
},
|
||||
!projectDetails?.page_view ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF"
|
||||
);
|
||||
handleSubmit({ page_view: !projectDetails?.page_view });
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Use cycles</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.page_view ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a href="https://plane.so/" target="_blank" rel="noreferrer">
|
||||
|
||||
@ -10,6 +10,7 @@ import projectService from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useProjectDetails from "hooks/use-project-details";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
@ -23,12 +24,7 @@ import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import {
|
||||
PROJECT_DETAILS,
|
||||
PROJECT_INVITATIONS,
|
||||
PROJECT_MEMBERS,
|
||||
WORKSPACE_DETAILS,
|
||||
} from "constants/fetch-keys";
|
||||
import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
|
||||
@ -48,24 +44,13 @@ const MembersSettings: NextPage = () => {
|
||||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const { projectDetails } = useProjectDetails();
|
||||
|
||||
const { data: projectMembers, mutate: mutateMembers } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null,
|
||||
{
|
||||
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
|
||||
if (err?.status === 403) return;
|
||||
setTimeout(() => revalidate(revalidateOpts), 5000);
|
||||
},
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
|
||||
@ -176,11 +161,11 @@ const MembersSettings: NextPage = () => {
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 px-6">
|
||||
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
|
||||
{members.length > 0
|
||||
? members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between py-6">
|
||||
<div className="flex items-center gap-x-8 gap-y-2">
|
||||
<div className="flex items-center gap-x-6 gap-y-2">
|
||||
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
|
||||
{member.avatar && member.avatar !== "" ? (
|
||||
<Image
|
||||
@ -203,12 +188,12 @@ const MembersSettings: NextPage = () => {
|
||||
<p className="mt-0.5 text-xs text-brand-secondary">{member.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
{!member.member && (
|
||||
<span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
|
||||
Request Pending
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{!member.member && (
|
||||
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
|
||||
Pending
|
||||
</div>
|
||||
)}
|
||||
<CustomSelect
|
||||
label={ROLE[member.role as keyof typeof ROLE]}
|
||||
value={member.role}
|
||||
@ -242,6 +227,7 @@ const MembersSettings: NextPage = () => {
|
||||
console.log(err);
|
||||
});
|
||||
}}
|
||||
position="right"
|
||||
>
|
||||
{Object.keys(ROLE).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
|
||||
@ -110,7 +110,10 @@ const StatesSettings: NextPage = () => {
|
||||
handleDeleteState={() => setSelectDeleteState(state.id)}
|
||||
/>
|
||||
) : (
|
||||
<div className="border-b last:border-b-0" key={state.id}>
|
||||
<div
|
||||
className="border-b border-brand-base last:border-b-0"
|
||||
key={state.id}
|
||||
>
|
||||
<CreateUpdateStateInline
|
||||
onClose={() => {
|
||||
setActiveGroup(null);
|
||||
|
||||
@ -157,7 +157,7 @@ const MembersSettings: NextPage = () => {
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div className="divide-y rounded-[10px] divide-brand-base border border-brand-base bg-brand-surface-1 px-6">
|
||||
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
|
||||
{members.length > 0
|
||||
? members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between py-6">
|
||||
@ -184,64 +184,63 @@ const MembersSettings: NextPage = () => {
|
||||
<p className="text-xs text-brand-secondary">{member.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{!member?.status && (
|
||||
<div className="flex mr-2 px-2 py-1 bg-yellow-200 text-yellow-700 text-center rounded-full text-xs items-center justify-center">
|
||||
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
|
||||
<p>Pending</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<CustomSelect
|
||||
label={ROLE[member.role as keyof typeof ROLE]}
|
||||
value={member.role}
|
||||
onChange={(value: any) => {
|
||||
workspaceService
|
||||
.updateWorkspaceMember(activeWorkspace?.slug as string, member.id, {
|
||||
role: value,
|
||||
})
|
||||
.then(() => {
|
||||
mutateMembers(
|
||||
(prevData) =>
|
||||
prevData?.map((m) =>
|
||||
m.id === member.id ? { ...m, role: value } : m
|
||||
),
|
||||
false
|
||||
);
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Member role updated successfully.",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: "An error occurred while updating member role.",
|
||||
});
|
||||
<CustomSelect
|
||||
label={ROLE[member.role as keyof typeof ROLE]}
|
||||
value={member.role}
|
||||
onChange={(value: any) => {
|
||||
workspaceService
|
||||
.updateWorkspaceMember(activeWorkspace?.slug as string, member.id, {
|
||||
role: value,
|
||||
})
|
||||
.then(() => {
|
||||
mutateMembers(
|
||||
(prevData) =>
|
||||
prevData?.map((m) =>
|
||||
m.id === member.id ? { ...m, role: value } : m
|
||||
),
|
||||
false
|
||||
);
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Member role updated successfully.",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: "An error occurred while updating member role.",
|
||||
});
|
||||
});
|
||||
}}
|
||||
position="right"
|
||||
>
|
||||
{Object.keys(ROLE).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
if (member.member) {
|
||||
setSelectedRemoveMember(member.id);
|
||||
} else {
|
||||
setSelectedInviteRemoveMember(member.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{Object.keys(ROLE).map((key) => (
|
||||
<CustomSelect.Option key={key} value={key}>
|
||||
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
if (member.member) {
|
||||
setSelectedRemoveMember(member.id);
|
||||
} else {
|
||||
setSelectedInviteRemoveMember(member.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Remove member
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
Remove member
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
||||
@ -244,7 +244,7 @@ class ProjectServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async syncGiuthubRepository(
|
||||
async syncGithubRepository(
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
workspaceIntegrationId: string,
|
||||
|
||||
@ -47,7 +47,7 @@ type ViewEventType = "VIEW_CREATE" | "VIEW_UPDATE" | "VIEW_DELETE";
|
||||
|
||||
type IssueCommentType = "ISSUE_COMMENT_CREATE" | "ISSUE_COMMENT_UPDATE" | "ISSUE_COMMENT_DELETE";
|
||||
|
||||
type MiscellaneousEventType =
|
||||
export type MiscellaneousEventType =
|
||||
| "TOGGLE_CYCLE_ON"
|
||||
| "TOGGLE_CYCLE_OFF"
|
||||
| "TOGGLE_MODULE_ON"
|
||||
|
||||
@ -96,8 +96,11 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* scrollbar style */
|
||||
body {
|
||||
color: rgba(var(--color-text-base));
|
||||
}
|
||||
|
||||
/* scrollbar style */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@ -206,7 +209,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
.progress-bar{
|
||||
.progress-bar {
|
||||
fill: currentColor;
|
||||
color: rgba(var(--color-bg-sidebar));
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user