feat(visibility): add info message for opt in users (#11953)

* add info message for opt-in users

* add flag so that duplicate alerts can be added in other situations

* cleanup

* check for sentry 10

* Add test for new alert store behavior.

src/sentry/static/sentry/app/components/alertMessage.jsx

@@ -27,11 +27,6 @@ const StyledCloseButton = styled.button`
   right: ${p => p.theme.grid}px;
   top: 7px;
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  ${StyledInlineSvg} {
-    color: ${p => p.theme.gray4};
-  }
-
   &:hover {
     opacity: 0.8;
   }

src/sentry/static/sentry/app/components/organizations/globalSelectionHeader/globalSelectionHeader.jsx

@@ -20,6 +20,7 @@ import {
   updateProjects,
 } from 'app/actionCreators/globalSelection';
 import {DEFAULT_STATS_PERIOD} from 'app/constants';
+import AlertActions from 'app/actions/alertActions';
 import BackToIssues from 'app/components/organizations/backToIssues';
 import Header from 'app/components/organizations/header';
 import HeaderItemPosition from 'app/components/organizations/headerItemPosition';
@@ -98,6 +99,20 @@ class GlobalSelectionHeader extends React.Component {
       return;
     }
 
+    const hasSentry10 = new Set(this.props.organization.features).has('sentry10');
+
+    if (hasSentry10)
+      AlertActions.addAlert({
+        message:
+          'Hi! You are seeing some new changes to Sentry as a member of our early adopter program. Click to read more.',
+        type: 'info',
+        url:
+          'https://forum.sentry.io/t/new-product-changes-now-available-for-preview/5805',
+        neverExpire: true,
+        noDuplicates: true,
+        id: 'visibility-changes-alert-message',
+      });
+
     const hasMultipleProjectFeature = this.hasMultipleProjectSelection();
 
     const stateFromRouter = getStateFromQuery(this.props.location.query);

src/sentry/static/sentry/app/stores/alertStore.jsx

@@ -12,6 +12,9 @@ const AlertStore = Reflux.createStore({
   },
 
   onAddAlert(alert) {
+    const alertAlreadyExists = this.alerts.some(a => a.id == alert.id);
+    if (alertAlreadyExists && alert.noDuplicates) return;
+
     if (defined(alert.id)) {
       let expirations = localStorage.getItem('alerts:muted');
       if (defined(expirations)) {
@@ -36,7 +39,7 @@ const AlertStore = Reflux.createStore({
       }
     }
 
-    if (alert.expireAfter) {
+    if (alert.expireAfter && !alert.neverExpire) {
       window.setTimeout(() => {
         this.onCloseAlert(alert);
       }, alert.expireAfter);

tests/js/spec/stores/alertStore.spec.jsx

@@ -24,6 +24,23 @@ describe('AlertStore', function() {
       expect(AlertStore.alerts[0].key).toEqual(0);
       expect(AlertStore.alerts[1].key).toEqual(1);
     });
+
+    it('should not add duplicates when noDuplicates is set', function() {
+      AlertStore.onAddAlert({
+        id: 'unique-key',
+        message: 'Bzzzzzzp *crash*',
+        type: 'error',
+        noDuplicates: true,
+      });
+      AlertStore.onAddAlert({
+        id: 'unique-key',
+        message: 'Bzzzzzzp *crash*',
+        type: 'error',
+        noDuplicates: true,
+      });
+
+      expect(AlertStore.alerts).toHaveLength(1);
+    });
   });
 
   describe('onCloseAlert()', function() {