feat: init

apps/web/core/layouts/auth-layout/project-wrapper.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EProjectNetwork } from "@plane/types";
+// components
+import { JoinProject } from "@/components/auth-screens/project/join-project";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { ComicBoxButton } from "@/components/empty-state/comic-box-button";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ETimeLineTypeType } from "@/components/gantt-chart/contexts";
+import { captureClick } from "@/helpers/event-tracker.helper";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+import { useTimeLineChart } from "@/hooks/use-timeline-chart";
+// local
+import { persistence } from "@/local-db/storage.sqlite";
+// plane web constants
+
+interface IProjectAuthWrapper {
+  workspaceSlug: string;
+  projectId: string;
+  children: ReactNode;
+  isLoading?: boolean;
+}
+
+export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
+  const { workspaceSlug, projectId, children, isLoading: isParentLoading = false } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { fetchUserProjectInfo, allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const { loader, getProjectById, fetchProjectDetails } = useProject();
+  const { fetchAllCycles } = useCycle();
+  const { fetchModulesSlim, fetchModules } = useModule();
+  const { initGantt } = useTimeLineChart(ETimeLineTypeType.MODULE);
+  const { fetchViews } = useProjectView();
+  const {
+    project: { fetchProjectMembers },
+  } = useMember();
+  const { fetchProjectStates } = useProjectState();
+  const { fetchProjectLabels } = useLabel();
+  const { getProjectEstimates } = useProjectEstimates();
+
+  // helper hooks
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
+
+  // derived values
+  const projectExists = projectId ? getProjectById(projectId.toString()) : null;
+  const projectMemberInfo = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
+  const hasPermissionToCurrentProject = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    projectId?.toString()
+  );
+  const isWorkspaceAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.WORKSPACE,
+    workspaceSlug.toString()
+  );
+
+  // Initialize module timeline chart
+  useEffect(() => {
+    initGantt();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_SYNC_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => {
+          persistence.syncIssues(projectId.toString());
+        }
+      : null,
+    {
+      revalidateIfStale: true,
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+      refreshInterval: 5 * 60 * 1000,
+    }
+  );
+
+  // fetching project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) : null
+  );
+
+  // fetching user project member information
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ME_INFORMATION_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project labels
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project members
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project estimates
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project cycles
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project modules
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? async () => {
+          await fetchModulesSlim(workspaceSlug.toString(), projectId.toString());
+          await fetchModules(workspaceSlug.toString(), projectId.toString());
+        }
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project views
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // permissions
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  // check if the project member apis is loading
+  if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
+    return (
+      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <LogoSpinner />
+        </div>
+      </div>
+    );
+
+  // check if the user don't have permission to access the project
+  if (
+    ((projectExists?.network && projectExists?.network !== EProjectNetwork.PRIVATE) || isWorkspaceAdmin) &&
+    projectId &&
+    hasPermissionToCurrentProject === false
+  )
+    return <JoinProject projectId={projectId} />;
+
+  // check if the project info is not found.
+  if (loader === "loaded" && projectId && !!hasPermissionToCurrentProject === false)
+    return (
+      <div className="grid h-full place-items-center bg-custom-background-100">
+        <DetailedEmptyState
+          title={t("workspace_projects.empty_state.general.title")}
+          description={t("workspace_projects.empty_state.general.description")}
+          assetPath={resolvedPath}
+          customPrimaryButton={
+            <ComicBoxButton
+              label={t("workspace_projects.empty_state.general.primary_button.text")}
+              title={t("workspace_projects.empty_state.general.primary_button.comic.title")}
+              description={t("workspace_projects.empty_state.general.primary_button.comic.description")}
+              onClick={() => {
+                toggleCreateProjectModal(true);
+                captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
+              }}
+              disabled={!canPerformEmptyStateActions}
+            />
+          }
+        />
+      </div>
+    );
+
+  return <>{children}</>;
+});

apps/web/core/layouts/auth-layout/workspace-wrapper.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
+// ui
+import { LogOut } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { PlaneLogo } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+// components
+import { cn } from "@plane/utils";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// hooks
+import { useFavorite } from "@/hooks/store/use-favorite";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local
+import { persistence } from "@/local-db/storage.sqlite";
+// images
+import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
+import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
+import WorkSpaceNotAvailable from "@/public/workspace/workspace-not-available.png";
+
+interface IWorkspaceAuthWrapper {
+  children: ReactNode;
+  isLoading?: boolean;
+}
+
+export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+  const { children, isLoading: isParentLoading = false } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // next themes
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { signOut, data: currentUser } = useUser();
+  const { fetchPartialProjects } = useProject();
+  const { fetchFavorite } = useFavorite();
+  const {
+    workspace: { fetchWorkspaceMembers },
+  } = useMember();
+  const { workspaces, fetchSidebarNavigationPreferences } = useWorkspace();
+  const { isMobile } = usePlatformOS();
+  const { loader, workspaceInfoBySlug, fetchUserWorkspaceInfo, fetchUserProjectPermissions, allowPermissions } =
+    useUserPermissions();
+  const { fetchWorkspaceStates } = useProjectState();
+  // derived values
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
+  const allWorkspaces = workspaces ? Object.values(workspaces) : undefined;
+  const currentWorkspace =
+    (allWorkspaces && allWorkspaces.find((workspace) => workspace?.slug === workspaceSlug)) || undefined;
+  const currentWorkspaceInfo = workspaceSlug && workspaceInfoBySlug(workspaceSlug.toString());
+
+  // fetching user workspace information
+  useSWR(
+    workspaceSlug && currentWorkspace ? `WORKSPACE_MEMBER_ME_INFORMATION_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchUserWorkspaceInfo(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  useSWR(
+    workspaceSlug && currentWorkspace ? `WORKSPACE_PROJECTS_ROLES_INFORMATION_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchUserProjectPermissions(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetching workspace projects
+  useSWR(
+    workspaceSlug && currentWorkspace ? `WORKSPACE_PARTIAL_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchPartialProjects(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetch workspace members
+  useSWR(
+    workspaceSlug && currentWorkspace ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetch workspace favorite
+  useSWR(
+    workspaceSlug && currentWorkspace && canPerformWorkspaceMemberActions
+      ? `WORKSPACE_FAVORITE_${workspaceSlug}`
+      : null,
+    workspaceSlug && currentWorkspace && canPerformWorkspaceMemberActions
+      ? () => fetchFavorite(workspaceSlug.toString())
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetch workspace states
+  useSWR(
+    workspaceSlug ? `WORKSPACE_STATES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace sidebar preferences
+  useSWR(
+    workspaceSlug ? `WORKSPACE_SIDEBAR_PREFERENCES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchSidebarNavigationPreferences(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // initialize the local database
+  const { isLoading: isDBInitializing } = useSWRImmutable(
+    workspaceSlug ? `WORKSPACE_DB_${workspaceSlug}` : null,
+    workspaceSlug
+      ? async () => {
+          // persistence.reset();
+          await persistence.initialize(workspaceSlug.toString());
+          // Load common data
+          persistence.syncWorkspace();
+          return true;
+        }
+      : null
+  );
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to sign out. Please try again.",
+      })
+    );
+  };
+
+  // if list of workspaces are not there then we have to render the spinner
+  if (isParentLoading || allWorkspaces === undefined || loader || isDBInitializing) {
+    return (
+      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <LogoSpinner />
+        </div>
+      </div>
+    );
+  }
+
+  // if workspaces are there and we are trying to access the workspace that we are not part of then show the existing workspaces
+  if (currentWorkspace === undefined && !currentWorkspaceInfo) {
+    return (
+      <div className="relative flex h-full w-full flex-col items-center justify-center bg-custom-background-90 ">
+        <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
+          <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
+            <div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">
+              <PlaneLogo className="h-9 w-auto text-custom-text-100" />
+            </div>
+            <div className="relative flex items-center gap-2">
+              <div className="text-sm font-medium">{currentUser?.email}</div>
+              <div
+                className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded hover:bg-custom-background-80"
+                onClick={handleSignOut}
+              >
+                <Tooltip tooltipContent={"Sign out"} position="top" className="ml-2" isMobile={isMobile}>
+                  <LogOut size={14} />
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+          <div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
+            <div className="relative flex-shrink-0">
+              <Image src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
+            </div>
+            <h3 className="text-center text-lg font-semibold">Workspace not found</h3>
+            <p className="text-center text-sm text-custom-text-200">
+              No workspace found with the URL. It may not exist or you lack authorization to view it.
+            </p>
+            <div className="flex items-center justify-center gap-2 pt-4">
+              {allWorkspaces && allWorkspaces.length > 0 && (
+                <Link href="/" className={cn(getButtonStyling("primary", "md"))}>
+                  Go Home
+                </Link>
+              )}
+              {allWorkspaces?.length > 0 && (
+                <Link
+                  href={`/${allWorkspaces[0].slug}/settings/account`}
+                  className={cn(getButtonStyling("neutral-primary", "md"))}
+                >
+                  Visit Profile
+                </Link>
+              )}
+              {allWorkspaces && allWorkspaces.length === 0 && (
+                <Link href={`/`} className={cn(getButtonStyling("neutral-primary", "md"))}>
+                  Create new workspace
+                </Link>
+              )}
+            </div>
+          </div>
+
+          <div className="absolute bottom-0 left-4 top-0 w-0 bg-custom-background-80 md:w-0.5" />
+        </div>
+      </div>
+    );
+  }
+
+  // while user does not have access to view that workspace
+  if (currentWorkspaceInfo === undefined) {
+    return (
+      <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+        <div className="grid h-full place-items-center p-4">
+          <div className="space-y-8 text-center">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold">Not Authorized!</h3>
+              <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+                You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
+                check your pending invitations.
+              </p>
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <Link href="/invitations">
+                <span>
+                  <Button variant="neutral-primary" size="sm">
+                    Check pending invites
+                  </Button>
+                </span>
+              </Link>
+              <Link href="/create-workspace">
+                <span>
+                  <Button variant="primary" size="sm">
+                    Create new workspace
+                  </Button>
+                </span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+});

apps/web/core/layouts/default-layout/index.tsx

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from "react";
+import { cn } from "@plane/utils";
+
+type Props = {
+  children: ReactNode;
+  gradient?: boolean;
+  className?: string;
+};
+
+const DefaultLayout: FC<Props> = ({ children, gradient = false, className }) => (
+  <div className={cn(`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`, className)}>
+    {children}
+  </div>
+);
+
+export default DefaultLayout;