feat: cloud and ee (#805)

* stripe init
git submodules for enterprise modules

* * Cloud billing UI - WIP
* Proxy websockets in dev mode
* Separate workspace login and creation for cloud
* Other fixes

* feat: billing (cloud)

* * add domain service
* prepare links from workspace hostname

* WIP

* Add exchange token generation
* Validate JWT token type during verification

* domain service

* add SkipTransform decorator

* * updates (server)
* add new packages
* new sso migration file

* WIP

* Fix hostname generation

* WIP

* WIP

* Reduce input error font-size
* set max password length

* jwt package

* license page - WIP

* * License management UI
* Move license key store to db

* add reflector

* SSO enforcement

* * Add default plan
* Add usePlan hook

* * Fix auth container margin in mobile
* Redirect login and home to select page in cloud

* update .gitignore

* Default to yearly

* * Trial messaging
* Handle ended trials

* Don't set to readonly on collab disconnect (Cloud)

* Refine trial (UI)
* Fix bug caused by using jotai optics atom in AppHeader component

* configurable database maximum pool

* Close SSO form on save

* wip

* sync

* Only show sign-in in cloud

* exclude base api part from workspaceId check

* close db connection beforeApplicationShutdown

* Add health/live endpoint

* clear cookie on hostname change

* reset currentUser atom

* Change text

* return 401 if workspace does not match

* feat: show user workspace list in cloud login page

* sync

* Add home path

* Prefetch to speed up queries

* * Add robots.txt
* Disallow login and forgot password routes

* wildcard user-agent

* Fix space query cache

* fix

* fix

* use space uuid for recent pages

* prefetch billing plans

* enhance license page

* sync

apps/client/src/components/settings/settings-queries.tsx

@@ -0,0 +1,51 @@
+import { queryClient } from "@/main.tsx";
+import {
+  getBilling,
+  getBillingPlans,
+} from "@/ee/billing/services/billing-service.ts";
+import { getSpaces } from "@/features/space/services/space-service.ts";
+import { getGroups } from "@/features/group/services/group-service.ts";
+import { QueryParams } from "@/lib/types.ts";
+import { getWorkspaceMembers } from "@/features/workspace/services/workspace-service.ts";
+import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
+
+export const prefetchWorkspaceMembers = () => {
+  const params = { limit: 100, page: 1, query: "" } as QueryParams;
+  queryClient.prefetchQuery({
+    queryKey: ["workspaceMembers", params],
+    queryFn: () => getWorkspaceMembers(params),
+  });
+};
+
+export const prefetchSpaces = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["spaces", { page: 1 }],
+    queryFn: () => getSpaces({ page: 1 }),
+  });
+};
+
+export const prefetchGroups = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["groups", { page: 1 }],
+    queryFn: () => getGroups({ page: 1 }),
+  });
+};
+
+export const prefetchBilling = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["billing"],
+    queryFn: () => getBilling(),
+  });
+
+  queryClient.prefetchQuery({
+    queryKey: ["billing-plans"],
+    queryFn: () => getBillingPlans(),
+  });
+};
+
+export const prefetchLicense = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["license"],
+    queryFn: () => getLicenseInfo(),
+  });
+};

apps/client/src/components/settings/settings-sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Group, Text, ScrollArea, ActionIcon, rem } from "@mantine/core";
+import { Group, Text, ScrollArea, ActionIcon } from "@mantine/core";
 import {
   IconUser,
   IconSettings,
@@ -8,15 +8,33 @@ import {
   IconUsersGroup,
   IconSpaces,
   IconBrush,
+  IconCoin,
+  IconLock,
+  IconKey,
 } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import classes from "./settings.module.css";
 import { useTranslation } from "react-i18next";
+import { isCloud } from "@/lib/config.ts";
+import useUserRole from "@/hooks/use-user-role.tsx";
+import { useAtom } from "jotai/index";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import {
+  prefetchBilling,
+  prefetchGroups,
+  prefetchLicense,
+  prefetchSpaces,
+  prefetchWorkspaceMembers,
+} from "@/components/settings/settings-queries.tsx";
 
 interface DataItem {
   label: string;
   icon: React.ElementType;
   path: string;
+  isCloud?: boolean;
+  isEnterprise?: boolean;
+  isAdmin?: boolean;
+  isSelfhosted?: boolean;
 }
 
 interface DataGroup {
@@ -45,10 +63,35 @@ const groupedData: DataGroup[] = [
         icon: IconUsers,
         path: "/settings/members",
       },
+      {
+        label: "Billing",
+        icon: IconCoin,
+        path: "/settings/billing",
+        isCloud: true,
+        isAdmin: true,
+      },
+      {
+        label: "Security & SSO",
+        icon: IconLock,
+        path: "/settings/security",
+        isCloud: true,
+        isEnterprise: true,
+        isAdmin: true,
+      },
       { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
       { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
     ],
   },
+  {
+    heading: "System",
+    items: [
+      {
+        label: "License & Edition",
+        icon: IconKey,
+        path: "/settings/license",
+      },
+    ],
+  },
 ];
 
 export default function SettingsSidebar() {
@@ -56,29 +99,92 @@ export default function SettingsSidebar() {
   const location = useLocation();
   const [active, setActive] = useState(location.pathname);
   const navigate = useNavigate();
+  const { isAdmin } = useUserRole();
+  const [workspace] = useAtom(workspaceAtom);
 
   useEffect(() => {
     setActive(location.pathname);
   }, [location.pathname]);
 
-  const menuItems = groupedData.map((group) => (
-    <div key={group.heading}>
-      <Text c="dimmed" className={classes.linkHeader}>
-        {t(group.heading)}
-      </Text>
-      {group.items.map((item) => (
-        <Link
-          className={classes.link}
-          data-active={active.startsWith(item.path) || undefined}
-          key={item.label}
-          to={item.path}
-        >
-          <item.icon className={classes.linkIcon} stroke={2} />
-          <span>{t(item.label)}</span>
-        </Link>
-      ))}
-    </div>
-  ));
+  const canShowItem = (item: DataItem) => {
+    if (item.isCloud && item.isEnterprise) {
+      if (!(isCloud() || workspace?.hasLicenseKey)) return false;
+      return item.isAdmin ? isAdmin : true;
+    }
+
+    if (item.isCloud) {
+      return isCloud() ? (item.isAdmin ? isAdmin : true) : false;
+    }
+
+    if (item.isSelfhosted) {
+      return !isCloud() ? (item.isAdmin ? isAdmin : true) : false;
+    }
+
+    if (item.isEnterprise) {
+      return workspace?.hasLicenseKey ? (item.isAdmin ? isAdmin : true) : false;
+    }
+
+    if (item.isAdmin) {
+      return isAdmin;
+    }
+
+    return true;
+  };
+
+  const menuItems = groupedData.map((group) => {
+    if (group.heading === "System" && (!isAdmin || isCloud())) {
+      return null;
+    }
+
+    return (
+      <div key={group.heading}>
+        <Text c="dimmed" className={classes.linkHeader}>
+          {t(group.heading)}
+        </Text>
+        {group.items.map((item) => {
+          if (!canShowItem(item)) {
+            return null;
+          }
+
+          let prefetchHandler: any;
+          switch (item.label) {
+            case "Members":
+              prefetchHandler = prefetchWorkspaceMembers;
+              break;
+            case "Spaces":
+              prefetchHandler = prefetchSpaces;
+              break;
+            case "Groups":
+              prefetchHandler = prefetchGroups;
+              break;
+            case "Billing":
+              prefetchHandler = prefetchBilling;
+              break;
+            case "License & Edition":
+              if (workspace?.hasLicenseKey) {
+                prefetchHandler = prefetchLicense;
+              }
+              break;
+            default:
+              break;
+          }
+
+          return (
+            <Link
+              onMouseEnter={prefetchHandler}
+              className={classes.link}
+              data-active={active.startsWith(item.path) || undefined}
+              key={item.label}
+              to={item.path}
+            >
+              <item.icon className={classes.linkIcon} stroke={2} />
+              <span>{t(item.label)}</span>
+            </Link>
+          );
+        })}
+      </div>
+    );
+  });
 
   return (
     <div className={classes.navbar}>
@@ -95,9 +201,8 @@ export default function SettingsSidebar() {
       </Group>
 
       <ScrollArea w="100%">{menuItems}</ScrollArea>
-      <div className={classes.version}>
+      <div className={classes.text}>
         <Text
-          className={classes.version}
           size="sm"
           c="dimmed"
           component="a"
@@ -107,6 +212,19 @@ export default function SettingsSidebar() {
           v{APP_VERSION}
         </Text>
       </div>
+
+      {isCloud() && (
+        <div className={classes.text}>
+          <Text
+            size="sm"
+            c="dimmed"
+            component="a"
+            href="mailto:help@docmost.com"
+          >
+            help@docmost.com
+          </Text>
+        </div>
+      )}
     </div>
   );
 }

apps/client/src/components/settings/settings.module.css

@@ -58,7 +58,7 @@
     align-items: center;
 }
 
-.version {
+.text {
     padding-left: var(--mantine-spacing-xs) ;
     padding-top: 10px;
 }