feat: add user and org id to about page

influxdata · Jun 18, 2020 · c3b3dda · c3b3dda
1 parent a4e4be7
commit c3b3dda
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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 Oganization Ids to About page
 
 ## v2.0.0-beta.11 [2020-05-26]
 

diff --git a/ui/src/organizations/components/OrgProfileTab.tsx b/ui/src/organizations/components/OrgProfileTab.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
 import {WithRouterProps, withRouter} from 'react-router'
 
 import _ from 'lodash'
@@ -17,53 +18,93 @@ import {
   Gradients,
   InfluxColors,
   JustifyContent,
+  Grid,
+  Label,
+  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 | DispatchProps | 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>
+      </>
     )
   }
 
@@ -75,6 +116,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))
diff --git a/ui/src/organizations/containers/OrgProfilePage.tsx b/ui/src/organizations/containers/OrgProfilePage.tsx
@@ -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>