* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { isProvided, isClickable } from '../../project-admin/links/utils';
+import { isProvided } from '../../project-admin/links/utils';
import BugTrackerIcon from '../../../components/ui/BugTrackerIcon';
import { ProjectLink } from '../../../api/projectLinks';
link: ProjectLink;
}
-interface State {
- expanded: boolean;
+export default function MetaLink({ link }: Props) {
+ return (
+ <li>
+ <a className="link-with-icon" href={link.url} rel="nofollow" target="_blank">
+ <MetaLinkIcon link={link} /> {link.name}
+ </a>
+ </li>
+ );
}
-export default class MetaLink extends React.PureComponent<Props, State> {
- state: State = { expanded: false };
-
- handleClick = (e: React.SyntheticEvent<HTMLAnchorElement>) => {
- e.preventDefault();
- e.currentTarget.blur();
- this.setState((s: State) => ({ expanded: !s.expanded }));
- };
-
- handleInputClick = (e: React.SyntheticEvent<HTMLInputElement>) => {
- e.currentTarget.select();
- };
-
- renderLinkIcon = (link: ProjectLink) => {
- if (link.type === 'issue') {
- return <BugTrackerIcon />;
- }
-
- 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 : undefined}>
- {this.renderLinkIcon(link)}
-
- {link.name}
- </a>
- {this.state.expanded && (
- <div className="little-spacer-top">
- <input
- type="text"
- className="overview-key"
- value={link.url}
- readOnly={true}
- onClick={this.handleInputClick}
- />
- </div>
- )}
- </li>
- );
+function MetaLinkIcon({ link }: Props) {
+ if (link.type === 'issue') {
+ return <BugTrackerIcon />;
}
+
+ return isProvided(link) ? (
+ <i className={`icon-color-link icon-${link.type}`} />
+ ) : (
+ <i className="icon-color-link icon-detach" />
+ );
}
<a
className="link-with-icon"
href="scm:git:git@github.com"
- onClick={[Function]}
+ rel="nofollow"
target="_blank"
>
- <i
- className="icon-color-link icon-detach"
+ <MetaLinkIcon
+ link={
+ Object {
+ "id": "1",
+ "name": "Foo",
+ "type": "foo",
+ "url": "scm:git:git@github.com",
+ }
+ }
/>
-
+
Foo
</a>
</li>
<a
className="link-with-icon"
href="scm:git:git@github.com"
- onClick={[Function]}
+ rel="nofollow"
target="_blank"
>
- <i
- className="icon-color-link icon-detach"
+ <MetaLinkIcon
+ link={
+ Object {
+ "id": "1",
+ "name": "Foo",
+ "type": "foo",
+ "url": "scm:git:git@github.com",
+ }
+ }
/>
-
+
Foo
</a>
- <div
- className="little-spacer-top"
- >
- <input
- className="overview-key"
- onClick={[Function]}
- readOnly={true}
- type="text"
- value="scm:git:git@github.com"
- />
- </div>
</li>
`;
<a
className="link-with-icon"
href="scm:git:git@github.com"
- onClick={[Function]}
+ rel="nofollow"
target="_blank"
>
- <i
- className="icon-color-link icon-detach"
+ <MetaLinkIcon
+ link={
+ Object {
+ "id": "1",
+ "name": "Foo",
+ "type": "foo",
+ "url": "scm:git:git@github.com",
+ }
+ }
/>
-
+
Foo
</a>
</li>
<a
className="link-with-icon"
href="http://example.com"
+ rel="nofollow"
target="_blank"
>
- <i
- className="icon-color-link icon-detach"
+ <MetaLinkIcon
+ link={
+ Object {
+ "id": "1",
+ "name": "Foo",
+ "type": "foo",
+ "url": "http://example.com",
+ }
+ }
/>
-
+
Foo
</a>
</li>
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { isProvided, isClickable } from './utils';
+import { isProvided } from './utils';
import { translate } from '../../../helpers/l10n';
import BugTrackerIcon from '../../../components/ui/BugTrackerIcon';
);
}
- renderUrl(link) {
- if (isClickable(link)) {
- return (
- <a href={link.url} target="_blank">
- {link.url}
- </a>
- );
- }
-
- return link.url;
- }
-
renderDeleteButton(link) {
if (isProvided(link)) {
return null;
return (
<tr data-name={link.name}>
<td className="nowrap">{this.renderName(link)}</td>
- <td className="nowrap js-url">{this.renderUrl(link)}</td>
+ <td className="nowrap js-url">
+ <a href={link.url} rel="nofollow" target="_blank">
+ {link.url}
+ </a>
+ </td>
<td className="thin nowrap">{this.renderDeleteButton(link)}</td>
</tr>
);