SONAR-8881 display ws changelog

4 files changed, 149 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Action.js b/server/sonar-web/src/main/js/apps/web-api/components/Action.js
index 8cb26123911..316ce400f52 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Action.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Action.js
@@ -20,9 +20,11 @@
 // @flow
 import React from 'react';
 import { Link } from 'react-router';
+import classNames from 'classnames';
 import { getActionKey } from '../utils';
 import Params from './Params';
 import ResponseExample from './ResponseExample';
+import ActionChangelog from './ActionChangelog';
 import DeprecatedBadge from './DeprecatedBadge';
 import InternalBadge from './InternalBadge';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
@@ -36,6 +38,7 @@ type Props = {
 };
 
 type State = {
+  showChangelog: boolean,
   showParams: boolean,
   showResponse: boolean
 };
@@ -44,25 +47,41 @@ export default class Action extends React.PureComponent {
   props: Props;
 
   state: State = {
+    showChangelog: false,
     showParams: false,
     showResponse: false
   };
 
-  handleShowParamsClick (e: SyntheticInputEvent) {
+  handleShowParamsClick = (e: SyntheticInputEvent) => {
     e.preventDefault();
-    this.refs.toggleParameters.blur();
-    this.setState({ showResponse: false, showParams: !this.state.showParams });
-  }
+    this.setState({
+      showChangelog: false,
+      showResponse: false,
+      showParams: !this.state.showParams
+    });
+  };
 
-  handleShowResponseClick (e: SyntheticInputEvent) {
+  handleShowResponseClick = (e: SyntheticInputEvent) => {
     e.preventDefault();
-    this.refs.toggleResponse.blur();
-    this.setState({ showParams: false, showResponse: !this.state.showResponse });
-  }
+    this.setState({
+      showChangelog: false,
+      showParams: false,
+      showResponse: !this.state.showResponse
+    });
+  };
+
+  handleChangelogClick = (e: SyntheticInputEvent) => {
+    e.preventDefault();
+    this.setState({
+      showChangelog: !this.state.showChangelog,
+      showParams: false,
+      showResponse: false
+    });
+  };
 
   render () {
     const { action, domain } = this.props;
-    const { showParams, showResponse } = this.state;
+    const { showChangelog, showParams, showResponse } = this.state;
     const verb = action.post ? 'POST' : 'GET';
     const actionKey = getActionKey(domain.path, action.key);
 
@@ -95,18 +114,34 @@ export default class Action extends React.PureComponent {
           dangerouslySetInnerHTML={{ __html: action.description }}/>
 
         {(action.params || action.hasResponseExample) &&
-          <ul className="web-api-action-actions list-inline">
+          <ul className="web-api-action-actions tabs">
             {action.params &&
               <li>
-                <a ref="toggleParameters" onClick={this.handleShowParamsClick.bind(this)} href="#">
-                  {showParams ? 'Hide Parameters' : 'Show Parameters'}
+                <a
+                  className={classNames({ selected: showParams })}
+                  href="#"
+                  onClick={this.handleShowParamsClick}>
+                  Parameters
                 </a>
               </li>}
 
             {action.hasResponseExample &&
               <li>
-                <a ref="toggleResponse" onClick={this.handleShowResponseClick.bind(this)} href="#">
-                  {showResponse ? 'Hide Response Example' : 'Show Response Example'}
+                <a
+                  className={classNames({ selected: showResponse })}
+                  href="#"
+                  onClick={this.handleShowResponseClick}>
+                  Response Example
+                </a>
+              </li>}
+
+            {action.changelog.length > 0 &&
+              <li>
+                <a
+                  className={classNames({ selected: showChangelog })}
+                  href="#"
+                  onClick={this.handleChangelogClick}>
+                  Changelog
                 </a>
               </li>}
           </ul>}
@@ -121,6 +156,8 @@ export default class Action extends React.PureComponent {
         {showResponse &&
           action.hasResponseExample &&
           <ResponseExample domain={domain} action={action}/>}
+
+        {showChangelog && <ActionChangelog changelog={action.changelog}/>}
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/ActionChangelog.js b/server/sonar-web/src/main/js/apps/web-api/components/ActionChangelog.js
new file mode 100644
index 00000000000..81c156cd535
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/web-api/components/ActionChangelog.js
@@ -0,0 +1,47 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+type Props = {
+  changelog: Array<{
+    description: string,
+    version: string
+  }>
+};
+
+export default class ActionChangelog extends React.PureComponent {
+  props: Props;
+
+  render () {
+    return (
+      <ul className="big-spacer-top">
+        {this.props.changelog.map((item, index) => (
+          <li key={index} className="spacer-top">
+            <span className="spacer-right badge">
+              {item.version}
+            </span>
+            {item.description}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/ActionChangelog-test.js b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/ActionChangelog-test.js
new file mode 100644
index 00000000000..eb29e53a603
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/ActionChangelog-test.js
@@ -0,0 +1,30 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import ActionChangelog from '../ActionChangelog';
+
+it('should render', () => {
+  const changelog = [
+    { version: '5.0', description: 'foo' },
+    { version: '5.1', description: 'bar' }
+  ];
+  expect(shallow(<ActionChangelog changelog={changelog}/>)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/ActionChangelog-test.js.snap b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/ActionChangelog-test.js.snap
new file mode 100644
index 00000000000..f2cece27339
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/ActionChangelog-test.js.snap
@@ -0,0 +1,21 @@
+exports[`test should render 1`] = `
+<ul
+  className="big-spacer-top">
+  <li
+    className="spacer-top">
+    <span
+      className="spacer-right badge">
+      5.0
+    </span>
+    foo
+  </li>
+  <li
+    className="spacer-top">
+    <span
+      className="spacer-right badge">
+      5.1
+    </span>
+    bar
+  </li>
+</ul>
+`;