SONAR-12276 Remove badge styling from elements

4 files changed, 164 insertions, 57 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
index e359a032362..a9e518c7903 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx
@@ -25,12 +25,7 @@ import ProfileActions from '../components/ProfileActions';
 import ProfileDate from '../components/ProfileDate';
 import ProfileLink from '../components/ProfileLink';
 import { Profile } from '../types';
-import {
-  getProfileChangelogPath,
-  getProfilesForLanguagePath,
-  getProfilesPath,
-  isStagnant
-} from '../utils';
+import { getProfileChangelogPath, getProfilesForLanguagePath, getProfilesPath } from '../utils';
 
 interface Props {
   profile: Profile;
@@ -39,33 +34,6 @@ interface Props {
 }
 
 export default class ProfileHeader extends React.PureComponent<Props> {
-  renderUpdateDate() {
-    const { profile } = this.props;
-    let inner = (
-      <span>
-        {translate('quality_profiles.updated_')} <ProfileDate date={profile.rulesUpdatedAt} />
-      </span>
-    );
-    if (isStagnant(profile)) {
-      inner = <span className="badge badge-normal-size badge-focus">{inner}</span>;
-    }
-    return <li className="small spacer-right">{inner}</li>;
-  }
-
-  renderUsageDate() {
-    const { profile } = this.props;
-    let inner = (
-      <span>
-        {translate('quality_profiles.used_')} <ProfileDate date={profile.lastUsed} />
-      </span>
-    );
-    if (!profile.lastUsed) {
-      inner = <span className="badge badge-normal-size badge-focus">{inner}</span>;
-    }
-
-    return <li className="small big-spacer-right">{inner}</li>;
-  }
-
   render() {
     const { organization, profile } = this.props;
 
@@ -98,8 +66,12 @@ export default class ProfileHeader extends React.PureComponent<Props> {
 
         <div className="pull-right">
           <ul className="list-inline" style={{ lineHeight: '24px' }}>
-            {this.renderUpdateDate()}
-            {this.renderUsageDate()}
+            <li className="small spacer-right">
+              {translate('quality_profiles.updated_')} <ProfileDate date={profile.rulesUpdatedAt} />
+            </li>
+            <li className="small big-spacer-right">
+              {translate('quality_profiles.used_')} <ProfileDate date={profile.lastUsed} />
+            </li>
             <li>
               <Link
                 className="button"
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileHeader-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileHeader-test.tsx
new file mode 100644
index 00000000000..8100d155a80
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfileHeader-test.tsx
@@ -0,0 +1,38 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockQualityProfile } from '../../../../helpers/testMocks';
+import ProfileHeader from '../ProfileHeader';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<ProfileHeader['props']> = {}) {
+  return shallow(
+    <ProfileHeader
+      organization="foo"
+      profile={mockQualityProfile()}
+      updateProfiles={jest.fn()}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap
new file mode 100644
index 00000000000..dabf705a8b0
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfileHeader-test.tsx.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<header
+  className="page-header quality-profile-header"
+>
+  <div
+    className="note spacer-bottom"
+  >
+    <IndexLink
+      className="text-muted"
+      to="/organizations/foo/quality_profiles"
+    >
+      quality_profiles.page
+    </IndexLink>
+     / 
+    <Link
+      className="text-muted"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      to={
+        Object {
+          "pathname": "/organizations/foo/quality_profiles",
+          "query": Object {
+            "language": "js",
+          },
+        }
+      }
+    >
+      JavaScript
+    </Link>
+  </div>
+  <h1
+    className="page-title"
+  >
+    <ProfileLink
+      className="link-base-color"
+      language="js"
+      name="name"
+      organization="foo"
+    >
+      <span>
+        name
+      </span>
+    </ProfileLink>
+  </h1>
+  <div
+    className="pull-right"
+  >
+    <ul
+      className="list-inline"
+      style={
+        Object {
+          "lineHeight": "24px",
+        }
+      }
+    >
+      <li
+        className="small spacer-right"
+      >
+        quality_profiles.updated_
+         
+        <ProfileDate />
+      </li>
+      <li
+        className="small big-spacer-right"
+      >
+        quality_profiles.used_
+         
+        <ProfileDate />
+      </li>
+      <li>
+        <Link
+          className="button"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/organizations/foo/quality_profiles/changelog",
+              "query": Object {
+                "language": "js",
+                "name": "name",
+              },
+            }
+          }
+        >
+          changelog
+        </Link>
+      </li>
+      <li>
+        <withRouter(ProfileActions)
+          className="pull-left"
+          organization="foo"
+          profile={
+            Object {
+              "activeDeprecatedRuleCount": 2,
+              "activeRuleCount": 10,
+              "childrenCount": 0,
+              "depth": 1,
+              "isBuiltIn": false,
+              "isDefault": false,
+              "isInherited": false,
+              "key": "key",
+              "language": "js",
+              "languageName": "JavaScript",
+              "name": "name",
+              "organization": "foo",
+              "projectCount": 3,
+            }
+          }
+          updateProfiles={[MockFunction]}
+        />
+      </li>
+    </ul>
+  </div>
+</header>
+`;
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
index 8c36db28cbc..85aa99aeed8 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
@@ -28,7 +28,6 @@ import ProfileActions from '../components/ProfileActions';
 import ProfileDate from '../components/ProfileDate';
 import ProfileLink from '../components/ProfileLink';
 import { Profile } from '../types';
-import { isStagnant } from '../utils';
 
 interface Props {
   organization: string | null;
@@ -107,25 +106,6 @@ export default class ProfilesListRow extends React.PureComponent<Props> {
     );
   }
 
-  renderUpdateDate() {
-    const date = <ProfileDate date={this.props.profile.rulesUpdatedAt} />;
-    if (isStagnant(this.props.profile)) {
-      return <span className="badge badge-normal-size badge-focus">{date}</span>;
-    } else {
-      return date;
-    }
-  }
-
-  renderUsageDate() {
-    const { lastUsed } = this.props.profile;
-    const date = <ProfileDate date={lastUsed} />;
-    if (!lastUsed) {
-      return <span className="badge badge-normal-size badge-focus">{date}</span>;
-    } else {
-      return date;
-    }
-  }
-
   render() {
     return (
       <tr
@@ -140,10 +120,10 @@ export default class ProfilesListRow extends React.PureComponent<Props> {
           {this.renderRules()}
         </td>
         <td className="quality-profiles-table-date thin nowrap text-middle text-right">
-          {this.renderUpdateDate()}
+          <ProfileDate date={this.props.profile.rulesUpdatedAt} />
         </td>
         <td className="quality-profiles-table-date thin nowrap text-middle text-right">
-          {this.renderUsageDate()}
+          <ProfileDate date={this.props.profile.lastUsed} />
         </td>
         <td className="quality-profiles-table-actions thin nowrap text-middle text-right">
           <ProfileActions