import React from 'react';
import PropTypes from 'prop-types';
import Relay from 'react-relay/classic';

import Panel from '../../shared/Panel';
import RevealButton from '../../shared/RevealButton';

class AgentTokenItem extends React.Component {
  static propTypes = {
    agentToken: PropTypes.shape({
      id: PropTypes.string.isRequired,
      description: PropTypes.string.isRequired,
      token: PropTypes.string.isRequired
    }).isRequired,
    showDescription: PropTypes.bool
  };

  render() {
    return (
      <Panel.Row key={this.props.agentToken.id}>
        {this.renderDescription()}
        <RevealButton caption="Reveal Agent Token">
          <code className="red monospace" style={{ wordWrap: "break-word" }}>
            {this.props.agentToken.token}
          </code>
        </RevealButton>
      </Panel.Row>
    );
  }

  renderDescription() {
    if (this.props.showDescription) {
      return (
        <small className="dark-gray mb1 block">
          {this.props.agentToken.description}
        </small>
      );
    }
  }
}

export default Relay.createContainer(AgentTokenItem, {
  fragments: {
    agentToken: () => Relay.QL`
      fragment on AgentToken {
        id
        description
        token
      }
    `
  }
});

@@ -63,21 +63,52 @@
 %0Aimport 
-Relay
+%7B createFragmentContainer, graphql %7D
  from 'r
@@ -123,14 +123,13 @@
 ay/c
-lassic
+ompat
 ';%0A%0A
@@ -1100,20 +1100,22 @@
 ult 
-Relay.
 create
+Fragment
 Cont
@@ -1144,67 +1144,67 @@
 %7B%0A  
-fr
 ag
-m
 ent
-s: %7B%0A    agentToken: () =%3E Relay.QL%60%0A      fr
+Token: graphql%60%0A    fragment AgentTokenItem_
 ag
-m
 ent
+Token
  on 
@@ -1222,18 +1222,16 @@
 %7B%0A      
-  
 id%0A     
@@ -1227,26 +1227,24 @@
    id%0A      
- 
- 
 description%0A
@@ -1245,26 +1245,24 @@
 ption%0A      
-  
 token%0A      
@@ -1263,21 +1263,13 @@
     
-  
 %7D%0A  
- 
- %60%0A  %7D
+%60
 %0A%7D);

Update `Index/AgentTokenItem.js` to Relay Modern