SONAR-10612 replace .icon-detach with DetachIcon

diff --git a/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx b/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx
index d81f6bf88066c0a4b0bf7660784fc5fe5bbf3611..9a886fb45081420a6fcf7ac93f6ddfff9f491418 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx
+++ b/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx
@@ -21,7 +21,9 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { SuggestionLink } from './SuggestionsProvider';
+import * as theme from '../../../app/theme';
 import BubblePopup, { BubblePopupPosition } from '../../../components/common/BubblePopup';
+import DetachIcon from '../../../components/icons-components/DetachIcon';
 import { translate } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/urls';
 
@@ -56,9 +58,10 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
         {this.renderTitle(translate('embed_docs.suggestion'))}
         {this.props.suggestions.map((suggestion, index) => (
           <li key={index}>
-            <a href={suggestion.link} target="_blank">
-              {suggestion.text} <i className="icon-detach" />
-            </a>
+            <Link className="display-flex-center" target="_blank" to={suggestion.link}>
+              {suggestion.text}
+              <DetachIcon className="spacer-left" fill={theme.gray80} size={12} />
+            </Link>
           </li>
         ))}
         <li className="divider" />
@@ -147,8 +150,9 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
         <ul className="menu">
           {this.renderSuggestions()}
           <li>
-            <Link target="_blank" to="/documentation">
-              {translate('embed_docs.documentation_index')} <i className="icon-detach" />
+            <Link className="display-flex-center" target="_blank" to="/documentation">
+              {translate('embed_docs.documentation_index')}
+              <DetachIcon className="spacer-left" fill={theme.gray80} size={12} />
             </Link>
           </li>
           {this.context.onSonarCloud && this.renderSonarCloudLinks()}

diff --git a/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap b/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap
index e640563309458f5f3c22d85e80ed68522aebcaf1..082ef152ac59aa050d58030cb184d87afaf2d3ec 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap
@@ -16,30 +16,38 @@ exports[`should display suggestion links 1`] = `
       <li
         key="0"
       >
-        <a
-          href="#"
+        <Link
+          className="display-flex-center"
+          onlyActiveOnIndex={false}
+          style={Object {}}
           target="_blank"
+          to="#"
         >
           foo
-           
-          <i
-            className="icon-detach"
+          <DetachIcon
+            className="spacer-left"
+            fill="#cdcdcd"
+            size={12}
           />
-        </a>
+        </Link>
       </li>
       <li
         key="1"
       >
-        <a
-          href="#"
+        <Link
+          className="display-flex-center"
+          onlyActiveOnIndex={false}
+          style={Object {}}
           target="_blank"
+          to="#"
         >
           bar
-           
-          <i
-            className="icon-detach"
+          <DetachIcon
+            className="spacer-left"
+            fill="#cdcdcd"
+            size={12}
           />
-        </a>
+        </Link>
       </li>
       <li
         className="divider"
@@ -47,15 +55,17 @@ exports[`should display suggestion links 1`] = `
     </React.Fragment>
     <li>
       <Link
+        className="display-flex-center"
         onlyActiveOnIndex={false}
         style={Object {}}
         target="_blank"
         to="/documentation"
       >
         embed_docs.documentation_index
-         
-        <i
-          className="icon-detach"
+        <DetachIcon
+          className="spacer-left"
+          fill="#cdcdcd"
+          size={12}
         />
       </Link>
     </li>

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index bb998f285aedeaf5d0d8d6daafa98b264fc23afe..6b52b5eefbf21773b4653e88b3e33cfb03cf6ed1 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -32,6 +32,7 @@ import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
 import Favorite from '../../../../components/controls/Favorite';
 import HomePageSelect from '../../../../components/controls/HomePageSelect';
 import Tooltip from '../../../../components/controls/Tooltip';
+import DetachIcon from '../../../../components/icons-components/DetachIcon';
 import {
   isShortLivingBranch,
   isLongLivingBranch,
@@ -89,9 +90,13 @@ export function ComponentNavMeta({ branchLike, component, currentUser }: Props)
         <div className="navbar-context-meta-secondary">
           {isPullRequest(branchLike) &&
             branchLike.url !== undefined && (
-              <a className="big-spacer-right" href={branchLike.url} rel="nofollow" target="_blank">
+              <a
+                className="display-inline-flex-center big-spacer-right"
+                href={branchLike.url}
+                rel="nofollow"
+                target="_blank">
                 {translate('branches.see_the_pr')}
-                <i className="icon-detach little-spacer-left" />
+                <DetachIcon className="little-spacer-left" size={12} />
               </a>
             )}
           <BranchStatus branchLike={branchLike} />

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
index 42db3b6595b50a745613943fc74d1349f6bbc8f9..144ce956ea4f3e8540b51e33c85b9fd0b9d64c35 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
@@ -41,14 +41,15 @@ exports[`renders meta for pull request 1`] = `
     className="navbar-context-meta-secondary"
   >
     <a
-      className="big-spacer-right"
+      className="display-inline-flex-center big-spacer-right"
       href="https://example.com/pull/1234"
       rel="nofollow"
       target="_blank"
     >
       branches.see_the_pr
-      <i
-        className="icon-detach little-spacer-left"
+      <DetachIcon
+        className="little-spacer-left"
+        size={12}
       />
     </a>
     <BranchStatus

diff --git a/server/sonar-web/src/main/js/app/styles/init/icons.css b/server/sonar-web/src/main/js/app/styles/init/icons.css
index f03f7c34f5b68248d95efa1b9b7971f06510f4c3..55a8586e8ea5ef76cb446cd250411acb81b85080 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/icons.css
+++ b/server/sonar-web/src/main/js/app/styles/init/icons.css
@@ -491,11 +491,6 @@ a:hover > .icon-radio {
   font-size: var(--bigFontSize);
 }
 
-.icon-detach:before {
-  content: '\f08e';
-  font-size: var(--mediumFontSize);
-}
-
 .icon-chevron-left:before {
   content: '\f104';
   font-size: var(--mediumFontSize);

diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.tsx b/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.tsx
index d909bc0faffde752b6ae7d1cf32a7770a375fac0..4996bae73c013785ab697313f12f262e892cf206 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaLink.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { isProvided, getLinkName } from '../../project-admin/links/utils';
 import { ProjectLink } from '../../../app/types';
+import DetachIcon from '../../../components/icons-components/DetachIcon';
 import BugTrackerIcon from '../../../components/ui/BugTrackerIcon';
 
 interface Props {
@@ -41,9 +42,5 @@ function MetaLinkIcon({ link }: Props) {
     return <BugTrackerIcon />;
   }
 
-  return isProvided(link) ? (
-    <i className={`icon-color-link icon-${link.type}`} />
-  ) : (
-    <i className="icon-color-link icon-detach" />
-  );
+  return isProvided(link) ? <i className={`icon-color-link icon-${link.type}`} /> : <DetachIcon />;
 }

diff --git a/server/sonar-web/src/main/js/apps/project-admin/links/LinkRow.tsx b/server/sonar-web/src/main/js/apps/project-admin/links/LinkRow.tsx
index 74ea4df05eec9da0dd9075c7d796dc655ecb8e37..0bd5d10cbd119f0fb5872f609002c57fa41863b9 100644 (file)
--- a/server/sonar-web/src/main/js/apps/project-admin/links/LinkRow.tsx
+++ b/server/sonar-web/src/main/js/apps/project-admin/links/LinkRow.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { isProvided, getLinkName } from './utils';
 import { ProjectLink } from '../../../app/types';
 import ConfirmButton from '../../../components/controls/ConfirmButton';
+import DetachIcon from '../../../components/icons-components/DetachIcon';
 import BugTrackerIcon from '../../../components/ui/BugTrackerIcon';
 import { Button } from '../../../components/ui/buttons';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -70,7 +71,7 @@ export default class LinkRow extends React.PureComponent<Props> {
 
     return (
       <div>
-        {this.renderIcon('icon-detach')}
+        <DetachIcon className="little-spacer-right" />
         <div className="display-inline-block text-top">
           <span className="js-name">{link.name}</span>
         </div>

diff --git a/server/sonar-web/src/main/js/components/icons-components/DetachIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/DetachIcon.tsx
new file mode 100644 (file)
index 0000000..d7b0826
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons-components/DetachIcon.tsx
@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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 * as React from 'react';
+import { IconProps } from './types';
+
+export default function DetachIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
+  return (
+    <svg
+      className={className}
+      height={size}
+      version="1.1"
+      viewBox="0 0 16 16"
+      width={size}
+      xmlSpace="preserve"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <path
+        d="M12 9.25v2.5A2.25 2.25 0 0 1 9.75 14h-6.5A2.25 2.25 0 0 1 1 11.75v-6.5A2.25 2.25 0 0 1 3.25 3h5.5c.14 0 .25.11.25.25v.5c0 .14-.11.25-.25.25h-5.5C2.562 4 2 4.563 2 5.25v6.5c0 .688.563 1.25 1.25 1.25h6.5c.688 0 1.25-.563 1.25-1.25v-2.5c0-.14.11-.25.25-.25h.5c.14 0 .25.11.25.25zm3-6.75v4c0 .273-.227.5-.5.5a.497.497 0 0 1-.352-.148l-1.375-1.375L7.68 10.57a.27.27 0 0 1-.18.078.27.27 0 0 1-.18-.078l-.89-.89a.27.27 0 0 1-.078-.18.27.27 0 0 1 .078-.18l5.093-5.093-1.375-1.375A.497.497 0 0 1 10 2.5c0-.273.227-.5.5-.5h4c.273 0 .5.227.5.5z"
+        style={{ fill }}
+      />;
+    </svg>
+  );
+}