@perses-dev/dashboards 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-datasource-browser-test-28cbb71

package/dist/components/Variables/Variable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2022 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 { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport { DEFAULT_ALL_VALUE } from '@perses-dev/plugin-system';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\nimport { useListVariablePluginValues } from './variable-model';\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const title = definition?.spec.display?.name ?? name;\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        finalOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [finalOptions, value, allowMultiple]\n  );\n\n  let selectValue = value;\n  if (!valueIsInOptions) {\n    selectValue = allowMultiple ? [] : '';\n  }\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={selectValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n\n          {finalOptions.length === 0 && (\n            <MenuItem value=\"empty\" disabled>\n              No options\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state, definition } = useTemplateVariable(name);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","DEFAULT_ALL_VALUE","useTemplateVariable","useTemplateVariableActions","useListVariablePluginValues","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","variablesOptionsQuery","setVariableValue","setVariableLoading","setVariableOptions","allowMultiple","spec","allow_multiple","allowAllValue","allow_all_value","title","display","isFetching","data","value","state","options","loading","Array","isArray","finalOptions","computedOptions","label","valueIsInOptions","Boolean","find","v","includes","selectValue","firstOption","fullWidth","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","map","option","tempValue","setTempValue","onBlur","placeholder"],"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;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACrD,SAASC,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,cAAc,EAAEC,SAAS,QAAQ,eAAe,CAAC;AAE1G,SAASC,iBAAiB,QAAQ,2BAA2B,CAAC;AAC9D,SAASC,mBAAmB,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAChF,SAASC,2BAA2B,QAAQ,kBAAkB,CAAC;AAK/D,OAAO,SAASC,gBAAgB,CAAC,EAAEC,IAAI,CAAA,EAAyB,EAAE;QAEnDC,GAAc;IAD3B,MAAMA,GAAG,GAAGL,mBAAmB,CAACI,IAAI,CAAC,AAAC;IACtC,MAAME,IAAI,GAAGD,CAAAA,GAAc,GAAdA,GAAG,CAACE,UAAU,cAAdF,GAAc,WAAM,GAApBA,KAAAA,CAAoB,GAApBA,GAAc,CAAEC,IAAI,AAAC;IAClC,OAAQA,IAAI;QACV,KAAK,cAAc;YACjB,qBAAO,KAACE,YAAY;gBAACJ,IAAI,EAAEA,IAAI;cAAI,CAAC;QACtC,KAAK,cAAc;YACjB,qBAAO,KAACK,YAAY;gBAACL,IAAI,EAAEA,IAAI;cAAI,CAAC;KACvC;IAED,qBAAO,MAACM,KAAG;;YAAC,8BAA4B;YAACJ,IAAI;;MAAO,CAAC;AACvD,CAAC;AAED,SAASG,YAAY,CAAC,EAAEL,IAAI,CAAA,EAAyB,EAAE;aAiBzCC,IAAS,EACLA,IAAS,EACTA,IAAS;IAlBzB,MAAMA,GAAG,GAAGL,mBAAmB,CAACI,IAAI,CAAC,AAAC;IACtC,MAAMG,UAAU,GAAGF,GAAG,CAACE,UAAU,AAA0B,AAAC;IAC5D,MAAMI,qBAAqB,GAAGT,2BAA2B,CAACK,UAAU,CAAC,AAAC;IACtE,MAAM,EAAEK,gBAAgB,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGb,0BAA0B,EAAE,AAAC;IAElG,MAAMc,aAAa,GAAGR,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAES,IAAI,CAACC,cAAc,MAAK,IAAI,AAAC;IAC/D,MAAMC,aAAa,GAAGX,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAES,IAAI,CAACG,eAAe,MAAK,IAAI,AAAC;QAClDZ,IAA8B;IAA5C,MAAMa,KAAK,GAAGb,CAAAA,IAA8B,GAA9BA,OAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAES,IAAI,CAACK,OAAO,4BAAM,GAA9Bd,KAAAA,CAA8B,OAAJH,IAAI,cAA9BG,IAA8B,cAA9BA,IAA8B,GAAIH,IAAI,AAAC;IAErDf,SAAS,CAAC,IAAM;QACdwB,kBAAkB,CAACT,IAAI,EAAEO,qBAAqB,CAACW,UAAU,CAAC,CAAC;QAC3D,IAAIX,qBAAqB,CAACY,IAAI,EAAE;YAC9BT,kBAAkB,CAACV,IAAI,EAAEO,qBAAqB,CAACY,IAAI,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EAAE;QAACZ,qBAAqB;QAAEP,IAAI;QAAES,kBAAkB;QAAEC,kBAAkB;KAAC,CAAC,CAAC;IAE1E,IAAIU,KAAK,GAAGnB,CAAAA,IAAS,GAATA,GAAG,CAACoB,KAAK,cAATpB,IAAS,WAAO,GAAhBA,KAAAA,CAAgB,GAAhBA,IAAS,CAAEmB,KAAK,AAAC;IAC7B,MAAME,OAAO,GAAGrB,CAAAA,IAAS,GAATA,GAAG,CAACoB,KAAK,cAATpB,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEqB,OAAO,AAAC;IACnC,MAAMC,OAAO,GAAGtB,CAAAA,IAAS,GAATA,GAAG,CAACoB,KAAK,cAATpB,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEsB,OAAO,AAAC;IAEnC,uDAAuD;IACvD,IAAIZ,aAAa,IAAI,CAACa,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,EAAE;QAC1CA,KAAK,GAAG,OAAOA,KAAK,KAAK,QAAQ,GAAG;YAACA,KAAK;SAAC,GAAG,EAAE,CAAC;IACnD,CAAC;IAED,MAAMM,YAAY,GAAGxC,OAAO,CAAC,IAAM;QACjC,IAAIyC,eAAe,GAAGL,OAAO,GAAG;eAAIA,OAAO;SAAC,GAAG,EAAE,AAAC;QAElD,oCAAoC;QACpC,IAAIR,aAAa,EAAE;YACjBa,eAAe,GAAG;gBAAC;oBAAEP,KAAK,EAAEzB,iBAAiB;oBAAEiC,KAAK,EAAE,KAAK;iBAAE;mBAAKD,eAAe;aAAC,CAAC;QACrF,CAAC;QACD,OAAOA,eAAe,CAAC;IACzB,CAAC,EAAE;QAACL,OAAO;QAAER,aAAa;KAAC,CAAC,AAAC;IAE7B,MAAMe,gBAAgB,GAAG3C,OAAO,CAC9B,IACE4C,OAAO,CACLJ,YAAY,CAACK,IAAI,CAAC,CAACC,CAAC,GAAK;YACvB,IAAIrB,aAAa,EAAE;gBACjB,OAAO,AAACS,KAAK,CAAca,QAAQ,CAACD,CAAC,CAACZ,KAAK,CAAC,CAAC;YAC/C,CAAC;YACD,OAAOA,KAAK,KAAKY,CAAC,CAACZ,KAAK,CAAC;QAC3B,CAAC,CAAC,CACH,EACH;QAACM,YAAY;QAAEN,KAAK;QAAET,aAAa;KAAC,CACrC,AAAC;IAEF,IAAIuB,WAAW,GAAGd,KAAK,AAAC;IACxB,IAAI,CAACS,gBAAgB,EAAE;QACrBK,WAAW,GAAGvB,aAAa,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,CAAC;IAED1B,SAAS,CAAC,IAAM;QACd,MAAMkD,WAAW,GAAGT,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,AAAE,CAAC,CAAC,CAAC,AAAC;QAEtC,iFAAiF;QACjF,IAAI,CAACN,KAAK,IAAIe,WAAW,EAAE;YACzB3B,gBAAgB,CAACR,IAAI,EAAEmC,WAAW,CAACf,KAAK,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE;QAACM,YAAY;QAAElB,gBAAgB;QAAEY,KAAK;QAAEpB,IAAI;QAAEW,aAAa;KAAC,CAAC,CAAC;IAEjE,qBACE,KAACnB,GAAG;QAACyB,OAAO,EAAE,MAAM;kBAClB,cAAA,MAAC5B,WAAW;YAAC+C,SAAS;;8BACpB,KAAC9C,UAAU;oBAAC+C,EAAE,EAAErC,IAAI;8BAAGgB,KAAK;kBAAc;8BAC1C,MAAC5B,MAAM;oBACLkD,EAAE,EAAE;wBAAEC,QAAQ,EAAE,GAAG;wBAAEC,QAAQ,EAAE,GAAG;qBAAE;oBACpCH,EAAE,EAAErC,IAAI;oBACR4B,KAAK,EAAE5B,IAAI;oBACXoB,KAAK,EAAEc,WAAW;oBAClBO,QAAQ,EAAE,CAACC,CAAC,GAAK;wBACf,mBAAmB;wBACnB,IAAIA,CAAC,CAACC,MAAM,CAACvB,KAAK,KAAK,IAAI,IAAIsB,CAAC,CAACC,MAAM,CAACvB,KAAK,CAACwB,MAAM,KAAK,CAAC,EAAE;4BAC1D,IAAI9B,aAAa,EAAE;gCACjBN,gBAAgB,CAACR,IAAI,EAAEL,iBAAiB,CAAC,CAAC;4BAC5C,CAAC;4BACD,OAAO;wBACT,CAAC;wBACDa,gBAAgB,CAACR,IAAI,EAAE0C,CAAC,CAACC,MAAM,CAACvB,KAAK,CAAkB,CAAC;oBAC1D,CAAC;oBACDyB,QAAQ,EAAElC,aAAa;;wBAEtBY,OAAO,kBACN,KAAChC,QAAQ;4BAAC6B,KAAK,EAAC,SAAS;4BAAC0B,QAAQ;sCAAC,SAEnC;0BAAW,AACZ;wBAEApB,YAAY,CAACkB,MAAM,KAAK,CAAC,kBACxB,KAACrD,QAAQ;4BAAC6B,KAAK,EAAC,OAAO;4BAAC0B,QAAQ;sCAAC,YAEjC;0BAAW,AACZ;wBACApB,YAAY,CAACqB,GAAG,CAAC,CAACC,MAAM,iBACvB,KAACzD,QAAQ;gCAAoB6B,KAAK,EAAE4B,MAAM,CAAC5B,KAAK;0CAC7C4B,MAAM,CAACpB,KAAK;+BADAoB,MAAM,CAAC5B,KAAK,CAEhB,AACZ,CAAC;;kBACK;gBACRG,OAAO,kBAAI,KAAC9B,cAAc,KAAG;;UAClB;MACV,CACN;AACJ,CAAC;AAED,SAASW,YAAY,CAAC,EAAEJ,IAAI,CAAA,EAAyB,EAAE;;IACrD,MAAM,EAAEqB,KAAK,CAAA,EAAElB,UAAU,CAAA,EAAE,GAAGP,mBAAmB,CAACI,IAAI,CAAC,AAAC;QACbqB,IAAY;IAAvD,MAAM,CAAC4B,SAAS,EAAEC,YAAY,CAAC,GAAG/D,QAAQ,CAACkC,CAAAA,IAAY,GAAZA,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAED,KAAK,cAAZC,IAAY,cAAZA,IAAY,GAAI,EAAE,CAAC,AAAC;IAC/D,MAAM,EAAEb,gBAAgB,CAAA,EAAE,GAAGX,0BAA0B,EAAE,AAAC;IAE1DZ,SAAS,CAAC,IAAM;YACDoC,GAAY;QAAzB6B,YAAY,CAAC7B,CAAAA,GAAY,GAAZA,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAED,KAAK,cAAZC,GAAY,cAAZA,GAAY,GAAI,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE;QAACA,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAED,KAAK;KAAC,CAAC,CAAC;QAQRjB,IAA8B;IANzC,qBACE,KAACT,SAAS;QACR0B,KAAK,EAAE6B,SAAS;QAChBR,QAAQ,EAAE,CAACC,CAAC,GAAKQ,YAAY,CAACR,CAAC,CAACC,MAAM,CAACvB,KAAK,CAAC;QAC7C+B,MAAM,EAAE,IAAM3C,gBAAgB,CAACR,IAAI,EAAEiD,SAAS,CAAC;QAC/CG,WAAW,EAAEpD,IAAI;QACjB4B,KAAK,EAAEzB,CAAAA,IAA8B,GAA9BA,OAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAES,IAAI,CAACK,OAAO,4BAAM,GAA9Bd,KAAAA,CAA8B,OAAJH,IAAI,cAA9BG,IAA8B,cAA9BA,IAA8B,GAAIH,IAAI;MAC7C,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/Variable.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 { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport { DEFAULT_ALL_VALUE } from '@perses-dev/plugin-system';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\nimport { useListVariablePluginValues } from './variable-model';\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const title = definition?.spec.display?.name ?? name;\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        finalOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [finalOptions, value, allowMultiple]\n  );\n\n  let selectValue = value;\n  if (!valueIsInOptions) {\n    selectValue = allowMultiple ? [] : '';\n  }\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={selectValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n\n          {finalOptions.length === 0 && (\n            <MenuItem value=\"empty\" disabled>\n              No options\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state, definition } = useTemplateVariable(name);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","DEFAULT_ALL_VALUE","useTemplateVariable","useTemplateVariableActions","useListVariablePluginValues","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","variablesOptionsQuery","setVariableValue","setVariableLoading","setVariableOptions","allowMultiple","spec","allow_multiple","allowAllValue","allow_all_value","title","display","isFetching","data","value","state","options","loading","Array","isArray","finalOptions","computedOptions","label","valueIsInOptions","Boolean","find","v","includes","selectValue","firstOption","fullWidth","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","map","option","tempValue","setTempValue","onBlur","placeholder"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA8BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA8BtD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA+LA"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA+BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA8BtD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA+LA"}

package/dist/components/Variables/VariableEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -13,6 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell as MuiTableCell, Table, TableHead, Switch, Typography, IconButton, Alert, styled } from '@mui/material';
+import AddIcon from 'mdi-material-ui/Plus';
 import { useImmer } from 'use-immer';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import TrashIcon from 'mdi-material-ui/TrashCan';
@@ -181,7 +182,7 @@ export function VariableEditor(props) {
                                         sx: {
                                             minWidth: 650
                                         },
-                                        "aria-label": "simple table",
+                                        "aria-label": "table of variables",
                                         children: [
                                             /*#__PURE__*/ _jsx(TableHead, {
                                                 children: /*#__PURE__*/ _jsxs(TableRow, {
@@ -196,8 +197,7 @@ export function VariableEditor(props) {
                                                             children: "Type"
                                                         }),
                                                         /*#__PURE__*/ _jsx(TableCell, {
-                                                            align: "right",
-                                                            children: "Action"
+                                                            align: "right"
                                                         })
                                                     ]
                                                 })
@@ -261,9 +261,13 @@ export function VariableEditor(props) {
                                 /*#__PURE__*/ _jsx(Box, {
                                     display: "flex",
                                     children: /*#__PURE__*/ _jsx(Button, {
-                                        onClick: addVariable,
                                         variant: "contained",
-                                        children: "Add New"
+                                        startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addVariable,
+                                        children: "Add Variable"
                                     })
                                 })
                             ]

package/dist/components/Variables/VariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2022 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 { useState, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n} from '@mui/material';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { useDiscardChangesConfirmationDialog } from '../../context';\nimport { VariableEditForm } from './VariableEditorForm';\nimport { VARIABLE_TYPES } from './variable-model';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          onChange={(definition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onCancel={() => setVariableEditIdx(null)}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\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\">Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              {!validation.isValid &&\n                validation.errors.map((error) => (\n                  <Alert severity=\"error\" key={error}>\n                    {error}\n                  </Alert>\n                ))}\n              <TableContainer>\n                <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                  <TableHead>\n                    <TableRow>\n                      <TableCell>Visibility</TableCell>\n                      <TableCell>Name</TableCell>\n                      <TableCell>Type</TableCell>\n                      <TableCell align=\"right\">Action</TableCell>\n                    </TableRow>\n                  </TableHead>\n                  <TableBody>\n                    {variableDefinitions.map((v, idx) => (\n                      <TableRow key={v.spec.name}>\n                        <TableCell component=\"th\" scope=\"row\">\n                          <Switch\n                            checked={v.spec.display?.hidden !== true}\n                            onChange={(e) => {\n                              toggleVariableVisibility(idx, e.target.checked);\n                            }}\n                          />\n                        </TableCell>\n                        <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                          {v.spec.name}\n                        </TableCell>\n                        <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                        <TableCell align=\"right\">\n                          <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                            <ArrowUp />\n                          </IconButton>\n                          <IconButton\n                            onClick={() => changeVariableOrder(idx, 'down')}\n                            disabled={idx === variableDefinitions.length - 1}\n                          >\n                            <ArrowDown />\n                          </IconButton>\n\n                          <IconButton onClick={() => setVariableEditIdx(idx)}>\n                            <PencilIcon />\n                          </IconButton>\n                          <IconButton onClick={() => removeVariable(idx)}>\n                            <TrashIcon />\n                          </IconButton>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </TableContainer>\n              <Box display=\"flex\">\n                <Button onClick={addVariable} variant=\"contained\">\n                  Add New\n                </Button>\n              </Box>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","useDiscardChangesConfirmationDialog","VariableEditForm","VARIABLE_TYPES","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","validation","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","initialVariableDefinition","onChange","definition","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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 { useState, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { useDiscardChangesConfirmationDialog } from '../../context';\nimport { VariableEditForm } from './VariableEditorForm';\nimport { VARIABLE_TYPES } from './variable-model';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          onChange={(definition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onCancel={() => setVariableEditIdx(null)}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\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\">Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              {!validation.isValid &&\n                validation.errors.map((error) => (\n                  <Alert severity=\"error\" key={error}>\n                    {error}\n                  </Alert>\n                ))}\n              <TableContainer>\n                <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                  <TableHead>\n                    <TableRow>\n                      <TableCell>Visibility</TableCell>\n                      <TableCell>Name</TableCell>\n                      <TableCell>Type</TableCell>\n                      <TableCell align=\"right\" />\n                    </TableRow>\n                  </TableHead>\n                  <TableBody>\n                    {variableDefinitions.map((v, idx) => (\n                      <TableRow key={v.spec.name}>\n                        <TableCell component=\"th\" scope=\"row\">\n                          <Switch\n                            checked={v.spec.display?.hidden !== true}\n                            onChange={(e) => {\n                              toggleVariableVisibility(idx, e.target.checked);\n                            }}\n                          />\n                        </TableCell>\n                        <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                          {v.spec.name}\n                        </TableCell>\n                        <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                        <TableCell align=\"right\">\n                          <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                            <ArrowUp />\n                          </IconButton>\n                          <IconButton\n                            onClick={() => changeVariableOrder(idx, 'down')}\n                            disabled={idx === variableDefinitions.length - 1}\n                          >\n                            <ArrowDown />\n                          </IconButton>\n\n                          <IconButton onClick={() => setVariableEditIdx(idx)}>\n                            <PencilIcon />\n                          </IconButton>\n                          <IconButton onClick={() => removeVariable(idx)}>\n                            <TrashIcon />\n                          </IconButton>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </TableContainer>\n              <Box display=\"flex\">\n                <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                  Add Variable\n                </Button>\n              </Box>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","useDiscardChangesConfirmationDialog","VariableEditForm","VARIABLE_TYPES","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","validation","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","initialVariableDefinition","onChange","definition","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","startIcon"],"mappings":"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"}

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":";AAkCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAqF9E,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAgNA"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAsF9E,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAgNA"}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -12,12 +12,13 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState } from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack, Alert, Chip, IconButton, ClickAwayListener, Tooltip } from '@mui/material';
+import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack, Alert, Chip, IconButton, ClickAwayListener } from '@mui/material';
 import { useImmer } from 'use-immer';
 import { PluginEditor } from '@perses-dev/plugin-system';
-import { ErrorBoundary } from '@perses-dev/components';
+import { ErrorBoundary, InfoTooltip } 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, VARIABLE_TYPES } from '../variable-model';
 import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
@@ -63,18 +64,16 @@ function VariableListPreview({ definition , onRefresh  }) {
                         variant: "caption",
                         children: "Preview Values"
                     }),
-                    /*#__PURE__*/ _jsx(Tooltip, {
-                        title: "Refresh Values",
-                        placement: "right",
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.refreshVariableValues,
                         children: /*#__PURE__*/ _jsx(IconButton, {
                             onClick: onRefresh,
                             size: "small",
                             children: /*#__PURE__*/ _jsx(Refresh, {})
                         })
                     }),
-                    /*#__PURE__*/ _jsx(Tooltip, {
-                        title: "Copy Values to Clipboard",
-                        placement: "right",
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ _jsx(IconButton, {
                             onClick: async ()=>{
                                 if (data === null || data === void 0 ? void 0 : data.length) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2022 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, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n  Alert,\n  Chip,\n  IconButton,\n  ClickAwayListener,\n  Tooltip,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\n\nimport { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nfunction VariableListPreview({ definition, onRefresh }: { definition: ListVariableDefinition; onRefresh: () => void }) {\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const showAll = () => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (data && data?.length > 0 && maxValues) {\n    notShown = data.length - maxValues;\n  }\n  const errorMessage = (error as Error)?.message;\n\n  return (\n    <Box>\n      <Stack direction={'row'} spacing={1} alignItems=\"center\">\n        <Typography variant=\"caption\">Preview Values</Typography>\n        <Tooltip title=\"Refresh Values\" placement=\"right\">\n          <IconButton onClick={onRefresh} size=\"small\">\n            <Refresh />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Copy Values to Clipboard\" placement=\"right\">\n          <IconButton\n            onClick={async () => {\n              if (data?.length) {\n                await navigator.clipboard.writeText(data.map((d) => d.label).join(','));\n                alert('Copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </Tooltip>\n      </Stack>\n      {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n      {isFetching && 'Loading...'}\n      {data?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n      <>\n        {data?.slice(0, maxValues).map((val) => (\n          <Chip sx={{ mr: 1, mb: 1 }} size=\"small\" key={val.value} label={val.label} />\n        ))}\n        {notShown > 0 && (\n          <Chip onClick={showAll} variant=\"outlined\" sx={{ mr: 1, mb: 1 }} size=\"small\" label={`+${notShown} more`} />\n        )}\n      </>\n    </Box>\n  );\n}\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  const [previewKey, setPreviewKey] = React.useState(0);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicity 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 = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  return (\n    <>\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\">Edit Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          <Button\n            disabled={!validation.isValid}\n            variant=\"contained\"\n            onClick={() => {\n              onChange(getVariableDefinitionFromState(state));\n            }}\n          >\n            Update\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outlined\"\n            onClick={() => {\n              onCancel();\n            }}\n          >\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <SectionHeader>General</SectionHeader>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={6}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value as string;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <FormControl fullWidth>\n              <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n              <Select\n                labelId=\"variable-type-select-label\"\n                id=\"variable-type-select\"\n                label=\"Type\"\n                value={state.kind}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.kind = v.target.value as VariableEditorState['kind'];\n                  });\n                }}\n              >\n                {VARIABLE_TYPES.map((v) => (\n                  <MenuItem key={v.kind} value={v.kind}>\n                    {v.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Grid>\n          <Grid item xs={6}>\n            <TextField\n              fullWidth\n              label=\"Display Label\"\n              value={state.title}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n        </Grid>\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <SectionHeader>Text Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={12}>\n                <TextField\n                  label=\"Value\"\n                  value={state.textVariableFields.value}\n                  onChange={(v) => {\n                    setState((draft) => {\n                      draft.textVariableFields.value = v.target.value;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <SectionHeader>List Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={6}>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width={500}\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Grid>\n\n              {state.listVariableFields.plugin.kind && (\n                <Grid item xs={12}>\n                  <TextField\n                    sx={{ mb: 1 }}\n                    label=\"Capturing Regexp Filter\"\n                    value={state.listVariableFields.capturing_regexp}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        draft.listVariableFields.capturing_regexp = e.target.value;\n                      });\n                    }}\n                  />\n                  <ErrorBoundary FallbackComponent={() => <div>Error previewing values</div>} resetKeys={[previewSpec]}>\n                    <VariableListPreview onRefresh={refreshPreview} definition={previewSpec} />\n                  </ErrorBoundary>\n                </Grid>\n              )}\n            </Grid>\n\n            <SectionHeader>Dropdown Options</SectionHeader>\n            <Grid container spacing={1} mb={1}>\n              <Grid item xs={12}>\n                Allow Multiple\n                <Switch\n                  checked={state.listVariableFields.allowMultiple}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowMultiple = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n              <Grid item xs={12}>\n                Allow All\n                <Switch\n                  checked={state.listVariableFields.allowAll}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowAll = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n      </Box>\n    </>\n  );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","Alert","Chip","IconButton","ClickAwayListener","Tooltip","useImmer","PluginEditor","ErrorBoundary","Refresh","Clipboard","useListVariablePluginValues","VARIABLE_TYPES","getVariableDefinitionFromState","getInitialState","DEFAULT_MAX_PREVIEW_VALUES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableListPreview","definition","onRefresh","data","isFetching","error","maxValues","setMaxValues","showAll","undefined","notShown","length","errorMessage","message","direction","spacing","alignItems","title","placement","onClick","size","navigator","clipboard","writeText","map","d","label","join","alert","severity","slice","val","sx","mr","mb","value","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","display","padding","theme","borderBottom","palette","divider","marginLeft","disabled","color","overflowY","container","item","xs","required","fullWidth","helperText","v","draft","target","id","labelId","kind","description","textVariableFields","onClickAway","width","pluginType","pluginKindLabel","listVariableFields","plugin","capturing_regexp","e","FallbackComponent","div","resetKeys","checked","allowMultiple","allowAll"],"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 React, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n  Alert,\n  Chip,\n  IconButton,\n  ClickAwayListener,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary, InfoTooltip } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\n\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nfunction VariableListPreview({ definition, onRefresh }: { definition: ListVariableDefinition; onRefresh: () => void }) {\n  const { data, isFetching, error } = useListVariablePluginValues(definition);\n  const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n  const showAll = () => {\n    setMaxValues(undefined);\n  };\n  let notShown = 0;\n\n  if (data && data?.length > 0 && maxValues) {\n    notShown = data.length - maxValues;\n  }\n  const errorMessage = (error as Error)?.message;\n\n  return (\n    <Box>\n      <Stack direction={'row'} spacing={1} alignItems=\"center\">\n        <Typography variant=\"caption\">Preview Values</Typography>\n        <InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}>\n          <IconButton onClick={onRefresh} size=\"small\">\n            <Refresh />\n          </IconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n          <IconButton\n            onClick={async () => {\n              if (data?.length) {\n                await navigator.clipboard.writeText(data.map((d) => d.label).join(','));\n                alert('Copied to clipboard!');\n              }\n            }}\n            size=\"small\"\n          >\n            <Clipboard />\n          </IconButton>\n        </InfoTooltip>\n      </Stack>\n      {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n      {isFetching && 'Loading...'}\n      {data?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n      <>\n        {data?.slice(0, maxValues).map((val) => (\n          <Chip sx={{ mr: 1, mb: 1 }} size=\"small\" key={val.value} label={val.label} />\n        ))}\n        {notShown > 0 && (\n          <Chip onClick={showAll} variant=\"outlined\" sx={{ mr: 1, mb: 1 }} size=\"small\" label={`+${notShown} more`} />\n        )}\n      </>\n    </Box>\n  );\n}\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  const [previewKey, setPreviewKey] = React.useState(0);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicity 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 = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  return (\n    <>\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\">Edit Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          <Button\n            disabled={!validation.isValid}\n            variant=\"contained\"\n            onClick={() => {\n              onChange(getVariableDefinitionFromState(state));\n            }}\n          >\n            Update\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outlined\"\n            onClick={() => {\n              onCancel();\n            }}\n          >\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <SectionHeader>General</SectionHeader>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={6}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value as string;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <FormControl fullWidth>\n              <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n              <Select\n                labelId=\"variable-type-select-label\"\n                id=\"variable-type-select\"\n                label=\"Type\"\n                value={state.kind}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.kind = v.target.value as VariableEditorState['kind'];\n                  });\n                }}\n              >\n                {VARIABLE_TYPES.map((v) => (\n                  <MenuItem key={v.kind} value={v.kind}>\n                    {v.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Grid>\n          <Grid item xs={6}>\n            <TextField\n              fullWidth\n              label=\"Display Label\"\n              value={state.title}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n        </Grid>\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <SectionHeader>Text Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={12}>\n                <TextField\n                  label=\"Value\"\n                  value={state.textVariableFields.value}\n                  onChange={(v) => {\n                    setState((draft) => {\n                      draft.textVariableFields.value = v.target.value;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <SectionHeader>List Options</SectionHeader>\n            <Grid container spacing={2} mb={2}>\n              <Grid item xs={6}>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width={500}\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Grid>\n\n              {state.listVariableFields.plugin.kind && (\n                <Grid item xs={12}>\n                  <TextField\n                    sx={{ mb: 1 }}\n                    label=\"Capturing Regexp Filter\"\n                    value={state.listVariableFields.capturing_regexp}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        draft.listVariableFields.capturing_regexp = e.target.value;\n                      });\n                    }}\n                  />\n                  <ErrorBoundary FallbackComponent={() => <div>Error previewing values</div>} resetKeys={[previewSpec]}>\n                    <VariableListPreview onRefresh={refreshPreview} definition={previewSpec} />\n                  </ErrorBoundary>\n                </Grid>\n              )}\n            </Grid>\n\n            <SectionHeader>Dropdown Options</SectionHeader>\n            <Grid container spacing={1} mb={1}>\n              <Grid item xs={12}>\n                Allow Multiple\n                <Switch\n                  checked={state.listVariableFields.allowMultiple}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowMultiple = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n              <Grid item xs={12}>\n                Allow All\n                <Switch\n                  checked={state.listVariableFields.allowAll}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      draft.listVariableFields.allowAll = e.target.checked;\n                    });\n                  }}\n                />\n              </Grid>\n            </Grid>\n          </>\n        )}\n      </Box>\n    </>\n  );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","Alert","Chip","IconButton","ClickAwayListener","useImmer","PluginEditor","ErrorBoundary","InfoTooltip","Refresh","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","VARIABLE_TYPES","getVariableDefinitionFromState","getInitialState","DEFAULT_MAX_PREVIEW_VALUES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableListPreview","definition","onRefresh","data","isFetching","error","maxValues","setMaxValues","showAll","undefined","notShown","length","errorMessage","message","direction","spacing","alignItems","description","refreshVariableValues","onClick","size","copyVariableValues","navigator","clipboard","writeText","map","d","label","join","alert","severity","slice","val","sx","mr","mb","value","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","display","padding","theme","borderBottom","palette","divider","marginLeft","disabled","color","overflowY","container","item","xs","required","fullWidth","helperText","v","draft","target","id","labelId","kind","title","textVariableFields","onClickAway","width","pluginType","pluginKindLabel","listVariableFields","plugin","capturing_regexp","e","FallbackComponent","div","resetKeys","checked","allowMultiple","allowAll"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/index.ts"],"sourcesContent":["// Copyright 2022 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';\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,sBAAsB,CAAC"}
+{"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';\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,sBAAsB,CAAC"}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"sourcesContent":["// Copyright 2022 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 { VariableDefinition, TextVariableDefinition, Display } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    capturing_regexp: undefined as string | undefined,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind } = state;\n\n  const commonSpec = {\n    name,\n    display: {\n      name: title,\n    } as Display,\n  };\n\n  if (kind === 'TextVariable') {\n    return {\n      kind,\n      spec: {\n        ...commonSpec,\n        ...state.textVariableFields,\n      },\n    };\n  }\n\n  if (kind === 'ListVariable') {\n    return {\n      kind,\n      spec: {\n        ...commonSpec,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        capturing_regexp: state.listVariableFields.capturing_regexp,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","capturing_regexp","undefined","plugin","kind","allow_all_value","name","title","display","description","getVariableDefinitionFromState","state","commonSpec","allow_multiple","Error"],"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;AAIjC,OAAO,SAASA,eAAe,CAACC,yBAA6C,EAAE;QAuBpEA,GAAsC;QArBtC,MAAgE;IADzE,MAAMC,kBAAkB,GAAG;QACzBC,KAAK,EAAE,CAAA,MAAgE,GAAhE,AAACF,yBAAyB,CAA4BG,IAAI,CAACD,KAAK,cAAhE,MAAgE,cAAhE,MAAgE,GAAI,EAAE;KAC9E,AAAC;IAEF,MAAME,kBAAkB,GAAG;QACzBC,aAAa,EAAE,KAAK;QACpBC,QAAQ,EAAE,KAAK;QACfC,gBAAgB,EAAEC,SAAS;QAC3BC,MAAM,EAAE;YACNC,IAAI,EAAE,EAAE;YACRP,IAAI,EAAE,EAAE;SACT;KACF,AAAC;IACF,IAAIH,yBAAyB,CAACU,IAAI,KAAK,cAAc,EAAE;YAClBV,gBAA8C;QAAjFI,kBAAkB,CAACC,aAAa,GAAGL,CAAAA,gBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACQ,eAAe,cAA9CX,gBAA8C,cAA9CA,gBAA8C,GAAI,KAAK,CAAC;YAC7DA,iBAA8C;QAA5EI,kBAAkB,CAACE,QAAQ,GAAGN,CAAAA,iBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACQ,eAAe,cAA9CX,iBAA8C,cAA9CA,iBAA8C,GAAI,KAAK,CAAC;QACtFI,kBAAkB,CAACG,gBAAgB,GAAGP,yBAAyB,CAACG,IAAI,CAACI,gBAAgB,CAAC;QACtFH,kBAAkB,CAACK,MAAM,GAAGT,yBAAyB,CAACG,IAAI,CAACM,MAAM,CAAC;IACpE,CAAC;IAED,OAAO;QACLG,IAAI,EAAEZ,yBAAyB,CAACG,IAAI,CAACS,IAAI;QACzCC,KAAK,EAAEb,CAAAA,GAAsC,GAAtCA,yBAAyB,CAACG,IAAI,CAACW,OAAO,cAAtCd,GAAsC,WAAM,GAA5CA,KAAAA,CAA4C,GAA5CA,GAAsC,CAAEY,IAAI;QACnDF,IAAI,EAAEV,yBAAyB,CAACU,IAAI;QACpCK,WAAW,EAAE,EAAE;QACfX,kBAAkB;QAClBH,kBAAkB;KACnB,CAAC;AACJ,CAAC;AAID,OAAO,SAASe,8BAA8B,CAACC,KAA0B,EAAsB;IAC7F,MAAM,EAAEL,IAAI,CAAA,EAAEC,KAAK,CAAA,EAAEH,IAAI,CAAA,EAAE,GAAGO,KAAK,AAAC;IAEpC,MAAMC,UAAU,GAAG;QACjBN,IAAI;QACJE,OAAO,EAAE;YACPF,IAAI,EAAEC,KAAK;SACZ;KACF,AAAC;IAEF,IAAIH,IAAI,KAAK,cAAc,EAAE;QAC3B,OAAO;YACLA,IAAI;YACJP,IAAI,EAAE;gBACJ,GAAGe,UAAU;gBACb,GAAGD,KAAK,CAAChB,kBAAkB;aAC5B;SACF,CAAC;IACJ,CAAC;IAED,IAAIS,IAAI,KAAK,cAAc,EAAE;QAC3B,OAAO;YACLA,IAAI;YACJP,IAAI,EAAE;gBACJ,GAAGe,UAAU;gBACbC,cAAc,EAAEF,KAAK,CAACb,kBAAkB,CAACC,aAAa;gBACtDM,eAAe,EAAEM,KAAK,CAACb,kBAAkB,CAACE,QAAQ;gBAClDC,gBAAgB,EAAEU,KAAK,CAACb,kBAAkB,CAACG,gBAAgB;gBAC3DE,MAAM,EAAEQ,KAAK,CAACb,kBAAkB,CAACK,MAAM;aACxC;SACF,CAAC;IACJ,CAAC;IACD,MAAM,IAAIW,KAAK,CAAC,CAAC,uBAAuB,EAAEV,IAAI,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.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\nimport { VariableDefinition, TextVariableDefinition, Display } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    capturing_regexp: undefined as string | undefined,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind } = state;\n\n  const commonSpec = {\n    name,\n    display: {\n      name: title,\n    } as Display,\n  };\n\n  if (kind === 'TextVariable') {\n    return {\n      kind,\n      spec: {\n        ...commonSpec,\n        ...state.textVariableFields,\n      },\n    };\n  }\n\n  if (kind === 'ListVariable') {\n    return {\n      kind,\n      spec: {\n        ...commonSpec,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        capturing_regexp: state.listVariableFields.capturing_regexp,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","capturing_regexp","undefined","plugin","kind","allow_all_value","name","title","display","description","getVariableDefinitionFromState","state","commonSpec","allow_multiple","Error"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA4D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASzG,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsDpE"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA2B,OAAO,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAU1F,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsCpE"}

package/dist/components/Variables/VariableList.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -11,90 +11,63 @@
 // 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 { Button, Stack, Box, AppBar, useScrollTrigger, IconButton } from '@mui/material';
-import PencilIcon from 'mdi-material-ui/Pencil';
+import { useState } from 'react';
+import { AppBar, Box, IconButton, useScrollTrigger } from '@mui/material';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
-import { Drawer } from '@perses-dev/components';
-import { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';
+import { useTemplateVariableDefinitions } from '../../context';
 import { TemplateVariable } from './Variable';
-import { VariableEditor } from './VariableEditor';
+const VARIABLE_INPUT_MIN_WIDTH = '120px';
+const VARIABLE_INPUT_MAX_WIDTH = '240px';
 export function TemplateVariableList(props) {
-    const [isEditing, setIsEditing] = useState(false);
     const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
     const variableDefinitions = useTemplateVariableDefinitions();
-    const { isEditMode  } = useEditMode();
-    const { setVariableDefinitions  } = useTemplateVariableActions();
     const scrollTrigger = useScrollTrigger({
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
-    const onClose = ()=>{
-        setIsEditing(false);
-    };
-    return /*#__PURE__*/ _jsxs(Box, {
-        children: [
-            /*#__PURE__*/ _jsx(Drawer, {
-                isOpen: isEditing,
-                onClose: onClose,
-                PaperProps: {
-                    sx: {
-                        width: '50%'
-                    }
-                },
-                children: /*#__PURE__*/ _jsx(VariableEditor, {
-                    variableDefinitions: variableDefinitions,
-                    onCancel: onClose,
-                    onChange: (v)=>{
-                        setVariableDefinitions(v);
-                        setIsEditing(false);
-                    }
-                })
-            }),
-            isEditMode && /*#__PURE__*/ _jsx(Box, {
-                pb: 2,
-                children: /*#__PURE__*/ _jsx(Button, {
-                    onClick: ()=>setIsEditing(true),
-                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
-                    children: "Edit Variables"
-                })
-            }),
-            /*#__PURE__*/ _jsx(AppBar, {
-                color: 'inherit',
-                position: isSticky ? 'fixed' : 'static',
-                elevation: isSticky ? 4 : 0,
-                sx: {
-                    ...props.sx
-                },
-                children: /*#__PURE__*/ _jsxs(Box, {
-                    display: 'flex',
-                    justifyContent: "space-between",
-                    my: isSticky ? 2 : 0,
-                    ml: isSticky ? 2 : 0,
-                    children: [
-                        /*#__PURE__*/ _jsx(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            children: variableDefinitions.map((v)=>{
-                                var ref;
-                                /*#__PURE__*/ return _jsx(Box, {
-                                    display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                                    children: /*#__PURE__*/ _jsx(TemplateVariable, {
-                                        name: v.spec.name
-                                    }, v.spec.name)
-                                }, v.spec.name);
-                            })
-                        }),
-                        props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: ()=>setIsPin(!isPin),
-                            children: isPin ? /*#__PURE__*/ _jsx(PinOutline, {}) : /*#__PURE__*/ _jsx(PinOffOutline, {})
-                        })
-                    ]
-                })
+    return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
+    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
+    /*#__PURE__*/ _jsx(Box, {
+        marginBottom: -1,
+        "data-testid": "variable-list",
+        children: /*#__PURE__*/ _jsx(AppBar, {
+            color: "inherit",
+            position: isSticky ? 'fixed' : 'static',
+            elevation: isSticky ? 4 : 0,
+            sx: {
+                backgroundColor: 'inherit',
+                ...props.sx
+            },
+            children: /*#__PURE__*/ _jsxs(Box, {
+                display: "flex",
+                flexWrap: "wrap",
+                alignItems: "start",
+                my: isSticky ? 2 : 0,
+                ml: isSticky ? 2 : 0,
+                children: [
+                    variableDefinitions.map((v)=>{
+                        var ref;
+                        /*#__PURE__*/ return _jsx(Box, {
+                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                            minWidth: VARIABLE_INPUT_MIN_WIDTH,
+                            maxWidth: VARIABLE_INPUT_MAX_WIDTH,
+                            marginBottom: 1,
+                            marginRight: 1,
+                            "data-testid": "template-variable",
+                            children: /*#__PURE__*/ _jsx(TemplateVariable, {
+                                name: v.spec.name
+                            }, v.spec.name)
+                        }, v.spec.name);
+                    }),
+                    props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
+                        onClick: ()=>setIsPin(!isPin),
+                        children: isPin ? /*#__PURE__*/ _jsx(PinOutline, {}) : /*#__PURE__*/ _jsx(PinOffOutline, {})
+                    })
+                ]
             })
-        ]
-    });
+        })
+    }));
 }
 
 //# sourceMappingURL=VariableList.js.map