[WEB-904] chore: feature validation empty state (#4145)

* chore: disable feature empty state added

* chore: disable feature empty state updated
This commit is contained in:
Anmol Singh Bhatia 2024-04-09 13:38:07 +05:30 committed by GitHub
parent e86397b649
commit 74a88fc028
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 114 additions and 7 deletions

View File

@ -92,6 +92,10 @@ export enum EmptyStateType {
ACTIVE_CYCLE_LABEL_EMPTY_STATE = "active-cycle-label-empty-state", ACTIVE_CYCLE_LABEL_EMPTY_STATE = "active-cycle-label-empty-state",
DISABLED_PROJECT_INBOX = "disabled-project-inbox", DISABLED_PROJECT_INBOX = "disabled-project-inbox",
DISABLED_PROJECT_CYCLE = "disabled-project-cycle",
DISABLED_PROJECT_MODULE = "disabled-project-module",
DISABLED_PROJECT_VIEW = "disabled-project-view",
DISABLED_PROJECT_PAGE = "disabled-project-page",
INBOX_SIDEBAR_OPEN_TAB = "inbox-sidebar-open-tab", INBOX_SIDEBAR_OPEN_TAB = "inbox-sidebar-open-tab",
INBOX_SIDEBAR_CLOSED_TAB = "inbox-sidebar-closed-tab", INBOX_SIDEBAR_CLOSED_TAB = "inbox-sidebar-closed-tab",
@ -634,6 +638,54 @@ const emptyStateDetails = {
text: "Manage features", text: "Manage features",
}, },
}, },
[EmptyStateType.DISABLED_PROJECT_CYCLE]: {
key: EmptyStateType.DISABLED_PROJECT_CYCLE,
title: "Cycles is not enabled for this project.",
description:
"Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team. Enable the cycles feature for your project to start using them.",
accessType: "project",
access: EUserProjectRoles.ADMIN,
path: "/empty-state/disabled-feature/cycles",
primaryButton: {
text: "Manage features",
},
},
[EmptyStateType.DISABLED_PROJECT_MODULE]: {
key: EmptyStateType.DISABLED_PROJECT_MODULE,
title: "Modules are not enabled for the project.",
description:
"A group of issues that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. Enable modules from project settings.",
accessType: "project",
access: EUserProjectRoles.ADMIN,
path: "/empty-state/disabled-feature/modules",
primaryButton: {
text: "Manage features",
},
},
[EmptyStateType.DISABLED_PROJECT_PAGE]: {
key: EmptyStateType.DISABLED_PROJECT_PAGE,
title: "Pages are not enabled for the project.",
description:
"Pages are thought spotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your projects context. Enable the pages feature to start creating them in your project.",
accessType: "project",
access: EUserProjectRoles.ADMIN,
path: "/empty-state/disabled-feature/pages",
primaryButton: {
text: "Manage features",
},
},
[EmptyStateType.DISABLED_PROJECT_VIEW]: {
key: EmptyStateType.DISABLED_PROJECT_VIEW,
title: "Views is not enabled for this project.",
description:
"Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyones views and choose whichever suits their needs best. Enable views in the project settings to start using them.",
accessType: "project",
access: EUserProjectRoles.ADMIN,
path: "/empty-state/disabled-feature/views",
primaryButton: {
text: "Manage features",
},
},
[EmptyStateType.INBOX_SIDEBAR_OPEN_TAB]: { [EmptyStateType.INBOX_SIDEBAR_OPEN_TAB]: {
key: EmptyStateType.INBOX_SIDEBAR_OPEN_TAB, key: EmptyStateType.INBOX_SIDEBAR_OPEN_TAB,
title: "No open issues", title: "No open issues",

View File

@ -35,7 +35,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
// store hooks // store hooks
const { setTrackElement } = useEventTracker(); const { setTrackElement } = useEventTracker();
const { currentProjectCycleIds, loader } = useCycle(); const { currentProjectCycleIds, loader } = useCycle();
const { getProjectById } = useProject(); const { getProjectById, currentProjectDetails } = useProject();
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, peekCycle } = router.query; const { workspaceSlug, projectId, peekCycle } = router.query;
@ -60,7 +60,18 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
updateFilters(projectId.toString(), { [key]: newValues }); updateFilters(projectId.toString(), { [key]: newValues });
}; };
if (!workspaceSlug || !projectId) return null; if (!workspaceSlug || !projectId) return <></>;
// No access to cycle
if (currentProjectDetails?.cycle_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<EmptyState
type={EmptyStateType.DISABLED_PROJECT_CYCLE}
primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
/>
</div>
);
if (loader) if (loader)
return ( return (

View File

@ -5,11 +5,13 @@ import { TModuleFilters } from "@plane/types";
// layouts // layouts
// components // components
import { PageHead } from "@/components/core"; import { PageHead } from "@/components/core";
import { EmptyState } from "@/components/empty-state";
import { ModulesListHeader } from "@/components/headers"; import { ModulesListHeader } from "@/components/headers";
import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules"; import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
// types // types
// hooks // hooks
import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header"; import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
import { EmptyStateType } from "@/constants/empty-state";
import { calculateTotalFilters } from "@/helpers/filter.helper"; import { calculateTotalFilters } from "@/helpers/filter.helper";
import { useModuleFilter, useProject } from "@/hooks/store"; import { useModuleFilter, useProject } from "@/hooks/store";
import { AppLayout } from "@/layouts/app-layout"; import { AppLayout } from "@/layouts/app-layout";
@ -17,9 +19,9 @@ import { NextPageWithLayout } from "@/lib/types";
const ProjectModulesPage: NextPageWithLayout = observer(() => { const ProjectModulesPage: NextPageWithLayout = observer(() => {
const router = useRouter(); const router = useRouter();
const { projectId } = router.query; const { workspaceSlug, projectId } = router.query;
// store // store
const { getProjectById } = useProject(); const { getProjectById, currentProjectDetails } = useProject();
const { currentProjectFilters, clearAllFilters, updateFilters } = useModuleFilter(); const { currentProjectFilters, clearAllFilters, updateFilters } = useModuleFilter();
// derived values // derived values
const project = projectId ? getProjectById(projectId.toString()) : undefined; const project = projectId ? getProjectById(projectId.toString()) : undefined;
@ -38,6 +40,19 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
[currentProjectFilters, projectId, updateFilters] [currentProjectFilters, projectId, updateFilters]
); );
if (!workspaceSlug || !projectId) return <></>;
// No access to
if (currentProjectDetails?.module_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<EmptyState
type={EmptyStateType.DISABLED_PROJECT_MODULE}
primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
/>
</div>
);
return ( return (
<> <>
<PageHead title={pageTitle} /> <PageHead title={pageTitle} />

View File

@ -56,7 +56,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
commandPalette: { toggleCreatePageModal }, commandPalette: { toggleCreatePageModal },
} = useApplication(); } = useApplication();
const { setTrackElement } = useEventTracker(); const { setTrackElement } = useEventTracker();
const { getProjectById } = useProject(); const { getProjectById, currentProjectDetails } = useProject();
const { fetchProjectPages, fetchArchivedProjectPages, loader, archivedPageLoader, projectPageIds, archivedPageIds } = const { fetchProjectPages, fetchArchivedProjectPages, loader, archivedPageLoader, projectPageIds, archivedPageIds } =
useProjectPages(); useProjectPages();
// hooks // hooks
@ -75,6 +75,19 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
workspaceSlug && projectId ? () => fetchArchivedProjectPages(workspaceSlug.toString(), projectId.toString()) : null workspaceSlug && projectId ? () => fetchArchivedProjectPages(workspaceSlug.toString(), projectId.toString()) : null
); );
if (!workspaceSlug || !projectId) return <></>;
// No access to
if (currentProjectDetails?.page_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<EmptyState
type={EmptyStateType.DISABLED_PROJECT_PAGE}
primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
/>
</div>
);
const currentTabValue = (tab: string | null) => { const currentTabValue = (tab: string | null) => {
switch (tab) { switch (tab) {
case "Recent": case "Recent":

View File

@ -3,8 +3,11 @@ import { observer } from "mobx-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components // components
import { PageHead } from "@/components/core"; import { PageHead } from "@/components/core";
import { EmptyState } from "@/components/empty-state";
import { ProjectViewsHeader } from "@/components/headers"; import { ProjectViewsHeader } from "@/components/headers";
import { ProjectViewsList } from "@/components/views"; import { ProjectViewsList } from "@/components/views";
// constants
import { EmptyStateType } from "@/constants/empty-state";
// hooks // hooks
import { useProject } from "@/hooks/store"; import { useProject } from "@/hooks/store";
// layouts // layouts
@ -15,13 +18,26 @@ import { NextPageWithLayout } from "@/lib/types";
const ProjectViewsPage: NextPageWithLayout = observer(() => { const ProjectViewsPage: NextPageWithLayout = observer(() => {
// router // router
const router = useRouter(); const router = useRouter();
const { projectId } = router.query; const { workspaceSlug, projectId } = router.query;
// store // store
const { getProjectById } = useProject(); const { getProjectById, currentProjectDetails } = useProject();
// derived values // derived values
const project = projectId ? getProjectById(projectId.toString()) : undefined; const project = projectId ? getProjectById(projectId.toString()) : undefined;
const pageTitle = project?.name ? `${project?.name} - Views` : undefined; const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
if (!workspaceSlug || !projectId) return <></>;
// No access to
if (currentProjectDetails?.issue_views_view === false)
return (
<div className="flex items-center justify-center h-full w-full">
<EmptyState
type={EmptyStateType.DISABLED_PROJECT_VIEW}
primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
/>
</div>
);
return ( return (
<> <>
<PageHead title={pageTitle} /> <PageHead title={pageTitle} />

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB