Merge pull request #1757 from docker/1.12-rc

1.12 rc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Kitematic",
-  "version": "0.10.4",
+  "version": "0.12.0",
   "author": "Kitematic",
   "description": "Simple Docker Container management for Mac OS X.",
   "homepage": "https://kitematic.com/",

src/components/ImageCard.react.js

@@ -99,7 +99,6 @@ var ImageCard = React.createClass({
     shell.openExternal(repoUri);
   },
   render: function () {
-    var self = this;
     var name;
     if (this.props.image.namespace === 'library') {
       name = (
@@ -119,7 +118,7 @@ var ImageCard = React.createClass({
     var description;
     if (this.props.image.description) {
       description = this.props.image.description;
-    } else if(this.props.image.short_description){
+    } else if (this.props.image.short_description) {
       description = this.props.image.short_description;
     } else {
       description = 'No description.';
@@ -134,17 +133,26 @@ var ImageCard = React.createClass({
       imgsrc = 'https://kitematic.com/recommended/kitematic_html.png';
     }
     var tags;
-    if (self.state.loading) {
+    if (this.state.loading) {
       tags = <RetinaImage className="tags-loading" src="loading.png"/>;
-    } else if (self.state.tags.length === 0) {
+    } else if (this.state.tags.length === 0) {
       tags = <div className="no-tags">No Tags</div>;
     } else {
-      var tagDisplay = self.state.tags.map(function (tag) {
-        let t = tag.name;
-        if (t === self.state.chosenTag) {
-          return <div className="tag active" key={t} onClick={self.handleTagClick.bind(self, t)}>{t}</div>;
+      var tagDisplay = this.state.tags.map((tag) => {
+        let t = '';
+        if (tag.name) {
+          t = tag.name;
         } else {
-          return <div className="tag" key={t} onClick={self.handleTagClick.bind(self, t)}>{t}</div>;
+          t = tag;
+        }
+        let key = t;
+        if (typeof key === 'undefined') {
+          key = this.props.image.name;
+        }
+        if (t === this.state.chosenTag) {
+          return <div className="tag active" key={key} onClick={this.handleTagClick.bind(this, t)}>{t}</div>;
+        } else {
+          return <div className="tag" key={key} onClick={this.handleTagClick.bind(this, t)}>{t}</div>;
         }
       });
       tags = (
@@ -172,10 +180,10 @@ var ImageCard = React.createClass({
             <span className="icon icon-tag"> {this.state.chosenTag}</span>
             <span className="text"></span>
           </div>
-          <div className="more-menu" onClick={self.handleMenuOverlayClick}>
+          <div className="more-menu" onClick={this.handleMenuOverlayClick}>
             <span className="icon icon-more"></span>
           </div>
-          <div className="action" onClick={self.handleClick}>
+          <div className="action" onClick={this.handleClick}>
             CREATE
           </div>
         </div>
@@ -190,7 +198,7 @@ var ImageCard = React.createClass({
           </div>
           {this.props.image.inUse ? <p className="small">To delete, remove all containers<br/>using the above image</p> : null }
           <div className="close-overlay">
-            <a className="btn btn-action circular" onClick={self.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>
+            <a className="btn btn-action circular" onClick={this.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>
           </div>
         </div>
       );
@@ -205,10 +213,10 @@ var ImageCard = React.createClass({
             <span className="icon icon-download"></span>
             <span className="text">{pullCount}</span>
           </div>
-          <div className="more-menu" onClick={self.handleMenuOverlayClick}>
+          <div className="more-menu" onClick={this.handleMenuOverlayClick}>
             <span className="icon icon-more"></span>
           </div>
-          <div className="action" onClick={self.handleClick}>
+          <div className="action" onClick={this.handleClick}>
             CREATE
           </div>
         </div>
@@ -223,7 +231,7 @@ var ImageCard = React.createClass({
               <span className="icon icon-open-external"></span><span className="text">VIEW ON DOCKER HUB</span>
             </div>
             <div className="close-overlay">
-              <a className="btn btn-action circular" onClick={self.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>
+              <a className="btn btn-action circular" onClick={this.handleCloseMenuOverlay}><span className="icon icon-delete"></span></a>
             </div>
           </div>
       );
@@ -234,7 +242,7 @@ var ImageCard = React.createClass({
         <div className="overlay tag-overlay">
           <p>Please select an image tag.</p>
           {tags}
-          <div className="close-overlay" onClick={self.handleCloseTagOverlay}>
+          <div className="close-overlay" onClick={this.handleCloseTagOverlay}>
             <a className="btn btn-action circular"><span className="icon icon-delete"></span></a>
           </div>
         </div>

src/components/NewContainerSearch.react.js

@@ -240,7 +240,7 @@ module.exports = React.createClass({
       );
       paginateResults = null;
     } else if (filter === 'userimages') {
-      let userImageItems = this.state.images.map(image => {
+      let userImageItems = this.state.images.map((image, index) => {
         let repo = image.RepoTags[0].split(':')[0];
         if (repo.indexOf('/') === -1) {
           repo = 'local/' + repo;
@@ -250,7 +250,12 @@ module.exports = React.createClass({
         let tags = image.tags.join('-');
         image.star_count = 0;
         image.is_local = true;
-        return (<ImageCard key={image.namespace + '/' + image.name + ':' + tags} image={image} chosenTag={image.tags[0]} tags={image.tags} />);
+        const key = `local-${image.name}-${index}`;
+        let imageCard = null;
+        if (image.name !== '<none>') {
+          imageCard = (<ImageCard key={key + ':' + tags} image={image} chosenTag={image.tags[0]} tags={image.tags} />);
+        }
+        return imageCard;
       });
       let userImageResults = userImageItems.length ? (
         <div className="result-grids">
@@ -277,8 +282,14 @@ module.exports = React.createClass({
         </div>
       );
     } else if (repos.length) {
-      let recommendedItems = repos.filter(repo => repo.is_recommended).map(image => <ImageCard key={image.namespace + '/' + image.name} image={image} />);
-      let otherItems = repos.filter(repo => !repo.is_recommended && !repo.is_user_repo).map(image => <ImageCard key={image.namespace + '/' + image.name} image={image} />);
+      let recommendedItems = repos.filter(repo => repo.is_recommended).map((image, index) => {
+        const key = `rec-${image.name}-${index}`;
+        return (<ImageCard key={key} image={image} />);
+      });
+      let otherItems = repos.filter(repo => !repo.is_recommended && !repo.is_user_repo).map((image, index) => {
+        const key = `other-${image.name}-${index}`;
+        return (<ImageCard key={key} image={image} />);
+      });
 
       let recommendedResults = recommendedItems.length ? (
         <div>
@@ -289,7 +300,10 @@ module.exports = React.createClass({
         </div>
       ) : null;
 
-      let userRepoItems = repos.filter(repo => repo.is_user_repo).map(image => <ImageCard key={image.namespace + '/' + image.name} image={image} />);
+      let userRepoItems = repos.filter(repo => repo.is_user_repo).map((image, index) => {
+        const key = `usr-${image.name}-${index}`;
+        return (<ImageCard key={key} image={image} />);
+      });
       let userRepoResults = userRepoItems.length ? (
         <div>
           <h4>My Repositories</h4>