Merge pull request #381 from jenkinsci/feature/JENKINS-37007-favorites-animations

Feature/jenkins 37007 favorites animations

blueocean-dashboard/package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@jenkins-cd/design-language": "0.0.65",
-    "@jenkins-cd/js-extensions": "0.0.19",
+    "@jenkins-cd/js-extensions": "0.0.20",
     "@jenkins-cd/js-modules": "0.0.5",
     "@jenkins-cd/sse-gateway": "0.0.7",
     "immutable": "3.8.1",

blueocean-personalization/package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@jenkins-cd/design-language": "0.0.63",
-    "@jenkins-cd/js-extensions": "0.0.19",
+    "@jenkins-cd/js-extensions": "0.0.20",
     "@jenkins-cd/js-modules": "0.0.5",
     "@jenkins-cd/sse-gateway": "0.0.7",
     "immutable": "3.8.1",
@@ -44,6 +44,7 @@
     "moment": "2.13.0",
     "moment-duration-format": "1.3.0",
     "react": "15.1.0",
+    "react-addons-css-transition-group": "15.1.0",
     "react-dom": "15.1.0",
     "react-material-icons-blue": "1.0.4",
     "react-redux": "4.4.5",

blueocean-personalization/src/main/js/components/DashboardCards.jsx

@@ -2,6 +2,7 @@
  * Created by cmeyers on 7/6/16.
  */
 import React, { Component, PropTypes } from 'react';
+import TransitionGroup from 'react-addons-css-transition-group';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { List } from 'immutable';
@@ -164,7 +165,12 @@ export class DashboardCards extends Component {
 
         return (
             <div className="favorites-card-stack">
-                {favoriteCards}
+                <TransitionGroup transitionName="vertical-expand-collapse"
+                  transitionEnterTimeout={150}
+                  transitionLeaveTimeout={150}
+                >
+                    {favoriteCards}
+                </TransitionGroup>
             </div>
         );
     }

blueocean-personalization/src/main/less/extensions.less

@@ -11,3 +11,25 @@
         margin-bottom: 10px;
     }
 }
+
+.vertical-expand-collapse-enter {
+    transition: all linear 0.15s;
+    max-height: 0;
+    opacity: 0.01;
+
+    &.vertical-expand-collapse-enter-active {
+        max-height: 60px;
+        opacity: 1;
+    }
+}
+
+.vertical-expand-collapse-leave {
+    transition: all linear 0.15s;
+    max-height: 60px;
+    opacity: 1;
+
+    &.vertical-expand-collapse-leave-active {
+        max-height: 0;
+        opacity: 0.01;
+    }
+}

blueocean-web/package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@jenkins-cd/design-language": "0.0.65",
-    "@jenkins-cd/js-extensions": "0.0.19",
+    "@jenkins-cd/js-extensions": "0.0.20",
     "@jenkins-cd/js-modules": "0.0.5",
     "history": "2.0.2",
     "immutable": "3.8.1",
@@ -47,7 +47,6 @@
       "immutable",
       "react-router",
       "keymirror",
-      "react-addons-css-transition-group",
       "react-redux",
       "react-router",
       "redux",

blueocean-web/src/main/js/init.jsx

@@ -51,8 +51,10 @@ exports.initialize = function (oncomplete) {
     // Load and export the react modules, allowing them to be imported by other bundles.
     const react = require('react');
     const reactDOM = require('react-dom');
+    const reactCSSTransitions = require('react-addons-css-transition-group');
     jenkinsMods.export('react', 'react', react);
     jenkinsMods.export('react', 'react-dom', reactDOM);
+    jenkinsMods.export('react', 'react-addons-css-transition-group', reactCSSTransitions);
 
     // Get the extension list metadata from Jenkins.
     // Might want to do some flux fancy-pants stuff for this.

js-extensions/@jenkins-cd/subs/extensions-bundle.js

@@ -146,6 +146,7 @@ function createBundle(jsxFile) {
         .withExternalModuleMapping('@jenkins-cd/design-language', 'jenkins-cd:jdl')
         .withExternalModuleMapping('react', 'react:react')
         .withExternalModuleMapping('react-dom', 'react:react-dom')
+        .withExternalModuleMapping('react-addons-css-transition-group', 'react:react-addons-css-transition-group')
         .inDir('target/classes/org/jenkins/ui/jsmodules/' + maven.getArtifactId());
 }
 

js-extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/js-extensions",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Jenkins Extension Store",
   "main": "index.js",
   "files": [