npm - @perses-dev/plugin-system - Versions diffs - 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7 - Mend

@perses-dev/plugin-system 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (193) hide show

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,~~OAAc~~,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;~~AAa7E~~,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;~~AA2TtF~~,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}
1	+ {"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAmUtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js CHANGED Viewed

@@ -11,16 +11,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, ClickAwayListener, Divider } from '@mui/material';
+import { useState } from 'react';
+import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';
 import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { getSubmitText, getTitleAction } from '../../../utils';
-import { VARIABLE_TYPES } from '../variable-model';
 import { PluginEditor } from '../../PluginEditor';
 import { useValidationSchemas } from '../../../context';
+import { VARIABLE_TYPES } from '../variable-model';
+import { useTimeRange } from '../../../runtime';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
+import { SORT_METHODS } from './variable-editor-form-model';
 function FallbackPreview() {
     return /*#__PURE__*/ _jsx("div", {
         children: "Error previewing values"
@@ -95,10 +97,7 @@ function ListVariableEditorForm({ action, control }) {
     /** We use `previewSpec` to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
-   */ const [previewSpec, setPreviewSpec] = useState(form.getValues());
-    const refreshPreview = ()=>{
-        setPreviewSpec(form.getValues());
-    };
+   */ const previewSpec = form.getValues();
     const plugin = useWatch({
         control,
         name: 'spec.plugin'
@@ -109,6 +108,10 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.allowAllValue'
     });
+    const sortMethod = useWatch({
+        control: control,
+        name: 'spec.sort'
+    });
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
     const values = form.getValues();
@@ -118,6 +121,16 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    if (!values.spec.plugin) {
+        form.setValue('spec.plugin', {
+            kind: 'StaticListVariable',
+            spec: {}
+        });
+    }
+    if (!values.spec.sort) {
+        form.setValue('spec.sort', 'none');
+    }
+    const { refresh } = useTimeRange();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Typography, {
@@ -129,59 +142,51 @@ function ListVariableEditorForm({ action, control }) {
                 spacing: 2,
                 mb: 2,
                 children: [
-                    kind ? /*#__PURE__*/ _jsx(Box, {
+                    /*#__PURE__*/ _jsx(Box, {
                         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ _jsx(VariableListPreview, {
-                                definition: previewSpec,
-                                onRefresh: refreshPreview
+                                sortMethod: sortMethod,
+                                definition: previewSpec
                             })
                         })
-                    }) : /*#__PURE__*/ _jsx(VariablePreview, {
-                        isLoading: true
                     }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        children: [
-                            /*#__PURE__*/ _jsx(ClickAwayListener, {
-                                onClickAway: ()=>refreshPreview(),
-                                children: /*#__PURE__*/ _jsx(Box, {})
-                            }),
-                            /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                FallbackComponent: ErrorAlert,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: control,
-                                    name: "spec.plugin",
-                                    render: ({ field })=>{
-                                        return /*#__PURE__*/ _jsx(PluginEditor, {
-                                            width: "100%",
-                                            pluginTypes: [
-                                                'Variable'
-                                            ],
-                                            pluginKindLabel: "Source",
-                                            value: {
-                                                selection: {
-                                                    type: 'Variable',
-                                                    kind: kind ?? 'StaticListVariable'
-                                                },
-                                                spec: pluginSpec ?? {
-                                                    values: []
-                                                }
+                    /*#__PURE__*/ _jsx(Stack, {
+                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(Controller, {
+                                control: control,
+                                name: "spec.plugin",
+                                render: ({ field })=>{
+                                    return /*#__PURE__*/ _jsx(PluginEditor, {
+                                        postExecuteRunQuery: refresh,
+                                        withRunQueryButton: true,
+                                        width: "100%",
+                                        pluginTypes: [
+                                            'Variable'
+                                        ],
+                                        pluginKindLabel: "Source",
+                                        value: {
+                                            selection: {
+                                                type: 'Variable',
+                                                kind: kind ?? 'StaticListVariable'
                                             },
-                                            isReadonly: action === 'read',
-                                            onChange: (v)=>{
-                                                field.onChange({
-                                                    kind: v.selection.kind,
-                                                    spec: v.spec
-                                                });
-                                            }
-                                        });
-                                    }
-                                })
+                                            spec: pluginSpec ?? {}
+                                        },
+                                        isReadonly: action === 'read',
+                                        onChange: (v)=>{
+                                            field.onChange({
+                                                kind: v.selection.kind,
+                                                spec: v.spec
+                                            });
+                                        }
+                                    });
+                                }
                             })
-                        ]
+                        })
                     }),
                     /*#__PURE__*/ _jsx(Stack, {
                         children: /*#__PURE__*/ _jsx(Controller, {
@@ -213,7 +218,7 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ _jsx(Controller, {
                             control: control,
                             name: "spec.sort",
-                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsxs(TextField, {
+                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                     select: true,
                                     ...field,
                                     fullWidth: true,
@@ -230,36 +235,14 @@ function ListVariableEditorForm({ action, control }) {
                                     onChange: (event)=>{
                                         field.onChange(event);
                                     },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "none",
-                                            children: "None"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-asc",
-                                            children: "Alphabetical, asc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-desc",
-                                            children: "Alphabetical, desc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "numerical-asc",
-                                            children: "Numerical, asc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "numerical-desc",
-                                            children: "Numerical, desc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-ci-asc",
-                                            children: "Alphabetical, case-insensitive, asc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-ci-desc",
-                                            children: "Alphabetical, case-insensitive, desc"
-                                        })
-                                    ]
+                                    children: Object.keys(SORT_METHODS).map((key)=>{
+                                        if (!SORT_METHODS[key]) return null;
+                                        const { label } = SORT_METHODS[key];
+                                        return /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: key,
+                                            children: label
+                                        }, key);
+                                    })
                                 })
                         })
                     })

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport {\n Box,\n Typography,\n Switch,\n TextField,\n Grid,\n FormControlLabel,\n MenuItem,\n Stack,\n ClickAwayListener,\n Divider,\n} from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\n\nfunction FallbackPreview(): ReactElement {\n return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n action: Action;\n control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n return (\n <>\n <Typography py={1} variant=\"subtitle1\">\n Text Options\n </Typography>\n <Stack spacing={2}>\n <Controller\n control={control}\n name=\"spec.value\"\n render={({ field, fieldState }) => (\n <>\n <Box>\n <VariablePreview values={[field.value]} />\n </Box>\n <TextField\n {...field}\n label=\"Value\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n </>\n )}\n />\n <Controller\n control={control}\n name=\"spec.constant\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Constant\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n value={field.value ?? false}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n </Stack>\n </>\n );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n const form = useFormContext<VariableDefinition>();\n /** We use `previewSpec` to know when to explicitly update the\n * spec that will be used for preview. The reason why we do this is to avoid\n * having to re-fetch the values when the user is still editing the spec.\n /\n const [previewSpec, setPreviewSpec] = useState<ListVariableDefinition>(form.getValues() as ListVariableDefinition);\n const refreshPreview = (): void => {\n setPreviewSpec(form.getValues() as ListVariableDefinition);\n };\n\n const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n const kind = plugin?.kind;\n const pluginSpec = plugin?.spec;\n\n const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n control: control,\n name: 'spec.allowAllValue',\n });\n\n // When variable kind is selected we need to provide default values\n // TODO: check if react-hook-form has a better way to do this\n const values = form.getValues() as ListVariableDefinition;\n if (values.spec.allowAllValue === undefined) {\n form.setValue('spec.allowAllValue', false);\n }\n\n if (values.spec.allowMultiple === undefined) {\n form.setValue('spec.allowMultiple', false);\n }\n\n return (\n <>\n <Typography py={1} variant=\"subtitle1\">\n List Options\n </Typography>\n <Stack spacing={2} mb={2}>\n {kind ? (\n <Box>\n <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n </ErrorBoundary>\n </Box>\n ) : (\n <VariablePreview isLoading={true} />\n )}\n\n <Stack>\n {/* Hack?: Cool technique to refresh the preview to simulate onBlur event /}\n <ClickAwayListener onClickAway={() => refreshPreview()}>\n <Box />\n </ClickAwayListener>\n {/* **/}\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <Controller\n control={control}\n name=\"spec.plugin\"\n render={({ field }) => {\n return (\n <PluginEditor\n width=\"100%\"\n pluginTypes={['Variable']}\n pluginKindLabel=\"Source\"\n value={{\n selection: {\n type: 'Variable',\n kind: kind ?? 'StaticListVariable',\n },\n spec: pluginSpec ?? { values: [] },\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n field.onChange({ kind: v.selection.kind, spec: v.spec });\n }}\n />\n );\n }}\n />\n </ErrorBoundary>\n </Stack>\n\n <Stack>\n <Controller\n control={control}\n name=\"spec.capturingRegexp\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n label=\"Capturing Regexp Filter\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n value={field.value ?? ''}\n onChange={(event) => {\n if (event.target.value === '') {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n }}\n helperText={\n fieldState.error?.message\n ? fieldState.error.message\n : 'Optional, if you want to filter on captured result.'\n }\n />\n )}\n />\n </Stack>\n\n <Stack>\n <Controller\n control={control}\n name=\"spec.sort\"\n render={({ field, fieldState }) => (\n <TextField\n select\n {...field}\n fullWidth\n label=\"Sort\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? 'none'}\n onChange={(event) => {\n field.onChange(event);\n }}\n >\n <MenuItem value=\"none\">None</MenuItem>\n <MenuItem value=\"alphabetical-asc\">Alphabetical, asc</MenuItem>\n <MenuItem value=\"alphabetical-desc\">Alphabetical, desc</MenuItem>\n <MenuItem value=\"numerical-asc\">Numerical, asc</MenuItem>\n <MenuItem value=\"numerical-desc\">Numerical, desc</MenuItem>\n <MenuItem value=\"alphabetical-ci-asc\">Alphabetical, case-insensitive, asc</MenuItem>\n <MenuItem value=\"alphabetical-ci-desc\">Alphabetical, case-insensitive, desc</MenuItem>\n </TextField>\n )}\n />\n </Stack>\n </Stack>\n\n <Divider />\n\n <Typography py={1} variant=\"subtitle1\">\n Dropdown Options\n </Typography>\n <Stack spacing=\"2\">\n <Stack>\n <Controller\n control={control}\n name=\"spec.allowMultiple\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Allow Multiple Values\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n value={field.value ?? false}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n </Stack>\n <Stack>\n <Controller\n control={control}\n name=\"spec.allowAllValue\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Allow All option\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n value={field.value ?? false}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography mb={1} variant=\"caption\">\n Enables an option to include all variable values\n </Typography>\n {_allowAllValue && (\n <Controller\n control={control}\n name=\"spec.customAllValue\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Custom All Value\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={\n fieldState.error?.message\n ? fieldState.error.message\n : 'When All is selected, this value will be used'\n }\n value={field.value ?? ''}\n onChange={(event) => {\n if (event.target.value === '') {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n }}\n />\n )}\n />\n )}\n </Stack>\n </Stack>\n </>\n );\n}\n\ninterface VariableEditorFormProps {\n initialVariableDefinition: VariableDefinition;\n action: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onActionChange?: (action: Action) => void;\n onSave: (def: VariableDefinition) => void;\n onClose: () => void;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n initialVariableDefinition,\n action,\n isDraft,\n isReadonly,\n onActionChange,\n onSave,\n onClose,\n onDelete,\n}: VariableEditorFormProps): ReactElement {\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const { variableEditorSchema } = useValidationSchemas();\n const form = useForm<VariableDefinition>({\n resolver: zodResolver(variableEditorSchema),\n mode: 'onBlur',\n defaultValues: initialVariableDefinition,\n });\n\n const kind = useWatch({ control: form.control, name: 'kind' });\n\n function clearFormData(data: VariableDefinition): VariableDefinition {\n const result = { ...data };\n if (\n result.spec.display?.name === undefined &&\n result.spec.display?.description === undefined &&\n result.spec.display?.hidden === undefined\n ) {\n delete result.spec.display;\n }\n return result;\n }\n\n const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n // reset display attributes to undefined when empty, because we don't want to save empty strings\n onSave(clearFormData(data));\n };\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n return (\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Variable</Typography>\n <FormActions\n action={action}\n submitText={submitText}\n isReadonly={isReadonly}\n isValid={form.formState.isValid}\n onActionChange={onActionChange}\n onSubmit={form.handleSubmit(processForm)}\n onDelete={onDelete}\n onCancel={handleCancel}\n />\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n label=\"Name\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n disabled: action === 'update' && !isDraft,\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Display Label\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Description\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"kind\"\n render={({ field, fieldState }) => (\n <TextField\n select\n {...field}\n fullWidth\n label=\"Type\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? 'TextVariable'}\n onChange={(event) => {\n field.onChange(event);\n }}\n >\n {VARIABLE_TYPES.map((v) => (\n <MenuItem key={v.kind} value={v.kind}>\n {v.label}\n </MenuItem>\n ))}\n </TextField>\n )}\n />\n </Grid>\n </Grid>\n\n <Divider />\n\n {kind === 'TextVariable' && (\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <TextVariableEditorForm action={action} control={form.control} />\n </ErrorBoundary>\n )}\n {kind === 'ListVariable' && (\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <ListVariableEditorForm action={action} control={form.control} />\n </ErrorBoundary>\n )}\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => {\n setDiscardDialogOpened(false);\n }}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n );\n}\n"],"names":["React","useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","ClickAwayListener","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","getSubmitText","getTitleAction","VARIABLE_TYPES","PluginEditor","useValidationSchemas","VariableListPreview","VariablePreview","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","previewSpec","setPreviewSpec","getValues","refreshPreview","plugin","kind","pluginSpec","spec","_allowAllValue","allowAllValue","setValue","allowMultiple","mb","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","map","isOpen","onDiscardChanges"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';\nimport { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useFormContext, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { getSubmitText, getTitleAction } from '../../../utils';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { useTimeRange } from '../../../runtime';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { SORT_METHODS, SortMethodName } from './variable-editor-form-model';\n\nfunction FallbackPreview(): ReactElement {\n return <div>Error previewing values</div>;\n}\n\ninterface KindVariableEditorFormProps {\n action: Action;\n control: Control<VariableDefinition>;\n}\n\nfunction TextVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n return (\n <>\n <Typography py={1} variant=\"subtitle1\">\n Text Options\n </Typography>\n <Stack spacing={2}>\n <Controller\n control={control}\n name=\"spec.value\"\n render={({ field, fieldState }) => (\n <>\n <Box>\n <VariablePreview values={[field.value]} />\n </Box>\n <TextField\n {...field}\n label=\"Value\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n </>\n )}\n />\n <Controller\n control={control}\n name=\"spec.constant\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Constant\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n value={field.value ?? false}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n </Stack>\n </>\n );\n}\n\nfunction ListVariableEditorForm({ action, control }: KindVariableEditorFormProps): ReactElement {\n const form = useFormContext<VariableDefinition>();\n /** We use `previewSpec` to know when to explicitly update the\n * spec that will be used for preview. The reason why we do this is to avoid\n * having to re-fetch the values when the user is still editing the spec.\n */\n const previewSpec = form.getValues() as ListVariableDefinition;\n\n const plugin = useWatch<VariableDefinition, 'spec.plugin'>({ control, name: 'spec.plugin' });\n const kind = plugin?.kind;\n const pluginSpec = plugin?.spec;\n\n const _allowAllValue = useWatch<VariableDefinition, 'spec.allowAllValue'>({\n control: control,\n name: 'spec.allowAllValue',\n });\n\n const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({\n control: control,\n name: 'spec.sort',\n }) as SortMethodName;\n\n // When variable kind is selected we need to provide default values\n // TODO: check if react-hook-form has a better way to do this\n const values = form.getValues() as ListVariableDefinition;\n if (values.spec.allowAllValue === undefined) {\n form.setValue('spec.allowAllValue', false);\n }\n\n if (values.spec.allowMultiple === undefined) {\n form.setValue('spec.allowMultiple', false);\n }\n\n if (!values.spec.plugin) {\n form.setValue('spec.plugin', { kind: 'StaticListVariable', spec: {} });\n }\n\n if (!values.spec.sort) {\n form.setValue('spec.sort', 'none');\n }\n\n const { refresh } = useTimeRange();\n\n return (\n <>\n <Typography py={1} variant=\"subtitle1\">\n List Options\n </Typography>\n <Stack spacing={2} mb={2}>\n <Box>\n <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n <VariableListPreview sortMethod={sortMethod} definition={previewSpec} />\n </ErrorBoundary>\n </Box>\n <Stack>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <Controller\n control={control}\n name=\"spec.plugin\"\n render={({ field }) => {\n return (\n <PluginEditor\n postExecuteRunQuery={refresh}\n withRunQueryButton\n width=\"100%\"\n pluginTypes={['Variable']}\n pluginKindLabel=\"Source\"\n value={{\n selection: {\n type: 'Variable',\n kind: kind ?? 'StaticListVariable',\n },\n spec: pluginSpec ?? {},\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n field.onChange({ kind: v.selection.kind, spec: v.spec });\n }}\n />\n );\n }}\n />\n </ErrorBoundary>\n </Stack>\n\n <Stack>\n <Controller\n control={control}\n name=\"spec.capturingRegexp\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n label=\"Capturing Regexp Filter\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n value={field.value ?? ''}\n onChange={(event) => {\n if (event.target.value === '') {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n }}\n helperText={\n fieldState.error?.message\n ? fieldState.error.message\n : 'Optional, if you want to filter on captured result.'\n }\n />\n )}\n />\n </Stack>\n\n <Stack>\n <Controller\n control={control}\n name=\"spec.sort\"\n render={({ field, fieldState }) => (\n <TextField\n select\n {...field}\n fullWidth\n label=\"Sort\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? 'none'}\n onChange={(event) => {\n field.onChange(event);\n }}\n >\n {Object.keys(SORT_METHODS).map((key) => {\n if (!SORT_METHODS[key as SortMethodName]) return null;\n const { label } = SORT_METHODS[key as SortMethodName];\n return (\n <MenuItem key={key} value={key}>\n {label}\n </MenuItem>\n );\n })}\n </TextField>\n )}\n />\n </Stack>\n </Stack>\n\n <Divider />\n\n <Typography py={1} variant=\"subtitle1\">\n Dropdown Options\n </Typography>\n <Stack spacing=\"2\">\n <Stack>\n <Controller\n control={control}\n name=\"spec.allowMultiple\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Allow Multiple Values\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n value={field.value ?? false}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n </Stack>\n <Stack>\n <Controller\n control={control}\n name=\"spec.allowAllValue\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Allow All option\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n value={field.value ?? false}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography mb={1} variant=\"caption\">\n Enables an option to include all variable values\n </Typography>\n {_allowAllValue && (\n <Controller\n control={control}\n name=\"spec.customAllValue\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Custom All Value\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={\n fieldState.error?.message\n ? fieldState.error.message\n : 'When All is selected, this value will be used'\n }\n value={field.value ?? ''}\n onChange={(event) => {\n if (event.target.value === '') {\n field.onChange(undefined);\n } else {\n field.onChange(event);\n }\n }}\n />\n )}\n />\n )}\n </Stack>\n </Stack>\n </>\n );\n}\n\ninterface VariableEditorFormProps {\n initialVariableDefinition: VariableDefinition;\n action: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onActionChange?: (action: Action) => void;\n onSave: (def: VariableDefinition) => void;\n onClose: () => void;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function VariableEditorForm({\n initialVariableDefinition,\n action,\n isDraft,\n isReadonly,\n onActionChange,\n onSave,\n onClose,\n onDelete,\n}: VariableEditorFormProps): ReactElement {\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const { variableEditorSchema } = useValidationSchemas();\n const form = useForm<VariableDefinition>({\n resolver: zodResolver(variableEditorSchema),\n mode: 'onBlur',\n defaultValues: initialVariableDefinition,\n });\n\n const kind = useWatch({ control: form.control, name: 'kind' });\n\n function clearFormData(data: VariableDefinition): VariableDefinition {\n const result = { ...data };\n if (\n result.spec.display?.name === undefined &&\n result.spec.display?.description === undefined &&\n result.spec.display?.hidden === undefined\n ) {\n delete result.spec.display;\n }\n return result;\n }\n\n const processForm: SubmitHandler<VariableDefinition> = (data: VariableDefinition) => {\n // reset display attributes to undefined when empty, because we don't want to save empty strings\n onSave(clearFormData(data));\n };\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialVariableDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n return (\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Variable</Typography>\n <FormActions\n action={action}\n submitText={submitText}\n isReadonly={isReadonly}\n isValid={form.formState.isValid}\n onActionChange={onActionChange}\n onSubmit={form.handleSubmit(processForm)}\n onDelete={onDelete}\n onCancel={handleCancel}\n />\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n label=\"Name\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n disabled: action === 'update' && !isDraft,\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Display Label\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n label=\"Description\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"kind\"\n render={({ field, fieldState }) => (\n <TextField\n select\n {...field}\n fullWidth\n label=\"Type\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? 'TextVariable'}\n onChange={(event) => {\n field.onChange(event);\n }}\n >\n {VARIABLE_TYPES.map((v) => (\n <MenuItem key={v.kind} value={v.kind}>\n {v.label}\n </MenuItem>\n ))}\n </TextField>\n )}\n />\n </Grid>\n </Grid>\n\n <Divider />\n\n {kind === 'TextVariable' && (\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <TextVariableEditorForm action={action} control={form.control} />\n </ErrorBoundary>\n )}\n {kind === 'ListVariable' && (\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <ListVariableEditorForm action={action} control={form.control} />\n </ErrorBoundary>\n )}\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => {\n setDiscardDialogOpened(false);\n }}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n );\n}\n"],"names":["useState","Box","Typography","Switch","TextField","Grid","FormControlLabel","MenuItem","Stack","Divider","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","Controller","FormProvider","useForm","useFormContext","useWatch","zodResolver","getSubmitText","getTitleAction","PluginEditor","useValidationSchemas","VARIABLE_TYPES","useTimeRange","VariableListPreview","VariablePreview","SORT_METHODS","FallbackPreview","div","TextVariableEditorForm","action","control","py","variant","spacing","name","render","field","fieldState","values","value","label","InputLabelProps","shrink","undefined","InputProps","readOnly","error","helperText","message","onChange","event","checked","ListVariableEditorForm","form","previewSpec","getValues","plugin","kind","pluginSpec","spec","_allowAllValue","sortMethod","allowAllValue","setValue","allowMultiple","sort","refresh","mb","FallbackComponent","resetKeys","definition","postExecuteRunQuery","withRunQueryButton","width","pluginTypes","pluginKindLabel","selection","type","isReadonly","v","target","select","fullWidth","Object","keys","map","key","VariableEditorForm","initialVariableDefinition","isDraft","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","variableEditorSchema","resolver","mode","defaultValues","clearFormData","data","result","display","description","hidden","processForm","handleCancel","JSON","stringify","sx","alignItems","padding","theme","borderBottom","palette","divider","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","item","xs","required","disabled","isOpen","onDiscardChanges"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts CHANGED Viewed

@@ -1,15 +1,15 @@
 import { ReactElement } from 'react';
 import { ListVariableDefinition } from '@perses-dev/core';
+import { SORT_METHODS } from './variable-editor-form-model';
 interface VariablePreviewProps {
     values?: string[];
-    onRefresh?: () => void;
     isLoading?: boolean;
     error?: string;
 }
 export declare function VariablePreview(props: VariablePreviewProps): ReactElement;
 interface VariableListPreviewProps {
     definition: ListVariableDefinition;
-    onRefresh: () => void;
+    sortMethod?: keyof typeof SORT_METHODS;
 }
 export declare function VariableListPreview(props: VariableListPreviewProps): ReactElement;
 export {};

package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,~~EAAY~~,MAAM,OAAO,CAAC;~~AAKtD~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;~~AAM1D~~,~~UAAU~~,~~oBAAoB;IAC5B~~,~~MAAM~~,~~CAAC,~~EAAE,MAAM,~~EAAE~~,CAAC;~~IAClB~~,~~SAAS~~,CAAC,EAAE,MAAM,~~IAAI~~,CAAC;~~IACvB~~,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,~~CAqDzE~~;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,~~SAAS~~,EAAE,MAAM,~~IAAI~~,CAAC;~~CACvB~~;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAajF"}
1	+ {"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAI5D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAuDzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAajF"}

package/dist/components/Variables/VariableEditorForm/VariablePreview.js CHANGED Viewed

@@ -11,16 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';
 import { InfoTooltip, useSnackbar } from '@perses-dev/components';
-import Refresh from 'mdi-material-ui/Refresh';
 import Clipboard from 'mdi-material-ui/ClipboardOutline';
 import { TOOLTIP_TEXT } from '../../../constants';
 import { useListVariablePluginValues } from '../variable-model';
+import { SORT_METHODS } from './variable-editor-form-model';
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 export function VariablePreview(props) {
-    const { values, onRefresh, isLoading, error } = props;
+    const { values, isLoading, error } = props;
     const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
     const { infoSnackbar } = useSnackbar();
     const showAll = ()=>{
@@ -30,6 +30,33 @@ export function VariablePreview(props) {
     if (values && values?.length > 0 && maxValues) {
         notShown = values.length - maxValues;
     }
+    const variablePreviewState = useMemo(()=>{
+        if (isLoading) {
+            return /*#__PURE__*/ _jsx(Stack, {
+                width: "100%",
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ _jsx(CircularProgress, {})
+            });
+        } else if (error) {
+            return /*#__PURE__*/ _jsx(Alert, {
+                severity: "error",
+                children: error
+            });
+        } else if (!values?.length) {
+            return /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: "No results"
+            });
+        }
+        return null;
+    }, [
+        error,
+        isLoading,
+        values
+    ]);
     return /*#__PURE__*/ _jsxs(Box, {
         children: [
             /*#__PURE__*/ _jsxs(Stack, {
@@ -42,14 +69,6 @@ export function VariablePreview(props) {
                         variant: "h4",
                         children: "Preview Values"
                     }),
-                    onRefresh && /*#__PURE__*/ _jsx(InfoTooltip, {
-                        description: TOOLTIP_TEXT.refreshVariableValues,
-                        children: /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: onRefresh,
-                            size: "small",
-                            children: /*#__PURE__*/ _jsx(Refresh, {})
-                        })
-                    }),
                     /*#__PURE__*/ _jsx(InfoTooltip, {
                         description: TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ _jsx(IconButton, {
@@ -75,22 +94,7 @@ export function VariablePreview(props) {
                         m: 2
                     },
                     children: [
-                        error && /*#__PURE__*/ _jsx(Alert, {
-                            severity: "error",
-                            children: error
-                        }),
-                        values?.length === 0 && /*#__PURE__*/ _jsx(Alert, {
-                            severity: "info",
-                            children: "No results"
-                        }),
-                        isLoading && /*#__PURE__*/ _jsx(Stack, {
-                            width: "100%",
-                            sx: {
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            },
-                            children: /*#__PURE__*/ _jsx(CircularProgress, {})
-                        }),
+                        variablePreviewState,
                         values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ _jsx(Chip, {
                                 size: "small",
                                 label: val
@@ -108,15 +112,20 @@ export function VariablePreview(props) {
     });
 }
 export function VariableListPreview(props) {
-    const { definition, onRefresh } = props;
+    const { definition, sortMethod } = props;
     const { data, isFetching, error } = useListVariablePluginValues(definition);
     const errorMessage = error?.message;
-    return /*#__PURE__*/ _jsx(VariablePreview, {
-        values: data?.map((val)=>val.value) || [],
-        onRefresh: onRefresh,
-        isLoading: isFetching,
-        error: errorMessage
-    });
+    const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);
+    const variablePreview = useMemo(()=>/*#__PURE__*/ _jsx(VariablePreview, {
+            values: result?.map((val)=>val.value),
+            isLoading: isFetching,
+            error: errorMessage
+        }), [
+        errorMessage,
+        isFetching,
+        result
+    ]);
+    return variablePreview;
 }
 //# sourceMappingURL=VariablePreview.js.map

package/dist/components/Variables/VariableEditorForm/VariablePreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { ReactElement, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport ~~Refresh from 'mdi-material-ui/Refresh';\nimport~~ Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n values?: string[];\n ~~onRefresh?: () => void;\n~~ isLoading?: boolean;\n error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n const { values, ~~onRefresh,~~ isLoading, error } = props;\n const [maxValues, setMaxValues] = useState<number \| undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n const { infoSnackbar } = useSnackbar();\n const showAll = (): void => {\n setMaxValues(undefined);\n };\n let notShown = 0;\n\n if (values && values?.length > 0 && maxValues) {\n notShown = values.length - maxValues;\n }\n\n ~~return~~ (\n ~~<Box>\~~n <Stack ~~direction~~=\"~~row\~~" ~~spacing~~={1} ~~alignItems~~=\"~~center~~\" ~~mb=~~{1}>\n <~~Typography~~ ~~variant~~=\"h4\">~~Preview~~ ~~Values~~</~~Typography>\~~n ~~{onRefresh~~ && (\n <~~InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}~~>\n <~~IconButton~~ ~~onClick~~={~~onRefresh~~} ~~size~~=\"~~small~~\">\n <~~Refresh~~ ~~/>\n~~ </~~IconButton~~>\n ~~</InfoTooltip>\n~~ ~~)}\n~~ <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n <IconButton\n onClick={async () => {\n if (values?.length) {\n await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n infoSnackbar('Preview values copied to clipboard!');\n }\n }}\n size=\"small\"\n >\n <Clipboard />\n </IconButton>\n </InfoTooltip>\n </Stack>\n <Card variant=\"outlined\">\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n {~~error && <Alert severity=\"error\">{error~~}~~</Alert>}~~\n {values?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n {isLoading && (\n <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n <CircularProgress />\n </Stack>\n )}\n {values?.slice(0, maxValues).map((val, index) => <Chip size=\"small\" key={index} label={val} />)}\n {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n </Box>\n </Card>\n </Box>\n );\n}\n\ninterface VariableListPreviewProps {\n definition: ListVariableDefinition;\n ~~onRefresh:~~ () => ~~void~~;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n const { definition, ~~onRefresh~~ } = props;\n const { data, isFetching, error } = useListVariablePluginValues(definition);\n const errorMessage = (error as Error)?.message;\n\n ~~return~~ (\n <VariablePreview\n values={~~data~~?.map((val) => val.value) ~~\|\| []}\n onRefresh={onRefresh}\n~~ isLoading={isFetching}\n error={errorMessage}\n ~~/>\~~n );\n}\n"],"names":["React","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","~~Refresh","~~Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","~~onRefresh","~~isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","~~direction~~","~~spacing~~","alignItems","mb","~~variant~~","~~description~~","~~refreshVariableValues~~","~~onClick~~","~~size~~","copyVariableValues","navigator","clipboard","writeText","map","value","join","sx","display","flexWrap","gap","m","~~severity","width","justifyContent","~~slice","val","index","label","VariableListPreview","definition","data","isFetching","errorMessage","message"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAuBC,QAAQ,QAAQ,QAAQ;~~AACtD~~,SAASC,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACxG,SAASC,WAAW,EAAEC,WAAW,QAAQ,yBAAyB;AAClE,OAAOC,~~aAAa,0BAA0B;AAC9C,OAAOC,~~eAAe,mCAAmC;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,2BAA2B,QAAQ,oBAAoB;~~AAEhE~~,MAAMC,6BAA6B;~~AASnC~~,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEC,~~SAAS,EAAEC,~~KAAK,EAAE,~~GAAGJ~~;~~IAChD~~,MAAM,~~CAACK~~,WAAWC,aAAa,~~GAAGvB~~,SAA6Be;IAC/D,MAAM,~~EAAES~~,YAAY,EAAE,~~GAAGd~~;IACzB,~~MAAMe~~,UAAU;QACdF,aAAaG;IACf;IACA,IAAIC,WAAW;IAEf,~~IAAIT~~,UAAUA,~~QAAQU~~,SAAS,KAAKN,WAAW;QAC7CK,~~WAAWT~~,~~OAAOU~~,MAAM,GAAGN;IAC7B;IAEA,~~qBACE~~,~~MAACpB;;0BACC~~,~~MAACK~~;gBAAMsB,~~WAAU~~;~~gBAAMC~~,~~SAAS~~;~~gBAAGC~~,~~YAAW~~;~~gBAASC~~,~~IAAI~~;;~~kCACzD~~,~~KAACxB~~;~~wBAAWyB~~,~~SAAQ~~;~~kCAAK~~;;~~oBACxBd~~,~~2BACC~~,~~KAACV~~;~~wBAAYyB~~,~~aAAarB~~,~~aAAasB~~,~~qBAAqB~~;~~kCAC1D~~,~~cAAA~~,~~KAAC7B~~;~~4BAAW8B~~,~~SAASjB~~;~~4BAAWkB~~,~~MAAK~~;~~sCACnC~~,~~cAAA~~,~~KAAC1B;;;kCAIP~~,~~KAACF~~;~~wBAAYyB~~,~~aAAarB~~,~~aAAayB~~,kBAAkB;kCACvD,cAAA,~~KAAChC~~;~~4BACC8B~~,SAAS;gCACP,~~IAAIlB~~,~~QAAQU~~,QAAQ;oCAClB,~~MAAMW~~,UAAUC,SAAS,CAACC,SAAS,~~CAACvB~~,~~OAAOwB~~,GAAG,CAAC,CAACC,QAAUA,OAAOC,IAAI,CAAC;~~oCACtEpB~~,aAAa;gCACf;4BACF;~~4BACAa~~,MAAK;sCAEL,cAAA,~~KAACzB~~;;;;;0BAIP,~~KAACT~~;~~gBAAK8B~~,SAAQ;0BACZ,cAAA,~~MAAC/B~~;~~oBAAI2C~~,IAAI;~~wBAAEC~~,SAAS;wBAAQC,UAAU;wBAAQC,KAAK;wBAAGC,GAAG;oBAAE;;~~wBACxD5B,uBAAS,KAACpB~~;~~4BAAMiD~~,~~UAAS;sCAAS7B;;wBAClCH~~,~~QAAQU,WAAW,mBAAK,KAAC3B;4BAAMiD,UAAS;sCAAO;;wBAC/C9B,2BACC,KAACb;4BAAM4C,OAAM;4BAAON,IAAI;gCAAEd,YAAY;gCAAUqB,gBAAgB;4BAAS;sCACvE,cAAA,KAAC/C;;wBAGJa,QAAQmC,~~MAAM,GAAG/B,~~WAAWoB~~,IAAI,~~CAACY~~,KAAKC,sBAAU,~~KAACnD~~;~~gCAAKiC~~,MAAK;~~gCAAoBmB~~,OAAOF;+BAAdC;wBACxE5B,WAAW,mBAAK,~~KAACvB~~;~~4BAAKgC~~,~~SAASX~~;~~4BAASQ~~,SAAQ;~~4BAAWI~~,MAAK;~~4BAAQmB~~,OAAO,CAAC,CAAC,EAAE7B,SAAS,KAAK,CAAC;;;;;;;AAK7G;AAOA,OAAO,SAAS8B,~~oBAAoBxC~~,KAA+B;IACjE,MAAM,~~EAAEyC~~,UAAU,~~EAAEvC~~,~~SAAS~~,EAAE,~~GAAGF~~;~~IAClC~~,MAAM,EAAE0C,IAAI,EAAEC,UAAU,~~EAAEvC~~,KAAK,EAAE,GAAGP,4BAA4B4C;IAChE,~~MAAMG~~,~~eAAgBxC~~,~~OAAiByC~~;IAEvC,~~qBACE~~,~~KAAC9C~~;~~QACCE~~,~~QAAQyC~~,~~MAAMjB~~,IAAI,~~CAACY~~,MAAQA,~~IAAIX~~,KAAK,~~KAAK,EAAE~~;~~QAC3CxB~~,~~WAAWA~~;~~QACXC~~,~~WAAWwC~~;~~QACXvC,OAAOwC;;AAGb~~"}
1	+ {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { Alert, Box, Card, Chip, CircularProgress, IconButton, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, useSnackbar } from '@perses-dev/components';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\nimport { ListVariableDefinition } from '@perses-dev/core';\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues } from '../variable-model';\nimport { SORT_METHODS } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\ninterface VariablePreviewProps {\n values?: string[];\n isLoading?: boolean;\n error?: string;\n}\n\nexport function VariablePreview(props: VariablePreviewProps): ReactElement {\n const { values, isLoading, error } = props;\n const [maxValues, setMaxValues] = useState<number \| undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n const { infoSnackbar } = useSnackbar();\n const showAll = (): void => {\n setMaxValues(undefined);\n };\n let notShown = 0;\n\n if (values && values?.length > 0 && maxValues) {\n notShown = values.length - maxValues;\n }\n\n const variablePreviewState = useMemo((): JSX.Element \| null => {\n if (isLoading) {\n return (\n <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n <CircularProgress />\n </Stack>\n );\n } else if (error) {\n return <Alert severity=\"error\">{error}</Alert>;\n } else if (!values?.length) {\n return <Alert severity=\"info\">No results</Alert>;\n }\n return null;\n }, [error, isLoading, values]);\n\n return (\n <Box>\n <Stack direction=\"row\" spacing={1} alignItems=\"center\" mb={1}>\n <Typography variant=\"h4\">Preview Values</Typography>\n <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n <IconButton\n onClick={async () => {\n if (values?.length) {\n await navigator.clipboard.writeText(values.map((value) => value).join(', '));\n infoSnackbar('Preview values copied to clipboard!');\n }\n }}\n size=\"small\"\n >\n <Clipboard />\n </IconButton>\n </InfoTooltip>\n </Stack>\n <Card variant=\"outlined\">\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, m: 2 }}>\n {variablePreviewState}\n {values?.slice(0, maxValues).map((val, index) => <Chip size=\"small\" key={index} label={val} />)}\n {notShown > 0 && <Chip onClick={showAll} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />}\n </Box>\n </Card>\n </Box>\n );\n}\n\ninterface VariableListPreviewProps {\n definition: ListVariableDefinition;\n sortMethod?: keyof typeof SORT_METHODS;\n}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n const { definition, sortMethod } = props;\n const { data, isFetching, error } = useListVariablePluginValues(definition);\n const errorMessage = (error as Error)?.message;\n\n const result = !sortMethod \|\| sortMethod === 'none' \|\| !data ? data : SORT_METHODS[sortMethod].sort(data);\n\n const variablePreview = useMemo(\n () => <VariablePreview values={result?.map((val) => val.value)} isLoading={isFetching} error={errorMessage} />,\n [errorMessage, isFetching, result]\n );\n\n return variablePreview;\n}\n"],"names":["React","useMemo","useState","Alert","Box","Card","Chip","CircularProgress","IconButton","Stack","Typography","InfoTooltip","useSnackbar","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","SORT_METHODS","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","variablePreviewState","width","sx","alignItems","justifyContent","severity","direction","spacing","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","display","flexWrap","gap","m","slice","val","index","label","VariableListPreview","definition","sortMethod","data","isFetching","errorMessage","message","result","sort","variablePreview"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './VariableEditorForm';
 export * from './VariablePreview';
+export * from './variable-editor-form-model';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Variables/VariableEditorForm/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,8BAA8B,CAAC"}

package/dist/components/Variables/VariableEditorForm/index.js CHANGED Viewed

@@ -12,5 +12,6 @@
 // limitations under the License.
 export * from './VariableEditorForm';
 export * from './VariablePreview';
+export * from './variable-editor-form-model';
 //# sourceMappingURL=index.js.map

package/dist/components/Variables/VariableEditorForm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './VariableEditorForm';\nexport * from './VariablePreview';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB"}
1	+ {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './VariableEditorForm';\nexport * from './VariablePreview';\nexport * from './variable-editor-form-model';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,+BAA+B"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
 import { ListVariableSpec, TextVariableSpec, VariableDefinition } from '@perses-dev/core';
+import { VariableOption } from '../../../model';
+export type SortMethodName = 'none' | 'alphabetical-asc' | 'alphabetical-desc' | 'numerical-asc' | 'numerical-desc' | 'alphabetical-ci-asc' | 'alphabetical-ci-desc';
+export declare const SORT_METHODS: Record<SortMethodName, {
+    label: string;
+    sort: (input: VariableOption[]) => VariableOption[];
+}>;
 export type VariableEditorState = {
     name: string;
     title?: string;