456c7f55a9
* fix: home loading state * fix: quickstart guide * fix: link handling * fix: home completed state * fix: translations
106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import { useParams, usePathname } from "next/navigation";
|
|
// plane imports
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { THomeWidgetKeys, THomeWidgetProps } from "@plane/types";
|
|
// components
|
|
import { SimpleEmptyState } from "@/components/empty-state";
|
|
// hooks
|
|
import { useProject } from "@/hooks/store";
|
|
import { useHome } from "@/hooks/store/use-home";
|
|
// plane web components
|
|
import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
|
|
import { HomePageHeader } from "@/plane-web/components/home/header";
|
|
import { StickiesWidget } from "../stickies";
|
|
import { HomeLoader, NoProjectsEmptyState, RecentActivityWidget } from "./widgets";
|
|
import { DashboardQuickLinks } from "./widgets/links";
|
|
import { ManageWidgetsModal } from "./widgets/manage";
|
|
|
|
export const HOME_WIDGETS_LIST: {
|
|
[key in THomeWidgetKeys]: {
|
|
component: React.FC<THomeWidgetProps> | null;
|
|
fullWidth: boolean;
|
|
title: string;
|
|
};
|
|
} = {
|
|
quick_links: {
|
|
component: DashboardQuickLinks,
|
|
fullWidth: false,
|
|
title: "home.quick_links.title_plural",
|
|
},
|
|
recents: {
|
|
component: RecentActivityWidget,
|
|
fullWidth: false,
|
|
title: "home.recents.title",
|
|
},
|
|
my_stickies: {
|
|
component: StickiesWidget,
|
|
fullWidth: false,
|
|
title: "stickies.title",
|
|
},
|
|
new_at_plane: {
|
|
component: null,
|
|
fullWidth: false,
|
|
title: "home.new_at_plane.title",
|
|
},
|
|
quick_tutorial: {
|
|
component: null,
|
|
fullWidth: false,
|
|
title: "home.quick_tutorial.title",
|
|
},
|
|
};
|
|
|
|
export const DashboardWidgets = observer(() => {
|
|
// router
|
|
const { workspaceSlug } = useParams();
|
|
// navigation
|
|
const pathname = usePathname();
|
|
// store hooks
|
|
const { toggleWidgetSettings, widgetsMap, showWidgetSettings, orderedWidgets, isAnyWidgetEnabled, loading } =
|
|
useHome();
|
|
const { loader } = useProject();
|
|
// plane hooks
|
|
const { t } = useTranslation();
|
|
// derived values
|
|
const noWidgetsResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/dashboard/widgets" });
|
|
|
|
// derived values
|
|
const isWikiApp = pathname.includes(`/${workspaceSlug.toString()}/pages`);
|
|
if (!workspaceSlug) return null;
|
|
if (loading || loader !== "loaded") return <HomeLoader />;
|
|
|
|
return (
|
|
<div className="h-full w-full relative flex flex-col gap-7">
|
|
<HomePageHeader />
|
|
<ManageWidgetsModal
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
isModalOpen={showWidgetSettings}
|
|
handleOnClose={() => toggleWidgetSettings(false)}
|
|
/>
|
|
{!isWikiApp && <NoProjectsEmptyState />}
|
|
|
|
{isAnyWidgetEnabled ? (
|
|
<div className="flex flex-col divide-y-[1px] divide-custom-border-100">
|
|
{orderedWidgets.map((key) => {
|
|
const WidgetComponent = HOME_WIDGETS_LIST[key]?.component;
|
|
const isEnabled = widgetsMap[key]?.is_enabled;
|
|
if (!WidgetComponent || !isEnabled) return null;
|
|
return (
|
|
<div key={key} className="py-4">
|
|
<WidgetComponent workspaceSlug={workspaceSlug.toString()} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="h-full w-full grid place-items-center">
|
|
<SimpleEmptyState
|
|
title={t("home.empty.widgets.title")}
|
|
description={t("home.empty.widgets.description")}
|
|
assetPath={noWidgetsResolvedPath}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|