chore: empty state revamp and loader improvement (#3448)

* chore: empty state asset added

* chore: empty state asset updated and image path helper function added

* chore: empty state asset updated

* chore: empty state asset updated and empty state details constant added

* chore: empty state component, helper function and comicbox button added

* chore: draft, archived and project issue empty state

* chore: cycle, module and issue layout empty state

* chore: analytics, dashboard, all issues, pages and project view empty state

* chore:projects empty state

* chore:projects empty state improvement

* chore: cycle, module, view and page loader improvement

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-01-24 19:12:54 +05:30 committed by GitHub
parent 1a1594e818
commit 87f39d7372
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
105 changed files with 897 additions and 285 deletions

View file

@ -6,20 +6,30 @@ import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
import { TourRoot } from "components/onboarding";
import { UserGreetingsView } from "components/user";
import { IssuePeekOverview } from "components/issues";
import { DashboardProjectEmptyState, DashboardWidgets } from "components/dashboard";
import { DashboardWidgets } from "components/dashboard";
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
// ui
import { Spinner } from "@plane/ui";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
export const WorkspaceDashboardView = observer(() => {
// store hooks
const {
commandPalette: { toggleCreateProjectModal },
eventTracker: { postHogEventTracker },
router: { workspaceSlug },
} = useApplication();
const { currentUser, updateTourCompleted } = useUser();
const {
currentUser,
updateTourCompleted,
membership: { currentWorkspaceRole },
} = useUser();
const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard();
const { joinedProjectIds } = useProject();
const emptyStateImage = getEmptyStateImagePath("onboarding", "dashboard", currentUser?.theme.theme === "light");
const handleTourCompleted = () => {
updateTourCompleted()
.then(() => {
@ -41,6 +51,8 @@ export const WorkspaceDashboardView = observer(() => {
fetchHomeDashboardWidgets(workspaceSlug);
}, [fetchHomeDashboardWidgets, workspaceSlug]);
const isEditingAllowed = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
return (
<>
<IssuePeekOverview />
@ -52,7 +64,27 @@ export const WorkspaceDashboardView = observer(() => {
{homeDashboardId && joinedProjectIds ? (
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
{currentUser && <UserGreetingsView user={currentUser} />}
{joinedProjectIds.length > 0 ? <DashboardWidgets /> : <DashboardProjectEmptyState />}
{joinedProjectIds.length > 0 ? (
<DashboardWidgets />
) : (
<EmptyState
image={emptyStateImage}
title="Overview of your projects, activity, and metrics"
description=" Welcome to Plane, we are excited to have you here. Create your first project and track your issues, and this
page will transform into a space that helps you progress. Admins will also see items which help their team
progress."
primaryButton={{
text: "Build your first project",
onClick: () => toggleCreateProjectModal(true),
}}
comicBox={{
title: "Everything starts with a project in Plane",
description: "A project could be a products roadmap, a marketing campaign, or launching a new car.",
}}
size="lg"
disabled={!isEditingAllowed}
/>
)}
</div>
) : (
<div className="h-full w-full grid place-items-center">