fix(ui) Fix resolution box alignment with commit data (#19855)

Fix the alignment of the 'with commit' mode of the issue resolution box.
I added a storybook example with all the states to make future
testing/refactoring of these components simpler to test.

I also extracted some common storybook layout into a classname as
I didn't like the duplication and didn't think storybook examples
justified more styled components.

docs-ui/components/button.stories.js

@@ -14,10 +14,6 @@ const Item = styled('span')`
   padding: 12px;
 `;
 
-const Section = styled('div')`
-  margin-bottom: 32px;
-`;
-
 const WideButton = styled(Button)`
   width: 200px;
 `;
@@ -28,10 +24,10 @@ storiesOf('UI|Buttons', module)
     'overview',
     withInfo({
       text: 'An overview of all the different buttons and states',
-      propTablesExclude: [Item, Section],
+      propTablesExclude: [Item],
     })(() => (
       <div>
-        <Section>
+        <div className="section">
           <h2>Priorities</h2>
           <Item>
             <Button to="/test" onClick={action('clicked default')}>
@@ -63,8 +59,8 @@ storiesOf('UI|Buttons', module)
               Disabled Button
             </Button>
           </Item>
-        </Section>
-        <Section>
+        </div>
+        <div className="section">
           <h2>Sizes</h2>
           <Item>
             <Button size="zero" borderless>
@@ -80,8 +76,8 @@ storiesOf('UI|Buttons', module)
           <Item>
             <Button>Default</Button>
           </Item>
-        </Section>
-        <Section>
+        </div>
+        <div className="section">
           <h2>Icons</h2>
           <div style={{display: 'flex', alignItems: 'center'}}>
             <Item>
@@ -101,8 +97,8 @@ storiesOf('UI|Buttons', module)
               <Button icon={<IconDelete />}>Default</Button>
             </Item>
           </div>
-        </Section>
-        <Section>
+        </div>
+        <div className="section">
           <h2>Alignment</h2>
           <Item>
             <WideButton align="left">Aligned left</WideButton>
@@ -110,8 +106,8 @@ storiesOf('UI|Buttons', module)
           <Item>
             <WideButton align="right">Aligned right</WideButton>
           </Item>
-        </Section>
-        <Section>
+        </div>
+        <div className="section">
           <h2>States (busy/disabled)</h2>
           <div style={{display: 'flex', alignItems: 'center'}}>
             <Item>
@@ -139,7 +135,7 @@ storiesOf('UI|Buttons', module)
               </Button>
             </Item>
           </div>
-        </Section>
+        </div>
       </div>
     ))
   )
@@ -160,24 +156,24 @@ storiesOf('UI|Buttons', module)
     'ButtonBar',
     withInfo('Buttons in a Bar container')(() => (
       <div>
-        <Section>
+        <div className="section">
           <h3>With a Gap</h3>
           <ButtonBar gap={number('button gap', 1)}>
             <Button>First Button</Button>
             <Button>Second Button</Button>
             <Button>Third Button</Button>
           </ButtonBar>
-        </Section>
+        </div>
 
-        <Section>
+        <div className="section">
           <h3>Merged Buttons with "active" button</h3>
           <ButtonBar active="left" merged>
             <Button barId="left">Left Button</Button>
             <Button barId="right">Right Button</Button>
           </ButtonBar>
-        </Section>
+        </div>
 
-        <Section>
+        <div className="section">
           <h3>Multiple Merged Buttons with "active" button</h3>
           <ButtonBar active="2" merged>
             <Button barId="1">First Button</Button>
@@ -185,7 +181,7 @@ storiesOf('UI|Buttons', module)
             <Button barId="3">Third Button</Button>
             <Button barId="4">Fourth Button</Button>
           </ButtonBar>
-        </Section>
+        </div>
       </div>
     ))
   );

docs-ui/components/gridEditable.stories.js

@@ -2,15 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from '@storybook/addon-info';
-import styled from '@emotion/styled';
 
 import Button from 'app/components/button';
 import GridEditable from 'app/components/gridEditable';
 
-const Section = styled('div')`
-  margin-bottom: 32px;
-`;
-
 const COLUMN_ORDER = [
   {
     key: 'farm',
@@ -105,26 +100,26 @@ storiesOf('UI|GridEditable', module)
     'default',
     withInfo('Render a simple resizable table')(() => (
       <React.Fragment>
-        <Section>
+        <div className="section">
           <h2>Basic Table</h2>
           <GridParent />
-        </Section>
+        </div>
       </React.Fragment>
     ))
   )
   .add(
     'with a header',
     withInfo('Include a header and action buttons')(() => (
-      <Section>
+      <div className="section">
         <h2>Table with title & header buttons</h2>
         <GridParent withHeader title="Results" />
-      </Section>
+      </div>
     ))
   )
   .add(
     'isLoading',
     withInfo('')(() => (
-      <Section>
+      <div className="section">
         <h2>Loading</h2>
         <GridEditable
           isEditable={false}
@@ -135,13 +130,13 @@ storiesOf('UI|GridEditable', module)
           columnSortBy={COLUMN_SORT_BY}
           grid={{}}
         />
-      </Section>
+      </div>
     ))
   )
   .add(
     'isError',
     withInfo('')(() => (
-      <Section>
+      <div className="section">
         <h2>Error</h2>
         <GridEditable
           isEditable={false}
@@ -152,6 +147,6 @@ storiesOf('UI|GridEditable', module)
           columnSortBy={COLUMN_SORT_BY}
           grid={{}}
         />
-      </Section>
+      </div>
     ))
   );

docs-ui/components/issueResolution.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {withInfo} from '@storybook/addon-info';
+
+import ResolutionBox from 'app/components/resolutionBox';
+import MutedBox from 'app/components/mutedBox';
+
+const actor = {
+  email: 'uhoh@example.com',
+  name: 'Uhoh',
+};
+const RESOLVED_IN_COMMIT = {
+  actor,
+  inCommit: {
+    id: 'deadbeefdeadface',
+    repository: {
+      name: 'getsentry/sentry',
+      provider: {
+        id: 'github',
+      },
+    },
+    dateCreated: '2020-07-01 12:13:14',
+  },
+};
+
+storiesOf('Issues|ResolutionBox & MutedBox', module)
+  .add(
+    'resolved states',
+    withInfo('Basic resolution & resolved by commit')(() => (
+      <div>
+        <div className="section">
+          <h3>Basic resolution</h3>
+          <ResolutionBox projectId="1" statusDetails={{}} />
+        </div>
+
+        <div className="section">
+          <h3>Commit resolution</h3>
+          <ResolutionBox projectId="1" statusDetails={RESOLVED_IN_COMMIT} />
+        </div>
+
+        <div className="section">
+          <h3>Release resolution</h3>
+          <ResolutionBox projectId="1" statusDetails={{inRelease: '20.07', actor}} />
+        </div>
+
+        <div className="section">
+          <h3>Next Release resolution</h3>
+          <ResolutionBox projectId="1" statusDetails={{inNextRelease: true, actor}} />
+        </div>
+      </div>
+    ))
+  )
+  .add(
+    'muted states',
+    withInfo('Various mute modes')(() => (
+      <div>
+        <div className="section">
+          <h3>Basic mute</h3>
+          <MutedBox statusDetails={{}} />
+        </div>
+
+        <div className="section">
+          <h3>Mute Until</h3>
+          <MutedBox statusDetails={{ignoreUntil: '2020-07-01 12:13:14'}} />
+        </div>
+
+        <div className="section">
+          <h3>Mute count</h3>
+          <MutedBox statusDetails={{ignoreCount: 10}} />
+        </div>
+
+        <div className="section">
+          <h3>Mute count with window</h3>
+          <MutedBox statusDetails={{ignoreCount: 10, ignoreWindow: 5}} />
+        </div>
+
+        <div className="section">
+          <h3>Mute user count</h3>
+          <MutedBox statusDetails={{ignoreUserCount: 10}} />
+        </div>
+
+        <div className="section">
+          <h3>Mute user count with window</h3>
+          <MutedBox statusDetails={{ignoreUserCount: 10, ignoreUserWindow: 5}} />
+        </div>
+      </div>
+    ))
+  );

docs-ui/components/issueSyncListElement.stories.js

@@ -6,7 +6,7 @@ import {withInfo} from '@storybook/addon-info';
 import space from 'app/styles/space';
 import IssueSyncListElement from 'app/components/issueSyncListElement';
 
-storiesOf('Other|IssueSyncListElement', module)
+storiesOf('Issues|IssueSyncListElement', module)
   .add(
     'without issue added',
     withInfo('No issue id or url has been passed')(() => (

docs-ui/less/sentry.less

@@ -15,3 +15,7 @@ html {
 *:after {
   box-sizing: inherit;
 }
+
+.section {
+  margin-bottom: 32px;
+}

src/sentry/static/sentry/app/components/resolutionBox.tsx

@@ -72,7 +72,7 @@ function ResolutionBox({statusDetails, projectId}: Props) {
   return (
     <BannerContainer priority="default">
       <BannerSummary>
-        <IconCheckmark color="green400" />
+        <StyledIconCheckmark color="green400" />
         <span>{renderReason(statusDetails, projectId)}</span>
       </BannerSummary>
     </BannerContainer>
@@ -90,4 +90,15 @@ const StyledTimeSince = styled(TimeSince)`
   font-size: ${p => p.theme.fontSizeSmall};
 `;
 
+const StyledIconCheckmark = styled(IconCheckmark)`
+  /* override margin defined in BannerSummary */
+  margin-top: 0 !important;
+  align-self: center;
+
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+    margin-top: ${space(0.5)} !important;
+    align-self: flex-start;
+  }
+`;
+
 export default ResolutionBox;

tests/js/spec/components/__snapshots__/resolutionBox.spec.jsx.snap

@@ -5,7 +5,7 @@ exports[`ResolutionBox render() handles default 1`] = `
   priority="default"
 >
   <BannerSummary>
-    <IconCheckmark
+    <StyledIconCheckmark
       color="green400"
     />
     <span>
@@ -20,7 +20,7 @@ exports[`ResolutionBox render() handles inCommit 1`] = `
   priority="default"
 >
   <BannerSummary>
-    <IconCheckmark
+    <StyledIconCheckmark
       color="green400"
     />
     <span>
@@ -60,7 +60,7 @@ exports[`ResolutionBox render() handles inNextRelease 1`] = `
   priority="default"
 >
   <BannerSummary>
-    <IconCheckmark
+    <StyledIconCheckmark
       color="green400"
     />
     <span>
@@ -75,7 +75,7 @@ exports[`ResolutionBox render() handles inNextRelease with actor 1`] = `
   priority="default"
 >
   <BannerSummary>
-    <IconCheckmark
+    <StyledIconCheckmark
       color="green400"
     />
     <span>
@@ -123,7 +123,7 @@ exports[`ResolutionBox render() handles inRelease 1`] = `
   priority="default"
 >
   <BannerSummary>
-    <IconCheckmark
+    <StyledIconCheckmark
       color="green400"
     />
     <span>
@@ -157,7 +157,7 @@ exports[`ResolutionBox render() handles inRelease with actor 1`] = `
   priority="default"
 >
   <BannerSummary>
-    <IconCheckmark
+    <StyledIconCheckmark
       color="green400"
     />
     <span>