[JENKINS-37007] animations for favorites cards; wip while working around "duplicate Reacts" error (tracked in JENKINS-37006)

blueocean-personalization/package.json

@@ -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,14 @@ export class DashboardCards extends Component {
 
         return (
             <div className="favorites-card-stack">
-                {favoriteCards}
+                <TransitionGroup transitionName="vertical-expand-collapse"
+                  transitionAppear
+                  transitionAppearTimeout={300}
+                  transitionEnterTimeout={300}
+                  transitionLeaveTimeout={300}
+                >
+                    {favoriteCards}
+                </TransitionGroup>
             </div>
         );
     }

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

@@ -11,3 +11,25 @@
         margin-bottom: 10px;
     }
 }
+
+.vertical-expand-collapse-enter {
+    transition: all ease-out 0.3s;
+    height: 0;
+    opacity: 0.01;
+
+    &.vertical-expand-collapse-enter-active {
+        height: auto;
+        opacity: 1;
+    }
+}
+
+.vertical-expand-collapse-leave {
+    transition: all ease-out 0.3s;
+    height: auto;
+    opacity: 1;
+
+    &.vertical-expand-collapse-leave-active {
+        height: 0;
+        opacity: 0.01;
+    }
+}

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());
 }