@perses-dev/plugin-system 0.52.0 → 0.53.0-beta.0

package/dist/components/DatasourceSelect/DatasourceSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceSelect/DatasourceSelect.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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n  Stack,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n  Autocomplete,\n  TextField,\n} from '@mui/material';\nimport { DatasourceSelector, VariableName } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  useListDatasourceSelectItems,\n  useVariableValues,\n  VariableStateMap,\n} from '../../runtime';\nimport { parseVariables } from '../../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ntype DataSourceOption = {\n  groupEditLink?: string;\n  groupLabel?: string;\n  value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n  Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelectValue;\n  onChange: (next: DatasourceSelectValue) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, readOnly, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  const variables = useVariableValues();\n\n  const defaultValue = useMemo<VariableName | DatasourceSelectItemSelector>(() => {\n    if (isVariableDatasource(value)) {\n      return value;\n    }\n\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  const options = useMemo<DataSourceOption[]>(() => {\n    const datasourceOptions = (data || []).flatMap<DataSourceOption>((itemGroup) =>\n      itemGroup.items.map<DataSourceOption>((item) => ({\n        groupLabel: itemGroup.group,\n        groupEditLink: itemGroup.editLink,\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      }))\n    );\n\n    const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n    const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n      if (Array.isArray(variable.value)) return [];\n\n      const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n      if (!associatedDatasource) return [];\n\n      return {\n        groupLabel: 'Variables',\n        name: `${VARIABLE_IDENTIFIER}${name}`,\n        saved: true,\n        value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n      };\n    });\n\n    return [...datasourceOptions, ...variableOptions];\n  }, [data, variables]);\n\n  // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n  const optionValue = isLoading\n    ? emptyDatasourceOption\n    : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange = (selectedOption: DataSourceOption | null): void => {\n    if (selectedOption) {\n      const next = optionValueToSelector(selectedOption?.value || '');\n      onChange(next);\n    } else {\n      onChange({ kind: datasourcePluginKind });\n    }\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      readOnly={readOnly}\n      options={options}\n      renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n      groupBy={(option) => option.groupLabel || 'No group'}\n      getOptionLabel={(option) => {\n        return option.name;\n      }}\n      onChange={(_, v) => handleChange(v)}\n      value={optionValue}\n      renderOption={(props, option) => {\n        return (\n          <li {...props} key={option.value}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n              </ListItemText>\n              {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {option.groupLabel && option.groupLabel.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={option.groupLabel}\n                    size=\"small\"\n                    onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      option.groupEditLink ? (\n                        <IconButton href={option.groupEditLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </li>\n        );\n      }}\n    />\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nexport function selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string {\n  if (isVariableDatasource(selector)) {\n    return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n  }\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nexport function optionValueToSelector(optionValue: string): DatasourceSelectValue {\n  if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n    return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n  }\n\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName {\n  return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n  value: DatasourceSelectValue | undefined,\n  variables: VariableStateMap,\n  datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined\n): DatasourceSelector | undefined => {\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  const [variableName] = parseVariables(value);\n  const variable = variables[variableName ?? ''];\n\n  // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n  if (!variable || Array.isArray(variable.value)) {\n    return undefined;\n  }\n\n  const associatedDatasource = (datasourceSelectItemGroups || [])\n    .flatMap((itemGroup) => itemGroup.items)\n    .find((datasource) => datasource.name === variable.value);\n\n  // If the variable value is not a datasource, we cannot determine a selector and return undefined\n  if (associatedDatasource === undefined) {\n    return undefined;\n  }\n\n  const datasourceSelector: DatasourceSelector = {\n    kind: associatedDatasource.selector.kind,\n    name: associatedDatasource.selector.name,\n  };\n\n  return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n  value: DatasourceSelectValue,\n  datasourcePluginKind: string\n): DatasourceSelector => {\n  const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n  const variables = useVariableValues();\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["OpenInNewIcon","Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","readOnly","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"mappings":"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"}

package/dist/components/DatasourceSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatasourceSelect';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DatasourceSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}

package/dist/components/DatasourceSelect/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// 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.
+export * from './DatasourceSelect';
+
+//# sourceMappingURL=index.js.map

package/dist/components/DatasourceSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceSelect/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 './DatasourceSelect';\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,qBAAqB"}

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

@@ -1 +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;AAwTtF,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"}
+{"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

@@ -22,6 +22,7 @@ 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"
@@ -107,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();
@@ -116,6 +121,15 @@ 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: [
@@ -128,18 +142,17 @@ 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, {
+                                sortMethod: sortMethod,
                                 definition: previewSpec
                             })
                         })
-                    }) : /*#__PURE__*/ _jsx(VariablePreview, {
-                        isLoading: true
                     }),
                     /*#__PURE__*/ _jsx(Stack, {
                         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
@@ -205,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,
@@ -222,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

@@ -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 { 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';\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  // 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  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        {kind ? (\n          <Box>\n            <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n              <VariableListPreview definition={previewSpec} />\n            </ErrorBoundary>\n          </Box>\n        ) : (\n          <VariablePreview isLoading={true} />\n        )}\n\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                <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":["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","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","allowAllValue","setValue","allowMultiple","refresh","mb","FallbackComponent","resetKeys","definition","isLoading","postExecuteRunQuery","withRunQueryButton","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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"}
+{"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

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

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

@@ -1 +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;AAM1D,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,CA8CzE;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;CACpC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAWjF"}
+{"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,CAmBjF"}

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

@@ -17,6 +17,7 @@ import { InfoTooltip, useSnackbar } from '@perses-dev/components';
 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, isLoading, error } = props;
@@ -29,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, {
@@ -66,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
@@ -99,17 +112,18 @@ export function VariablePreview(props) {
     });
 }
 export function VariableListPreview(props) {
-    const { definition } = props;
+    const { definition, sortMethod } = props;
     const { data, isFetching, error } = useListVariablePluginValues(definition);
     const errorMessage = error?.message;
+    const result = !sortMethod || sortMethod === 'none' || !data ? data : SORT_METHODS[sortMethod].sort(data);
     const variablePreview = useMemo(()=>/*#__PURE__*/ _jsx(VariablePreview, {
-            values: data?.map((val)=>val.value) || [],
+            values: result?.map((val)=>val.label || val.value),
             isLoading: isFetching,
             error: errorMessage
         }), [
         errorMessage,
         isFetching,
-        data
+        result
     ]);
     return variablePreview;
 }

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

@@ -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, 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';\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  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          {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}\n\nexport function VariableListPreview(props: VariableListPreviewProps): ReactElement {\n  const { definition } = props;\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const errorMessage = (error as Error)?.message;\n\n  const variablePreview = useMemo(\n    () => <VariablePreview values={data?.map((val) => val.value) || []} isLoading={isFetching} error={errorMessage} />,\n    [errorMessage, isFetching, data]\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","DEFAULT_MAX_PREVIEW_VALUES","VariablePreview","props","values","isLoading","error","maxValues","setMaxValues","infoSnackbar","showAll","undefined","notShown","length","direction","spacing","alignItems","mb","variant","description","copyVariableValues","onClick","navigator","clipboard","writeText","map","value","join","size","sx","display","flexWrap","gap","m","severity","width","justifyContent","slice","val","index","label","VariableListPreview","definition","data","isFetching","errorMessage","message","variablePreview"],"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,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC/D,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,eAAe,mCAAmC;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,2BAA2B,QAAQ,oBAAoB;AAEhE,MAAMC,6BAA6B;AAQnC,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IACrC,MAAM,CAACI,WAAWC,aAAa,GAAGrB,SAA6Bc;IAC/D,MAAM,EAAEQ,YAAY,EAAE,GAAGZ;IACzB,MAAMa,UAAU;QACdF,aAAaG;IACf;IACA,IAAIC,WAAW;IAEf,IAAIR,UAAUA,QAAQS,SAAS,KAAKN,WAAW;QAC7CK,WAAWR,OAAOS,MAAM,GAAGN;IAC7B;IAEA,qBACE,MAAClB;;0BACC,MAACK;gBAAMoB,WAAU;gBAAMC,SAAS;gBAAGC,YAAW;gBAASC,IAAI;;kCACzD,KAACtB;wBAAWuB,SAAQ;kCAAK;;kCACzB,KAACtB;wBAAYuB,aAAapB,aAAaqB,kBAAkB;kCACvD,cAAA,KAAC3B;4BACC4B,SAAS;gCACP,IAAIjB,QAAQS,QAAQ;oCAClB,MAAMS,UAAUC,SAAS,CAACC,SAAS,CAACpB,OAAOqB,GAAG,CAAC,CAACC,QAAUA,OAAOC,IAAI,CAAC;oCACtElB,aAAa;gCACf;4BACF;4BACAmB,MAAK;sCAEL,cAAA,KAAC9B;;;;;0BAIP,KAACR;gBAAK4B,SAAQ;0BACZ,cAAA,MAAC7B;oBAAIwC,IAAI;wBAAEC,SAAS;wBAAQC,UAAU;wBAAQC,KAAK;wBAAGC,GAAG;oBAAE;;wBACxD3B,uBAAS,KAAClB;4BAAM8C,UAAS;sCAAS5B;;wBAClCF,QAAQS,WAAW,mBAAK,KAACzB;4BAAM8C,UAAS;sCAAO;;wBAC/C7B,2BACC,KAACX;4BAAMyC,OAAM;4BAAON,IAAI;gCAAEb,YAAY;gCAAUoB,gBAAgB;4BAAS;sCACvE,cAAA,KAAC5C;;wBAGJY,QAAQiC,MAAM,GAAG9B,WAAWkB,IAAI,CAACa,KAAKC,sBAAU,KAAChD;gCAAKqC,MAAK;gCAAoBY,OAAOF;+BAAdC;wBACxE3B,WAAW,mBAAK,KAACrB;4BAAK8B,SAASX;4BAASQ,SAAQ;4BAAWU,MAAK;4BAAQY,OAAO,CAAC,CAAC,EAAE5B,SAAS,KAAK,CAAC;;;;;;;AAK7G;AAMA,OAAO,SAAS6B,oBAAoBtC,KAA+B;IACjE,MAAM,EAAEuC,UAAU,EAAE,GAAGvC;IACvB,MAAM,EAAEwC,IAAI,EAAEC,UAAU,EAAEtC,KAAK,EAAE,GAAGN,4BAA4B0C;IAChE,MAAMG,eAAgBvC,OAAiBwC;IAEvC,MAAMC,kBAAkB7D,QACtB,kBAAM,KAACgB;YAAgBE,QAAQuC,MAAMlB,IAAI,CAACa,MAAQA,IAAIZ,KAAK,KAAK,EAAE;YAAErB,WAAWuC;YAAYtC,OAAOuC;YAClG;QAACA;QAAcD;QAAYD;KAAK;IAGlC,OAAOI;AACT"}
+{"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    () => (\n      <VariablePreview\n        values={result?.map((val) => val.label || val.value)}\n        isLoading={isFetching}\n        error={errorMessage}\n      />\n    ),\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

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

@@ -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"}
+{"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

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

@@ -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"}
+{"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

@@ -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;

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

@@ -1 +1 @@
-{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAA0B,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAElH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,GAAG,cAAc,GAAG,iBAAiB,CAAC;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/D,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB,GAAG,mBAAmB,CAkClG;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAgC7F"}
+{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAA0B,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAClH,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,kBAAkB,GAClB,mBAAmB,GACnB,eAAe,GACf,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,eAAO,MAAM,YAAY,EAAE,MAAM,CAC/B,cAAc,EACd;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,CAAA;CAAE,CA4CvE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,GAAG,cAAc,GAAG,iBAAiB,CAAC;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/D,kBAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAChE,CAAC;AAEF,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB,GAAG,mBAAmB,CAkClG;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAgC7F"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -10,6 +10,50 @@
 // 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.
+export const SORT_METHODS = {
+    none: {
+        label: 'None',
+        sort: (input)=>{
+            return input.slice();
+        }
+    },
+    'alphabetical-asc': {
+        label: 'Alphabetical, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label > b.label ? 1 : -1);
+        }
+    },
+    'alphabetical-desc': {
+        label: 'Alphabetical, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label > b.label ? -1 : 1);
+        }
+    },
+    'numerical-asc': {
+        label: 'Numerical, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
+        }
+    },
+    'numerical-desc': {
+        label: 'Numerical, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
+        }
+    },
+    'alphabetical-ci-asc': {
+        label: 'Alphabetical, case-insensitive, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+        }
+    },
+    'alphabetical-ci-desc': {
+        label: 'Alphabetical, case-insensitive, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
+        }
+    }
+};
 export function getInitialState(initialVariableDefinition) {
     const textVariableFields = {
         value: initialVariableDefinition.spec.value ?? '',