SONAR-15587 Sonarlint Promotion

9 files changed, 186 insertions, 0 deletions

diff --git a/server/sonar-web/public/images/sq-sl.png b/server/sonar-web/public/images/sq-sl.png
new file mode 100644
index 00000000000..af6b984afea
--- /dev/null
+++ b/server/sonar-web/public/images/sq-sl.png
diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
index e31bf86e066..3ecf5816e69 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
@@ -28,6 +28,7 @@ import IndexationContextProvider from './indexation/IndexationContextProvider';
 import IndexationNotification from './indexation/IndexationNotification';
 import GlobalNav from './nav/global/GlobalNav';
 import StartupModal from './StartupModal';
+import PromotionNotification from './promotion-notification/PromotionNotification';
 import UpdateNotification from './update-notification/UpdateNotification';
 
 export interface Props {
@@ -58,6 +59,7 @@ export default function GlobalContainer(props: Props) {
                   </IndexationContextProvider>
                 </Workspace>
               </div>
+              <PromotionNotification />
             </div>
             {footer}
           </div>
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap
index 7f04cba74c2..03e12641665 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap
@@ -37,6 +37,7 @@ exports[`should render correctly 1`] = `
               </Connect(withAppState(IndexationContextProvider))>
             </Workspace>
           </div>
+          <Connect(withCurrentUser(PromotionNotification)) />
         </div>
         <Connect(GlobalFooter) />
       </div>
diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.css b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.css
new file mode 100644
index 00000000000..52217e8226d
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.css
@@ -0,0 +1,34 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2021 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.
+ */
+.toaster {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  max-width: 550px;
+  background-color: var(--darkBackground);
+  z-index: var(--popupZIndex);
+  box-shadow: 1px 1px 5px 0px black;
+  color: var(--darkBackgroundFontColor);
+  border-radius: 4px;
+}
+
+.toaster-content {
+  border-right: 1px solid var(--darkBackgroundSeparator);
+}
diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx
new file mode 100644
index 00000000000..92765402c3c
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx
@@ -0,0 +1,61 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2021 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 { withCurrentUser } from '../../../components/hoc/withCurrentUser';
+import { translate } from '../../../helpers/l10n';
+import { isLoggedIn } from '../../../helpers/users';
+import './PromotionNotification.css';
+
+export interface PromotionNotificationProps {
+  currentUser: T.CurrentUser;
+}
+
+export function PromotionNotification(props: PromotionNotificationProps) {
+  const { currentUser } = props;
+
+  if (!isLoggedIn(currentUser) || currentUser.sonarLintAdSeen) {
+    return null;
+  }
+
+  return (
+    <div className="toaster display-flex-center big-padded">
+      <div className="toaster-icon spacer-right">
+        <img alt="SonarQube + SonarLint" src="/images/sq-sl.png" />
+      </div>
+      <div className="toaster-content flex-1 padded-left padded-right">
+        <span className="toaster-title text-bold medium">
+          {translate('promotion.sonarlint.title')}
+        </span>
+        <p className="spacer-top">{translate('promotion.sonarlint.content')}</p>
+      </div>
+      <div className="toaster-actions spacer-left padded-left">
+        <a
+          className="button"
+          href="https://www.sonarqube.org/sonarlint/"
+          rel="noreferrer"
+          target="_blank">
+          {translate('learn_more')}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default withCurrentUser(PromotionNotification);
diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/__tests__/PromotionNotification-test.tsx b/server/sonar-web/src/main/js/app/components/promotion-notification/__tests__/PromotionNotification-test.tsx
new file mode 100644
index 00000000000..cbc90b77fc1
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/promotion-notification/__tests__/PromotionNotification-test.tsx
@@ -0,0 +1,36 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2021 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 React from 'react';
+import { mockCurrentUser, mockLoggedInUser } from '../../../../helpers/testMocks';
+import { PromotionNotification, PromotionNotificationProps } from '../PromotionNotification';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('anonymous');
+  expect(
+    shallowRender({ currentUser: mockLoggedInUser({ sonarLintAdSeen: true }) })
+  ).toMatchSnapshot('adAlreadySeen');
+  expect(shallowRender({ currentUser: mockLoggedInUser() })).toMatchSnapshot('loggedIn');
+});
+
+function shallowRender(props: Partial<PromotionNotificationProps> = {}) {
+  return shallow(<PromotionNotification currentUser={mockCurrentUser()} {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/__tests__/__snapshots__/PromotionNotification-test.tsx.snap b/server/sonar-web/src/main/js/app/components/promotion-notification/__tests__/__snapshots__/PromotionNotification-test.tsx.snap
new file mode 100644
index 00000000000..2726d40d53e
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/promotion-notification/__tests__/__snapshots__/PromotionNotification-test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: adAlreadySeen 1`] = `""`;
+
+exports[`should render correctly: anonymous 1`] = `""`;
+
+exports[`should render correctly: loggedIn 1`] = `
+<div
+  className="toaster display-flex-center big-padded"
+>
+  <div
+    className="toaster-icon spacer-right"
+  >
+    <img
+      alt="SonarQube + SonarLint"
+      src="/images/sq-sl.png"
+    />
+  </div>
+  <div
+    className="toaster-content flex-1 padded-left padded-right"
+  >
+    <span
+      className="toaster-title text-bold medium"
+    >
+      promotion.sonarlint.title
+    </span>
+    <p
+      className="spacer-top"
+    >
+      promotion.sonarlint.content
+    </p>
+  </div>
+  <div
+    className="toaster-actions spacer-left padded-left"
+  >
+    <a
+      className="button"
+      href="https://www.sonarqube.org/sonarlint/"
+      rel="noreferrer"
+      target="_blank"
+    >
+      learn_more
+    </a>
+  </div>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index 21528195573..ee49a1f5451 100644
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -120,6 +120,11 @@ module.exports = {
     // code/pre
     codeBackground: '#e6e6e6',
 
+    //promotion
+    darkBackground: '#292929',
+    darkBackgroundSeparator: '#413b3b',
+    darkBackgroundFontColor: '#f6f8fa',
+
     // sonarcloud
     sonarcloudOrange500: '#fd6a00',
     sonarcloudOrange600: '#e26003',
diff --git a/server/sonar-web/src/main/js/types/types.d.ts b/server/sonar-web/src/main/js/types/types.d.ts
index 6884cc86435..3b82fbe999d 100644
--- a/server/sonar-web/src/main/js/types/types.d.ts
+++ b/server/sonar-web/src/main/js/types/types.d.ts
@@ -443,6 +443,7 @@ declare namespace T {
     local?: boolean;
     scmAccounts: string[];
     settings?: CurrentUserSetting[];
+    sonarLintAdSeen?: boolean;
   }
 
   export interface Measure extends MeasureIntern {