feat(workflow): add similar color spectrum (#6046)

* ref(workflow): move similar score colors into "palette.less"

* feat(react): add <SimilarSpectrum>

.storybook/webpack.config.js

@@ -60,6 +60,7 @@ module.exports = {
     })
   ],
   resolve: {
+    extensions: appConfig.resolve.extensions,
     alias: Object.assign({}, appConfig.resolve.alias, {
       'sentry-ui': componentPath
     })

docs-ui/.eslintrc

@@ -1,9 +0,0 @@
-{
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "env": {
-    "node": true,
-    "es6": true
-  }
-}

docs-ui/.eslintrc.js

@@ -0,0 +1,19 @@
+var path = require('path');
+
+module.exports = {
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    node: true,
+    es6: true
+  },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: path.join(__dirname, '../.storybook/webpack.config.js')
+      }
+    },
+    'import/extensions': ['.js', '.jsx']
+  }
+};

docs-ui/components/similarSpectrum.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {withInfo} from '@storybook/addon-info';
+
+import SimilarSpectrum from 'sentry-ui/similarSpectrum';
+
+storiesOf('SimilarSpectrum', module).add(
+  'default',
+  withInfo('Description')(() => <SimilarSpectrum />)
+);

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

@@ -19,7 +19,7 @@ const ScoreBar = React.createClass({
   getDefaultProps() {
     return {
       palette: [],
-      paletteClassNames: ['red', 'red', 'orange', 'green', 'green']
+      paletteClassNames: ['low', 'low-med', 'med', 'med-high', 'high']
     };
   },
 

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

@@ -15,7 +15,7 @@ const scoreComponents = {
 };
 
 // classnames that map to colors to css
-const scoreClassNames = ['low', 'low', 'low', 'med', 'high', 'high'];
+const scoreClassNames = ['low', 'low', 'low-med', 'med', 'med-high', 'high'];
 
 const SimilarScoreCard = React.createClass({
   propTypes: {

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {t} from '../locale';
+import '../../less/components/similarSpectrum.less';
+
+const SimilarSpectrum = React.createClass({
+  propTypes: {},
+
+  getDefaultProps() {
+    return {};
+  },
+
+  getInitialState() {
+    return {};
+  },
+
+  render() {
+    let {className} = this.props;
+    let cx = classNames('similar-spectrum', className);
+
+    return (
+      <div className={cx}>
+        <span>
+          {t('Similar')}
+        </span>
+        <span className="similar-spectrum-box high" />
+        <span className="similar-spectrum-box med-high" />
+        <span className="similar-spectrum-box med" />
+        <span className="similar-spectrum-box low-med" />
+        <span className="similar-spectrum-box low" />
+        <span>
+          {t('Not Similar')}
+        </span>
+      </div>
+    );
+  }
+});
+
+export default SimilarSpectrum;

src/sentry/static/sentry/app/views/groupSimilar/similarList.jsx

@@ -6,7 +6,9 @@ import {t} from '../../locale';
 import Pagination from '../../components/pagination';
 import QueryCount from '../../components/queryCount';
 import SimilarItem from './similarItem';
+import SimilarSpectrum from '../../components/similarSpectrum';
 import SimilarToolbar from './similarToolbar';
+import SpreadLayout from '../../components/spreadLayout';
 
 const SimilarItemPropType = PropTypes.shape({
   issue: Group,
@@ -70,10 +72,13 @@ const SimilarList = React.createClass({
 
     return (
       <div className="similar-list-container">
-        <h2>
-          <span>{t('Similar Issues')}</span>
-          <QueryCount count={items.length + filteredItems.length} />
-        </h2>
+        <SpreadLayout className="similar-list-header">
+          <h2>
+            <span>{t('Similar Issues')}</span>
+            <QueryCount count={items.length + filteredItems.length} />
+          </h2>
+          <SimilarSpectrum />
+        </SpreadLayout>
         <SimilarToolbar onMerge={onMerge} />
 
         <div className="similar-list">

src/sentry/static/sentry/less/components/scoreBar.less

@@ -1,5 +1,4 @@
-@import '../palette.less';
-
+@import '../similar-scores.less';
 
 @thickness: 4px;
 @size: 40px;
@@ -17,23 +16,11 @@
 .score-bar-bar {
   border-radius: 3px;
   margin: 2px;
+  .similar-scores;
 
   &.empty {
     background-color: @gray-lightest;
   }
-
-  // Colors
-  &.red {
-    background-color: @orange;
-  }
-
-  &.orange {
-    background-color: @yellow-orange;
-  }
-
-  &.green {
-    background-color: @green;
-  }
 }
 
 .horizontal {

src/sentry/static/sentry/less/components/similarSpectrum.less

@@ -0,0 +1,13 @@
+@import "../similar-scores.less";
+
+.similar-spectrum {
+  display: flex;
+  font-size: 12px;
+}
+
+.similar-spectrum-box {
+  border-radius: 2px;
+  margin: 5px;
+  width: 14px;
+  .similar-scores;
+}