@vertesia/ui 0.59.0 → 0.61.0

package/src/features/user/UserInfo.tsx

@@ -0,0 +1,215 @@
+import { useUserSession } from "@vertesia/ui/session";
+import { ApiKey, ApiKeyTypes, PrincipalType, User } from "@vertesia/common";
+import { Avatar, Table, Popover, PopoverContent, PopoverTrigger } from "@vertesia/ui/core";
+import { useFetch } from "@vertesia/ui/core";
+import { ReactNode } from "react";
+
+//TODO use a real cache
+const USER_CACHE: Record<string, Promise<User>> = {};
+
+/**
+ * Fetch the user information given a user reference.
+ * The reference has the format: `type:id`. A special reference `system` is used to refer to the system user.
+ * @param userRef
+ */
+export function useFetchUserInfo(userId: string) {
+    const { client } = useUserSession();
+
+    return useFetch(() => {
+        let user: Promise<User> | undefined = USER_CACHE[userId];
+        if (!user) {
+            user = client.users.retrieve(userId).then(user => {
+                return user;
+            });
+            USER_CACHE[userId] = user;
+        }
+        return user;
+    }, [userId]);
+}
+
+function AvatarPlaceholder() {
+    return <div className='size-8' />
+}
+
+interface InfoProps {
+    showTitle?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+function SystemAvatar({ showTitle = false, size = "md" }: InfoProps) {
+    return (
+        <UserPopoverPanel title="System User" description="The system user is used to initialize built-in objects.">
+            <Avatar src="/icon.svg" size={size} />
+            {showTitle && <div className="text-sm font-semibold pl-2">System User</div>}
+        </UserPopoverPanel>
+    )
+}
+interface ServiceInfoProps extends InfoProps {
+    accountId: string;
+}
+function ServiceAccountAvatar({ accountId, showTitle = false, size = "md" }: ServiceInfoProps) {
+    const description = (
+        <>
+            <div>This user is used by robots like workflow workers.</div>
+            <div className="text-gray-800 dark:text-gray-500 text-sm"><span className="font-semibold">ID:</span> {accountId}</div>
+        </>
+    )
+
+    return (
+        <UserPopoverPanel title="Service Account" description={description}>
+            <div className="flex flex-row items-center gap-2">
+                <Avatar src="/cloud.svg" name="SA" color="bg-amber-500" className="px-[5px] text-white" size={size} />
+                {showTitle && <div className="text-sm font-semibold pl-2 truncate">Service Account : {accountId}</div>}
+            </div>
+        </UserPopoverPanel>
+    );
+}
+
+interface ErrorInfoProps extends InfoProps {
+    title?: string;
+    error: Error | string;
+}
+function ErrorAvatar({ title = "Error", error, showTitle = false, size = "md" }: ErrorInfoProps) {
+    return (
+        <UnknownAvatar title={title} message={typeof error === 'string' ? error : error.message} color="bg-red-500" showTitle={showTitle} size={size} />
+    );
+}
+
+interface UserInfoProps extends InfoProps {
+    /**
+     * The user reference is a string that contains the type and id of the user.
+     *
+     * The format is: `type:id`, where "type" is the {@link PrincipalType} and the "id" is the
+     * object ID in the database.
+     *
+     * @example user:123
+     * @example service_account:123
+     * @example apikey:123
+     */
+    userRef: string | undefined;
+}
+export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoProps) {
+    if (!userRef) {
+        return <UnknownAvatar title="Unknown User" message="User information is not available." showTitle={showTitle} size={size} />
+    }
+
+    const [type, id] = userRef ? userRef.split(':') : ["unknown"];
+    switch (type) {
+        case PrincipalType.User:
+            return <UserAvatar userId={id} showTitle={showTitle} size={size} />
+        case "system":
+            return <SystemAvatar showTitle={showTitle} size={size} />
+        case PrincipalType.ServiceAccount:
+            return <ServiceAccountAvatar accountId={id} showTitle={showTitle} size={size} />
+        case PrincipalType.ApiKey:
+            return <ApiKeyAvatar keyId={id} size={size} showTitle={showTitle} />
+        default:
+            return <ErrorAvatar title="Unknown User" error={`Invalid user ref type: ${type}`} showTitle={showTitle} size={size} />
+    }
+}
+
+interface UnknownAvatarProps extends InfoProps {
+    title: string;
+    message: ReactNode;
+    color?: string;
+}
+function UnknownAvatar({ title, message, color, size = "md", showTitle = false }: UnknownAvatarProps) {
+    return (
+        <UserPopoverPanel title={title} description={message}>
+            <div className="flex flex-row items-center gap-2">
+                <Avatar color={color} size={size} />
+                {showTitle && <div className="text-sm font-semibold pl-1">{title}</div>}
+            </div>
+        </UserPopoverPanel>
+    )
+}
+
+interface UserAvatarProps extends InfoProps {
+    userId: string;
+}
+function UserAvatar({ userId, showTitle = false, size = "md" }: UserAvatarProps) {
+    const { data: user, error } = useFetchUserInfo(userId);
+
+    if (error) {
+        return <ErrorAvatar title="Failed to fetch user" error={error} showTitle={showTitle} size={size} />
+    }
+
+    if (!user) {
+        return <AvatarPlaceholder />
+    }
+
+    return (
+        <UserPopoverPanel title={user.name || user.email || user.username || "unknown"} description={user.email}>
+            <div className="flex flex-row items-center gap-2">
+                <Avatar src={user.picture} name={user.name} color="bg-indigo-500" size={size} />
+                {showTitle && <div className="text-sm font-semibold pl-2">{user.name || user.email || user.username || "unknown"}</div>}
+            </div>
+        </UserPopoverPanel>
+    )
+}
+
+interface ApiKeyAvatarProps extends InfoProps {
+    keyId: string;
+}
+export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAvatarProps) {
+    const { client } = useUserSession();
+    const { data, error } = useFetch<ApiKey>(() => client.apikeys.retrieve(keyId), []);
+
+    if (error) {
+        return <ErrorAvatar title="Failed to fetch the apikey" error={error} showTitle={showTitle} size={size} />
+    }
+
+    if (!data) {
+        return <AvatarPlaceholder />
+    }
+
+    const isPublic = data.type === ApiKeyTypes.public;
+    const title = isPublic ? "Public Key" : "Private Key";
+    const avatar = <Avatar name={isPublic ? "PK" : "SK"} color="bg-pink-500" size={size} />;
+    const description = (
+        <Table className="dark:bg-gray-800 dark:text-gray-200">
+            <tr>
+                <td className="font-semibold">Key:</td>
+                <td>{data?.name}</td>
+            </tr>
+            <tr>
+                <td className="font-semibold">Account:</td>
+                <td>{data?.account}</td>
+            </tr>
+            <tr>
+                <td className="font-semibold">Project:</td>
+                <td>{data?.project}</td>
+            </tr>
+        </Table>
+    );
+
+    return (
+        <UserPopoverPanel title={title} description={description}>
+            <div className="flex flex-row items-center gap-2">
+                {avatar}
+                {showTitle && <div className="text-sm font-semibold pl-2">{data?.name || data?.account || data?.project || "unknown"}</div>}
+            </div>
+        </UserPopoverPanel >
+    )
+}
+
+interface UserPopoverPanelProps {
+    title: string;
+    description: ReactNode;
+    children: React.ReactNode;
+}
+function UserPopoverPanel({ title, description, children }: UserPopoverPanelProps) {
+    return (
+        <Popover hover>
+            <PopoverTrigger className="cursor-pointer flex items-center inline-block">
+                <div>{children}</div>
+            </PopoverTrigger>
+            <PopoverContent align="center" sideOffset={8} side="right">
+                <div className="flex flex-col gap-1 rounded-md shadow-md p-2">
+                    <div className='text-md font-semibold'>{title}</div>
+                    <div>{description}</div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}

package/src/features/user/index.ts

@@ -0,0 +1,2 @@
+export * from "./UserInfo"
+export * from "./UserAvatar"

package/src/features/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./text.js";
+export * from "./mimeType.js";
+export * from "./rendition.js";

package/src/features/utils/mimeType.ts

@@ -0,0 +1,9 @@
+const CSV_PREFIX = 'text/csv'
+const IMAGE_PREFIX = 'image/'
+const PDF_PREFIX = 'application/pdf'
+const VIDEO_PREFIX = 'video/'
+
+export const isCsv = (type: string) => type === CSV_PREFIX || CSV_PREFIX.includes(type)
+export const isImage = (type: string) => type.startsWith(IMAGE_PREFIX) || IMAGE_PREFIX.includes(type)
+export const isPdf = (type: string) => type === PDF_PREFIX || PDF_PREFIX.includes(type)
+export const isVideo = (type: string) => type.startsWith(VIDEO_PREFIX) || VIDEO_PREFIX.includes(type)

package/src/features/utils/rendition.ts

@@ -0,0 +1,75 @@
+import { isImage, isPdf, isVideo } from "./mimeType.js";
+import { VertesiaClient } from "@vertesia/client";
+import { ContentObjectItem, ImageRenditionFormat } from "@vertesia/common";
+
+//TODO we must use a setting in Env.
+const env = import.meta.env;
+
+const RENDITION_OPTIONS = {
+  max_hw: env?.VITE_RENDITION_HW || 256,
+  format: ImageRenditionFormat.jpeg,
+  generate_if_missing: true,
+};
+
+const RENDITION_ID = "vertesia.content_store.renditionId";
+
+export async function retrieveRendition(
+  client: VertesiaClient,
+  doc: ContentObjectItem,
+  setRenditionUrl: (url: string) => void,
+  setRenditionAlt: (alt: string) => void,
+) {
+  if (
+    !doc?.content?.type ||
+    !(
+      isImage(doc.content.type) ||
+      isVideo(doc.content.type) ||
+      isPdf(doc.content.type)
+    )
+  ) {
+    return;
+  }
+
+  const currentTime = new Date().getTime() / 1000;
+
+  const savedId = localStorage.getItem(
+    `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}`,
+  );
+  const elapsedTime = localStorage.getItem(
+    `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}_time`,
+  );
+
+  if (
+    savedId?.length &&
+    elapsedTime &&
+    Math.abs(currentTime - parseInt(elapsedTime)) <= 900
+  ) {
+    setRenditionUrl(savedId);
+    setRenditionAlt(`${doc.name} Rendition`);
+    return savedId;
+  }
+
+  client.objects.getRendition(doc.id, RENDITION_OPTIONS).then((response) => {
+    if (response.status === "generating") {
+      setTimeout(retrieveRendition, 60000);
+    } else if (response.status === "failed") {
+      return;
+    } else {
+      if (!response?.renditions?.length) {
+        return;
+      }
+      const rendition = response.renditions[0];
+
+      localStorage.setItem(
+        `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}`,
+        rendition,
+      );
+      localStorage.setItem(
+        `${RENDITION_ID}_${doc.id}_${RENDITION_OPTIONS.max_hw}_time`,
+        (new Date().getTime() / 1000).toString(),
+      );
+      setRenditionUrl(rendition);
+      setRenditionAlt(`${doc.name} Rendition`);
+    }
+  });
+}

package/src/features/utils/text.ts

@@ -0,0 +1,10 @@
+export function shortId(id: string, length: number = 7) {
+    if (!id) {
+        return "";
+    }
+    return "~" + id.slice(-length);
+}
+
+export function shortenString(str: string, length: number) {
+    return str.length > length ? str.substring(0, length) + '...' : str;
+}

package/src/layout/FullHeightLayout.tsx

@@ -50,7 +50,7 @@ FullHeightLayout.Body = function Body({ className, children }: BodyProps) {
             className={clsx(
                 "grow overflow-auto",
                 "min-h-0",
-                "p-4",
+                "px-4 py-2",
                 className
             )}
         >

package/src/layout/Sidebar.tsx

@@ -84,21 +84,31 @@ export interface SidebarItemProps {
     tools?: React.ReactNode
     className?: string;
     id?: string; //HTML ID of the element
+    external?: boolean; //If true, the link will open in a new tab
 }
-export function SidebarItem({ className, tools, children, icon: Icon, href, current, onClick }: SidebarItemProps) {
+export function SidebarItem({ external, className, tools, children, icon: Icon, href, current, onClick }: SidebarItemProps) {
     const { toggleMobile } = useSidebarToggle();
     const _closeSideBar = () => {
         setTimeout(() => {
             toggleMobile(false)
         }, 100);
     }
+    const onClickWrapper = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        if (external) {
+            window.open(href, '_blank');
+            event.preventDefault(); // Prevent default link behavior
+            event.stopPropagation(); // Stop the event from propagating
+        } else if (onClick) {
+            onClick(event);
+        }
+    }
     return (
         <li>
             <Nav onClick={_closeSideBar}>
                 <SidebarTooltip text={children as string}>
                     <a
                         href={href}
-                        onClick={onClick}
+                        onClick={onClickWrapper}
                         className={clsx(
                             current
                                 ? 'bg-sidebar-accent text-sidebar-accent-foreground'

package/src/widgets/Progress.tsx

@@ -0,0 +1,10 @@
+interface ProgressProps {
+    percent: number; // progress percent value
+}
+export function Progress({ percent }: ProgressProps) {
+    return (
+        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+            <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${percent}%` }}></div>
+        </div>
+    )
+}

package/src/widgets/codemirror/CodeMirrorEditor.tsx

@@ -24,7 +24,7 @@ export class EditorApi {
 }
 
 const customTheme = EditorView.theme({
-    "&": { fontSize: "16px", fontFamily: "Sans-Serif" },
+    "&": { fontSize: "14px", fontFamily: "monospace" },
     ".cm-content": { fontFamily: "inherit" },
     ".cm-scroller": { fontFamily: "inherit" },
     ".cm-gutters": { backgroundColor: "transparent", color: "#ddd" },

package/src/widgets/form/Form.tsx

@@ -169,7 +169,7 @@ function ListField({ object }: ListFieldProps) {
                 })
             }
             <div>
-                <Button variant='soft' onClick={addItem}><Plus className="size-6" /> Add</Button>
+                <Button variant='secondary' onClick={addItem}><Plus className="size-6" /> Add</Button>
             </div>
         </div>
     )
@@ -188,7 +188,7 @@ function ListItem({ list, object, onDelete }: ListItemProps) {
                     renderItemProperty(object, list.schema.arraySchema.editor)
                 }
             </div>
-            <Button variant='soft' onClick={onDelete}><Trash2 className='size-4' /></Button>
+            <Button variant='secondary' onClick={onDelete}><Trash2 className='size-4' /></Button>
         </div>
     )
 }

package/src/widgets/form/schema.ts

@@ -1,11 +1,11 @@
 import { JSONSchema, JSONSchemaType, JSONSchemaTypeName } from "@vertesia/common";
-import Ajv, { ValidateFunction } from "ajv";
+import Ajv, { ErrorObject, ValidateFunction } from "ajv";
 
 function createSchemaFromType(type: JSONSchemaTypeName): JSONSchema {
     if (type === 'object') {
         return { type: 'object', properties: {} };
     } else if (type === 'array') {
-        return { type: 'array', items: { type: 'any' } };
+        return { type: 'array', items: {} };
     } else {
         return { type };
     }
@@ -14,13 +14,20 @@ function createSchemaFromType(type: JSONSchemaTypeName): JSONSchema {
 export class Schema {
     schema: JSONSchema;
     properties: Record<string, PropertySchema> = {};
-    validator: ValidateFunction;
+    _validator?: ValidateFunction;
     constructor(schema?: JSONSchema) {
         this.schema = schema || { type: 'object', properties: {} };
-        this.validator = new Ajv({ strict: false }).compile(this.schema);
         this.load();
     }
 
+    get validator() {
+        if (!this._validator) {
+            const ajv = new Ajv({ allErrors: true, strict: false });
+            this._validator = ajv.compile(this.schema);
+        }
+        return this._validator;
+    }
+
     private load() {
         if (this.schema.properties) {
             const properties = this.schema.properties;
@@ -57,11 +64,11 @@ export class Schema {
         return this.schema.type as JSONSchemaTypeName;
     }
 
-    validate(value: any) {
+    validate(value: any): ErrorObject<string, Record<string, any>, unknown>[] | null {
         if (!this.validator(value)) {
             return this.validator.errors || [];
         } else {
-            return true;
+            return null;
         }
     }
 
@@ -194,7 +201,7 @@ function getArrayElementType(schema: JSONSchema) {
         throw new Error('Expecting an array schema');
     }
     if (!schema.items) {
-        schema.items = { type: 'any' };
+        schema.items = {};
     } else if (Array.isArray(schema.items)) {
         throw new Error('Tuple arrays are not supported');
     }

package/src/widgets/index.ts

@@ -2,4 +2,8 @@ export * from "./xml-viewer/index.js";
 export * from "./json-view/index.js";
 export * from "./schema-editor/index.js";
 export * from "./form/index.js";
-export * from "./codemirror/index.js";
+export * from "./codemirror/index.js";
+export * from "./properties/index.js";
+export * from "./popover/index.js";
+export * from "./upload/index.js";
+export * from "./Progress.js"

package/src/widgets/popover/Popover.tsx

@@ -0,0 +1,171 @@
+import { flip, offset, shift } from "@floating-ui/dom";
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    Middleware,
+    Placement,
+    UseClickProps,
+    UseDismissProps,
+    UseHoverProps,
+    UseTransitionStylesProps,
+    autoUpdate,
+    safePolygon,
+    useClick,
+    useDismiss,
+    useFloating,
+    useHover,
+    useInteractions,
+    useTransitionStyles
+} from "@floating-ui/react";
+import clsx from "clsx";
+import { ReactElement, ReactNode, useState } from "react";
+import { PopoverContext } from "./context";
+import { defineSlot, processSlots } from "./slots";
+
+
+
+function computeElementProps<T extends { enabled?: boolean }>(value: undefined | boolean | T) {
+    if (!value) return { enabled: false } as T;
+    return (typeof value === 'boolean' ? { enabled: value } : value) as T
+}
+
+function getHoverProps(props: PopoverTriggerProps | undefined) {
+    return props?.hover === true ? {
+        enabled: true,
+        handleClose: safePolygon({ blockPointerEvents: true }),
+        restMs: 0,
+    } : props?.hover
+}
+
+function getClickProps(props: PopoverTriggerProps | undefined) {
+    return props && !props.hover && !props.click ? {
+        enabled: true,
+    } : props?.click
+}
+
+interface BasePopoverProps {
+    strategy?: "fixed" | "absolute"
+    placement?: Placement,
+    middleware?: Middleware[],
+    zIndex?: number,
+    dismiss?: boolean | UseDismissProps,
+    offset?: number
+}
+
+interface PopoverProps extends BasePopoverProps {
+    children: ReactNode | Iterable<ReactNode>
+}
+/**
+ * The component is instantiated when all interactions are known
+ * @param param0
+ * @returns
+ */
+export function Popover(props: PopoverProps) {
+
+    const slots: { trigger?: ReactElement, content?: ReactElement } = {};
+    processSlots(props.children, slots);
+
+    if (!slots.content) {
+        throw new Error('Popover must provide a content slot')
+    }
+
+    const triggerProps = slots.trigger?.props as PopoverTriggerProps;
+    const contentProps = slots.content.props as PopoverContentProps;
+
+    // wait for the trigger to be defined
+    return <ResolvedPopover {...props}
+        trigger={triggerProps}
+        content={contentProps}
+    />
+}
+
+
+interface ResolvedPopoverProps extends BasePopoverProps {
+    trigger?: PopoverTriggerProps
+    content: PopoverContentProps
+}
+function ResolvedPopover({ middleware, offset: defaultOffset, trigger, dismiss = true, content, placement, strategy, zIndex = 40 }: ResolvedPopoverProps) {
+    const [isOpen, setIsOpen] = useState(false)
+    const floating = useFloating({
+        open: isOpen,
+        placement,
+        strategy,
+        onOpenChange: setIsOpen,
+        middleware: middleware || [offset(defaultOffset || 4), shift(), flip()],
+        whileElementsMounted: autoUpdate // stick to the anchor when resizing / scrolling
+    })
+
+
+    const {
+        floatingStyles,
+        refs: { setReference, setFloating },
+        context,
+    } = floating;
+
+
+    const dismissInteraction = useDismiss(context, computeElementProps(dismiss))
+    const clickInteraction = useClick(context, computeElementProps(getClickProps(trigger)))
+    const hoverInteraction = useHover(context, computeElementProps(getHoverProps(trigger)))
+
+    const {
+        getReferenceProps,
+        getFloatingProps,
+    } = useInteractions([dismissInteraction, clickInteraction, hoverInteraction]);
+
+    const { isMounted, styles: transitionStyles } = useTransitionStyles(context, content.transition);
+
+    return (
+        <PopoverContext.Provider value={{
+            ...floating,
+            close: () => setIsOpen(false)
+        }}>
+            {trigger &&
+                <div className={clsx(trigger.className, "inline-block")} ref={setReference} {...getReferenceProps()}>
+                    {trigger.children}
+                </div>
+            }
+            <FloatingPortal>
+                {
+                    isMounted && (
+                        <div ref={setFloating}
+                            style={{ ...floatingStyles, zIndex: zIndex }}
+                            {...getFloatingProps()}
+                        >
+                            <FloatingFocusManager context={context}>
+                                <div className={clsx(content.className, "bg-popover rounded-md text-popover-foreground max-w-md")} style={transitionStyles}>
+                                    {content.children}
+                                </div>
+                            </FloatingFocusManager>
+                        </div>
+                    )
+                }
+            </FloatingPortal>
+        </PopoverContext.Provider>
+    )
+}
+
+
+
+interface PopoverTriggerProps {
+    children: ReactNode | ReactNode[]
+    className?: string
+    click?: boolean | UseClickProps
+    hover?: boolean | UseHoverProps
+}
+function PopoverTrigger(_props: PopoverTriggerProps) {
+    return null;
+}
+defineSlot('trigger', PopoverTrigger);
+
+interface PopoverContentProps {
+    className?: string
+    transition?: UseTransitionStylesProps
+    children: ReactNode | ReactNode[]
+}
+function PopoverContent(_props: PopoverContentProps) {
+    return null;
+}
+defineSlot('content', PopoverContent);
+
+Popover.Trigger = PopoverTrigger;
+Popover.Content = PopoverContent;

package/src/widgets/popover/context.ts

@@ -0,0 +1,15 @@
+import { UseFloatingReturn } from "@floating-ui/react";
+import { createContext, useContext } from "react";
+
+interface PopoverApi extends UseFloatingReturn {
+    close: () => void
+}
+const PopoverContext = createContext<PopoverApi>(undefined as any);
+
+export function usePopoverContext() {
+    return useContext(PopoverContext);
+}
+
+export {
+    PopoverContext
+}

package/src/widgets/popover/index.ts

@@ -0,0 +1,2 @@
+export * from "./Popover";
+export * from "./context";