@vertesia/ui 0.72.0 → 0.74.0

package/src/shell/apps/StandaloneApp.tsx

@@ -0,0 +1,108 @@
+import { AppInstallationWithManifest, ProjectRef } from "@vertesia/common";
+import { Center } from "@vertesia/ui/core";
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
+import { LockIcon } from "lucide-react";
+import { ComponentType, ReactNode, useEffect, useState } from "react";
+import { AppInstallationProvider } from "./AppInstallationProvider";
+import { AppProjectSelector } from "./AppProjectSelector";
+
+
+interface StandaloneAppProps {
+    /**
+     * The app name. 
+     * The name must be the name used to register the app in Vertesia. It will be used to check if thre user has access to the app.
+     * 
+     * Also, this component is providing an AppInfo context that can be retrieved using the useAppInfo() hook.
+     */
+    name: string;
+
+    /**
+     * A react element to display if the access is denied to the app.
+     * If not specified a simple message will be displayed
+     */
+    AccessDenied?: ComponentType<AccessDeniedMessageProps>;
+
+    children: ReactNode;
+}
+export function StandaloneApp({ name, AccessDenied = AccessDeniedMessage, children }: StandaloneAppProps) {
+    return name ? (
+        <StandaloneAppImpl name={name} AccessDenied={AccessDenied}>{children}</StandaloneAppImpl>
+    ) : (
+        <UnknownAppName />
+    )
+}
+export function StandaloneAppImpl({ name, AccessDenied = AccessDeniedMessage, children }: StandaloneAppProps) {
+    const { authToken, client } = useUserSession();
+    const [installation, setInstallation] = useState<AppInstallationWithManifest | null>(null)
+    const [state, setState] = useState<"loading" | "error" | "loaded">("loading");
+
+    useEffect(() => {
+        if (!authToken) {
+            setState("loading");
+        } else {
+            const isAppVisible = authToken.apps.includes(name);
+            if (isAppVisible) {
+                client.apps.getAppInstallationByName(name).then(inst => {
+                    if (!inst) {
+                        console.log(`App ${name} not found!`);
+                        setState("error");
+                    } else {
+                        setState("loaded");
+                        setInstallation(inst);
+                    }
+                });
+            } else {
+                setState("error");
+            }
+        }
+    }, [name, authToken]);
+
+    if (state === "loading") {
+        return null;
+    } else if (state === "error") {
+        return <AccessDenied name={name} />
+    } else if (installation) {
+        return <AppInstallationProvider installation={installation}>
+            {children}
+        </AppInstallationProvider>
+    }
+}
+
+interface AccessDeniedMessageProps {
+    name: string;
+}
+function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
+    const { project } = useUserSession();
+    const onChange = (project: ProjectRef) => {
+        localStorage.setItem(LastSelectedAccountId_KEY, project.account);
+        localStorage.setItem(LastSelectedProjectId_KEY + '-' + project.account, project.id);
+        window.location.reload();
+    }
+    return (
+        <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
+            <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
+            <div className="text-xl font-semibold">Access Denied</div>
+            <div className="mt-2 text-sm text-gray-500">
+                You don&apos;t have permission to view the <span className="font-semibold">{name}</span> app in project: <span className="font-semibold">&laquo;{project?.name}&raquo;</span>.
+            </div>
+            <div className="mt-4">
+                <AppProjectSelector app={{ name }} onChange={onChange} />
+            </div>
+        </Center>
+    )
+}
+
+function UnknownAppName() {
+    return (
+        <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
+            <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
+            <div className="text-xl font-semibold">Application not registered</div>
+            <div className="mt-2 text-sm text-gray-500">
+                Before starting to code a Vertesia application you must register an application manifest
+                in Vertesia Studio then install it in one or more projects.
+                <p />
+                Then use the created app name as a parameter to <code>&lt;StandaloneApp name=&quot;your-app-name&quot;&gt;</code> in the <code>src/main.ts</code> file.
+            </div>
+        </Center>
+    )
+}

package/src/shell/apps/index.ts

@@ -1 +1,3 @@
-export * from "./CheckAppAccess";
+export * from "./AppInstallationProvider";
+export * from "./StandaloneApp";
+export * from "./AppProjectSelector";

package/src/shell/login/InviteAcceptModal.tsx

@@ -68,7 +68,7 @@ export function InviteAcceptModal() {
                 <div className="w-full font-semibold">{invite.data.account.name ?? invite.data.account}</div>
                 {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
                 <div className="text-xs">Role: {invite.data.role}</div>
-                <div className="text-xs">by {invite.data.invitedBy.name}</div>
+                <div className="text-xs">by {invite.data.invited_by.name}</div>
             </div>
             <div className="flex flex-col gap-4">
                 <Button size={'xs'} onClick={() => accept(invite)}>Accept</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>Reject</Button>

package/lib/esm/shell/apps/CheckAppAccess.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorBox } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import { useEffect, useState } from "react";
-export function CheckAppAccess({ name, children }) {
-    const [hasAccess, setHasAccess] = useState(null);
-    const { authToken } = useUserSession();
-    useEffect(() => {
-        if (authToken) {
-            setHasAccess(authToken.apps?.includes(name) || false);
-        }
-    }, [authToken]);
-    if (hasAccess == null) {
-        return null;
-    }
-    if (hasAccess) {
-        return children;
-    }
-    else {
-        return _jsx(ErrorBox, { title: "Forbidden", children: "Access is not granted to this application" });
-    }
-}
-//# sourceMappingURL=CheckAppAccess.js.map

package/lib/esm/shell/apps/CheckAppAccess.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckAppAccess.js","sourceRoot":"","sources":["../../../../src/shell/apps/CheckAppAccess.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAyC;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IACjE,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,SAAS,EAAE,CAAC;YACZ,YAAY,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACZ,OAAO,QAAQ,CAAC;IACpB,CAAC;SAAM,CAAC;QACJ,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,0DAAqD,CAAA;IAC3F,CAAC;AACL,CAAC"}

package/lib/types/shell/apps/CheckAppAccess.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-export declare function CheckAppAccess({ name, children }: {
-    name: string;
-    children: ReactNode;
-}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
-//# sourceMappingURL=CheckAppAccess.d.ts.map

package/lib/types/shell/apps/CheckAppAccess.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckAppAccess.d.ts","sourceRoot":"","sources":["../../../../src/shell/apps/CheckAppAccess.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGvD,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2UAmBvF"}

package/src/shell/apps/CheckAppAccess.tsx

@@ -1,25 +0,0 @@
-import { ErrorBox } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import { ReactNode, useEffect, useState } from "react";
-
-
-export function CheckAppAccess({ name, children }: { name: string, children: ReactNode }) {
-    const [hasAccess, setHasAccess] = useState<boolean | null>(null);
-    const { authToken } = useUserSession();
-
-    useEffect(() => {
-        if (authToken) {
-            setHasAccess(authToken.apps?.includes(name) || false);
-        }
-    }, [authToken])
-
-    if (hasAccess == null) {
-        return null;
-    }
-
-    if (hasAccess) {
-        return children;
-    } else {
-        return <ErrorBox title="Forbidden">Access is not granted to this application</ErrorBox>
-    }
-}