@grafana/ui
Version:
Grafana Components Library
1 lines • 5.47 kB
Source Map (JSON)
{"version":3,"file":"SecretTextArea.cjs","sources":["../../../../src/components/SecretTextArea/SecretTextArea.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useState } from 'react';\n\nimport { type 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":["css","useState","useStyles2","t","Stack","jsxs","Box","jsx","IconButton","TextArea","cx","Button"],"mappings":";;;;;;;;;;;;;;;;AAsBO,MAAM,eAAA,GAAkB;AACxB,MAAM,iBAAA,GAAoB;AAEjC,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,iBAAiBA,OAAA,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,gBAAgBA,OAAA,CAAI;AAAA,MAClB,kBAAA,EAAoB;AAAA,KACrB,CAAA;AAAA,IACD,iBAAiBA,OAAA,CAAI;AAAA,MACnB,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,cAAcA,OAAA,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,GAAIC,eAAS,KAAK,CAAA;AAC1D,EAAA,MAAM,MAAA,GAASC,wBAAW,SAAS,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,iBAChBC,MAAA,CAAE,0CAAA,EAA4C,qBAAqB,CAAA,GACnEA,MAAA,CAAE,4CAA4C,qBAAqB,CAAA;AAEvE,EAAA,uCACGC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACC,OAAA,EAAA,EAAI,IAAA,EAAM,IAAA,GAAO,CAAA,GAAI,KAAA,CAAA,EACnB,QAAA,EAAA;AAAA,MAAA,CAAC,YAAA,oBACAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,eAAA,EACrB,QAAA,EAAA;AAAA,wBAAAE,cAAA;AAAA,UAACC,qBAAA;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,wBACAD,cAAA,CAACE,iBAAA,EAAA,EAAU,GAAG,KAAA,EAAO,SAAA,EAAWC,MAAA,CAAG,CAAC,cAAA,IAAkB,MAAA,CAAO,cAAA,EAAgB,KAAA,CAAM,SAAS,CAAA,EAAG;AAAA,OAAA,EACjG,CAAA;AAAA,MAED,YAAA,oBACCH,cAAA;AAAA,QAACE,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,IAAA,EAAM,CAAA;AAAA,UACN,QAAA,EAAU,IAAA;AAAA,UACV,KAAA,EAAO,eAAA;AAAA,UACP,SAAA,EAAWC,MAAA,CAAG,MAAA,CAAO,eAAe;AAAA;AAAA;AACtC,KAAA,EAEJ,CAAA;AAAA,IACC,gCACCH,cAAA,CAACI,aAAA,EAAA,EAAO,SAAS,OAAA,EAAS,OAAA,EAAQ,aAC/B,QAAA,EAAA,iBAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;;;"}