fix(react-warnings): Add keys, displayName to React components

internal_packages/account-sidebar/lib/account-sidebar.cjsx

@@ -29,7 +29,7 @@ AccountSidebar = React.createClass
 
   _sections: ->
     return @state.sections.map (section) =>
-      <section>
+      <section key={section.label}>
         {@_itemComponents(section)}
       </section>
 

internal_packages/search-bar/lib/search-bar.cjsx

@@ -6,6 +6,7 @@ _ = require 'underscore-plus'
 
 module.exports =
 SearchBar = React.createClass
+  displayName: 'SearchBar'
 
   getInitialState: ->
     query: ""
@@ -30,6 +31,7 @@ SearchBar = React.createClass
 
     headerComponents = [
       <input type="text"
+             key="input"
              className={inputClass}
              placeholder="Search all email"
              value={inputValue}
@@ -39,8 +41,10 @@ SearchBar = React.createClass
 
       <RetinaImg className="search-accessory search"
                  name="searchloupe.png"
+                 key="accessory"
                  onClick={@_doSearch} />
       <div className="search-accessory clear"
+           key="clear"
            onClick={@_onClearSearch}><i className="fa fa-remove"></i></div>
     ]
 

src/sheet-container.cjsx

@@ -7,6 +7,7 @@ ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
 
 
 ToolbarSpacer = React.createClass
+  className: 'ToolbarSpacer'
   propTypes:
     order: React.PropTypes.number
 
@@ -15,6 +16,7 @@ ToolbarSpacer = React.createClass
 
 
 Toolbar = React.createClass
+  className: 'Toolbar'
   propTypes:
     type: React.PropTypes.string
 
@@ -44,7 +46,8 @@ Toolbar = React.createClass
     columnToolbars = @state.itemsForViews.map ({column, name, items}) =>
       <div style={position: 'absolute', top:0}
            data-owner-name={name}
-           data-column={column}>
+           data-column={column}
+           key={column}>
         {@_flexboxForItems(items)}
       </div>
 
@@ -54,13 +57,13 @@ Toolbar = React.createClass
     </div>
   
   _flexboxForItems: (items) ->
-    components = items.map (item) =>
-      <item {...@props} />
+    components = items.map ({view, name}) =>
+      <view key={name} {...@props} />
 
     <Flexbox direction="row">
       {components}
-      <ToolbarSpacer order={-50}/>
-      <ToolbarSpacer order={50}/>
+      <ToolbarSpacer key="spacer-50" order={-50}/>
+      <ToolbarSpacer key="spacer+50" order={50} />
     </Flexbox>
 
   recomputeLayout: ->
@@ -83,13 +86,13 @@ Toolbar = React.createClass
 
   _getComponentRegistryState: ->
     items = []
-    items.push(ComponentRegistry.findAllViewsByRole("Global:Toolbar")...)
-    items.push(ComponentRegistry.findAllViewsByRole("#{@props.type}:Toolbar")...)
+    items.push(ComponentRegistry.findAllByRole("Global:Toolbar")...)
+    items.push(ComponentRegistry.findAllByRole("#{@props.type}:Toolbar")...)
 
     itemsForViews = []
     for column in ['Left', 'Right', 'Center']
       for {view, name} in ComponentRegistry.findAllByRole("#{@props.type}:#{column}")
-        itemsForView = ComponentRegistry.findAllViewsByRole("#{name}:Toolbar")
+        itemsForView = ComponentRegistry.findAllByRole("#{name}:Toolbar")
         if itemsForView.length > 0
           itemsForViews.push({column, name, items: itemsForView})
         
@@ -97,6 +100,7 @@ Toolbar = React.createClass
 
 
 FlexboxForRoles = React.createClass
+  className: 'FlexboxForRoles'
   propTypes:
     roles: React.PropTypes.arrayOf(React.PropTypes.string)
 
@@ -111,8 +115,8 @@ FlexboxForRoles = React.createClass
     @unlistener() if @unlistener
 
   render: ->
-    components = @state.items.map (item) =>
-      <item {...@props} />
+    components = @state.items.map ({view, name}) =>
+      <view key={name} {...@props} />
     
     <Flexbox direction="row">
       {components}
@@ -121,11 +125,12 @@ FlexboxForRoles = React.createClass
   _getComponentRegistryState: ->
     items = []
     for role in @props.roles
-      items = items.concat(ComponentRegistry.findAllViewsByRole(role))
+      items = items.concat(ComponentRegistry.findAllByRole(role))
     {items}
 
 module.exports =
 SheetContainer = React.createClass
+  className: 'SheetContainer'
 
   getInitialState: ->
     @_getStateFromStores()

src/sheet.cjsx

@@ -45,7 +45,7 @@ Sheet = React.createClass
 
   _backButtonComponent: ->
     return [] if @props.depth is 0
-    <div onClick={@_pop}>
+    <div onClick={@_pop} key="back">
       Back
     </div>
 
@@ -54,16 +54,17 @@ Sheet = React.createClass
       classes = @state[column] || []
       return if classes.length is 0
 
-      components = classes.map (c) => <c {...@props} />
+      components = classes.map ({name, view}) => <view key={name} {...@props} />
 
-      maxWidth = _.reduce classes, ((m,c) -> Math.min(c.maxWidth ? 10000, m)), 10000
-      minWidth = _.reduce classes, ((m,c) -> Math.max(c.minWidth ? 0, m)), 0
+      maxWidth = _.reduce classes, ((m,{view}) -> Math.min(view.maxWidth ? 10000, m)), 10000
+      minWidth = _.reduce classes, ((m,{view}) -> Math.max(view.minWidth ? 0, m)), 0
       resizable = minWidth != maxWidth && column != 'Center'
 
       if resizable
         if column is 'Left' then handle = ResizableRegion.Handle.Right
         if column is 'Right' then handle = ResizableRegion.Handle.Left
-        <ResizableRegion name={"#{@props.type}:#{column}"}
+        <ResizableRegion key={"#{@props.type}:#{column}"}
+                         name={"#{@props.type}:#{column}"}
                          data-column={column}
                          onResize={@props.onColumnSizeChanged}
                          minWidth={minWidth}
@@ -75,6 +76,7 @@ Sheet = React.createClass
         </ResizableRegion>
       else
         <Flexbox direction="column"
+                 key={"#{@props.type}:#{column}"}
                  name={"#{@props.type}:#{column}"}
                  data-column={column}
                  style={flex: 1}>
@@ -84,7 +86,7 @@ Sheet = React.createClass
   _getComponentRegistryState: ->
     state = {}
     for column in @props.columns
-      state["#{column}"] = ComponentRegistry.findAllViewsByRole("#{@props.type}:#{column}")
+      state["#{column}"] = ComponentRegistry.findAllByRole("#{@props.type}:#{column}")
     state
 
   _pop: ->