{"version":3,"file":"VariablesInputModal.cjs","sources":["../../../../src/components/Actions/VariablesInputModal.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { ActionModel, ActionVariableInput } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button } from '../Button/Button';\nimport { Field } from '../Forms/Field';\nimport { FieldSet } from '../Forms/FieldSet';\nimport { Input } from '../Input/Input';\nimport { Modal } from '../Modal/Modal';\n\ninterface Props {\n  action: ActionModel;\n  onDismiss: () => void;\n  onShowConfirm: () => void;\n  variables: ActionVariableInput;\n  setVariables: (vars: ActionVariableInput) => void;\n}\n\n/**\n * @internal\n */\nexport function VariablesInputModal({ action, onDismiss, onShowConfirm, variables, setVariables }: Props) {\n  const styles = useStyles2(getStyles);\n\n  const onModalContinue = () => {\n    onDismiss();\n    onShowConfirm();\n  };\n\n  return (\n    <Modal\n      isOpen={true}\n      title={t('grafana-ui.action-editor.button.action-variables-title', 'Action variables')}\n      onDismiss={onDismiss}\n      className={styles.variablesModal}\n    >\n      <FieldSet>\n        {action.variables!.map((variable) => (\n          <Field key={variable.name} label={variable.name}>\n            <Input\n              type=\"text\"\n              value={variables[variable.key] ?? ''}\n              onChange={(e) => {\n                setVariables({ ...variables, [variable.key]: e.currentTarget.value });\n              }}\n              placeholder={t('grafana-ui.action-editor.button.variable-value-placeholder', 'Value')}\n              width={20}\n            />\n          </Field>\n        ))}\n      </FieldSet>\n      <Modal.ButtonRow>\n        <Button variant=\"secondary\" onClick={onDismiss}>\n          {t('grafana-ui.action-editor.close', 'Close')}\n        </Button>\n        <Button variant=\"primary\" onClick={onModalContinue}>\n          {t('grafana-ui.action-editor.continue', 'Continue')}\n        </Button>\n      </Modal.ButtonRow>\n    </Modal>\n  );\n}\n\nconst getStyles = () => {\n  return {\n    variablesModal: css({\n      zIndex: 10000,\n    }),\n  };\n};\n"],"names":["useStyles2","jsxs","Modal","t","jsx","FieldSet","Field","Input","Button","css"],"mappings":";;;;;;;;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,MAAA,EAAQ,WAAW,aAAA,EAAe,SAAA,EAAW,cAAa,EAAU;AACxG,EAAA,MAAM,MAAA,GAASA,wBAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,SAAA,EAAU;AACV,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA;AAEA,EAAA,uBACEC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,IAAA;AAAA,MACR,KAAA,EAAOC,MAAA,CAAE,wDAAA,EAA0D,kBAAkB,CAAA;AAAA,MACrF,SAAA;AAAA,MACA,WAAW,MAAA,CAAO,cAAA;AAAA,MAElB,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,iBAAA,EAAA,EACE,QAAA,EAAA,MAAA,CAAO,SAAA,CAAW,GAAA,CAAI,CAAC,QAAA,KAAU;AAvC1C,UAAA,IAAA,EAAA;AAwCU,UAAA,uBAAAD,cAAA,CAACE,WAAA,EAAA,EAA0B,KAAA,EAAO,QAAA,CAAS,IAAA,EACzC,QAAA,kBAAAF,cAAA;AAAA,YAACG,WAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,MAAA;AAAA,cACL,KAAA,EAAA,CAAO,EAAA,GAAA,SAAA,CAAU,QAAA,CAAS,GAAG,MAAtB,IAAA,GAAA,EAAA,GAA2B,EAAA;AAAA,cAClC,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,gBAAA,YAAA,CAAa,EAAE,GAAG,SAAA,EAAW,CAAC,QAAA,CAAS,GAAG,GAAG,CAAA,CAAE,aAAA,CAAc,KAAA,EAAO,CAAA;AAAA,cACtE,CAAA;AAAA,cACA,WAAA,EAAaJ,MAAA,CAAE,4DAAA,EAA8D,OAAO,CAAA;AAAA,cACpF,KAAA,EAAO;AAAA;AAAA,WACT,EAAA,EATU,SAAS,IAUrB,CAAA;AAAA,QAAA,CACD,CAAA,EACH,CAAA;AAAA,wBACAF,eAAA,CAACC,WAAA,CAAM,SAAA,EAAN,EACC,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACI,aAAA,EAAA,EAAO,SAAQ,WAAA,EAAY,OAAA,EAAS,WAClC,QAAA,EAAAL,MAAA,CAAE,gCAAA,EAAkC,OAAO,CAAA,EAC9C,CAAA;AAAA,0BACAC,cAAA,CAACI,iBAAO,OAAA,EAAQ,SAAA,EAAU,SAAS,eAAA,EAChC,QAAA,EAAAL,MAAA,CAAE,mCAAA,EAAqC,UAAU,CAAA,EACpD;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,YAAY,MAAM;AACtB,EAAA,OAAO;AAAA,IACL,gBAAgBM,OAAA,CAAI;AAAA,MAClB,MAAA,EAAQ;AAAA,KACT;AAAA,GACH;AACF,CAAA;;;;"}