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

@ -4,10 +4,9 @@ import { useApplication, useProject, useUser } from "hooks/store";
// components
import { ProjectCard } from "components/project";
import { Loader } from "@plane/ui";
// images
import emptyProject from "public/empty-state/empty_project.webp";
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
// icons
import { NewEmptyState } from "components/common/new-empty-state";
import { Plus } from "lucide-react";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
@ -19,9 +18,12 @@ export const ProjectCardList = observer(() => {
} = useApplication();
const {
membership: { currentWorkspaceRole },
currentUser,
} = useUser();
const { workspaceProjectIds, searchedProjects, getProjectById } = useProject();
const emptyStateImage = getEmptyStateImagePath("onboarding", "projects", currentUser?.theme.theme === "light");
const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
if (!workspaceProjectIds)
@ -55,15 +57,10 @@ export const ProjectCardList = observer(() => {
)}
</div>
) : (
<NewEmptyState
image={emptyProject}
<EmptyState
image={emptyStateImage}
title="Start a Project"
description="Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live and, along with your colleagues, help you achieve that goal."
comicBox={{
title: "Everything starts with a project in Plane",
direction: "right",
description: "A project could be a products roadmap, a marketing campaign, or launching a new car.",
}}
primaryButton={{
text: "Start your first project",
onClick: () => {
@ -71,6 +68,11 @@ export const ProjectCardList = observer(() => {
commandPaletteStore.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}
/>
)}