From 071a109eaed4a2d5ace53ce4a5cc47868540cd8f Mon Sep 17 00:00:00 2001 From: Palak Bhojani Date: Mon, 7 Jan 2019 16:00:19 -0800 Subject: [PATCH] Display token on my account token overlay --- .../components/overlays/OverlayContainer.tsx | 2 +- ui/src/me/components/account/Tokens.tsx | 3 +- ui/src/me/components/account/TokensList.tsx | 11 +-- .../components/account/ViewTokenOverlay.tsx | 8 +++ .../ViewTokenOverlay.test.tsx.snap | 41 ++++++++++- ui/src/onboarding/OnboardingWizard.scss | 14 ---- .../verifyStep/TelegrafInstructions.tsx | 68 ++----------------- .../TelegrafInstructions.test.tsx.snap | 52 +++----------- ui/src/shared/components/CopyText.scss | 13 ++++ ui/src/shared/components/CopyText.tsx | 67 ++++++++++++++++++ ui/src/style/chronograf.scss | 1 + 11 files changed, 152 insertions(+), 128 deletions(-) create mode 100644 ui/src/shared/components/CopyText.scss create mode 100644 ui/src/shared/components/CopyText.tsx diff --git a/ui/src/clockface/components/overlays/OverlayContainer.tsx b/ui/src/clockface/components/overlays/OverlayContainer.tsx index 14d1d6ac6b..1094ad7f38 100644 --- a/ui/src/clockface/components/overlays/OverlayContainer.tsx +++ b/ui/src/clockface/components/overlays/OverlayContainer.tsx @@ -7,7 +7,7 @@ interface Props { class OverlayContainer extends Component { public static defaultProps: Partial = { - maxWidth: 600, + maxWidth: 800, } public render() { diff --git a/ui/src/me/components/account/Tokens.tsx b/ui/src/me/components/account/Tokens.tsx index bc9c5cc435..caf4ca852b 100644 --- a/ui/src/me/components/account/Tokens.tsx +++ b/ui/src/me/components/account/Tokens.tsx @@ -13,6 +13,7 @@ import {getAuthorizations} from 'src/authorizations/apis' // Actions import {notify} from 'src/shared/actions/notifications' +import {NotificationAction} from 'src/types' // Types import {Authorization} from 'src/api' @@ -27,7 +28,7 @@ enum AuthSearchKeys { } interface Props { - onNotify: typeof notify + onNotify: NotificationAction } export class Tokens extends PureComponent { diff --git a/ui/src/me/components/account/TokensList.tsx b/ui/src/me/components/account/TokensList.tsx index 04b589e725..aee738520b 100644 --- a/ui/src/me/components/account/TokensList.tsx +++ b/ui/src/me/components/account/TokensList.tsx @@ -10,16 +10,16 @@ import { } from 'src/clockface' import TokenRow from 'src/me/components/account/TokenRow' -// Actions -import {notify} from 'src/shared/actions/notifications' - // Types import {Authorization} from 'src/api' import ViewTokenOverlay from './ViewTokenOverlay' +// Actions +import {NotificationAction} from 'src/types' + interface Props { auths: Authorization[] - onNotify: typeof notify + onNotify: NotificationAction searchTerm: string } @@ -38,7 +38,7 @@ export default class TokenList extends PureComponent { } public render() { - const {auths} = this.props + const {auths, onNotify} = this.props const {isTokenOverlayVisible, authInView} = this.state return ( @@ -62,6 +62,7 @@ export default class TokenList extends PureComponent { diff --git a/ui/src/me/components/account/ViewTokenOverlay.tsx b/ui/src/me/components/account/ViewTokenOverlay.tsx index 5387a0f3dc..2743d0e9ae 100644 --- a/ui/src/me/components/account/ViewTokenOverlay.tsx +++ b/ui/src/me/components/account/ViewTokenOverlay.tsx @@ -7,10 +7,14 @@ import PermissionsWidget, { PermissionsWidgetMode, PermissionsWidgetSelection, } from 'src/shared/components/permissionsWidget/PermissionsWidget' +import CopyText from 'src/shared/components/CopyText' // Types import {Authorization, Permission} from 'src/api' +// Actions +import {NotificationAction} from 'src/types' + const {Orgs, Users, Buckets, Tasks} = Permission.ResourceEnum const {Write, Read} = Permission.ActionEnum @@ -54,6 +58,7 @@ const testPerms: TestPermission[] = [ ] interface Props { + onNotify: NotificationAction auth: Authorization onDismissOverlay: () => void } @@ -63,10 +68,13 @@ const actions = [Read, Write] export default class ViewTokenOverlay extends PureComponent { public render() { const {description} = this.props.auth + const {onNotify} = this.props + return ( +
@@ -61,6 +61,43 @@ exports[`Account rendering renders! 1`] = `
+ +

+ ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA== + + + + +

+ { public render() { - const exportToken = `export INFLUX_TOKEN=${this.props.authToken}` - const configScript = `telegraf -config http://localhost:9999/api/v2/telegrafs/${ - this.props.configID - }` + const {notify, authToken, configID} = this.props + const exportToken = `export INFLUX_TOKEN=${authToken}` + const configScript = `telegraf -config http://localhost:9999/api/v2/telegrafs/${configID}` return ( <>

Listen for Streaming Data

@@ -47,61 +41,13 @@ class TelegrafInstructions extends PureComponent { After installing the telegraf client, save this environment variable. run the following command.

-

- {exportToken} - -

) } - - private handleClickCopy = (e: MouseEvent) => { - e.stopPropagation() - e.preventDefault() - } - - private handleCopyAttempt = ( - copiedText: string, - isSuccessful: boolean - ): void => { - const {notify} = this.props - const text = copiedText.slice(0, 30).trimRight() - const truncatedText = `${text}...` - const title = 'Script ' - - if (isSuccessful) { - notify(copyToClipboardSuccess(truncatedText, title)) - } else { - notify(copyToClipboardFailed(truncatedText, title)) - } - } } export default TelegrafInstructions diff --git a/ui/src/onboarding/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap b/ui/src/onboarding/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap index 103eb71126..9befc2874d 100644 --- a/ui/src/onboarding/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap +++ b/ui/src/onboarding/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap @@ -28,53 +28,17 @@ exports[`TelegrafInstructions matches snapshot 1`] = `

After installing the telegraf client, save this environment variable. run the following command.

-

- export INFLUX_TOKEN= - -

`; diff --git a/ui/src/shared/components/CopyText.scss b/ui/src/shared/components/CopyText.scss new file mode 100644 index 0000000000..9dab1e490a --- /dev/null +++ b/ui/src/shared/components/CopyText.scss @@ -0,0 +1,13 @@ +.script-snippet { + background-color: $g4-onyx; + border-radius: $radius; + margin: $ix-marg-a 0; + padding: $ix-marg-b; + overflow-x: auto; + font-family: 'RobotoMono', monospace; + } + + .copy-button{ + float: right; + margin-left:10px auto; + } \ No newline at end of file diff --git a/ui/src/shared/components/CopyText.tsx b/ui/src/shared/components/CopyText.tsx new file mode 100644 index 0000000000..3745e5083a --- /dev/null +++ b/ui/src/shared/components/CopyText.tsx @@ -0,0 +1,67 @@ +// Libraries +import React, {PureComponent, MouseEvent} from 'react' +import _ from 'lodash' +import CopyToClipboard from 'react-copy-to-clipboard' + +// Decorator +import {ErrorHandling} from 'src/shared/decorators/errors' + +// Components +import {Button, ComponentSize, ComponentColor} from 'src/clockface' + +// Actions +import {NotificationAction} from 'src/types' +import { + copyToClipboardSuccess, + copyToClipboardFailed, +} from 'src/shared/copy/notifications' + +export interface Props { + copyText: string + notify: NotificationAction +} + +@ErrorHandling +class CopyText extends PureComponent { + public render() { + const {copyText} = this.props + return ( +

+ {copyText} + +