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

[WEB-1255] chore: public and unlocked views (#4932)

Browse source 
* chore private and public views required changes

* fix slight alignment of view icons

* add feedback for update View button

* fix object reference sharing by using cloneDeep to replicate objects

* addressing review comments
This commit is contained in:
rahulramesha 2024-06-25 18:21:30 +05:30 • committed by GitHub
parent 711494b72e
commit 635efeab7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 524 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/core/components/core/list/list-item.tsx
View file

@ -68,7 +68,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
</ControlLink>
{actionableItems && (
<div className="absolute right-5 bottom-4 flex items-center gap-1.5">
<div className="relative flex items-center gap-4 sm:w-auto sm:flex-shrink-0 sm:justify-end">
<div className="relative flex items-center gap-4 sm:w-auto sm:flex-shrink-0 sm:justify-end items-center">
{actionableItems}
</div>
</div>

66
web/core/components/dropdowns/layout.tsx Normal file
View file

@ -0,0 +1,66 @@
import { useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { Check } from "lucide-react";
// plane packages
import { cn } from "@plane/editor";
import { Dropdown } from "@plane/ui";
// constants
import { EIssueLayoutTypes, ISSUE_LAYOUT_MAP } from "@/constants/issue";
type TLayoutDropDown = {
onChange: (value: EIssueLayoutTypes) => void;
value: EIssueLayoutTypes;
};
export const LayoutDropDown = observer((props: TLayoutDropDown) => {
const { onChange, value = EIssueLayoutTypes.LIST } = props;
const options = useMemo(
() =>
Object.values(ISSUE_LAYOUT_MAP).map((issueLayout) => ({
data: issueLayout.key,
value: issueLayout.key,
})),
[]
);
const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
return (
<div className="flex gap-2 items-center text-custom-text-200">
<dropdownValue.icon strokeWidth={2} className={`size-3.5 text-custom-text-200`} />
<span className="font-medium text-xs">{dropdownValue.label}</span>
</div>
);
}, []);
const itemContent = useCallback((props: { value: string; selected: boolean }) => {
const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
return (
<div className={cn("flex gap-2 items-center text-custom-text-200 w-full justify-between")}>
<div className="flex gap-2 items-center">
<dropdownValue.icon strokeWidth={2} className={`size-3 text-custom-text-200`} />
<span className="font-medium text-xs">{dropdownValue.label}</span>
</div>
{props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
);
}, []);
const keyExtractor = useCallback((option: any) => option.value, []);
return (
<Dropdown
onChange={onChange as (value: string) => void}
value={value?.toString()}
keyExtractor={keyExtractor}
options={options}
buttonContainerClassName="bg-custom-background-100 border border-custom-border-200 hover:bg-custom-background-90 focus:text-custom-text-300 focus:bg-custom-background-90 px-2 py-1.5 rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center relative"
buttonContent={buttonContent}
renderItem={itemContent}
disableSearch
/>
);
});

2
web/core/components/dropdowns/member/avatar.tsx
View file

@ -38,5 +38,5 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
}
}
return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 flex-shrink-0" />;
return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 mx-[4px] flex-shrink-0" />;
});

18
web/core/components/icons/locked-component.tsx Normal file
View file

@ -0,0 +1,18 @@
import { Lock } from "lucide-react";
import { Tooltip } from "@plane/ui";
export const LockedComponent = (props: { toolTipContent?: string }) => {
const { toolTipContent } = props;
const lockedComponent = (
<div className="flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
<Lock className="h-3 w-3" />
<span>Locked</span>
</div>
);
return (
<>
{toolTipContent ? <Tooltip tooltipContent={toolTipContent}>{lockedComponent}</Tooltip> : <>{lockedComponent}</>}
</>
);
};

14
web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View file

@ -28,13 +28,22 @@ type Props = {
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
alwaysAllowEditing?: boolean;
disableEditing?: boolean;
};
const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
const dateFilters = ["start_date", "target_date"];
export const AppliedFiltersList: React.FC<Props> = observer((props) => {
const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, states, alwaysAllowEditing } = props;
const {
appliedFilters,
handleClearAllFilters,
handleRemoveFilter,
labels,
states,
alwaysAllowEditing,
disableEditing = false,
} = props;
// store hooks
const {
membership: { currentProjectRole },
@ -44,7 +53,8 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
if (Object.keys(appliedFilters).length === 0) return null;
const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
const isEditingAllowed =
!disableEditing && (alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER));
return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate">

89
web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
View file

@ -1,21 +1,25 @@
"use client";
import { useState } from "react";
import cloneDeep from "lodash/cloneDeep";
import isEmpty from "lodash/isEmpty";
import isEqual from "lodash/isEqual";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// types
import { cn } from "@plane/editor";
import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
// hooks
//ui
import { Button } from "@plane/ui";
// components
import { AppliedFiltersList } from "@/components/issues";
// types
import { UpdateViewComponent } from "@/components/views/update-view-component";
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
// constants
import { GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "@/constants/workspace";
// constants
// hooks
import { useEventTracker, useGlobalView, useIssues, useLabel, useUser } from "@/hooks/store";
import { getAreFiltersEqual } from "../../../utils";
type Props = {
globalViewId: string;
@ -33,11 +37,15 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
const { globalViewMap, updateGlobalView } = useGlobalView();
const { captureEvent } = useEventTracker();
const {
data,
membership: { currentWorkspaceRole },
} = useUser();
const [isModalOpen, setIsModalOpen] = useState(false);
// derived values
const userFilters = filters?.[globalViewId]?.filters;
const issueFilters = filters?.[globalViewId];
const userFilters = issueFilters?.filters;
const viewDetails = globalViewMap[globalViewId];
// filters whose value not null or empty array
@ -89,14 +97,15 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
);
};
const viewFilters = {
filters: cloneDeep(appliedFilters ?? {}),
display_filters: cloneDeep(issueFilters?.displayFilters),
display_properties: cloneDeep(issueFilters?.displayProperties),
};
const handleUpdateView = () => {
if (!workspaceSlug || !globalViewId) return;
updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
filters: {
...(appliedFilters ?? {}),
},
}).then((res) => {
updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), viewFilters).then((res) => {
if (res)
captureEvent(GLOBAL_VIEW_UPDATED, {
view_id: res.id,
@ -107,34 +116,56 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
});
};
const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {});
const areFiltersEqual = getAreFiltersEqual(appliedFilters, issueFilters, viewDetails);
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
const isLocked = viewDetails?.is_locked;
const isOwner = viewDetails?.owned_by === data?.id;
const areAppliedFiltersEmpty = isEmpty(appliedFilters);
// return if no filters are applied
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
if (areAppliedFiltersEmpty && areFiltersEqual) return null;
return (
<div className="flex items-start justify-between gap-4 p-4">
<AppliedFiltersList
labels={workspaceLabels ?? undefined}
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
alwaysAllowEditing
<>
<CreateUpdateWorkspaceViewModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
preLoadedData={{
name: `${viewDetails?.name} 2`,
description: viewDetails?.description,
...viewFilters,
}}
/>
<div
className={cn("flex items-start justify-between gap-4 p-4", {
"justify-end": areAppliedFiltersEmpty,
})}
>
<AppliedFiltersList
labels={workspaceLabels ?? undefined}
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
disableEditing={isLocked}
alwaysAllowEditing
/>
{!isDefaultView && !areFiltersEqual && isAuthorizedUser && (
<>
<div />
<Button variant="primary" onClick={handleUpdateView}>
Update view
</Button>
</>
)}
</div>
{!isDefaultView && (
<UpdateViewComponent
isLocked={isLocked}
areFiltersEqual={!!areFiltersEqual}
isOwner={isOwner}
isAuthorizedUser={isAuthorizedUser}
setIsModalOpen={setIsModalOpen}
handleUpdateView={handleUpdateView}
/>
)}
</div>
</>
);
});

83
web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View file

@ -1,18 +1,22 @@
"use client";
import { useState } from "react";
import cloneDeep from "lodash/cloneDeep";
import isEmpty from "lodash/isEmpty";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { Button } from "@plane/ui";
import { AppliedFiltersList } from "@/components/issues";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { useIssues, useLabel, useProjectState, useProjectView } from "@/hooks/store";
import { getAreFiltersEqual } from "../../../utils";
// components
// ui
// types
import { IIssueFilterOptions } from "@plane/types";
// components
import { AppliedFiltersList } from "@/components/issues";
import { CreateUpdateProjectViewModal } from "@/components/views";
import { UpdateViewComponent } from "@/components/views/update-view-component";
// constants
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
import { useIssues, useLabel, useProjectView, useUser } from "@/hooks/store";
import { getAreFiltersEqual } from "../../../utils";
export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
// router
@ -22,8 +26,13 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROJECT_VIEW);
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
const { viewMap, updateView } = useProjectView();
const {
data,
membership: { currentWorkspaceRole },
} = useUser();
const [isModalOpen, setIsModalOpen] = useState(false);
// derived values
const viewDetails = viewId ? viewMap[viewId.toString()] : null;
const userFilters = issueFilters?.filters;
@ -81,46 +90,56 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
};
const areFiltersEqual = getAreFiltersEqual(appliedFilters, issueFilters, viewDetails);
const viewFilters = {
filters: cloneDeep(appliedFilters ?? {}),
display_filters: cloneDeep(issueFilters?.displayFilters),
display_properties: cloneDeep(issueFilters?.displayProperties),
};
// return if no filters are applied
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
const handleUpdateView = () => {
if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
updateView(workspaceSlug.toString(), projectId.toString(), viewId.toString(), {
filters: {
...(appliedFilters ?? {}),
},
display_filters: {
...issueFilters?.displayFilters,
},
display_properties: {
...issueFilters?.displayProperties,
},
});
updateView(workspaceSlug.toString(), projectId.toString(), viewId.toString(), viewFilters);
};
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
const isLocked = !!viewDetails?.is_locked;
const isOwner = viewDetails?.owned_by === data?.id;
return (
<div className="flex justify-between gap-4 p-4">
<CreateUpdateProjectViewModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
preLoadedData={{
name: `${viewDetails?.name} 2`,
description: viewDetails?.description,
logo_props: viewDetails?.logo_props,
...viewFilters,
}}
/>
<div>
<AppliedFiltersList
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectLabels ?? []}
states={projectStates}
alwaysAllowEditing
disableEditing={isLocked}
/>
</div>
{!areFiltersEqual && (
<div>
<Button variant="primary" size="sm" className="flex-shrink-0" onClick={handleUpdateView}>
Update view
</Button>
</div>
)}
<UpdateViewComponent
isLocked={isLocked}
areFiltersEqual={!!areFiltersEqual}
isOwner={isOwner}
isAuthorizedUser={isAuthorizedUser}
setIsModalOpen={setIsModalOpen}
handleUpdateView={handleUpdateView}
/>
</div>
);
});

25
web/core/components/issues/issue-layouts/utils.tsx
View file

@ -4,6 +4,7 @@ import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tre
import clone from "lodash/clone";
import concat from "lodash/concat";
import isEqual from "lodash/isEqual";
import isNil from "lodash/isNil";
import pull from "lodash/pull";
import uniq from "lodash/uniq";
import scrollIntoView from "smooth-scroll-into-view-if-needed";
@ -21,6 +22,7 @@ import {
IIssueFilters,
IProjectView,
TGroupedIssues,
IWorkspaceView,
} from "@plane/types";
// ui
import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
@ -570,11 +572,24 @@ export const handleGroupDragDrop = async (
export const getAreFiltersEqual = (
appliedFilters: IIssueFilterOptions | undefined,
issueFilters: IIssueFilters | undefined,
viewDetails: IProjectView | null
) =>
isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {}) &&
isEqual(issueFilters?.displayFilters ?? {}, viewDetails?.display_filters ?? {}) &&
isEqual(issueFilters?.displayProperties ?? {}, viewDetails?.display_properties ?? {});
viewDetails: IProjectView | IWorkspaceView | null
) => {
if (isNil(appliedFilters) || isNil(issueFilters) || isNil(viewDetails)) return true;
return (
isEqual(appliedFilters, viewDetails.filters) &&
isEqual(issueFilters.displayFilters, viewDetails.display_filters) &&
isEqual(removeNillKeys(issueFilters.displayProperties), removeNillKeys(viewDetails.display_properties))
);
};
/**
* method that removes Null or undefined Keys from object
* @param obj
* @returns
*/
export const removeNillKeys = <T,>(obj: T) =>
Object.fromEntries(Object.entries(obj ?? {}).filter(([key, value]) => key && !isNil(value)));
/**
* This Method returns if the the grouped values are subGrouped

10
web/core/components/pages/editor/header/extra-options.tsx
View file

@ -2,13 +2,14 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { Lock, Sparkle } from "lucide-react";
import { Sparkle } from "lucide-react";
// editor
import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
// ui
import { ArchiveIcon } from "@plane/ui";
// components
import { GptAssistantPopover } from "@/components/core";
import { LockedComponent } from "@/components/icons/locked-component";
import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
// helpers
import { renderFormattedDate } from "@/helpers/date-time.helper";
@ -40,12 +41,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
return (
<div className="flex flex-grow items-center justify-end gap-3">
{is_locked && (
<div className="flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
<Lock className="h-3 w-3" />
<span>Locked</span>
</div>
)}
{is_locked && <LockedComponent />}
{archived_at && (
<div className="flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
<ArchiveIcon className="h-3 w-3" />

17
web/core/components/views/form.tsx
View file

@ -11,11 +11,12 @@ import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, PhotoFilterIcon,
import { Logo } from "@/components/common";
import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
// helpers
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
// hooks
import { useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
import { LayoutDropDown } from "../dropdowns/layout";
type Props = {
data?: IProjectView | null;
@ -190,7 +191,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
/>
)}
/>
<span className="text-xs text-red-500">{errors?.name?.message}</span>
<span className="text-xs text-red-500">{errors?.name?.message?.toString()}</span>
</div>
</div>
<div>
@ -211,7 +212,17 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
)}
/>
</div>
<div>
<div className="flex gap-2">
<Controller
control={control}
name="display_filters.layout"
render={({ field: { onChange, value } }) => (
<LayoutDropDown
onChange={(selectedValue: EIssueLayoutTypes) => onChange(selectedValue)}
value={value}
/>
)}
/>
<Controller
control={control}
name="filters"

70
web/core/components/views/update-view-component.tsx Normal file
View file

@ -0,0 +1,70 @@
import { SetStateAction, useEffect, useState } from "react";
import { Button } from "@plane/ui";
import { LockedComponent } from "../icons/locked-component";
type Props = {
isLocked: boolean;
areFiltersEqual: boolean;
isOwner: boolean;
isAuthorizedUser: boolean;
setIsModalOpen: (value: SetStateAction<boolean>) => void;
handleUpdateView: () => void;
lockedTooltipContent?: string;
};
export const UpdateViewComponent = (props: Props) => {
const {
isLocked,
areFiltersEqual,
isOwner,
isAuthorizedUser,
setIsModalOpen,
handleUpdateView,
lockedTooltipContent,
} = props;
const [isUpdating, setIsUpdating] = useState(false);
useEffect(() => {
if (areFiltersEqual) {
setIsUpdating(false);
}
}, [areFiltersEqual]);
// Change state while updating view to have a feedback
const updateButton = isUpdating ? (
<Button variant="primary" size="sm" className="flex-shrink-0">
Updating...
</Button>
) : (
<Button
variant="primary"
size="sm"
className="flex-shrink-0"
onClick={() => {
setIsUpdating(true);
handleUpdateView();
}}
>
Update view
</Button>
);
return (
<div className="flex gap-2">
{isLocked ? (
<LockedComponent toolTipContent={lockedTooltipContent} />
) : (
!areFiltersEqual &&
isAuthorizedUser && (
<>
<Button variant="outline-primary" size="sm" className="flex-shrink-0" onClick={() => setIsModalOpen(true)}>
Save as
</Button>
{isOwner && <>{updateButton}</>}
</>
)
)}
</div>
);
};

14
web/core/components/views/view-list-item-action.tsx
View file

@ -1,14 +1,16 @@
import React, { FC, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Earth, Lock } from "lucide-react";
// types
import { IProjectView } from "@plane/types";
// ui
import { FavoriteStar } from "@plane/ui";
import { Tooltip, FavoriteStar } from "@plane/ui";
// components
import { DeleteProjectViewModal, CreateUpdateProjectViewModal, ViewQuickActions } from "@/components/views";
// constants
import { EUserProjectRoles } from "@/constants/project";
import { EViewAccess } from "@/constants/views";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
@ -39,6 +41,8 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
const totalFilters = calculateTotalFilters(view.filters ?? {});
const access = view.access;
// handlers
const handleAddToFavorites = () => {
if (!workspaceSlug || !projectId) return;
@ -70,8 +74,14 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
{totalFilters} {totalFilters === 1 ? "filter" : "filters"}
</p>
<div className="cursor-default text-custom-text-300">
<Tooltip tooltipContent={access === EViewAccess.PUBLIC ? "Public" : "Private"}>
{access === EViewAccess.PUBLIC ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
</Tooltip>
</div>
{/* created by */}
{createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
{<ButtonAvatars showTooltip={false} userIds={createdByDetails?.id ?? []} />}
{isEditingAllowed && (
<FavoriteStar

64
web/core/components/workspace/views/quick-action.tsx
View file

@ -3,7 +3,7 @@
import { useState } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
import { ExternalLink, LinkIcon, Pencil, Trash2, Lock } from "lucide-react";
// types
import { IWorkspaceView } from "@plane/types";
// ui
@ -12,6 +12,7 @@ import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from
import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "@/components/workspace";
// constants
import { EUserProjectRoles } from "@/constants/project";
import { EViewAccess } from "@/constants/views";
// helpers
import { cn } from "@/helpers/common.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
@ -78,6 +79,34 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
},
];
const isSelected = viewId === globalViewId;
const isPrivateView = view.access === EViewAccess.PRIVATE;
let customButton = (
<div
className={`flex gap-1 items-center flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
isSelected
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
} ${isPrivateView ? "pr-2" : ""}`}
>
<span className={`flex min-w-min flex-shrink-0 whitespace-nowrap text-sm font-medium outline-none`}>
{view.name}
</span>
{isPrivateView && (
<Lock className={`${isSelected ? "text-custom-primary-100" : "text-custom-text-400"} h-4 w-4`} />
)}
</div>
);
if (!isSelected) {
customButton = (
<Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
{customButton}
</Link>
);
}
return (
<>
<CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
@ -85,38 +114,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
<ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
<CustomMenu
customButton={
<>
{viewId === globalViewId ? (
<span
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
viewId === globalViewId
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
>
{view.name}
</span>
) : (
<Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
<span
className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
viewId === globalViewId
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
>
{view.name}
</span>
</Link>
)}
</>
}
placement="bottom-end"
menuItemsClassName="z-20"
closeOnSelect
>
<CustomMenu customButton={customButton} placement="bottom-end" menuItemsClassName="z-20" closeOnSelect>
{MENU_ITEMS.map((item) => {
if (item.shouldRender === false) return null;
return (