@aglyn/plugins-logic 1.0.0-beta.143

package/src/lib/components/host-variables-card.component.js

@@ -0,0 +1,630 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkQuota, formatVariableValue, HOST_VARIABLE_TYPE_LABELS, pluginDocsHelp, VARIABLE_NAME_PATTERN } from "@aglyn/aglyn";
+/*
+ * The MODULE, not the barrel, for the two PURE helpers. Every spec that renders
+ * this card mocks `@aglyn/tenant-feature-instance` wholesale to stage its
+ * Firestore hooks, and a query builder imported through that barrel disappears
+ * under the mock — which fails as "not a function" in the component rather than
+ * as anything about the test's subject. Neither of these is a hook.
+ */ import { ceilingedWindow, collectionCeiling } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Timestamp } from "@aglyn/shared-util-timestamp";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
+import { collection, doc, getCountFromServer, setDoc, updateDoc } from "firebase/firestore";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useFirestore, useFirestoreCollection, useHostResourceApi, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import WhereUsedDialog from "./where-used-dialog.component.js";
+import { fetchWhereUsed, summarizeDependents } from "@aglyn/aglyn/app-utils/where-used";
+/**
+ * How many variables the card reads.
+ *
+ * A CEILING, not a page size — see the query, which explains why this list
+ * cannot be paged by the server without making the duplicate-name check lie.
+ */ const VARIABLE_CEILING = 100;
+/**
+ * How many workflows the computed-variable picker offers.
+ *
+ * Paid for only while the editor is open, which is what makes a ceiling this
+ * size affordable: it is one reader mid-edit rather than every visitor to the
+ * page.
+ */ const WORKFLOW_OPTION_CEILING = 100;
+/** Per-type value editor: mirrors the mockup's type list. */ function VariableValueField(props) {
+    const { draft, onChange } = props;
+    switch(draft.type){
+        case 'boolean':
+            return /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Switch, {
+                        checked: draft.value === 'true',
+                        onChange: (event)=>onChange(event.target.checked ? 'true' : 'false')
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        children: draft.value === 'true' ? 'True' : 'False'
+                    })
+                ]
+            });
+        case 'date':
+        case 'time':
+            return /*#__PURE__*/ _jsx(TextField, {
+                label: "Value",
+                type: draft.type,
+                value: draft.value,
+                onChange: (event)=>onChange(event.target.value),
+                size: "small",
+                slotProps: {
+                    inputLabel: {
+                        shrink: true
+                    }
+                }
+            });
+        case 'number':
+            return /*#__PURE__*/ _jsx(TextField, {
+                label: "Value",
+                value: draft.value,
+                onChange: (event)=>onChange(event.target.value.replace(/[^0-9.eE+-]/g, '')),
+                size: "small"
+            });
+        case 'dictionary':
+        case 'collection':
+            return /*#__PURE__*/ _jsx(TextField, {
+                label: "Value (JSON)",
+                placeholder: draft.type === 'dictionary' ? '{"key": "value"}' : '["a", "b"]',
+                value: draft.value,
+                onChange: (event)=>onChange(event.target.value),
+                size: "small",
+                multiline: true,
+                minRows: 3
+            });
+        default:
+            return /*#__PURE__*/ _jsx(TextField, {
+                label: "Value",
+                value: draft.value,
+                onChange: (event)=>onChange(event.target.value),
+                size: "small",
+                multiline: true
+            });
+    }
+}
+/**
+ * Host variables (Component Builder, AGL-91): the mockup's Edit Variable
+ * dialog — name + typed value — persisted to `hosts/{hostId}/variables`.
+ * Any string prop can reference a variable with `{{name}}`; the org
+ * compose pipeline resolves it at render. Soft delete keeps old tokens
+ * rendering literally rather than breaking published pages.
+ */ export function HostVariablesCard(props) {
+    var _ref, _ref1, _ref2;
+    var _workflowOptions_find;
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const createHostResource = useHostResourceApi();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const { org } = props;
+    // Where-used dependents dialog (AGL-187).
+    const [usage, setUsage] = useState(null);
+    const [usageLoading, setUsageLoading] = useState(null);
+    const { data: variableDocs, status: variablesStatus, /**
+     * The rows this editor is seeded from are unconfirmed by the server
+     * (AGL-1358). Editing copies a whole stored variable into `draft` and
+     * writes all of it back, so `merge: true` protects nothing — every field
+     * is in the payload. `value` is the literal every `{{name}}` binding on
+     * every published page resolves to, and `workflowId` is what rebinds a
+     * computed variable to its source (AGL-261), so a cached seed can point
+     * a live binding back at a value or a workflow the author replaced.
+     */ fromCache: variablesFromCache } = useFirestoreCollection(/*
+     * ORDERED AND CEILINGED, deliberately not paged by the query (AGL-2501).
+     *
+     * `limit(100)` alone is answered in DOCUMENT-ID order, so the window is a
+     * pseudo-random hundred that the `localeCompare` below arranges into a
+     * convincing A-to-Z list. `variablesPerHost` runs to 5,000, so a Scale
+     * site with three hundred variables sees a hundred of them and nothing
+     * said so.
+     *
+     * `collectionCeiling` does not change WHICH hundred — document-id order is
+     * what the bare cap already returned. What it changes is that the order is
+     * NAMED, so the obvious next edit is caught: ordering on `name` would not
+     * mis-sort this list, it would HIDE from it every variable written without
+     * one, and `/api/hosts/resources` validates no field for presence while
+     * `IMPORTABLE_FIELDS.variables` copies a name only if the exported
+     * document carried it. The document name cannot be absent.
+     *
+     * The QUERY is not paged because `nameTaken` below tests the draft against
+     * these rows. Case-insensitive uniqueness is what keeps legacy `{{name}}`
+     * token resolution unambiguous (AGL-185), and on a ten-row server page
+     * that check would compare a new variable against a tenth of the site and
+     * cheerfully create the duplicate it exists to prevent.
+     *
+     * The check is still only as complete as the ceiling, and that is now
+     * SAID rather than assumed: the notice under the list appears exactly when
+     * the probe finds a variable this card did not read.
+     */ ()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'variables'), VARIABLE_CEILING), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const { rows: readVariables, truncated: variablesTruncated } = ceilingedWindow(variableDocs, VARIABLE_CEILING);
+    const [draft, setDraft] = useState(null);
+    /**
+   * The editor has been opened at least once in this session.
+   *
+   * A LATCH rather than `draft` itself, because the workflow picker below keys its
+   * listeners on it. Tracking the dialog would tear that subscription down
+   * on Cancel and pay for them again on the next Edit, so a merchant working
+   * through ten variables would buy the same window ten times — worse than
+   * the mount-time read this replaces. Latched, a reader who never edits pays
+   * nothing and a reader who edits pays once.
+   */ const [editorOpened, setEditorOpened] = useState(false);
+    if (draft && !editorOpened) setEditorOpened(true);
+    /*
+   * Workflow picker options (AGL-261): computed variables reference the
+   * workflow by doc id instead of a typed name.
+   *
+   * READ WHEN THE EDITOR OPENS, not when the card mounts (AGL-2501). Nothing
+   * outside the dialog below touches these rows — the table shows a computed
+   * variable's stored `workflowName`, never a name looked up here — so an
+   * unconditional listener would charge every visitor to this page for a
+   * hundred workflows to fill a select most of them never see.
+   *
+   * Ceilinged and ordered for the same reason as the variables above: a bare
+   * `limit` is answered in document-id order, so the `localeCompare` below
+   * would arrange a pseudo-random hundred into a convincing alphabet and a
+   * workflow past it could not be picked, with nothing saying why.
+   */ const { data: workflowDocs } = useFirestoreCollection(()=>editorOpened ? collectionCeiling(collection(firestore, 'hosts', hostId, 'workflows'), WORKFLOW_OPTION_CEILING) : null, [
+        firestore,
+        hostId,
+        editorOpened
+    ], {
+        idField: '$id'
+    });
+    const { rows: readWorkflows, truncated: workflowOptionsTruncated } = ceilingedWindow(workflowDocs, WORKFLOW_OPTION_CEILING);
+    // Sorting the whole ceiling, not a page of it.
+    const workflowOptions = readWorkflows.filter((workflow)=>!workflow.deletedAt && workflow.name).map((workflow)=>({
+            id: workflow.$id,
+            name: workflow.name
+        })).sort((a, b)=>a.name.localeCompare(b.name));
+    /*
+   * Sorting is safe HERE in a way it is not on a paged list: these rows are
+   * the whole collection below the ceiling, not a slice of one, so the order
+   * on screen is the order of everything the card holds.
+   */ const variables = useMemo(()=>readVariables.filter((variable)=>!variable.deletedAt).sort((a, b)=>{
+            var _a_name, _b_name;
+            return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+        }), [
+        readVariables
+    ]);
+    // The page is a SLICE, because the rows are already in hand and `nameTaken`
+    // needs all of them. What the card lacked was not a cheaper read but a
+    // control: a hundred variables rendered as one wall.
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
+    const visibleVariables = useMemo(()=>variables.slice(page * pageSize, page * pageSize + pageSize), [
+        variables,
+        page,
+        pageSize
+    ]);
+    /**
+   * The variable HEAD-COUNT is a server aggregate, not the length of the
+   * capped listener (AGL-1716, the AGL-1706 shape).
+   *
+   * The listener is `limit(100)` and `variables.length` was handed to
+   * `checkQuota(org, 'variablesPerHost', …)`. The bands are 3 / 25 / 100 /
+   * 1,000 / 5,000, so the window ties Pro's 100 and hides Business's 1,000
+   * and Scale's 5,000 entirely: on those plans the gate compared 100 against
+   * thousands and could never refuse, while `api/hosts/resources` counted
+   * the collection and did. The card offered headroom that did not exist and
+   * then failed the create.
+   *
+   * UNFILTERED, matching the enforcing route: it runs a plain
+   * `collection('variables').count()` for this quota — its `softDeletes`
+   * branch governs only the flat per-host webhook cap — so a soft-deleted
+   * variable has always counted toward `variablesPerHost` server-side while
+   * this card excluded it. The card now asks the route's question in the
+   * route's terms, which is the only thing that makes a console gate a
+   * useful prediction of the route's verdict.
+   *
+   * THE LIST KEEPS ITS CAP. Only a create moves the number (deletes here are
+   * soft, and the route counts them), so that is where it is re-read.
+   */ const [variableCountEpoch, setVariableCountEpoch] = useState(0);
+    const [serverVariableCount, setServerVariableCount] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        void getCountFromServer(collection(firestore, 'hosts', hostId, 'variables')).then((snapshot)=>{
+            if (active) setServerVariableCount(snapshot.data().count);
+        }).catch(()=>{
+        // Falls back to the loaded rows below — a LOWER bound, and this
+        // card's prior behaviour. Deliberately not 0: `checkQuota` answers
+        // from whatever it is handed, and 0 used is a confident wrong
+        // number in the flattering direction.
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        firestore,
+        hostId,
+        variableCountEpoch
+    ]);
+    const variableCount = serverVariableCount != null ? serverVariableCount : variables.length;
+    const validName = VARIABLE_NAME_PATTERN.test((_ref = draft == null ? void 0 : draft.name) != null ? _ref : '');
+    // Case-insensitive (AGL-185): names must stay unambiguous for legacy
+    // {{name}} token resolution and picker display.
+    const nameTaken = Boolean(draft && variables.some((variable)=>{
+        var _variable_name;
+        return String((_variable_name = variable.name) != null ? _variable_name : '').toLowerCase() === draft.name.trim().toLowerCase() && variable.$id !== draft.id;
+    }));
+    const handleSave = useCallback(async ()=>{
+        if (!draft || !validName || nameTaken) return;
+        const fields = {
+            name: draft.name,
+            type: draft.type,
+            value: draft.value,
+            workflowId: draft.workflowId.trim(),
+            workflowName: draft.workflowName.trim()
+        };
+        try {
+            if (draft.id) {
+                /**
+         * Edit stays client-direct (no quota consumed) — and is refused when
+         * its seed was never confirmed by the server (AGL-1358). `merge:
+         * true` protects nothing here: `fields` is every editable key of the
+         * stored row, copied off the listener whether or not it was touched.
+         *
+         * The guard WRAPS the write. An early return is a shape you can keep
+         * while losing the protection; here the write is only reachable
+         * through the verdict.
+         */ const verdict = await writeGuardedBySeed({
+                    subject: 'variable',
+                    unreadable: variablesStatus === 'error',
+                    fromCache: variablesFromCache
+                }, async ()=>{
+                    await setDoc(doc(firestore, 'hosts', hostId, 'variables', draft.id), _extends({}, fields, {
+                        updatedAt: Timestamp.now()
+                    }), {
+                        merge: true
+                    });
+                });
+                // Before `setDraft(null)`, so a refusal keeps the dialog open with
+                // what was typed. A save that silently does nothing sends the user
+                // back to retype a form that will be refused again just as quietly.
+                if (!verdict.ok) {
+                    return void enqueueSnackbar(verdict.message, {
+                        variant: 'warning',
+                        persist: false
+                    });
+                }
+            } else {
+                // New variable rides the quota-enforcing resources API (AGL-473).
+                await createHostResource({
+                    hostId,
+                    resource: 'variable',
+                    data: fields
+                });
+                // A create moves the count and the aggregate is a one-shot — the
+                // listener refreshes the ROWS for free, the count has to be asked
+                // again or the cap drifts stale for the rest of the session.
+                setVariableCountEpoch((epoch)=>epoch + 1);
+            }
+            setDraft(null);
+            enqueueSnackbar(`Saved — use {{${draft.name}}} in any text to bind it`, {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            var _ref;
+            console.error(error);
+            enqueueSnackbar((_ref = error == null ? void 0 : error.message) != null ? _ref : 'An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        }
+    }, [
+        draft,
+        validName,
+        nameTaken,
+        firestore,
+        hostId,
+        createHostResource,
+        enqueueSnackbar,
+        variablesStatus,
+        variablesFromCache
+    ]);
+    const handleShowUsage = useCallback((variable)=>async ()=>{
+            setUsageLoading(variable.$id);
+            const result = await fetchWhereUsed(user, {
+                hostId,
+                kind: 'variable',
+                id: variable.$id,
+                name: variable.name
+            });
+            setUsageLoading(null);
+            setUsage({
+                name: variable.name,
+                result
+            });
+        }, [
+        user,
+        hostId
+    ]);
+    const handleDelete = useCallback((variable)=>async ()=>{
+            // Real dependents warning (AGL-187) instead of the generic copy.
+            const scan = await fetchWhereUsed(user, {
+                hostId,
+                kind: 'variable',
+                id: variable.$id,
+                name: variable.name
+            });
+            const confirmed = await confirm({
+                title: 'Delete this variable?',
+                description: scan.total ? `"${variable.name}" is used in ${summarizeDependents(scan)}. ` + 'Those bindings will render as empty or literal tokens after ' + 'the next publish.' : `"${variable.name}" is not referenced by any published ` + 'screen, layout, or workflow.',
+                confirmationText: 'Delete',
+                confirmationButtonProps: {
+                    color: 'error'
+                }
+            }).then(()=>true).catch(()=>false);
+            if (!confirmed) return;
+            await updateDoc(doc(firestore, 'hosts', hostId, 'variables', variable.$id), {
+                deletedAt: Timestamp.now()
+            });
+            enqueueSnackbar('Variable deleted', {
+                variant: 'success',
+                persist: false
+            });
+        }, [
+        user,
+        confirm,
+        firestore,
+        hostId,
+        enqueueSnackbar
+    ]);
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: 'Variables',
+        help: pluginDocsHelp('bindings', {
+            anchor: '#typed-variables'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    variables.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Define typed values once and bind them anywhere with ' + '{{name}} — change the variable, every page updates on the ' + 'next publish.'
+                    }) : visibleVariables.map((variable)=>{
+                        var _HOST_VARIABLE_TYPE_LABELS_variable_type;
+                        return /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    sx: {
+                                        flex: 1,
+                                        minWidth: 0
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            noWrap: true,
+                                            children: `{{${variable.name}}}`
+                                        }),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            noWrap: true,
+                                            children: `${(_HOST_VARIABLE_TYPE_LABELS_variable_type = HOST_VARIABLE_TYPE_LABELS[variable.type]) != null ? _HOST_VARIABLE_TYPE_LABELS_variable_type : variable.type} · ${formatVariableValue(variable) || '—'}`
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    disabled: usageLoading === variable.$id,
+                                    onClick: handleShowUsage(variable),
+                                    children: usageLoading === variable.$id ? 'Scanning…' : 'Usage'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    onClick: ()=>{
+                                        var _variable_name, _variable_type, _variable_value, _variable_workflowId, _variable_workflowName;
+                                        return setDraft({
+                                            id: variable.$id,
+                                            name: (_variable_name = variable.name) != null ? _variable_name : '',
+                                            type: (_variable_type = variable.type) != null ? _variable_type : 'text',
+                                            value: (_variable_value = variable.value) != null ? _variable_value : '',
+                                            workflowId: (_variable_workflowId = variable.workflowId) != null ? _variable_workflowId : '',
+                                            workflowName: (_variable_workflowName = variable.workflowName) != null ? _variable_workflowName : ''
+                                        });
+                                    },
+                                    children: 'Edit'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    color: "error",
+                                    onClick: handleDelete(variable),
+                                    children: 'Delete'
+                                })
+                            ]
+                        }, variable.$id);
+                    }),
+                    variables.length === 0 ? null : /*#__PURE__*/ _jsx(ListPagination, {
+                        page: page,
+                        pageSize: pageSize,
+                        rowCount: visibleVariables.length,
+                        // The variables the card HOLDS. Not `variableCount`, which is the
+                        // site's total including soft-deleted rows and answers the quota's
+                        // question rather than the reader's.
+                        count: variables.length,
+                        onPageChange: setPage,
+                        onPageSizeChange: setPageSize
+                    }),
+                    variablesTruncated ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        children: `Showing ${VARIABLE_CEILING} variables, ordered by id. This site ` + 'has more — the duplicate-name check below only covers the ' + 'ones listed here, so a name may already be taken by one that ' + 'is not.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        color: "primary",
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        onClick: ()=>{
+                            // Plan cap (AGL-99): dark-launch — plan-less workspaces uncapped.
+                            // The site's variables, not this page of them (AGL-1716).
+                            const quota = checkQuota(org, 'variablesPerHost', variableCount);
+                            if (!quota.allowed) {
+                                return void enqueueSnackbar(`Variable limit reached (${quota.limit}) — upgrade in Billing`, {
+                                    variant: 'warning',
+                                    persist: false
+                                });
+                            }
+                            setDraft({
+                                id: null,
+                                name: '',
+                                type: 'text',
+                                value: '',
+                                workflowId: '',
+                                workflowName: ''
+                            });
+                        },
+                        children: 'Add variable'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: Boolean(draft),
+                onClose: ()=>setDraft(null),
+                maxWidth: "xs",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (draft == null ? void 0 : draft.id) ? 'Edit Variable' : 'Add Variable'
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogContent, {
+                        sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 2,
+                            pt: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Name",
+                                helperText: nameTaken ? 'A variable with this name already exists' : 'Used to identify the variable',
+                                error: Boolean(draft == null ? void 0 : draft.name) && !validName || nameTaken,
+                                value: (_ref1 = draft == null ? void 0 : draft.name) != null ? _ref1 : '',
+                                onChange: (event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                                            name: event.target.value.replace(/[^a-zA-Z0-9_]/g, '')
+                                        }) : prev),
+                                size: "small",
+                                autoFocus: true,
+                                sx: {
+                                    mt: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Type",
+                                value: (_ref2 = draft == null ? void 0 : draft.type) != null ? _ref2 : 'text',
+                                onChange: (event)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                                            type: event.target.value,
+                                            value: ''
+                                        }) : prev),
+                                size: "small",
+                                select: true,
+                                children: Object.entries(HOST_VARIABLE_TYPE_LABELS).map(([value, label])=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: value,
+                                        children: label
+                                    }, value))
+                            }),
+                            draft ? /*#__PURE__*/ _jsx(VariableValueField, {
+                                draft: draft,
+                                onChange: (value)=>setDraft((prev)=>prev ? _extends({}, prev, {
+                                            value
+                                        }) : prev)
+                            }) : null,
+                            /*#__PURE__*/ _jsxs(TextField, {
+                                select: true,
+                                label: "Computed from workflow (optional)",
+                                helperText: workflowOptionsTruncated ? `Showing ${WORKFLOW_OPTION_CEILING} workflows, ordered by ` + 'id. This site has more, so one of them is not offered here.' : 'Pick a workflow — its result becomes this ' + 'variable\u2019s value at render; the value above is the ' + 'fallback (AGL-129)',
+                                value: (draft == null ? void 0 : draft.workflowId) || ((_workflowOptions_find = workflowOptions.find((option)=>option.name === (draft == null ? void 0 : draft.workflowName))) == null ? void 0 : _workflowOptions_find.id) || '',
+                                onChange: (event)=>setDraft((prev)=>{
+                                        var _ref;
+                                        var _workflowOptions_find;
+                                        return prev ? _extends({}, prev, {
+                                            workflowId: event.target.value,
+                                            workflowName: (_ref = (_workflowOptions_find = workflowOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _workflowOptions_find.name) != null ? _ref : ''
+                                        }) : prev;
+                                    }),
+                                size: "small",
+                                children: [
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "",
+                                        children: 'None'
+                                    }),
+                                    workflowOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: option.id,
+                                            children: option.name
+                                        }, option.id))
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setDraft(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                color: "primary",
+                                disabled: !validName || nameTaken,
+                                onClick: handleSave,
+                                children: 'Save variable'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(WhereUsedDialog, {
+                hostId: hostId,
+                usage: usage,
+                onClose: ()=>setUsage(null)
+            })
+        ]
+    });
+}
+HostVariablesCard.displayName = 'HostVariablesCard';
+export default HostVariablesCard;
+
+//# sourceMappingURL=host-variables-card.component.js.map