{"version":3,"file":"SecretTextArea.mjs","sources":["../../../../src/components/SecretTextArea/SecretTextArea.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Box } from '../Layout/Box/Box';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { TextArea } from '../TextArea/TextArea';\n\nexport type Props = React.ComponentProps<typeof TextArea> & {\n  /** TRUE if the secret was already configured. (It is needed as often the backend doesn't send back the actual secret, only the information that it was configured) */\n  isConfigured: boolean;\n  /** Called when the user clicks on the \"Reset\" button in order to clear the secret */\n  onReset: () => void;\n  /** If true, the text area will grow to fill available width. */\n  grow?: boolean;\n};\n\nexport const CONFIGURED_TEXT = 'configured';\nexport const RESET_BUTTON_TEXT = 'Reset';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    configuredStyle: css({\n      minHeight: theme.spacing(theme.components.height.md),\n      paddingTop: theme.spacing(0.5) /** Needed to mimic vertically centered text in an input box */,\n      resize: 'none',\n    }),\n    maskedTextArea: css({\n      WebkitTextSecurity: 'disc',\n    }),\n    textAreaWrapper: css({\n      position: 'relative',\n    }),\n    toggleButton: css({\n      position: 'absolute',\n      top: theme.spacing(1),\n      right: theme.spacing(3),\n      zIndex: 1,\n    }),\n  };\n};\n\n/**\n * Text area that does not disclose an already configured value but lets the user reset the current value and enter a new one.\n * Typically useful for asymmetric cryptography keys.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-secrettextarea--docs\n */\nexport const SecretTextArea = ({ isConfigured, onReset, grow, ...props }: Props) => {\n  const [contentVisible, setContentVisible] = useState(false);\n  const styles = useStyles2(getStyles);\n  const toggleLabel = contentVisible\n    ? t('grafana-ui.secret-text-area.hide-content', 'Hide secret content')\n    : t('grafana-ui.secret-text-area.show-content', 'Show secret content');\n\n  return (\n    <Stack>\n      <Box grow={grow ? 1 : undefined}>\n        {!isConfigured && (\n          <div className={styles.textAreaWrapper}>\n            <IconButton\n              className={styles.toggleButton}\n              name={contentVisible ? 'eye-slash' : 'eye'}\n              onClick={() => setContentVisible(!contentVisible)}\n              aria-label={toggleLabel}\n              tooltip={toggleLabel}\n              size=\"sm\"\n            />\n            <TextArea {...props} className={cx(!contentVisible && styles.maskedTextArea, props.className)} />\n          </div>\n        )}\n        {isConfigured && (\n          <TextArea\n            {...props}\n            rows={1}\n            disabled={true}\n            value={CONFIGURED_TEXT}\n            className={cx(styles.configuredStyle)}\n          />\n        )}\n      </Box>\n      {isConfigured && (\n        <Button onClick={onReset} variant=\"secondary\">\n          {RESET_BUTTON_TEXT}\n        </Button>\n      )}\n    </Stack>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBO,MAAM,eAAA,GAAkB;AACxB,MAAM,iBAAA,GAAoB;AAEjC,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,iBAAiB,GAAA,CAAI;AAAA,MACnB,WAAW,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,MACnD,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC7B,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,IACD,gBAAgB,GAAA,CAAI;AAAA,MAClB,kBAAA,EAAoB;AAAA,KACrB,CAAA;AAAA,IACD,iBAAiB,GAAA,CAAI;AAAA,MACnB,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACtB,MAAA,EAAQ;AAAA,KACT;AAAA,GACH;AACF,CAAA;AAQO,MAAM,cAAA,GAAiB,CAAC,EAAE,YAAA,EAAc,SAAS,IAAA,EAAM,GAAG,OAAM,KAAa;AAClF,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1D,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,iBAChB,CAAA,CAAE,0CAAA,EAA4C,qBAAqB,CAAA,GACnE,CAAA,CAAE,4CAA4C,qBAAqB,CAAA;AAEvE,EAAA,4BACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAM,IAAA,GAAO,CAAA,GAAI,KAAA,CAAA,EACnB,QAAA,EAAA;AAAA,MAAA,CAAC,YAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,eAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,YAAA;AAAA,YAClB,IAAA,EAAM,iBAAiB,WAAA,GAAc,KAAA;AAAA,YACrC,OAAA,EAAS,MAAM,iBAAA,CAAkB,CAAC,cAAc,CAAA;AAAA,YAChD,YAAA,EAAY,WAAA;AAAA,YACZ,OAAA,EAAS,WAAA;AAAA,YACT,IAAA,EAAK;AAAA;AAAA,SACP;AAAA,wBACA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,KAAA,EAAO,SAAA,EAAW,EAAA,CAAG,CAAC,cAAA,IAAkB,MAAA,CAAO,cAAA,EAAgB,KAAA,CAAM,SAAS,CAAA,EAAG;AAAA,OAAA,EACjG,CAAA;AAAA,MAED,YAAA,oBACC,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,IAAA,EAAM,CAAA;AAAA,UACN,QAAA,EAAU,IAAA;AAAA,UACV,KAAA,EAAO,eAAA;AAAA,UACP,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,eAAe;AAAA;AAAA;AACtC,KAAA,EAEJ,CAAA;AAAA,IACC,gCACC,GAAA,CAAC,MAAA,EAAA,EAAO,SAAS,OAAA,EAAS,OAAA,EAAQ,aAC/B,QAAA,EAAA,iBAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}