feat: prepare the community edition

- CE has unlimited seats for core functionalities: deployment and hosting
- For EE features, a license is required now

Author: svedova

src/components/EmptyPage/EmptyPage.tsx

@@ -3,19 +3,33 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import emptyListSvg from "~/assets/images/empty-list.svg";
+import UpgradeButton from "~/components/UpgradeButton";
 
 interface Props {
   sx?: SxProps;
   children?: React.ReactNode;
+  paymentRequired?: boolean;
 }
 
-export default function EmptyList({ sx, children }: Props) {
+export default function EmptyList({ sx, children, paymentRequired }: Props) {
   return (
     <Box sx={{ textAlign: "center", my: 12, ...sx }}>
       <img src={emptyListSvg} alt="Empty app list" className="m-auto" />
-      <Typography fontSize="medium" sx={{ mt: 6 }}>
-        {children || <>It's quite empty in here.</>}
-      </Typography>
+      {paymentRequired ? (
+        <>
+          <Typography
+            fontSize="medium"
+            sx={{ mt: 6, mb: 2, fontWeight: "bold" }}
+          >
+            You need to upgrade your plan to access this feature.
+          </Typography>
+          <UpgradeButton fullWidth={false} />
+        </>
+      ) : (
+        <Typography fontSize="medium" sx={{ mt: 6 }}>
+          {children || <>It's quite empty in here.</>}
+        </Typography>
+      )}
     </Box>
   );
 }

src/components/UpgradeButton/UpgradeButton.tsx

@@ -0,0 +1,48 @@
+import LockIcon from "@mui/icons-material/Lock";
+import LaunchIcon from "@mui/icons-material/Launch";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+
+interface Props {
+  fullWidth?: boolean;
+  text?: string;
+  variant?: "contained" | "outlined" | "text";
+}
+
+export default function UpgradeButton({
+  fullWidth = true,
+  text = "Upgrade to enterprise",
+  variant = "contained",
+}: Props) {
+  const Icon = text === "Upgrade to enterprise" ? LockIcon : LaunchIcon;
+  const href = "https://app.stormkit.io/user/account";
+
+  if (variant === "text") {
+    return (
+      <Link
+        href={href}
+        color="secondary"
+        target="_blank"
+        rel="noopener noreferrer"
+        sx={{ textDecoration: "underline !important" }}
+      >
+        {text}
+      </Link>
+    );
+  }
+
+  return (
+    <Button
+      variant={variant}
+      color="secondary"
+      fullWidth={fullWidth}
+      sx={{ mb: 1 }}
+      startIcon={<Icon sx={{ fontSize: 16 }} />}
+      target="_blank"
+      rel="noopener noreferrer"
+      href="https://app.stormkit.io/user/account"
+    >
+      {text}
+    </Button>
+  );
+}

src/components/UpgradeButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./UpgradeButton";

src/layouts/AdminLayout/AdminLayout.tsx

@@ -72,6 +72,13 @@ export default function AdminLayout({ children }: Props) {
                     pathname.includes("/admin/system") || pathname === "/admin",
                 }}
               />
+              {/* <MenuLink
+                item={{
+                  path: "/admin/users",
+                  text: "Users",
+                  isActive: pathname.includes("/admin/users"),
+                }}
+              /> */}
               <MenuLink
                 item={{
                   path: "/admin/subscription",

src/layouts/TopMenu/Teams/TeamMenu.tsx

@@ -1,3 +1,4 @@
+import { useContext } from "react";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import Link from "@mui/material/Link";
@@ -9,6 +10,8 @@ import Check from "@mui/icons-material/Check";
 import Settings from "@mui/icons-material/Settings";
 import GroupAdd from "@mui/icons-material/GroupAdd";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { RootContext } from "~/pages/Root.context";
+import UpgradeButton from "~/components/UpgradeButton";
 
 interface Props {
   selectedTeam?: Team;
@@ -27,6 +30,8 @@ export default function TeamMenu({
   onCreateTeamButtonClicked,
   onClickAway,
 }: Props) {
+  const { details } = useContext(RootContext);
+
   return (
     <ClickAwayListener onClickAway={onClickAway}>
       <Box>
@@ -118,19 +123,23 @@ export default function TeamMenu({
               )}
             </Box>
           ))}
-          <Button
-            variant="contained"
-            color="secondary"
-            fullWidth
-            sx={{ mb: 1 }}
-            onClick={e => {
-              e.preventDefault();
-              onCreateTeamButtonClicked();
-            }}
-          >
-            <Add sx={{ mr: 0.25, fontSize: 16 }} />
-            Create team
-          </Button>
+          {details?.license?.edition === "community" ? (
+            <UpgradeButton />
+          ) : (
+            <Button
+              variant="contained"
+              color="secondary"
+              fullWidth
+              sx={{ mb: 1 }}
+              startIcon={<Add sx={{ fontSize: 16 }} />}
+              onClick={e => {
+                e.preventDefault();
+                onCreateTeamButtonClicked();
+              }}
+            >
+              Create team
+            </Button>
+          )}
         </Box>
       </Box>
     </ClickAwayListener>

src/layouts/TopMenu/Teams/TeamModal.tsx

@@ -51,7 +51,7 @@ export default function TeamModal({ onClose, reload }: Props) {
                 onClose();
                 navigate(`/${t.slug}`, { replace: true });
               })
-              .catch(e => {
+              .catch(() => {
                 setError("Something went wrong while saving the team.");
               })
               .finally(() => {

src/layouts/TopMenu/Teams/TeamToggle.tsx

@@ -28,8 +28,10 @@ export default function TeamsToggle({ app }: Props) {
         arrow
         open={isMenuOpen}
         placement="bottom-start"
-        PopperProps={{
-          modifiers: [{ name: "offset", options: { offset: [0, 12] } }],
+        slotProps={{
+          popper: {
+            modifiers: [{ name: "offset", options: { offset: [0, 12] } }],
+          },
         }}
         title={
           <Box sx={{ p: 1 }}>

src/layouts/TopMenu/TopMenu.tsx

@@ -3,7 +3,7 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Logo from "~/components/Logo";
 import UserButtons from "./UserButtons";
-import TeamsToggle from "./Teams/TeamToggle";
+import TeamToggle from "./Teams/TeamToggle";
 import { grey } from "@mui/material/colors";
 
 interface Props {
@@ -41,7 +41,7 @@ export default function TopMenu({ children, submenu, app, team }: Props) {
           <Link href={slug} sx={{ flex: "1", mr: 1 }}>
             <Logo iconSize={28} iconOnly />
           </Link>
-          <TeamsToggle app={app} />
+          <TeamToggle app={app} />
         </Box>
         <Box sx={{ flex: 1 }}>{children}</Box>
         <Box sx={{ display: "flex", alignItems: "center" }}>

src/pages/Root.context.ts

@@ -4,7 +4,10 @@ type theme = "dark" | "light";
 
 interface RootContextProps {
   mode: theme;
+  details?: InstanceDetails;
+  loading?: boolean;
   setMode: (v: theme) => void;
+  setRefreshToken?: (token: number) => void;
 }
 
 export const RootContext = createContext<RootContextProps>({

src/pages/Root.tsx

@@ -2,7 +2,9 @@ import { useMemo, useState } from "react";
 import { Route, Routes, BrowserRouter } from "react-router-dom";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
+import Alert from "@mui/material/Alert";
 import AuthContext from "./auth/Auth.context";
+import { useFetchInstanceDetails } from "./auth/actions";
 import routes from "./routes";
 import createTheme from "./mui-theme";
 import { RootContext } from "./Root.context";
@@ -14,6 +16,9 @@ interface Props {
 const LS_KEY = "STORMKIT_MODE";
 
 export default function Root({ Router }: Props) {
+  const [refreshToken, setRefreshToken] = useState(0);
+  const { details, loading, error } = useFetchInstanceDetails(refreshToken);
+
   const [mode, setMode] = useState<"dark" | "light">(
     (localStorage.getItem(LS_KEY) as "dark") || "dark"
   );
@@ -25,7 +30,10 @@ export default function Root({ Router }: Props) {
   return (
     <RootContext.Provider
       value={{
+        details,
+        loading,
         mode,
+        setRefreshToken,
         setMode: v => {
           localStorage.setItem(LS_KEY, v);
           setMode(v);
@@ -35,6 +43,11 @@ export default function Root({ Router }: Props) {
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
           <CssBaseline />
+          {error && (
+            <Alert severity="error" sx={{ mb: 4 }}>
+              {error}
+            </Alert>
+          )}
           <Router>
             <AuthContext>
               <Routes>