binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2443] fix: role validation and code refactor (#5596)

Browse source 
* chore: delete cycle toast message updated

* fix: view page empty state

* fix: project settings automation

* fix: intake delete action

* fix: project label validation

* fix: project label validation

* fix: project state permission updated

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-09-12 20:08:13 +05:30 • committed by GitHub
parent 5f1939cdeb
commit 441385fc95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 134 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
View file

@ -25,7 +25,7 @@ const ProjectViewIssuesPage = observer(() => {
const project = projectId ? getProjectById(projectId.toString()) : undefined;
const pageTitle = project?.name && projectView?.name ? `${project?.name} - ${projectView?.name}` : undefined;
const { error } = useSWR(
const { error, isLoading } = useSWR(
workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
workspaceSlug && projectId && viewId
? () => fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())

2
web/core/components/automation/auto-archive-automation.tsx
View file

@ -33,7 +33,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
const isAdmin = allowPermissions(
[EUserPermissions.ADMIN],
EUserPermissionsLevel.PROJECT,
currentProjectDetails?.workspace_detail.slug,
currentProjectDetails?.workspace_detail?.slug,
currentProjectDetails?.id
);

2
web/core/components/inbox/content/root.tsx
View file

@ -67,7 +67,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
EUserPermissionsLevel.PROJECT
);
const isGuest = projectPermissionsByWorkspaceSlugAndProjectId(workspaceSlug, projectId) === EUserPermissions.GUEST;
const isOwner = inboxIssue.issue.created_by === currentUser?.id;
const isOwner = inboxIssue?.issue.created_by === currentUser?.id;
const readOnly = !isOwner && isGuest;
if (!inboxIssue) return <></>;

1
web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx
View file

@ -91,7 +91,6 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
{/* labels */}
<div className="h-7">
<IssueLabelSelect
createLabelEnabled={false}
setIsOpen={() => {}}
value={data?.label_ids || []}
onChange={(labelIds) => handleData("label_ids", labelIds)}

7
web/core/components/issues/issue-modal/components/default-properties.tsx
View file

@ -26,10 +26,11 @@ import { ETabIndices } from "@/constants/tab-indices";
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { getTabIndex } from "@/helpers/tab-indices.helper";
// hooks
import { useProjectEstimates, useProject } from "@/hooks/store";
import { useProjectEstimates, useProject, useUserPermissions } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// plane web components
import { IssueIdentifier } from "@/plane-web/components/issues";
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
type TIssueDefaultPropertiesProps = {
control: Control<TIssue>;
@ -67,11 +68,14 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
const { areEstimateEnabledByProjectId } = useProjectEstimates();
const { getProjectById } = useProject();
const { isMobile } = usePlatformOS();
const { allowPermissions } = useUserPermissions();
// derived values
const projectDetails = getProjectById(projectId);
const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
const minDate = getDate(startDate);
minDate?.setDate(minDate.getDate());
@ -150,6 +154,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
}}
projectId={projectId ?? undefined}
tabIndex={getIndex("label_ids")}
createLabelEnabled={canCreateLabel}
/>
</div>
)}

2
web/core/components/issues/select/label.tsx
View file

@ -35,7 +35,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
label,
disabled = false,
tabIndex,
createLabelEnabled = true,
createLabelEnabled = false,
buttonClassName,
} = props;
// router

86
web/core/components/labels/label-block/label-item-block.tsx
View file

@ -28,10 +28,19 @@ interface ILabelItemBlock {
handleLabelDelete: (label: IIssueLabel) => void;
isLabelGroup?: boolean;
dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
disabled?: boolean;
}
export const LabelItemBlock = (props: ILabelItemBlock) => {
const { label, isDragging, customMenuItems, handleLabelDelete, isLabelGroup, dragHandleRef } = props;
const {
label,
isDragging,
customMenuItems,
handleLabelDelete,
isLabelGroup,
dragHandleRef,
disabled = false,
} = props;
// states
const [isMenuActive, setIsMenuActive] = useState(false);
// refs
@ -42,44 +51,51 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
return (
<div className="group flex items-center">
<div className="flex items-center">
<DragHandle
className={cn("opacity-0 group-hover:opacity-100", {
"opacity-100": isDragging,
})}
ref={dragHandleRef}
/>
{!disabled && (
<DragHandle
className={cn("opacity-0 group-hover:opacity-100", {
"opacity-100": isDragging,
})}
ref={dragHandleRef}
/>
)}
<LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
</div>
<div
ref={actionSectionRef}
className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
isMenuActive || isLabelGroup
? "opacity-100"
: "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
} ${isLabelGroup && "-top-0.5"}`}
>
<CustomMenu ellipsis menuButtonOnClick={() => setIsMenuActive(!isMenuActive)} useCaptureForOutsideClick>
{customMenuItems.map(
({ isVisible, onClick, CustomIcon, text, key }) =>
isVisible && (
<CustomMenu.MenuItem key={key} onClick={() => onClick(label)}>
<span className="flex items-center justify-start gap-2">
<CustomIcon className="h-4 w-4" />
<span>{text}</span>
</span>
</CustomMenu.MenuItem>
)
{!disabled && (
<div
ref={actionSectionRef}
className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
isMenuActive || isLabelGroup
? "opacity-100"
: "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
} ${isLabelGroup && "-top-0.5"}`}
>
<CustomMenu ellipsis menuButtonOnClick={() => setIsMenuActive(!isMenuActive)} useCaptureForOutsideClick>
{customMenuItems.map(
({ isVisible, onClick, CustomIcon, text, key }) =>
isVisible && (
<CustomMenu.MenuItem key={key} onClick={() => onClick(label)}>
<span className="flex items-center justify-start gap-2">
<CustomIcon className="h-4 w-4" />
<span>{text}</span>
</span>
</CustomMenu.MenuItem>
)
)}
</CustomMenu>
{!isLabelGroup && (
<div className="py-0.5">
<button
className="flex h-4 w-4 items-center justify-start gap-2"
onClick={() => handleLabelDelete(label)}
>
<X className="h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400" />
</button>
</div>
)}
</CustomMenu>
{!isLabelGroup && (
<div className="py-0.5">
<button className="flex h-4 w-4 items-center justify-start gap-2" onClick={() => handleLabelDelete(label)}>
<X className="h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400" />
</button>
</div>
)}
</div>
</div>
)}
</div>
);
};

13
web/core/components/labels/project-setting-label-item.tsx
View file

@ -23,10 +23,20 @@ type Props = {
droppedLabelId: string | undefined,
dropAtEndOfList: boolean
) => void;
isEditable?: boolean;
};
export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
const { label, setIsUpdating, handleLabelDelete, isChild, isLastChild, isParentDragging = false, onDrop } = props;
const {
label,
setIsUpdating,
handleLabelDelete,
isChild,
isLastChild,
isParentDragging = false,
onDrop,
isEditable = false,
} = props;
// states
const [isEditLabelForm, setEditLabelForm] = useState(false);
// router
@ -91,6 +101,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
customMenuItems={customMenuItems}
handleLabelDelete={handleLabelDelete}
dragHandleRef={dragHandleRef}
disabled={!isEditable}
/>
)}
</div>

15
web/core/components/labels/project-setting-label-list.tsx
View file

@ -14,7 +14,8 @@ import {
ProjectSettingLabelItem,
} from "@/components/labels";
import { EmptyStateType } from "@/constants/empty-state";
import { useLabel } from "@/hooks/store";
import { useLabel, useUserPermissions } from "@/hooks/store";
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
// components
// ui
// types
@ -31,6 +32,10 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
const { workspaceSlug, projectId } = useParams();
// store hooks
const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
const { allowPermissions } = useUserPermissions();
// derived values
const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
const newLabel = () => {
setIsUpdating(false);
@ -65,9 +70,11 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
/>
<div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5">
<h3 className="text-xl font-medium">Labels</h3>
<Button variant="primary" onClick={newLabel} size="sm">
Add label
</Button>
{isEditable && (
<Button variant="primary" onClick={newLabel} size="sm">
Add label
</Button>
)}
</div>
<div className="w-full py-2">
{showLabelForm && (

23
web/core/components/project-states/group-item.tsx
View file

@ -6,6 +6,8 @@ import { Plus } from "lucide-react";
import { IState, TStateGroups } from "@plane/types";
// components
import { StateList, StateCreate } from "@/components/project-states";
import { useUserPermissions } from "@/hooks/store";
import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
type TGroupItem = {
workspaceSlug: string;
@ -17,22 +19,28 @@ type TGroupItem = {
export const GroupItem: FC<TGroupItem> = observer((props) => {
const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
// store hooks
const { allowPermissions } = useUserPermissions();
// state
const [createState, setCreateState] = useState(false);
const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
return (
<div className="space-y-3">
<div className="flex justify-between items-center">
<div className="text-base font-medium text-custom-text-200 capitalize">{groupKey}</div>
<div
className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100"
onClick={() => !createState && setCreateState(true)}
>
<Plus className="w-4 h-4" />
</div>
{isEditable && (
<div
className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100"
onClick={() => !createState && setCreateState(true)}
>
<Plus className="w-4 h-4" />
</div>
)}
</div>
{createState && (
{isEditable && createState && (
<StateCreate
workspaceSlug={workspaceSlug}
projectId={projectId}
@ -48,6 +56,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
groupKey={groupKey}
groupedStates={groupedStates}
states={states}
disabled={!isEditable}
/>
</div>
</div>

52
web/core/components/project-states/state-item.tsx
View file

@ -24,10 +24,11 @@ type TStateItem = {
groupedStates: Record<string, IState[]>;
totalStates: number;
state: IState;
disabled?: boolean;
};
export const StateItem: FC<TStateItem> = observer((props) => {
const { workspaceSlug, projectId, groupKey, groupedStates, totalStates, state } = props;
const { workspaceSlug, projectId, groupKey, groupedStates, totalStates, state, disabled = false } = props;
// hooks
const { moveStatePosition } = useProjectState();
// states
@ -131,7 +132,7 @@ export const StateItem: FC<TStateItem> = observer((props) => {
)}
>
{/* draggable indicator */}
{totalStates != 1 && (
{!disabled && totalStates != 1 && (
<div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
<GripVertical className="w-3 h-3" />
</div>
@ -148,28 +149,35 @@ export const StateItem: FC<TStateItem> = observer((props) => {
<p className="text-xs text-custom-text-200">{state.description}</p>
</div>
<div className="hidden group-hover:flex items-center gap-2">
{/* state mark as default option */}
<div className="flex-shrink-0 text-xs transition-all">
<StateMarksAsDefault
workspaceSlug={workspaceSlug}
projectId={projectId}
stateId={state.id}
isDefault={state.default ? true : false}
/>
</div>
{!disabled && (
<div className="hidden group-hover:flex items-center gap-2">
{/* state mark as default option */}
<div className="flex-shrink-0 text-xs transition-all">
<StateMarksAsDefault
workspaceSlug={workspaceSlug}
projectId={projectId}
stateId={state.id}
isDefault={state.default ? true : false}
/>
</div>
{/* state edit options */}
<div className="flex items-center gap-1 transition-all">
<button
className="flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
onClick={() => setUpdateStateModal(true)}
>
<Pencil className="w-3 h-3" />
</button>
<StateDelete workspaceSlug={workspaceSlug} projectId={projectId} totalStates={totalStates} state={state} />
{/* state edit options */}
<div className="flex items-center gap-1 transition-all">
<button
className="flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
onClick={() => setUpdateStateModal(true)}
>
<Pencil className="w-3 h-3" />
</button>
<StateDelete
workspaceSlug={workspaceSlug}
projectId={projectId}
totalStates={totalStates}
state={state}
/>
</div>
</div>
</div>
)}
</div>
{/* draggable drop bottom indicator */}

4
web/core/components/project-states/state-list.tsx
View file

@ -12,10 +12,11 @@ type TStateList = {
groupKey: TStateGroups;
groupedStates: Record<string, IState[]>;
states: IState[];
disabled?: boolean;
};
export const StateList: FC<TStateList> = observer((props) => {
const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
const { workspaceSlug, projectId, groupKey, groupedStates, states, disabled = false } = props;
return (
<>
@ -28,6 +29,7 @@ export const StateList: FC<TStateList> = observer((props) => {
groupedStates={groupedStates}
totalStates={states.length || 0}
state={state}
disabled={disabled}
/>
))}
</>

2
web/core/constants/project.ts
View file

@ -100,7 +100,7 @@ export const PROJECT_ERROR_MESSAGES = {
},
cycleDeleteError: {
title: "Error",
message: "Failed to delete project",
message: "Failed to delete cycle",
},
moduleDeleteError: {
title: "Error",