@vertesia/ui 0.72.0 → 0.73.0

package/src/features/facets/RunsFacetsNav.tsx

@@ -13,6 +13,7 @@ interface RunsFacetsNavProps {
         environments?: any[];
         models?: any[];
         statuses?: any[];
+        tags?: any[];
         finish_reason?: any[];
         created_by?: any[];
     };
@@ -35,16 +36,25 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
     if (facets.environments) {
         const environmentFilterGroup = VEnvironmentFacet({
             buckets: facets.environments || [],
-            name: 'Environments'
+            name: 'environments',
         });
         customFilterGroups.push(environmentFilterGroup);
     }
 
+    // Add tags filter as stringList type (allows custom input)
+    const tagsFilterGroup = {
+        name: 'tags',
+        placeholder: 'Tags',
+        type: 'stringList' as const,
+        multiple: true
+    };
+    customFilterGroups.push(tagsFilterGroup);
+
     if (facets.models) {
         const modelFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.models || [],
-            name: 'Model'
+            name: 'model'
         });
         customFilterGroups.push(modelFilterGroup);
     }
@@ -53,7 +63,7 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
         const statusFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.statuses || [],
-            name: 'Status'
+            name: 'status'
         });
         customFilterGroups.push(statusFilterGroup);
     }
@@ -105,11 +115,13 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
 export function useRunsFilterHandler(search: SearchInterface) {
     return (newFilters: BaseFilter[]) => {
         if (newFilters.length === 0) {
-            search.clearFilters();
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true, false);
             return;
         }
 
-        search.clearFilters(false);
+        // Clear all filters first without defaults, then apply new ones
+        search.clearFilters(false, false);
 
         newFilters.forEach(filter => {
             if (filter.value && filter.value.length > 0) {

package/src/features/facets/VFacetsNav.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 export interface SearchInterface {
     getFilterValue(name: string): any;
     setFilterValue(name: string, value: any): void;
-    clearFilters(autoSearch?: boolean): void;
+    clearFilters(autoSearch?: boolean, applyDefaults?: boolean): void;
     search(): Promise<boolean | undefined>;
     readonly isRunning: boolean;
     query: Record<string, any>;

package/src/shell/apps/AppInstallationProvider.tsx

@@ -0,0 +1,22 @@
+import { AppInstallationWithManifest } from "@vertesia/common";
+import { createContext, ReactNode, useContext } from "react";
+
+
+export const AppInstallationContext = createContext<AppInstallationWithManifest | null>(null);
+
+export function AppInstallationProvider({ installation, children }: { installation: AppInstallationWithManifest, children: ReactNode }) {
+    return (
+        <AppInstallationContext.Provider value={installation}>
+            {children}
+        </AppInstallationContext.Provider>
+    )
+}
+
+/**
+ * Get the current app installation obejct when called in an app context otheriwse returns null
+ */
+export function useAppInstallation() {
+    return useContext(AppInstallationContext);
+}
+
+

package/src/shell/apps/AppProjectSelector.tsx

@@ -0,0 +1,47 @@
+import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
+import { SelectBox, useFetch } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useState } from "react";
+
+interface AppProjectSelectorProps {
+    app: RequireAtLeastOne<{ id?: string, name?: string }, 'id' | 'name'>;
+    onChange: (value: ProjectRef) => void;
+    placeholder?: string;
+}
+export function AppProjectSelector({ app, onChange, placeholder }: AppProjectSelectorProps) {
+    const { client, project } = useUserSession();
+    const { data: projects, error } = useFetch(() => {
+        return client.apps.getAppInstallationProjects(app);
+    }, [app.id, app.name])
+
+    if (error) {
+        return <span className='text-red-600'>Error: failed to fetch projects: {error.message}</span>
+    }
+
+    return <SelectProject placeholder={placeholder} initialValue={project?.id} projects={projects || []} onChange={onChange} />
+}
+
+interface SelectProjectProps {
+    initialValue?: string
+    projects: ProjectRef[]
+    onChange: (value: ProjectRef) => void
+    placeholder?: string;
+}
+function SelectProject({ initialValue, projects, onChange, placeholder = "Select Project" }: Readonly<SelectProjectProps>) {
+    const [value, setValue] = useState<ProjectRef | undefined>(() => {
+        return initialValue ? projects.find(p => p.id === initialValue) : undefined
+    });
+    const _onChange = (value: ProjectRef) => {
+        setValue(value)
+        onChange(value)
+    }
+    return (
+        <SelectBox
+            by="id"
+            value={value}
+            options={projects}
+            optionLabel={(option) => option.name}
+            placeholder={placeholder}
+            onChange={_onChange} />
+    )
+}

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>
-    }
-}