Browse Source

fix(discover2): Expand table to the remaining whitespace on the right when tags are omitted (#15272)

Closes SEN-1183
Alberto Leal 5 years ago
parent
commit
ea5e20d612
1 changed files with 21 additions and 4 deletions
  1. 21 4
      src/sentry/static/sentry/app/views/eventsV2/events.tsx

+ 21 - 4
src/sentry/static/sentry/app/views/eventsV2/events.tsx

@@ -47,6 +47,16 @@ export default class Events extends React.Component<EventsProps> {
     });
   };
 
+  renderTagsTable = () => {
+    const {organization, eventView, location} = this.props;
+
+    if (eventView.tags.length <= 0) {
+      return null;
+    }
+
+    return <Tags eventView={eventView} organization={organization} location={location} />;
+  };
+
   render() {
     const {organization, eventView, location, router} = this.props;
     const query = location.query.query || '';
@@ -72,19 +82,26 @@ export default class Events extends React.Component<EventsProps> {
           query={query}
           onSearch={this.handleSearch}
         />
-        <Container>
+        <Container hasTags={eventView.tags.length > 0}>
           <Table organization={organization} location={location} />
-          <Tags eventView={eventView} organization={organization} location={location} />
+          {this.renderTagsTable()}
         </Container>
       </React.Fragment>
     );
   }
 }
 
-const Container = styled('div')`
+const Container = styled('div')<{hasTags: boolean}>`
   display: grid;
-  grid-template-columns: auto 300px;
   grid-gap: ${space(2)};
+
+  ${props => {
+    if (props.hasTags) {
+      return 'grid-template-columns: auto 300px;';
+    }
+
+    return 'grid-template-columns: auto;';
+  }};
 `;
 
 const StyledSearchBar = styled(SearchBar)`