@@ -69,6 +77,8 @@ export const DashboardWidgets = observer(() => {
isModalOpen={showWidgetSettings}
handleOnClose={() => toggleWidgetSettings(false)}
/>
+ {!isWikiApp &&
{orderedWidgets.map((key) => {
diff --git a/web/core/components/home/widgets/empty-states/no-projects.tsx b/web/core/components/home/widgets/empty-states/no-projects.tsx
index 08a8bdaf4ee..84d7b638bce 100644
--- a/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -1,17 +1,21 @@
import React from "react";
+// mobx
+import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
-import { Briefcase, Hotel, Users } from "lucide-react";
+import { Briefcase, Check, Hotel, Users, X } from "lucide-react";
// plane ui
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
// helpers
+import { cn } from "@plane/utils";
import { getFileURL } from "@/helpers/file.helper";
// hooks
-import { useCommandPalette, useEventTracker, useUser, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUser, useUserPermissions } from "@/hooks/store";
// plane web constants
-export const NoProjectsEmptyState = () => {
+export const NoProjectsEmptyState = observer(() => {
// navigation
const { workspaceSlug } = useParams();
// store hooks
@@ -19,6 +23,14 @@ export const NoProjectsEmptyState = () => {
const { toggleCreateProjectModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();
const { data: currentUser } = useUser();
+ const { joinedProjectIds } = useProject();
+ // local storage
+ const { storedValue, setValue } = useLocalStorage(`quickstart-guide-${workspaceSlug}`, {
+ hide: false,
+ visited_members: false,
+ visited_workspace: false,
+ visited_profile: false,
+ });
const { t } = useTranslation();
// derived values
const canCreateProject = allowPermissions(
@@ -31,7 +43,8 @@ export const NoProjectsEmptyState = () => {
id: "create-project",
title: "home.empty.create_project.title",
description: "home.empty.create_project.description",
- icon:
,
+ icon:
,
+ flag: "projects",
cta: {
text: "home.empty.create_project.cta",
onClick: (e: React.MouseEvent
) => {
@@ -47,7 +60,8 @@ export const NoProjectsEmptyState = () => {
id: "invite-team",
title: "home.empty.invite_team.title",
description: "home.empty.invite_team.description",
- icon: ,
+ icon: ,
+ flag: "visited_members",
cta: {
text: "home.empty.invite_team.cta",
link: `/${workspaceSlug}/settings/members`,
@@ -57,7 +71,8 @@ export const NoProjectsEmptyState = () => {
id: "configure-workspace",
title: "home.empty.configure_workspace.title",
description: "home.empty.configure_workspace.description",
- icon: ,
+ icon: ,
+ flag: "visited_workspace",
cta: {
text: "home.empty.configure_workspace.cta",
link: "settings",
@@ -85,44 +100,94 @@ export const NoProjectsEmptyState = () => {
),
+ flag: "visited_profile",
cta: {
text: "home.empty.personalize_account.cta",
link: "/profile",
},
},
];
+ const isComplete = (type: string) => {
+ switch (type) {
+ case "projects":
+ return joinedProjectIds?.length > 0;
+ case "visited_members":
+ return storedValue?.visited_members;
+ case "visited_workspace":
+ return storedValue?.visited_workspace;
+ case "visited_profile":
+ return storedValue?.visited_profile;
+ }
+ };
+
+ if (storedValue?.hide) return null;
return (
-
- {EMPTY_STATE_DATA.map((item) => (
-
+
+
{t("home.empty.quickstart_guide")}
+
+
+
+ {EMPTY_STATE_DATA.map((item) => {
+ const isStateComplete = isComplete(item.flag);
+ return (
+
- {t(item.cta.text)}
-
- )}
-
- ))}
+
+ {item.icon}
+
+
{t(item.title)}
+
{t(item.description)}
+ {isStateComplete ? (
+
+
+
+ ) : item.cta.link ? (
+
{
+ if (!storedValue) return;
+ setValue({
+ ...storedValue,
+ [item.flag]: true,
+ });
+ }}
+ className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
+ >
+ {t(item.cta.text)}
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
diff --git a/web/core/components/stickies/layout/stickies-list.tsx b/web/core/components/stickies/layout/stickies-list.tsx
index 3ee1f568ba5..47e6e669805 100644
--- a/web/core/components/stickies/layout/stickies-list.tsx
+++ b/web/core/components/stickies/layout/stickies-list.tsx
@@ -192,7 +192,7 @@ export const StickiesLayout = (props: TStickiesLayout) => {
const columnCount = getColumnCount(containerWidth);
return (
-
+
);
diff --git a/web/core/store/workspace/home.ts b/web/core/store/workspace/home.ts
index dc53b707b30..023767ef3d6 100644
--- a/web/core/store/workspace/home.ts
+++ b/web/core/store/workspace/home.ts
@@ -7,6 +7,7 @@ import { IWorkspaceLinkStore, WorkspaceLinkStore } from "./link.store";
export interface IHomeStore {
// observables
+ loading: boolean;
showWidgetSettings: boolean;
widgetsMap: Record
;
widgets: THomeWidgetKeys[];
@@ -25,6 +26,7 @@ export interface IHomeStore {
export class HomeStore implements IHomeStore {
// observables
showWidgetSettings = false;
+ loading = false;
widgetsMap: Record = {};
widgets: THomeWidgetKeys[] = [];
// stores
@@ -35,6 +37,7 @@ export class HomeStore implements IHomeStore {
constructor() {
makeObservable(this, {
// observables
+ loading: observable,
showWidgetSettings: observable,
widgetsMap: observable,
widgets: observable,
@@ -68,15 +71,18 @@ export class HomeStore implements IHomeStore {
fetchWidgets = async (workspaceSlug: string) => {
try {
+ this.loading = true;
const widgets = await this.workspaceService.fetchWorkspaceWidgets(workspaceSlug);
runInAction(() => {
this.widgets = orderBy(Object.values(widgets), "sort_order", "desc").map((widget) => widget.key);
widgets.forEach((widget) => {
this.widgetsMap[widget.key] = widget;
});
+ this.loading = false;
});
} catch (error) {
console.error("Failed to fetch widgets");
+ this.loading = false;
throw error;
}
};
diff --git a/web/core/store/workspace/link.store.ts b/web/core/store/workspace/link.store.ts
index a6b2cd40ecd..4a19f92c0f7 100644
--- a/web/core/store/workspace/link.store.ts
+++ b/web/core/store/workspace/link.store.ts
@@ -93,7 +93,6 @@ export class WorkspaceLinkStore implements IWorkspaceLinkStore {
};
createLink = async (workspaceSlug: string, data: Partial) => {
- console.log("hereee");
const response = await this.workspaceService.createWorkspaceLink(workspaceSlug, data);
runInAction(() => {