Show deprecation information in the Docs sidebar

The GraphQL specification [states clearly](https://facebook.github.io/graphql/#sec-Deprecation):

> Tools built using GraphQL introspection should respect deprecation by
> discouraging deprecated use through information hiding or
> developer‐facing warnings.

Currently, however, GraphiQL doesn't give any indication of whether or
not a field or enum value is deprecated. This patch rectifies this by
adding some red text next to field names and enum value names that just
says "(DEPRECATED)". If a deprecation reason is given for a field or
enum value, that is rendered (also in red) underneath the field or
value's description.

Closes graphql#34.

Signed-off-by: David Celis <me@davidcel.is>

src/components/DocExplorer.js

@@ -376,7 +376,7 @@ class SchemaDoc extends React.Component {
 
     return (
       <div>
-        <Description
+        <MarkdownContent
           className="doc-type-description"
           markdown={
             'A GraphQL schema provides a root type for each kind of operation.'
@@ -495,6 +495,10 @@ class TypeDoc extends React.Component {
                 {argsDef && [ '(', <span key="args">{argsDef}</span>, ')' ]}
                 {': '}
                 <TypeLink type={field.type} onClick={onClickType} />
+                {
+                  field.isDeprecated &&
+                    <span className="doc-alert-text">{' (DEPRECATED)'}</span>
+                }
               </div>
             );
           })}
@@ -513,11 +517,22 @@ class TypeDoc extends React.Component {
             <div key={value.name} className="doc-category-item">
               <div className="enum-value">
                 {value.name}
+                {
+                  value.isDeprecated &&
+                    <span className="doc-alert-text">{' (DEPRECATED)'}</span>
+                }
               </div>
-              <Description
+              <MarkdownContent
                 className="doc-value-description"
                 markdown={value.description}
               />
+              {
+                value.deprecationReason &&
+                  <MarkdownContent
+                    className="doc-alert-text"
+                    markdown={value.deprecationReason}
+                  />
+              }
             </div>
           )}
         </div>
@@ -526,7 +541,7 @@ class TypeDoc extends React.Component {
 
     return (
       <div>
-        <Description
+        <MarkdownContent
           className="doc-type-description"
           markdown={type.description || 'No Description'}
         />
@@ -568,7 +583,7 @@ class FieldDoc extends React.Component {
                 {': '}
                 <TypeLink type={arg.type} onClick={this.props.onClickType} />
               </div>
-              <Description
+              <MarkdownContent
                 className="doc-value-description"
                 markdown={arg.description}
               />
@@ -580,10 +595,17 @@ class FieldDoc extends React.Component {
 
     return (
       <div>
-        <Description
+        <MarkdownContent
           className="doc-type-description"
           markdown={field.description || 'No Description'}
         />
+        {
+          field.deprecationReason &&
+            <MarkdownContent
+              className="doc-alert-text"
+              markdown={field.deprecationReason}
+            />
+        }
         <div className="doc-category">
           <div className="doc-category-title">
             {'type'}
@@ -627,8 +649,8 @@ function renderType(type, onClick) {
   );
 }
 
-// Renders a description
-class Description extends React.Component {
+// Renders arbitrary markdown content
+class MarkdownContent extends React.Component {
 
   static propTypes = {
     markdown: PropTypes.string,