SONAR-8778 display deprecated key and its version

3 files changed, 156 insertions, 58 deletions

diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Params.js b/server/sonar-web/src/main/js/apps/web-api/components/Params.js
index d258075ee50..ac8459cc2f2 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Params.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Params.js
@@ -17,83 +17,98 @@
  * 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';
 import InternalBadge from './InternalBadge';
 import DeprecatedBadge from './DeprecatedBadge';
+import type { Param } from '../../../api/web-api';
 
-export default function Params ({ params, showInternal }) {
-  const displayedParameters = showInternal ? params : params.filter(p => !p.internal);
+export default class Params extends React.PureComponent {
+  props: {
+    params: Array<Param>,
+    showInternal: boolean
+  };
 
-  return (
+  render () {
+    const { showInternal, params } = this.props;
+    const displayedParameters = showInternal ? params : params.filter(p => !p.internal);
+
+    return (
       <div className="web-api-params">
         <table>
           <tbody>
             {displayedParameters.map(param => (
-                <tr key={param.key}>
-                  <td style={{ width: 180 }}>
-                    <code>{param.key}</code>
+              <tr key={param.key}>
+                <td className="markdown" style={{ width: 180 }}>
+                  <code>{param.key}</code>
 
-                    {param.internal && (
-                        <div className="little-spacer-top">
-                          <InternalBadge/>
-                        </div>
-                    )}
+                  {param.internal &&
+                    <div className="little-spacer-top">
+                      <InternalBadge/>
+                    </div>}
 
-                    {param.deprecatedSince && (
-                        <div className="little-spacer-top">
-                          <DeprecatedBadge since={param.deprecatedSince}/>
-                        </div>
-                    )}
+                  {param.deprecatedSince &&
+                    <div className="little-spacer-top">
+                      <DeprecatedBadge since={param.deprecatedSince}/>
+                    </div>}
 
-                    <div className="note little-spacer-top">
-                      {param.required ? 'required' : 'optional'}
-                    </div>
+                  {param.deprecatedKey &&
+                    <div className="little-spacer-top">
+                      <code>{param.deprecatedKey}</code>
+                    </div>}
+
+                  {param.deprecatedKey &&
+                    param.deprecatedKeySince &&
+                    <div className="little-spacer-top">
+                      <DeprecatedBadge since={param.deprecatedKeySince}/>
+                    </div>}
 
-                    {param.since && (
-                        <div className="note little-spacer-top">
-                          since {param.since}
-                        </div>
-                    )}
-                  </td>
+                  <div className="note little-spacer-top">
+                    {param.required ? 'required' : 'optional'}
+                  </div>
+
+                  {param.since &&
+                    <div className="note little-spacer-top">
+                      since {param.since}
+                    </div>}
+                </td>
 
-                  <td>
-                    <div
-                        className="markdown"
-                        dangerouslySetInnerHTML={{ __html: param.description }}/>
-                  </td>
+                <td>
+                  <div
+                    className="markdown"
+                    dangerouslySetInnerHTML={{ __html: param.description }}/>
+                </td>
 
-                  <td style={{ width: 250 }}>
-                    {param.possibleValues && (
-                        <div>
-                          <h4>Possible values</h4>
-                          <ul className="list-styled">
-                            {param.possibleValues.map(value => (
-                                <li key={value} className="little-spacer-top">
-                                  <code>{value}</code>
-                                </li>
-                            ))}
-                          </ul>
-                        </div>
-                    )}
+                <td style={{ width: 250 }}>
+                  {param.possibleValues &&
+                    <div>
+                      <h4>Possible values</h4>
+                      <ul className="list-styled">
+                        {param.possibleValues.map(value => (
+                          <li key={value} className="little-spacer-top">
+                            <code>{value}</code>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>}
 
-                    {param.defaultValue && (
-                        <div className="little-spacer-top">
-                          <h4>Default value</h4>
-                          <code>{param.defaultValue}</code>
-                        </div>
-                    )}
+                  {param.defaultValue &&
+                    <div className="little-spacer-top">
+                      <h4>Default value</h4>
+                      <code>{param.defaultValue}</code>
+                    </div>}
 
-                    {param.exampleValue && (
-                        <div className="little-spacer-top">
-                          <h4>Example value</h4>
-                          <code>{param.exampleValue}</code>
-                        </div>
-                    )}
-                  </td>
-                </tr>
+                  {param.exampleValue &&
+                    <div className="little-spacer-top">
+                      <h4>Example value</h4>
+                      <code>{param.exampleValue}</code>
+                    </div>}
+                </td>
+              </tr>
             ))}
           </tbody>
         </table>
       </div>
-  );
+    );
+  }
 }
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.js b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.js
new file mode 100644
index 00000000000..c3d0a92834c
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.js
@@ -0,0 +1,31 @@
+/*
+ * 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 Params from '../Params';
+
+it('should render deprecated key', () => {
+  const params = [{
+    key: 'foo',
+    deprecatedKey: 'foo-deprecated',
+    deprecatedKeySince: '5.0'
+  }];
+  expect(shallow(<Params params={params} showInternal={true}/>)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.js.snap b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.js.snap
new file mode 100644
index 00000000000..e96ab29ed2d
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.js.snap
@@ -0,0 +1,52 @@
+exports[`test should render deprecated key 1`] = `
+<div
+  className="web-api-params">
+  <table>
+    <tbody>
+      <tr>
+        <td
+          className="markdown"
+          style={
+            Object {
+              "width": 180,
+            }
+          }>
+          <code>
+            foo
+          </code>
+          <div
+            className="little-spacer-top">
+            <code>
+              foo-deprecated
+            </code>
+          </div>
+          <div
+            className="little-spacer-top">
+            <DeprecatedBadge
+              since="5.0" />
+          </div>
+          <div
+            className="note little-spacer-top">
+            optional
+          </div>
+        </td>
+        <td>
+          <div
+            className="markdown"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": undefined,
+              }
+            } />
+        </td>
+        <td
+          style={
+            Object {
+              "width": 250,
+            }
+          } />
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;