Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add user and org id to about page #18593

Merged
merged 1 commit into from
Jun 18, 2020
Merged

feat: add user and org id to about page #18593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
1. [18361](https://github.com/influxdata/influxdb/pull/18361): Tokens list is now consistent with the other resource lists
1. [18346](https://github.com/influxdata/influxdb/pull/18346): Reduce the number of variables being hydrated when toggling variables
1. [18447](https://github.com/influxdata/influxdb/pull/18447): Redesign dashboard cell loading indicator to be more obvious
1. [18593](https://github.com/influxdata/influxdb/pull/18593): Add copyable User and Organization Ids to About page

## v2.0.0-beta.11 [2020-05-26]

Expand Down
132 changes: 95 additions & 37 deletions ui/src/organizations/components/OrgProfileTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Libraries
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import {WithRouterProps, withRouter} from 'react-router'

import _ from 'lodash'
Expand All @@ -17,53 +18,92 @@ import {
Gradients,
InfluxColors,
JustifyContent,
Grid,
Columns,
} from '@influxdata/clockface'
import {ErrorHandling} from 'src/shared/decorators/errors'
import CodeSnippet from 'src/shared/components/CodeSnippet'

import {getOrg} from 'src/organizations/selectors'
import {
copyToClipboardSuccess,
copyToClipboardFailed,
} from 'src/shared/copy/notifications'

// Types
import {ButtonType} from 'src/clockface'
import {AppState, Organization} from 'src/types'
import {MeState} from 'src/shared/reducers/me'

type Props = WithRouterProps
interface StateProps {
me: MeState
org: Organization
}

type Props = StateProps & WithRouterProps

@ErrorHandling
class OrgProfileTab extends PureComponent<Props> {
public render() {
return (
<Panel backgroundColor={InfluxColors.Onyx}>
<Panel.Header size={ComponentSize.Small}>
<h4>Organization Profile</h4>
</Panel.Header>
<Panel.Body size={ComponentSize.Small}>
<Form onSubmit={this.handleShowEditOverlay}>
<Panel gradient={Gradients.DocScott}>
<Panel.Header size={ComponentSize.ExtraSmall}>
<h5>Danger Zone!</h5>
</Panel.Header>
<Panel.Body size={ComponentSize.ExtraSmall}>
<FlexBox
stretchToFitWidth={true}
alignItems={AlignItems.Center}
direction={FlexDirection.Row}
justifyContent={JustifyContent.SpaceBetween}
>
<div>
<h5 style={{marginBottom: '0'}}>Rename Organization</h5>
<p style={{marginTop: '2px'}}>
This action can have wide-reaching unintended
consequences.
</p>
</div>
<Button
text="Rename"
icon={IconFont.Pencil}
type={ButtonType.Submit}
/>
</FlexBox>
</Panel.Body>
</Panel>
</Form>
</Panel.Body>
</Panel>
<>
<Grid.Column widthXS={Columns.Twelve} widthSM={Columns.Six}>
<Panel backgroundColor={InfluxColors.Onyx}>
<Panel.Header size={ComponentSize.Small}>
<h4>Organization Profile</h4>
</Panel.Header>
<Panel.Body size={ComponentSize.Small}>
<Form onSubmit={this.handleShowEditOverlay}>
<Panel gradient={Gradients.DocScott}>
<Panel.Header size={ComponentSize.ExtraSmall}>
<h5>Danger Zone!</h5>
</Panel.Header>
<Panel.Body size={ComponentSize.ExtraSmall}>
<FlexBox
stretchToFitWidth={true}
alignItems={AlignItems.Center}
direction={FlexDirection.Row}
justifyContent={JustifyContent.SpaceBetween}
>
<div>
<h5 style={{marginBottom: '0'}}>Rename Organization</h5>
<p style={{marginTop: '2px'}}>
This action can have wide-reaching unintended
consequences.
</p>
</div>
<Button
text="Rename"
icon={IconFont.Pencil}
type={ButtonType.Submit}
/>
</FlexBox>
</Panel.Body>
</Panel>
</Form>
</Panel.Body>
</Panel>
</Grid.Column>
<Grid.Column widthXS={Columns.Twelve} widthSM={Columns.Six}>
<Panel>
<Panel.Header size={ComponentSize.ExtraSmall}>
<h4>Common Ids</h4>
</Panel.Header>
<Panel.Body>
<CodeSnippet
copyText={this.props.me.id}
label="My User Id"
onCopyText={this.generateCopyText('User Id')}
/>
<CodeSnippet
copyText={this.props.org.id}
label="Organization Id"
onCopyText={this.generateCopyText('Organization Id')}
/>
</Panel.Body>
</Panel>
</Grid.Column>
</>
)
}

Expand All @@ -75,6 +115,24 @@ class OrgProfileTab extends PureComponent<Props> {

router.push(`/orgs/${orgID}/settings/about/rename`)
}

private generateCopyText = title => (text, copySucceeded) => {
if (copySucceeded) {
return copyToClipboardSuccess(text, title)
} else {
return copyToClipboardFailed(text, title)
}
}
}

const mstp = (state: AppState) => {
return {
org: getOrg(state),
me: state.me,
}
}

export default withRouter<{}>(OrgProfileTab)
export default connect<StateProps>(
mstp,
null
)(withRouter(OrgProfileTab))
6 changes: 2 additions & 4 deletions ui/src/organizations/containers/OrgProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {connect} from 'react-redux'
import {ErrorHandling} from 'src/shared/decorators/errors'
import OrgTabbedPage from 'src/organizations/components/OrgTabbedPage'
import OrgHeader from 'src/organizations/components/OrgHeader'
import {Grid, Columns, Page} from '@influxdata/clockface'
import {Grid, Page} from '@influxdata/clockface'

// Utils
import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
Expand All @@ -32,9 +32,7 @@ class OrgProfilePage extends Component<StateProps> {
<OrgTabbedPage activeTab="about" orgID={org.id}>
<Grid>
<Grid.Row>
<Grid.Column widthXS={Columns.Twelve} widthSM={Columns.Six}>
<OrgProfileTab />
</Grid.Column>
<OrgProfileTab />
</Grid.Row>
</Grid>
</OrgTabbedPage>
Expand Down