SONAR-11128 Add parameter metadata on the Web API page

4 files changed, 265 insertions, 87 deletions

diff --git a/server/sonar-web/src/main/js/api/web-api.ts b/server/sonar-web/src/main/js/api/web-api.ts
index dab190049a0..6c2cad03f29 100644
--- a/server/sonar-web/src/main/js/api/web-api.ts
+++ b/server/sonar-web/src/main/js/api/web-api.ts
@@ -26,15 +26,19 @@ export interface Changelog {
 }
 
 export interface Param {
-  key: string;
   defaultValue?: string;
-  description: string;
   deprecatedKey?: string;
   deprecatedKeySince?: string;
   deprecatedSince?: string;
+  description: string;
   exampleValue?: string;
   internal: boolean;
+  key: string;
+  maximumLength?: number;
+  maximumValue?: number;
   maxValuesAllowed?: number;
+  minimumLength?: number;
+  minimumValue?: number;
   possibleValues?: string[];
   required: boolean;
   since?: string;
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Params.tsx b/server/sonar-web/src/main/js/apps/web-api/components/Params.tsx
index 1b5f8995549..26a19118328 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/Params.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api/components/Params.tsx
@@ -29,100 +29,111 @@ interface Props {
   showInternal: boolean;
 }
 
-export default function Params({ params, showDeprecated, showInternal }: Props) {
-  const displayedParameters = params
-    .filter(p => showDeprecated || !p.deprecatedSince)
-    .filter(p => showInternal || !p.internal);
-  return (
-    <div className="web-api-params">
-      <table>
-        <tbody>
-          {displayedParameters.map(param => (
-            <tr key={param.key}>
-              <td className="markdown" style={{ width: 180 }}>
-                <code>{param.key}</code>
+export default class Params extends React.PureComponent<Props> {
+  renderKey(param: Param) {
+    return (
+      <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>
+        )}
 
-                {showDeprecated &&
-                  param.deprecatedKey && (
-                    <div className="little-spacer-top">
-                      <code>{param.deprecatedKey}</code>
-                    </div>
-                  )}
+        {this.props.showDeprecated &&
+          param.deprecatedKey && (
+            <div className="little-spacer-top">
+              <code>{param.deprecatedKey}</code>
+            </div>
+          )}
 
-                {showDeprecated &&
-                  param.deprecatedKey &&
-                  param.deprecatedKeySince && (
-                    <div className="little-spacer-top">
-                      <DeprecatedBadge since={param.deprecatedKeySince} />
-                    </div>
-                  )}
+        {this.props.showDeprecated &&
+          param.deprecatedKey &&
+          param.deprecatedKeySince && (
+            <div className="little-spacer-top">
+              <DeprecatedBadge since={param.deprecatedKeySince} />
+            </div>
+          )}
 
-                <div className="note little-spacer-top">
-                  {param.required ? 'required' : 'optional'}
-                </div>
+        <div className="note little-spacer-top">{param.required ? 'required' : 'optional'}</div>
 
-                {param.since && (
-                  <div className="note little-spacer-top">
-                    {translateWithParameters('since_x', param.since)}
-                  </div>
-                )}
-              </td>
+        {param.since && (
+          <div className="note little-spacer-top">
+            {translateWithParameters('since_x', param.since)}
+          </div>
+        )}
+      </td>
+    );
+  }
 
-              <td>
-                <div className="markdown" dangerouslySetInnerHTML={{ __html: param.description }} />
-              </td>
+  renderConstraint(param: Param, field: keyof Param, label: string) {
+    const value = param[field];
+    if (value !== undefined) {
+      return (
+        <div className="little-spacer-top">
+          <h4>{translate('api_documentation', label)}</h4>
+          <code>{value}</code>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
 
-              <td style={{ width: 250 }}>
-                {param.possibleValues && (
-                  <div>
-                    <h4>{translate('api_documentation.possible_values')}</h4>
-                    <ul className="list-styled">
-                      {param.possibleValues.map(value => (
-                        <li className="little-spacer-top" key={value}>
-                          <code>{value}</code>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
+  render() {
+    const { params, showDeprecated, showInternal } = this.props;
+    const displayedParameters = params
+      .filter(p => showDeprecated || !p.deprecatedSince)
+      .filter(p => showInternal || !p.internal);
+    return (
+      <div className="web-api-params">
+        <table>
+          <tbody>
+            {displayedParameters.map(param => (
+              <tr key={param.key}>
+                {this.renderKey(param)}
 
-                {param.defaultValue && (
-                  <div className="little-spacer-top">
-                    <h4>{translate('api_documentation.default_values')}</h4>
-                    <code>{param.defaultValue}</code>
-                  </div>
-                )}
+                <td>
+                  <div
+                    className="markdown"
+                    dangerouslySetInnerHTML={{ __html: param.description }}
+                  />
+                </td>
 
-                {param.exampleValue && (
-                  <div className="little-spacer-top">
-                    <h4>{translate('api_documentation.example_values')}</h4>
-                    <code>{param.exampleValue}</code>
-                  </div>
-                )}
+                <td style={{ width: 250 }}>
+                  {param.possibleValues && (
+                    <div>
+                      <h4>{translate('api_documentation.possible_values')}</h4>
+                      <ul className="list-styled">
+                        {param.possibleValues.map(value => (
+                          <li className="little-spacer-top" key={value}>
+                            <code>{value}</code>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
 
-                {param.maxValuesAllowed != null && (
-                  <div className="little-spacer-top">
-                    <h4>{translate('api_documentation.max_values')}</h4>
-                    <code>{param.maxValuesAllowed}</code>
-                  </div>
-                )}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
+                  {this.renderConstraint(param, 'defaultValue', 'default_values')}
+                  {this.renderConstraint(param, 'exampleValue', 'example_values')}
+                  {this.renderConstraint(param, 'maxValuesAllowed', 'max_values')}
+                  {this.renderConstraint(param, 'minimumValue', 'min_value')}
+                  {this.renderConstraint(param, 'maximumValue', 'max_value')}
+                  {this.renderConstraint(param, 'minimumLength', 'min_length')}
+                  {this.renderConstraint(param, 'maximumLength', 'max_length')}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
 }
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.tsx b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.tsx
index 4881dfc988f..66bb4e1755a 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/Params-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import Params from '../Params';
+import { Param } from '../../../../api/web-api';
 
 const DEFAULT_PARAM = {
   key: 'foo',
@@ -54,3 +55,20 @@ it('should render deprecated key', () => {
     shallow(<Params params={params} showDeprecated={true} showInternal={false} />)
   ).toMatchSnapshot();
 });
+
+it('should render different value constraints', () => {
+  const param: Param = {
+    ...DEFAULT_PARAM,
+    defaultValue: 'def',
+    exampleValue: 'foo',
+    minimumLength: 2,
+    maximumLength: 200,
+    minimumValue: 1,
+    maximumValue: 500,
+    maxValuesAllowed: 1000,
+    possibleValues: ['foo', 'bar']
+  };
+  expect(
+    shallow(<Params params={[param]} showDeprecated={true} showInternal={true} />)
+  ).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.tsx.snap b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.tsx.snap
index 5d33f4f9613..67798d734fb 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Params-test.tsx.snap
@@ -178,3 +178,148 @@ exports[`should render deprecated key 1`] = `
   </table>
 </div>
 `;
+
+exports[`should render different value constraints 1`] = `
+<div
+  className="web-api-params"
+>
+  <table>
+    <tbody>
+      <tr
+        key="foo"
+      >
+        <td
+          className="markdown"
+          style={
+            Object {
+              "width": 180,
+            }
+          }
+        >
+          <code>
+            foo
+          </code>
+          <div
+            className="note little-spacer-top"
+          >
+            optional
+          </div>
+        </td>
+        <td>
+          <div
+            className="markdown"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Foo desc",
+              }
+            }
+          />
+        </td>
+        <td
+          style={
+            Object {
+              "width": 250,
+            }
+          }
+        >
+          <div>
+            <h4>
+              api_documentation.possible_values
+            </h4>
+            <ul
+              className="list-styled"
+            >
+              <li
+                className="little-spacer-top"
+                key="foo"
+              >
+                <code>
+                  foo
+                </code>
+              </li>
+              <li
+                className="little-spacer-top"
+                key="bar"
+              >
+                <code>
+                  bar
+                </code>
+              </li>
+            </ul>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.default_values
+            </h4>
+            <code>
+              def
+            </code>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.example_values
+            </h4>
+            <code>
+              foo
+            </code>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.max_values
+            </h4>
+            <code>
+              1000
+            </code>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.min_value
+            </h4>
+            <code>
+              1
+            </code>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.max_value
+            </h4>
+            <code>
+              500
+            </code>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.min_length
+            </h4>
+            <code>
+              2
+            </code>
+          </div>
+          <div
+            className="little-spacer-top"
+          >
+            <h4>
+              api_documentation.max_length
+            </h4>
+            <code>
+              200
+            </code>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;