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

Merge branch 'develop' of https://github.com/makeplane/plane into style/views_card

Browse Source
This commit is contained in:
LAKHAN BAHETI 2023-11-14 19:08:33 +05:30
commit 63f5429c18
26 changed files with 223 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,7 +51,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
<RocketIcon size={12} color="#6b7280" />
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</Tooltip>
);
@ -271,10 +271,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -286,10 +286,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -301,10 +301,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.old_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -482,10 +482,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -497,10 +497,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -512,10 +512,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.old_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);

2
web/components/cycles/active-cycle-details.tsx
View File

@ -80,7 +80,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null
);
const activeCycle = cycleStore.cycles?.[projectId]?.active || null;
const activeCycle = cycleStore.cycles?.[projectId]?.current || null;
const cycle = activeCycle ? activeCycle[0] : null;
const issues = (cycleStore?.active_cycle_issues as any) || null;

28
web/components/headers/project-issues.tsx
View File

@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react";
import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
@ -121,17 +121,23 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
currentProjectDetails?.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(currentProjectDetails.emoji)}
</span>
) : currentProjectDetails?.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
currentProjectDetails ? (
currentProjectDetails?.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(currentProjectDetails.emoji)}
</span>
) : currentProjectDetails?.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
<Briefcase className="h-4 w-4" />
</span>
)
}

59
web/components/issues/form.tsx
View File

@ -542,13 +542,13 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<>
<CustomMenu
customButton={
<button
type="button"
className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
>
{watch("parent") ? (
{watch("parent") ? (
<CustomMenu
customButton={
<button
type="button"
className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
>
<div className="flex items-center gap-1 text-custom-text-200">
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">
@ -557,31 +557,30 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
${selectedParentIssue.sequence_id}`}
</span>
</div>
) : (
<div className="flex items-center gap-1 text-custom-text-300">
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">Add Parent</span>
</div>
)}
</button>
}
placement="bottom-start"
>
{watch("parent") ? (
<>
<CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue
</CustomMenu.MenuItem>
<CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
Remove parent issue
</CustomMenu.MenuItem>
</>
) : (
</button>
}
placement="bottom-start"
>
<CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
Select Parent Issue
Change parent issue
</CustomMenu.MenuItem>
)}
</CustomMenu>
<CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
Remove parent issue
</CustomMenu.MenuItem>
</CustomMenu>
) : (
<button
type="button"
className="flex items-center justify-between gap-1 w-min cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
onClick={() => setParentIssueListModalOpen(true)}
>
<div className="flex items-center gap-1 text-custom-text-300">
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">Add Parent</span>
</div>
</button>
)}
<Controller
control={control}
name="parent"

2
web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
View File

@ -49,7 +49,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
key={`assignees-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name}
/>
))}

2
web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
View File

@ -49,7 +49,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
key={`created-by-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
icon={<Avatar name={member.display_name} src={member.avatar} size="md" />}
title={member.display_name}
/>
))}

2
web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
View File

@ -49,7 +49,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
key={`mentions-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />}
icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />}
title={member.display_name}
/>
))}

4
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -117,8 +117,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
) : (
<span
className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
}}`}
noLabelBorder ? "" : " px-2.5 py-1 border-[0.5px] border-custom-border-300"
}`}
>
<User2 className="h-3 w-3" />
</span>

2
web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
View File

@ -78,7 +78,7 @@ export const IssueColumn: React.FC<Props> = ({
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
{properties.key && (
<div
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-min"
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
>
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -94,7 +94,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
{displayProperties.key && (
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
)}
<span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
<span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
</div>
{issues.map((issue, index) => (

6
web/components/issues/select/cycle.tsx
View File

@ -55,9 +55,9 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedCycle ? (
<div className="flex items-center gap-1 text-custom-text-200">
<ContrastIcon className="h-3 w-3" />
<div className="truncate">{selectedCycle.name}</div>
<div className="flex items-center w-full gap-1 text-custom-text-200">
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
<div className="truncate max-w-[160px]">{selectedCycle.name}</div>
</div>
) : (
<div className="flex items-center gap-1 text-custom-text-300">

29
web/components/issues/select/label.tsx
View File

@ -3,16 +3,13 @@ import { useRouter } from "next/router";
import useSWR from "swr";
import { Combobox, Transition } from "@headlessui/react";
import { usePopper } from "react-popper";
// services
import { IssueLabelService } from "services/issue";
import { observer } from "mobx-react-lite";
// store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { IssueLabelsList } from "components/ui";
// icons
import { Check, Component, Plus, Search, Tag } from "lucide-react";
// types
import type { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -22,15 +19,19 @@ type Props = {
label?: JSX.Element;
};
const issueLabelService = new IssueLabelService();
export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const { setIsOpen, value, onChange, projectId, label } = props;
export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId, label }) => {
// states
const [query, setQuery] = useState("");
const router = useRouter();
const { workspaceSlug } = router.query;
const {
project: { labels, fetchProjectLabels },
} = useMobxStore();
const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -38,11 +39,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
placement: "bottom-start",
});
const { data: issueLabels } = useSWR<IIssueLabels[]>(
projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
workspaceSlug && projectId
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId)
: null
const issueLabels = labels?.[projectId] || [];
useSWR(
workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null,
workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null
);
const filteredOptions =
@ -202,4 +203,4 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
)}
</Combobox>
);
};
});

6
web/components/issues/select/module.tsx
View File

@ -55,9 +55,9 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedModule ? (
<div className="flex items-center gap-1 text-custom-text-200">
<DiceIcon className="h-3 w-3" />
<span className="truncate">{selectedModule.name}</span>
<div className="flex items-center w-full gap-1 text-custom-text-200">
<DiceIcon className="h-3 w-3 flex-shrink-0" />
<span className="truncate max-w-[160px]">{selectedModule.name}</span>
</div>
) : (
<div className="flex items-center gap-1 text-custom-text-300">

26
web/components/issues/select/state.tsx
View File

@ -1,14 +1,13 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectStateService } from "services/project";
import { observer } from "mobx-react-lite";
// store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
// icons
import { Plus } from "lucide-react";
// fetch keys
import { STATES_LIST } from "constants/fetch-keys";
type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -17,19 +16,24 @@ type Props = {
projectId: string;
};
// services
const projectStateService = new ProjectStateService();
export const IssueStateSelect: React.FC<Props> = observer((props) => {
const { setIsOpen, value, onChange, projectId } = props;
export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
// states
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: states } = useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId) : null,
workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null
const {
projectState: { states: projectStates, fetchProjectStates },
} = useMobxStore();
useSWR(
workspaceSlug && projectId ? `STATES_LIST_${projectId.toUpperCase()}` : null,
workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId) : null
);
const states = projectStates?.[projectId] || [];
const options = states?.map((state) => ({
value: state.id,
query: state.name,
@ -74,4 +78,4 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
noChevron
/>
);
};
});

2
web/components/modules/delete-module-modal.tsx
View File

@ -102,7 +102,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
<div className="mt-2">
<p className="text-sm text-custom-text-200">
Are you sure you want to delete module-{" "}
<span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
<span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
data related to the module will be permanently removed. This action cannot be undone.
</p>
</div>

11
web/components/modules/select/lead.tsx
View File

@ -6,6 +6,7 @@ import { ProjectMemberService } from "services/project";
// ui
import { Avatar, CustomSearchSelect } from "@plane/ui";
// icons
import { Combobox } from "@headlessui/react";
import { UserCircle } from "lucide-react";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -59,6 +60,16 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
)}
</div>
}
footerOption={
<Combobox.Option
value=""
className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200"
>
<span className="flex items-center justify-start gap-1 text-custom-text-200">
<span>No Lead</span>
</span>
</Combobox.Option>
}
onChange={onChange}
noChevron
/>

14
web/components/pages/single-page-detailed-item.tsx
View File

@ -58,8 +58,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a className="block p-4">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
<div className="flex items-center overflow-hidden gap-2">
<p className="mr-2 truncate text-sm">{page.name}</p>
{page.label_details.length > 0 &&
page.label_details.map((label) => (
<div
@ -188,9 +188,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
</CustomMenu>
</div>
</div>
<div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
{page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null}
</div>
{page.blocks.length > 0 && (
<div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
{page.blocks.slice(0, 3).map((block) => (
<h4 className="truncate">{block.name}</h4>
))}
</div>
)}
</a>
</Link>
</div>

6
web/components/pages/single-page-list-item.tsx
View File

@ -59,9 +59,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<a>
<div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
<div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-2">
<FileText className="h-4 w-4" />
<p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
<div className="flex overflow-hidden items-center gap-2">
<FileText className="h-4 w-4 shrink-0" />
<p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
{page.label_details.length > 0 &&
page.label_details.map((label) => (
<div

2
web/components/project/join-project-modal.tsx
View File

@ -73,7 +73,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
Join Project?
</Dialog.Title>
<p>
Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
Please click the &apos;Join Project&apos; button below to continue.
</p>
<div className="space-y-3" />

42
web/components/project/sidebar-list-item.tsx
View File

@ -5,18 +5,7 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
import { Disclosure, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
// icons
import {
MoreVertical,
PenSquare,
LinkIcon,
Star,
Trash2,
FileText,
Settings,
Share2,
LogOut,
ChevronDown,
} from "lucide-react";
import { MoreVertical, PenSquare, LinkIcon, Star, FileText, Settings, Share2, LogOut, ChevronDown } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
// helpers
@ -27,7 +16,7 @@ import { IProject } from "types";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project";
import { LeaveProjectModal, PublishProjectModal } from "components/project";
type Props = {
project: IProject;
@ -71,6 +60,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
];
export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
// store
const { project: projectStore, theme: themeStore } = useMobxStore();
@ -81,7 +71,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast();
// states
const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
const [publishModalOpen, setPublishModal] = useState(false);
const isAdmin = project.member_role === 20;
@ -121,21 +110,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
setLeaveProjectModal(false);
};
const handleDeleteProjectClick = () => {
setDeleteProjectModal(true);
};
const handleDeleteProjectModalClose = () => {
setDeleteProjectModal(false);
router.push(`/${workspaceSlug}/projects`);
};
return (
<>
<PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
<DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
<LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
<Disclosure key={project.id} defaultOpen={projectId === project.id}>
<Disclosure key={`${project.id} ${projectId}`} defaultOpen={projectId === project.id}>
{({ open }) => (
<>
<div
@ -186,9 +165,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</span>
)}
{!isCollapsed && (
<p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>
)}
{!isCollapsed && <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>}
</div>
{!isCollapsed && (
<ChevronDown
@ -278,15 +255,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</div>
</CustomMenu.MenuItem>
)}
{!shortContextMenu && isAdmin && (
<CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
<span className="flex items-center justify-start gap-2 ">
<Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem>
)}
</CustomMenu>
)}
</div>

41
web/components/views/form.tsx
View File

@ -9,7 +9,7 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components
// ui
import { Button, Input, TextArea } from "@plane/ui";
// types
import { IProjectView } from "types";
import { IProjectView, IIssueFilterOptions } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
@ -43,7 +43,34 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
defaultValues,
});
const selectedFilters = watch("query_data");
const selectedFilters: IIssueFilterOptions = {};
Object.entries(watch("query_data") ?? {}).forEach(([key, value]) => {
if (!value) return;
if (Array.isArray(value) && value.length === 0) return;
selectedFilters[key as keyof IIssueFilterOptions] = value;
});
// for removing filters from a key
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!value) return;
const newValues = selectedFilters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (newValues.includes(val)) newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (selectedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
}
setValue("query_data", {
...selectedFilters,
[key]: newValues,
});
};
const handleCreateUpdateView = async (formData: IProjectView) => {
await handleFormSubmit(formData);
@ -106,7 +133,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
id="description"
name="description"
placeholder="Description"
className="resize-none text-sm"
className="h-24 w-full resize-none text-sm"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
@ -153,10 +180,10 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
<AppliedFiltersList
appliedFilters={selectedFilters}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={() => {}}
labels={projectStore.projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member) ?? undefined}
states={projectStateStore.projectStates ?? undefined}
handleRemoveFilter={handleRemoveFilter}
labels={projectStore.projectLabels ?? []}
members={projectMembers?.map((m) => m.member) ?? []}
states={projectStateStore.projectStates ?? []}
/>
</div>
)}

6
web/components/views/view-list-item.tsx
View File

@ -60,12 +60,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
<a className="flex items-center justify-between relative rounded p-4 w-full">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4 overflow-auto">
<div className="flex items-center gap-4 overflow-hidden">
<div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
<PhotoFilterIcon className="h-3.5 w-3.5" />
</div>
<div className="flex flex-col overflow-auto">
<p className="text-sm leading-4 font-medium break-all truncate">{view.name}</p>
<div className="flex flex-col overflow-hidden ">
<p className="text-sm leading-4 font-medium truncate break-all">{view.name}</p>
{view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
</div>
</div>

46
web/components/workspace/member-select.tsx
View File

@ -95,27 +95,37 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((workspaceMember: IWorkspaceMember) => (
<>
{filteredOptions.map((workspaceMember: IWorkspaceMember) => (
<Listbox.Option
key={workspaceMember.id}
value={workspaceMember}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
<div className="flex items-center gap-2">
<Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
{workspaceMember.member.display_name}
</div>
{selected && <Check className="h-3.5 w-3.5" />}
</>
)}
</Listbox.Option>
))}
<Listbox.Option
key={workspaceMember.id}
value={workspaceMember}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
value=""
className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200"
>
{({ selected }) => (
<>
<div className="flex items-center gap-2">
<Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
{workspaceMember.member.display_name}
</div>
{selected && <Check className="h-3.5 w-3.5" />}
</>
)}
<span className="flex items-center justify-start gap-1 text-custom-text-200">
<span>No Lead</span>
</span>
</Listbox.Option>
))
</>
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>

2
web/components/workspace/views/form.tsx
View File

@ -114,7 +114,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
value={value}
placeholder="Description"
onChange={onChange}
className="h-32 resize-none text-sm"
className="h-24 w-full resize-none text-sm"
hasError={Boolean(errors?.description)}
/>
)}

49
web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
View File

@ -1,14 +1,12 @@
import React, { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectService, ProjectMemberService } from "services/project";
import { observer } from "mobx-react-lite";
// store
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProjectSettingLayout } from "layouts/settings-layout";
// hooks
import useUserAuth from "hooks/use-user-auth";
import useProjectDetails from "hooks/use-project-details";
import useToast from "hooks/use-toast";
// components
import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
@ -16,45 +14,32 @@ import { ProjectSettingHeader } from "components/headers";
// types
import { NextPageWithLayout } from "types/app";
import { IProject } from "types";
// constant
import { USER_PROJECT_VIEW } from "constants/fetch-keys";
// services
const projectService = new ProjectService();
const projectMemberService = new ProjectMemberService();
const AutomationSettingsPage: NextPageWithLayout = () => {
const AutomationSettingsPage: NextPageWithLayout = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { user } = useUserAuth();
const { setToastAlert } = useToast();
const { projectDetails } = useProjectDetails();
const { data: memberDetails } = useSWR(
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
workspaceSlug && projectId
? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
: null
);
// store
const {
user: { currentProjectRole },
project: { currentProjectDetails: projectDetails, updateProject },
} = useMobxStore();
const handleChange = async (formData: Partial<IProject>) => {
if (!workspaceSlug || !projectId || !projectDetails) return;
await projectService
.updateProject(workspaceSlug as string, projectId as string, formData, user)
.then(() => {})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Something went wrong. Please try again.",
});
await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Something went wrong. Please try again.",
});
});
};
const isAdmin = memberDetails?.role === 20;
const isAdmin = currentProjectRole === 20;
return (
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
@ -65,7 +50,7 @@ const AutomationSettingsPage: NextPageWithLayout = () => {
<AutoCloseAutomation handleChange={handleChange} />
</section>
);
};
});
AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View File

@ -17,7 +17,7 @@ const EstimatesSettingsPage: NextPageWithLayout = () => (
EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
<ProjectSettingLayout>{page}; </ProjectSettingLayout>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);
};