Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-13 05:49:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

added feature flag

Browse Source
This commit is contained in:
vamsi krishna
2024-12-06 13:39:52 +05:30
parent 1b09984abd
commit b296cd0784
4 changed files with 134 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
View File

@@ -6,7 +6,7 @@ import { NotificationsSidebarRoot } from "@/components/workspace-notifications";
export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
return (
<div className="relative w-full h-full overflow-hidden flex items-center">
<NotificationsSidebar />
<NotificationsSidebarRoot />
<div className="w-full h-full overflow-hidden overflow-y-auto">{children}</div>
</div>
);

127
web/ee/components/workspace-notifications/root.tsx
View File

@@ -1,106 +1,31 @@
"use client";
// export * from "./sidebar";
import { FC } from "react";
import { observer } from "mobx-react";
import React, { useMemo } from "react";
import dynamic from "next/dynamic";
import { useParams } from "next/navigation";
// components
import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
import { CountChip } from "@/components/common";
import {
NotificationsLoader,
NotificationEmptyState,
NotificationSidebarHeader,
AppliedFilters,
} from "@/components/workspace-notifications";
// constants
import { NOTIFICATION_TABS } from "@/constants/notification";
// helpers
import { cn } from "@/helpers/common.helper";
import { getNumberCount } from "@/helpers/string.helper";
// hooks
import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
// plane web components
import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
import { useFlag } from "@/plane-web/hooks/store";
export const NotificationsSidebar: FC = observer(() => {
export const NotificationsSidebarRoot = () => {
const { workspaceSlug } = useParams();
// hooks
const { getWorkspaceBySlug } = useWorkspace();
const {
currentSelectedNotificationId,
unreadNotificationsCount,
loader,
notificationIssueIdsByWorkspaceId,
currentNotificationTab,
setCurrentNotificationTab,
} = useWorkspaceNotifications();
// derived values
const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
const groupedNotificationIssueIds = workspace ? notificationIssueIdsByWorkspaceId(workspace.id) : undefined;
if (!workspaceSlug || !workspace) return <></>;
return (
<div
className={cn(
"relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all",
currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
)}
>
<div className="relative w-full h-full flex flex-col">
<Row className="h-[3.75rem] border-b border-custom-border-200 flex">
<NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
</Row>
<Header variant={EHeaderVariant.SECONDARY} className="justify-start">
{NOTIFICATION_TABS.map((tab) => (
<div
key={tab.value}
className="h-full px-3 relative cursor-pointer"
onClick={() => currentNotificationTab != tab.value && setCurrentNotificationTab(tab.value)}
>
<div
className={cn(
`relative h-full flex justify-center items-center gap-1 text-sm transition-all`,
currentNotificationTab === tab.value
? "text-custom-primary-100"
: "text-custom-text-100 hover:text-custom-text-200"
)}
>
<div className="font-medium">{tab.label}</div>
{tab.count(unreadNotificationsCount) > 0 && (
<CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
)}
</div>
{currentNotificationTab === tab.value && (
<div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
)}
</div>
))}
</Header>
{/* applied filters */}
<AppliedFilters workspaceSlug={workspaceSlug.toString()} />
{/* rendering notifications */}
{loader === "init-loader" ? (
<div className="relative w-full h-full overflow-hidden">
<NotificationsLoader />
</div>
) : (
<>
{groupedNotificationIssueIds && groupedNotificationIssueIds.length > 0 ? (
<ContentWrapper variant={ERowVariant.HUGGING}>
<NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
</ContentWrapper>
) : (
<div className="relative w-full h-full flex justify-center items-center">
<NotificationEmptyState />
</div>
)}
</>
)}
</div>
</div>
const isFeatureEnabled = useFlag(workspaceSlug.toString(), "INBOX_STACKING");
const NotificationsSideBarRoot = useMemo(
() =>
dynamic(
() =>
isFeatureEnabled
? import(`ee/components/workspace-notifications/sidebar`).then((module) => ({
default: module["NotificationsSidebar"],
}))
: import("ce/components/workspace-notifications/root").then((module) => ({
default: module["NotificationsSidebar"],
})),
{
// TODO: Add loading component
loading: () => <></>,
}
),
[isFeatureEnabled]
);
});
return <NotificationsSideBarRoot />;
};

106
web/ee/components/workspace-notifications/sidebar.tsx Normal file
View File

@@ -0,0 +1,106 @@
"use client";
import { FC } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// components
import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
import { CountChip } from "@/components/common";
import {
NotificationsLoader,
NotificationEmptyState,
NotificationSidebarHeader,
AppliedFilters,
} from "@/components/workspace-notifications";
// constants
import { NOTIFICATION_TABS } from "@/constants/notification";
// helpers
import { cn } from "@/helpers/common.helper";
import { getNumberCount } from "@/helpers/string.helper";
// hooks
import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
// plane web components
import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
export const NotificationsSidebar: FC = observer(() => {
const { workspaceSlug } = useParams();
// hooks
const { getWorkspaceBySlug } = useWorkspace();
const {
currentSelectedNotificationId,
unreadNotificationsCount,
loader,
notificationIssueIdsByWorkspaceId,
currentNotificationTab,
setCurrentNotificationTab,
} = useWorkspaceNotifications();
// derived values
const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
const groupedNotificationIssueIds = workspace ? notificationIssueIdsByWorkspaceId(workspace.id) : undefined;
if (!workspaceSlug || !workspace) return <></>;
return (
<div
className={cn(
"relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all",
currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
)}
>
<div className="relative w-full h-full flex flex-col">
<Row className="h-[3.75rem] border-b border-custom-border-200 flex">
<NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
</Row>
<Header variant={EHeaderVariant.SECONDARY} className="justify-start">
{NOTIFICATION_TABS.map((tab) => (
<div
key={tab.value}
className="h-full px-3 relative cursor-pointer"
onClick={() => currentNotificationTab != tab.value && setCurrentNotificationTab(tab.value)}
>
<div
className={cn(
`relative h-full flex justify-center items-center gap-1 text-sm transition-all`,
currentNotificationTab === tab.value
? "text-custom-primary-100"
: "text-custom-text-100 hover:text-custom-text-200"
)}
>
<div className="font-medium">{tab.label}</div>
{tab.count(unreadNotificationsCount) > 0 && (
<CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
)}
</div>
{currentNotificationTab === tab.value && (
<div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
)}
</div>
))}
</Header>
{/* applied filters */}
<AppliedFilters workspaceSlug={workspaceSlug.toString()} />
{/* rendering notifications */}
{loader === "init-loader" ? (
<div className="relative w-full h-full overflow-hidden">
<NotificationsLoader />
</div>
) : (
<>
{groupedNotificationIssueIds && groupedNotificationIssueIds.length > 0 ? (
<ContentWrapper variant={ERowVariant.HUGGING}>
<NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
</ContentWrapper>
) : (
<div className="relative w-full h-full flex justify-center items-center">
<NotificationEmptyState />
</div>
)}
</>
)}
</div>
</div>
);
});

1
web/ee/hooks/store/use-flag.ts
View File

@@ -24,6 +24,7 @@ export enum E_FEATURE_FLAGS {
FILE_SIZE_LIMIT_PRO = "FILE_SIZE_LIMIT_PRO",
NO_LOAD = "NO_LOAD",
TIMELINE_DEPENDENCY = "TIMELINE_DEPENDENCY",
INBOX_STACKING = "INBOX_STACKING",
// integrations
SILO_IMPORTERS = "SILO_IMPORTERS",
SILO_INTEGRATIONS = "SILO_INTEGRATIONS",