@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/store/collections/CreateCollection.tsx

@@ -1,14 +1,25 @@
-import { CreateCollectionPayload } from "@vertesia/common";
-import { useToast, ModalBody, FormItem, ModalFooter, Input, Switch, Button, Modal, ModalTitle, Textarea } from "@vertesia/ui/core";
-import { SelectContentType } from "../types/SelectContentType";
-import { useNavigate } from "@vertesia/ui/router";
-import { useUserSession } from "@vertesia/ui/session";
-import { useState } from "react";
-import { useUITranslation } from '../../../i18n/index.js';
+import type { CreateCollectionPayload } from '@vertesia/common';
+import {
+    Button,
+    FormItem,
+    Input,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalTitle,
+    Switch,
+    Textarea,
+    useToast,
+} from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useNavigate } from '@vertesia/ui/router';
+import { useUserSession } from '@vertesia/ui/session';
+import { useState } from 'react';
+import { SelectContentType } from '../types/SelectContentType';
 
 interface CreateCollectionFormProps {
     onClose: () => void;
-    redirect?: boolean
+    redirect?: boolean;
     onAddToCollection?: (collectionId: string) => void;
 }
 export function CreateCollectionForm({ onClose, redirect = true, onAddToCollection }: CreateCollectionFormProps) {
@@ -19,11 +30,11 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
     const { client } = useUserSession();
     const [payload, setPayload] = useState<CreateCollectionPayload>({
         dynamic: false,
-        name: "",
-        description: "",
+        name: '',
+        description: '',
     });
 
-    function setPayloadProp(name: string, value: any) {
+    function setPayloadProp(name: string, value: unknown) {
         setPayload({
             ...payload,
             [name]: value,
@@ -31,11 +42,11 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
     }
 
     const onCreate = () => {
-        if (!payload?.name || !payload.name.trim()) {
+        if (!payload?.name?.trim()) {
             toast({
                 title: t('type.nameRequired'),
                 description: t('store.pleaseProvideName'),
-                status: "error",
+                status: 'error',
                 duration: 5000,
             });
             return;
@@ -55,11 +66,10 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                 toast({
                     title: t('store.collectionCreated'),
                     description: `Collection "${r.name}" created successfully`,
-                    status: "success",
+                    status: 'success',
                     duration: 3000,
                 });
-                if (redirect)
-                    navigate(`/collections/${r.id}`);
+                if (redirect) navigate(`/collections/${r.id}`);
                 if (onAddToCollection) {
                     onAddToCollection(r.id);
                 }
@@ -68,7 +78,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                 toast({
                     title: t('store.failedToCreateCollection'),
                     description: err.message,
-                    status: "error",
+                    status: 'error',
                     duration: 5000,
                 });
             })
@@ -80,40 +90,60 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
             <ModalBody>
                 <form onSubmit={(e) => e.preventDefault()}>
                     <FormItem label={t('type.name')} required>
-                        <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
+                        <Input
+                            type="text"
+                            value={payload.name || ''}
+                            onChange={(value) => setPayloadProp('name', value)}
+                        />
                     </FormItem>
                     <FormItem label={t('type.description')} className="mt-2">
                         <Textarea
-                            value={payload.description || ""}
-                            onChange={(ev) => setPayloadProp("description", ev.target.value)}
+                            value={payload.description || ''}
+                            onChange={(ev) => setPayloadProp('description', ev.target.value)}
                         />
                     </FormItem>
-                    <FormItem label={t('store.dynamicCollection')} className="mt-2" direction="row" description={t('store.dynamicCollectionDescription')}>
-                        <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
+                    <FormItem
+                        label={t('store.dynamicCollection')}
+                        className="mt-2"
+                        direction="row"
+                        description={t('store.dynamicCollectionDescription')}
+                    >
+                        <Switch
+                            value={payload.dynamic || false}
+                            onChange={(value) => setPayloadProp('dynamic', value)}
+                        />
                     </FormItem>
-                    {!payload.dynamic &&
-                        <FormItem label={t('store.allowedContentTypes')} className="mt-4" description={t('store.allowedContentTypesOptionalDescription')}>
+                    {!payload.dynamic && (
+                        <FormItem
+                            label={t('store.allowedContentTypes')}
+                            className="mt-4"
+                            description={t('store.allowedContentTypesOptionalDescription')}
+                        >
                             <SelectContentType
                                 defaultValue={payload.allowed_types || null}
                                 onChange={(v) => {
                                     if (Array.isArray(v)) {
-                                        setPayloadProp("allowed_types", v.map(type => type.id));
+                                        setPayloadProp(
+                                            'allowed_types',
+                                            v.map((type) => type.id),
+                                        );
                                     } else {
-                                        setPayloadProp("allowed_types", v ? [v.id] : []);
+                                        setPayloadProp('allowed_types', v ? [v.id] : []);
                                     }
                                 }}
-                                isClearable multiple
+                                isClearable
+                                multiple
                             />
                         </FormItem>
-                    }
+                    )}
                     <FormItem label={t('store.contentType')} className="mt-2" description={t('store.typeDescription')}>
                         <SelectContentType
                             defaultValue={payload.type || null}
                             onChange={(v) => {
                                 if (Array.isArray(v)) {
-                                    setPayloadProp("type", v.length > 0 ? v[0].id : null);
+                                    setPayloadProp('type', v.length > 0 ? v[0].id : null);
                                 } else {
-                                    setPayloadProp("type", v?.id || null);
+                                    setPayloadProp('type', v?.id || null);
                                 }
                             }}
                             isClearable
@@ -142,4 +172,4 @@ export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModal
             <CreateCollectionForm onClose={onClose} />
         </Modal>
     );
-}
+}

package/src/features/store/collections/EditCollectionView.tsx

@@ -1,13 +1,35 @@
-import { Collection, CreateCollectionPayload, getContentTypeRefId, JSONSchemaObject } from "@vertesia/common";
-import { Button, ErrorBox, FormItem, Input, Panel, Styles, Textarea, useFetch, useToast, useTheme } from "@vertesia/ui/core";
-import { SharedPropsEditor, SyncMemberHeadsToggle, UserInfo } from "@vertesia/ui/features";
-import { useUserSession } from "@vertesia/ui/session";
-import { MonacoEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
-import dayjs from "dayjs";
-import { useContext, useMemo, useRef, useState } from "react";
-import { useUITranslation } from '../../../i18n/index.js';
-import { SearchContext } from "../objects/search/DocumentSearchContext";
-import { SelectContentType, stringifyTableLayout } from "../types";
+import {
+    type Collection,
+    type CreateCollectionPayload,
+    getContentTypeRefId,
+    type JSONSchemaObject,
+    SecurityLevelLabels,
+} from '@vertesia/common';
+import {
+    Badge,
+    Button,
+    ErrorBox,
+    errorMessage,
+    FormItem,
+    Input,
+    Panel,
+    SelectBox,
+    Styles,
+    Textarea,
+    useFetch,
+    useTheme,
+    useToast,
+} from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { type EditorApi, GeneratedForm, ManagedObject, MonacoEditor, type Node } from '@vertesia/ui/widgets';
+import dayjs from 'dayjs';
+import { useContext, useMemo, useRef, useState } from 'react';
+import { UserInfo } from '../../user/UserInfo';
+import { SearchContext } from '../objects/search/DocumentSearchContext';
+import { SelectContentType, stringifyTableLayout } from '../types';
+import { SharedPropsEditor } from './SharedPropsEditor';
+import { SyncMemberHeadsToggle } from './SyncMemberHeadsToggle';
 
 interface UpdateData {
     name: string;
@@ -16,12 +38,19 @@ interface UpdateData {
     tags: string[];
     type: string;
     allowed_types: string[];
+    sensitivity?: number;
+    compartments: string[];
 }
 
 interface EditCollectionViewProps {
     collection: Collection;
     refetch: () => void;
 }
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
 export function EditCollectionView({ refetch, collection }: EditCollectionViewProps) {
     const { t } = useUITranslation();
     const typeId = collection.type ? getContentTypeRefId(collection.type) : undefined;
@@ -33,26 +62,33 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
     const [isUpdating, setUpdating] = useState(false);
     const [metadata, setMetadata] = useState<UpdateData>({
         name: collection.name,
-        description: collection.description || "",
-        query: collection.query ? JSON.stringify(collection.query, null, 2) : "",
+        description: collection.description || '',
+        query: collection.query ? JSON.stringify(collection.query, null, 2) : '',
         tags: collection.tags || [],
-        type: collection.type ? getContentTypeRefId(collection.type) : "",
+        type: collection.type ? getContentTypeRefId(collection.type) : '',
         allowed_types: collection.allowed_types || [],
+        sensitivity: collection.sensitivity,
+        compartments: collection.compartments || [],
     });
+    const [compartmentInput, setCompartmentInput] = useState('');
 
     const tableLayoutValue = useMemo(() => {
         return stringifyTableLayout(collection.table_layout);
     }, [collection.table_layout]);
 
     const onSubmit = () => {
-        let query: any;
+        let query: Record<string, unknown> | undefined;
         try {
-            query = metadata.query ? JSON.parse(metadata.query) : undefined;
-        } catch (err: any) {
+            const parsedQuery = metadata.query ? JSON.parse(metadata.query) : undefined;
+            if (parsedQuery !== undefined && !isRecord(parsedQuery)) {
+                throw new Error(t('store.invalidQueryJson'));
+            }
+            query = parsedQuery;
+        } catch (err: unknown) {
             toast({
                 title: t('store.invalidQueryJson'),
-                description: err.message,
-                status: "error",
+                description: errorMessage(err),
+                status: 'error',
                 duration: 5000,
             });
             return;
@@ -65,19 +101,21 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             tags: metadata.tags,
             type: metadata.type,
             allowed_types: metadata.allowed_types,
+            sensitivity: metadata.sensitivity,
+            compartments: metadata.compartments,
         };
         let error: string | undefined;
         if (!payload.name) {
             error = t('type.nameRequired');
         }
         if (!payload.type) {
-            (payload as any).type = null;
+            payload.type = null;
         }
         if (error) {
             toast({
                 title: t('store.validationFailed'),
                 description: error,
-                status: "error",
+                status: 'error',
                 duration: 5000,
             });
             return;
@@ -87,11 +125,11 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             if (layout) {
                 try {
                     payload.table_layout = JSON.parse(layout);
-                } catch (err: any) {
+                } catch (err: unknown) {
                     toast({
                         title: t('store.invalidTableLayout'),
-                        description: err.message,
-                        status: "error",
+                        description: errorMessage(err),
+                        status: 'error',
                         duration: 5000,
                     });
                     return;
@@ -113,15 +151,15 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                 toast({
                     title: t('store.collectionUpdated'),
                     description: t('store.collectionUpdatedSuccess'),
-                    status: "success",
+                    status: 'success',
                     duration: 3000,
                 });
             })
             .catch((err) => {
                 toast({
                     title: t('store.failedToUpdateCollection'),
-                    description: err.message,
-                    status: "error",
+                    description: errorMessage(err),
+                    status: 'error',
                     duration: 5000,
                 });
             })
@@ -130,7 +168,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             });
     };
 
-    const setField = (name: string, value: any) => {
+    const setField = (name: string, value: unknown) => {
         setMetadata({
             ...metadata,
             [name]: value,
@@ -139,67 +177,74 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
 
     return (
         <div className="flex flex-col gap-4 py-2">
-            <Panel title={t('store.configuration')}
+            <Panel
+                title={t('store.configuration')}
                 action={
                     <Button size="lg" isDisabled={isUpdating} onClick={onSubmit}>
                         {t('modal.save')}
                     </Button>
-                }>
+                }
+            >
                 <div className="flex justify-between mb-2">
                     <div className="w-1/2 gap-2 flex flex-col">
                         <div className="text-sm font-medium mb-1">{t('store.createdBy')}</div>
                         <div className="gap-2 flex items-center">
                             <UserInfo userRef={collection.created_by} showTitle />
-                            <span>at {dayjs(collection.created_at).format("YYYY-MM-DD HH:mm:ss")}</span>
+                            <span>at {dayjs(collection.created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
                         </div>
                     </div>
                     <div className="w-1/2 gap-2 flex flex-col">
                         <div className="text-sm font-medium mb-1">{t('store.updatedBy')}</div>
                         <div className="gap-2 flex items-center">
                             <UserInfo userRef={collection.updated_by} showTitle />
-                            <span>at {dayjs(collection.updated_at).format("YYYY-MM-DD HH:mm:ss")}</span>
+                            <span>at {dayjs(collection.updated_at).format('YYYY-MM-DD HH:mm:ss')}</span>
                         </div>
                     </div>
                 </div>
                 <FormItem label={t('type.name')} required>
-                    <Input value={metadata.name} onChange={(v) => setField("name", v)} />
+                    <Input value={metadata.name} onChange={(v) => setField('name', v)} />
                 </FormItem>
                 <FormItem label={t('type.description')}>
-                    <Textarea
-                        value={metadata.description}
-                        onChange={(e) => setField("description", e.target.value)}
-                    />
+                    <Textarea value={metadata.description} onChange={(e) => setField('description', e.target.value)} />
                 </FormItem>
-                {
-                    !collection.dynamic &&
-                    <FormItem label={t('store.allowedContentTypes')} description={t('store.allowedContentTypesSelectDescription')}>
+                {!collection.dynamic && (
+                    <FormItem
+                        label={t('store.allowedContentTypes')}
+                        description={t('store.allowedContentTypesSelectDescription')}
+                    >
                         <SelectContentType
                             defaultValue={metadata.allowed_types || null}
                             onChange={(v) => {
                                 if (Array.isArray(v)) {
-                                    setField("allowed_types", v.map(type => type.id));
+                                    setField(
+                                        'allowed_types',
+                                        v.map((type) => type.id),
+                                    );
                                 } else {
-                                    setField("allowed_types", v ? [v.id] : []);
+                                    setField('allowed_types', v ? [v.id] : []);
                                 }
                             }}
-                            isClearable multiple
+                            isClearable
+                            multiple
                         />
                     </FormItem>
-                }
-                {
-                    collection.dynamic && (
-                        <FormItem label={t('store.query')} description={t('store.queryDescription')}>
-                            <Textarea
-                                className={Styles.INPUT}
-                                minLines={1}
-                                maxLines={12}
-                                value={metadata.query}
-                                onChange={(e) => setField("query", e.target.value)}
-                            />
-                        </FormItem>
-                    )
-                }
-                <FormItem label={t('store.tableLayout')} description={t('store.tableLayoutDescription')} className="h-[200px]">
+                )}
+                {collection.dynamic && (
+                    <FormItem label={t('store.query')} description={t('store.queryDescription')}>
+                        <Textarea
+                            className={Styles.INPUT}
+                            minLines={1}
+                            maxLines={12}
+                            value={metadata.query}
+                            onChange={(e) => setField('query', e.target.value)}
+                        />
+                    </FormItem>
+                )}
+                <FormItem
+                    label={t('store.tableLayout')}
+                    description={t('store.tableLayoutDescription')}
+                    className="h-[200px]"
+                >
                     <MonacoEditor
                         className="border-1 rounded-md border-border"
                         value={tableLayoutValue}
@@ -213,27 +258,99 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         defaultValue={metadata.type || null}
                         onChange={(v) => {
                             if (Array.isArray(v)) {
-                                setField("type", v.length > 0 ? v[0].id : null);
+                                setField('type', v.length > 0 ? v[0].id : null);
                             } else {
-                                setField("type", v?.id || null);
+                                setField('type', v?.id || null);
                             }
                         }}
                         isClearable
                     />
                 </FormItem>
+                <FormItem
+                    label="Sensitivity"
+                    description="BLP sensitivity level — propagated to member documents (max across collections)"
+                >
+                    <SelectBox
+                        options={SecurityLevelLabels.map((label, index) => ({
+                            label: `${index} — ${label}`,
+                            value: index,
+                        }))}
+                        value={
+                            metadata.sensitivity !== undefined
+                                ? {
+                                      label: `${metadata.sensitivity} — ${SecurityLevelLabels[metadata.sensitivity] ?? 'Unknown'}`,
+                                      value: metadata.sensitivity,
+                                  }
+                                : undefined
+                        }
+                        onChange={(opt: { label: string; value: number }) => setField('sensitivity', opt.value)}
+                        optionLabel={(opt: { label: string }) => opt.label}
+                        by="value"
+                        placeholder="Not set"
+                    />
+                </FormItem>
+                <FormItem
+                    label="Compartments"
+                    description="Security compartments — propagated to member documents (union across collections)"
+                >
+                    <div className="flex gap-2">
+                        <Input
+                            value={compartmentInput}
+                            onChange={setCompartmentInput}
+                            placeholder="Add a compartment"
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    const val = compartmentInput.trim();
+                                    if (val && !metadata.compartments.includes(val)) {
+                                        setField('compartments', [...metadata.compartments, val]);
+                                        setCompartmentInput('');
+                                    }
+                                }
+                            }}
+                        />
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() => {
+                                const val = compartmentInput.trim();
+                                if (val && !metadata.compartments.includes(val)) {
+                                    setField('compartments', [...metadata.compartments, val]);
+                                    setCompartmentInput('');
+                                }
+                            }}
+                        >
+                            Add
+                        </Button>
+                    </div>
+                    <div className="flex gap-1 flex-wrap mt-2">
+                        {metadata.compartments.map((c) => (
+                            <Badge
+                                key={c}
+                                variant="secondary"
+                                className="cursor-pointer"
+                                onClick={() =>
+                                    setField(
+                                        'compartments',
+                                        metadata.compartments.filter((x) => x !== c),
+                                    )
+                                }
+                            >
+                                {c} ×
+                            </Badge>
+                        ))}
+                    </div>
+                </FormItem>
             </Panel>
 
             {typeId && <PropertiesEditor typeId={typeId} collection={collection} />}
-            {
-                !collection.dynamic && (
-                    <>
-                        <SyncMemberHeadsToggle collection={collection} />
-                        <SharedPropsEditor collection={collection} />
-                    </>
-                )
-            }
-
-        </div >
+            {!collection.dynamic && (
+                <>
+                    <SyncMemberHeadsToggle collection={collection} />
+                    <SharedPropsEditor collection={collection} />
+                </>
+            )}
+        </div>
     );
 }
 
@@ -250,17 +367,19 @@ function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
 
     const { data: type, error } = useFetch(() => client.store.types.catalog.resolve(typeId), [typeId]);
     const schema = type?.object_schema || {};
-    const object = useMemo(() => new ManagedObject(schema, collection.properties || {}), [schema, collection.properties]);
+    const object = useMemo(
+        () => new ManagedObject(schema, (collection.properties as JSONSchemaObject | undefined) || {}),
+        [schema, collection.properties],
+    );
 
     if (error) {
-        return <ErrorBox title={t('store.failedToLoadType')}>{error.message}</ErrorBox>;
+        return <ErrorBox title={t('store.failedToLoadType')}>{errorMessage(error)}</ErrorBox>;
     }
 
     if (!type) {
         return null;
     }
 
-
     const _onSave = (data: JSONSchemaObject) => {
         if (!data || !Object.keys(data).length) {
             return;
@@ -273,15 +392,15 @@ function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
                 toast({
                     title: t('store.collectionPropertiesUpdated'),
                     description: t('store.collectionUpdatedSuccess'),
-                    status: "success",
+                    status: 'success',
                     duration: 3000,
                 });
             })
             .catch((err) => {
                 toast({
                     title: t('store.failedToUpdateCollectionProperties'),
-                    description: err.message,
-                    status: "error",
+                    description: errorMessage(err),
+                    status: 'error',
                     duration: 5000,
                 });
             })
@@ -294,13 +413,16 @@ function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
         if (data instanceof ManagedObject) {
             setFormData(data.value);
         }
-    }
+    };
 
     return (
-        <Panel title={t('store.properties')} action={
-            <Button size="lg" isLoading={isUpdating} type="submit" onClick={() => _onSave(formData)}>
-                {t('modal.save')}
-            </Button>}
+        <Panel
+            title={t('store.properties')}
+            action={
+                <Button size="lg" isLoading={isUpdating} type="submit" onClick={() => _onSave(formData)}>
+                    {t('modal.save')}
+                </Button>
+            }
         >
             <GeneratedForm object={object} onChange={onDataChanged} />
         </Panel>