SONAR-8304 Developer Connection link should be browser-friendly

4 files changed, 200 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.js
new file mode 100644
index 00000000000..a8a398b9a4e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.js
@@ -0,0 +1,75 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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';
+import { isProvided, isClickable } from '../../project-admin/links/utils';
+
+type Link = {
+  id: string,
+  name: string,
+  url: string,
+  type: string
+};
+
+type State = {|
+  expanded: boolean
+  |};
+
+export default class MetaLink extends React.Component {
+  props: {
+    link: Link
+  };
+
+  state: State = {
+    expanded: false
+  };
+
+  handleClick = (e: Object) => {
+    e.preventDefault();
+    e.target.blur();
+    this.setState((s: State): State => ({ expanded: !s.expanded }));
+  };
+
+  renderLinkIcon (link: Link) {
+    return isProvided(link) ?
+        <i className={`icon-color-link icon-${link.type}`}/> :
+        <i className="icon-color-link icon-detach"/>;
+  }
+
+  render () {
+    const { link } = this.props;
+
+    return (
+        <li>
+          <a className="link-with-icon" href={link.url} target="_blank"
+             onClick={!isClickable(link) && this.handleClick}>
+            {this.renderLinkIcon(link)}
+            &nbsp;
+            {link.name}
+          </a>
+          {this.state.expanded && (
+              <div>
+                <input type="text" className="overview-key" value={link.url} readOnly={true}/>
+              </div>
+          )}
+        </li>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js
index 25984706b78..efa8cf93a88 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js
+++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js
@@ -18,8 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import MetaLink from './MetaLink';
 import { getProjectLinks } from '../../../api/projectLinks';
-import { isProvided, orderLinks } from '../../project-admin/links/utils';
+import { orderLinks } from '../../project-admin/links/utils';
 
 export default class MetaLinks extends React.Component {
   static propTypes = {
@@ -51,12 +52,6 @@ export default class MetaLinks extends React.Component {
     });
   }
 
-  renderLinkIcon (link) {
-    return isProvided(link) ?
-        <i className={`icon-color-link icon-${link.type}`}/> :
-        <i className="icon-color-link icon-detach"/>;
-  }
-
   render () {
     const { links } = this.state;
 
@@ -70,13 +65,7 @@ export default class MetaLinks extends React.Component {
         <div className="overview-meta-card">
           <ul className="overview-meta-list">
             {orderedLinks.map(link => (
-                <li key={link.id}>
-                  <a className="link-with-icon" href={link.url} target="_blank">
-                    {this.renderLinkIcon(link)}
-                    &nbsp;
-                    {link.name}
-                  </a>
-                </li>
+                <MetaLink key={link.id} link={link}/>
             ))}
           </ul>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaLink-test.js b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaLink-test.js
new file mode 100644
index 00000000000..2d0745f57cb
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaLink-test.js
@@ -0,0 +1,56 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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 MetaLink from '../MetaLink';
+import { click } from '../../../../helpers/testUtils';
+
+it('should match snapshot', () => {
+  const link = {
+    id: '1',
+    name: 'Foo',
+    url: 'http://example.com',
+    type: 'foo'
+  };
+
+  expect(shallow(
+      <MetaLink link={link}/>
+  )).toMatchSnapshot();
+});
+
+it('should expand and collapse link', () => {
+  const link = {
+    id: '1',
+    name: 'Foo',
+    url: 'scm:git:git@github.com',
+    type: 'foo'
+  };
+
+  const wrapper = shallow(<MetaLink link={link}/>);
+  expect(wrapper).toMatchSnapshot();
+
+  // expand
+  click(wrapper.find('a'));
+  expect(wrapper).toMatchSnapshot();
+
+  // collapse
+  click(wrapper.find('a'));
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaLink-test.js.snap b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaLink-test.js.snap
new file mode 100644
index 00000000000..2f713ad3dcc
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaLink-test.js.snap
@@ -0,0 +1,66 @@
+exports[`test should expand and collapse link 1`] = `
+<li>
+  <a
+    className="link-with-icon"
+    href="scm:git:git@github.com"
+    onClick={[Function]}
+    target="_blank">
+    <i
+      className="icon-color-link icon-detach" />
+     
+    Foo
+  </a>
+</li>
+`;
+
+exports[`test should expand and collapse link 2`] = `
+<li>
+  <a
+    className="link-with-icon"
+    href="scm:git:git@github.com"
+    onClick={[Function]}
+    target="_blank">
+    <i
+      className="icon-color-link icon-detach" />
+     
+    Foo
+  </a>
+  <div>
+    <input
+      className="overview-key"
+      readOnly={true}
+      type="text"
+      value="scm:git:git@github.com" />
+  </div>
+</li>
+`;
+
+exports[`test should expand and collapse link 3`] = `
+<li>
+  <a
+    className="link-with-icon"
+    href="scm:git:git@github.com"
+    onClick={[Function]}
+    target="_blank">
+    <i
+      className="icon-color-link icon-detach" />
+     
+    Foo
+  </a>
+</li>
+`;
+
+exports[`test should match snapshot 1`] = `
+<li>
+  <a
+    className="link-with-icon"
+    href="http://example.com"
+    onClick={false}
+    target="_blank">
+    <i
+      className="icon-color-link icon-detach" />
+     
+    Foo
+  </a>
+</li>
+`;