Removing 'Show All' in Query and Packs (#1275)

frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx

@@ -1,64 +1,25 @@
 import React, { Component, PropTypes } from 'react';
-import { take } from 'lodash';
 import { Link } from 'react-router';
 
-import Button from 'components/buttons/Button';
 import Icon from 'components/icons/Icon';
 import scheduledQueryInterface from 'interfaces/scheduled_query';
 
 const baseClass = 'pack-details-side-panel';
-const DEFAULT_NUM_QUERIES = 6;
 
 class ScheduledQueriesSection extends Component {
   static propTypes = {
     scheduledQueries: PropTypes.arrayOf(scheduledQueryInterface),
   };
 
-  constructor (props) {
-    super(props);
-
-    this.state = { showAllQueries: false };
-  }
-
-  onShowAll = () => {
-    this.setState({ showAllQueries: true });
-
-    return false;
-  }
-
-  renderShowMoreQueries = () => {
-    const { showAllQueries } = this.state;
-    const scheduledQueryCount = this.props.scheduledQueries.length;
-    const shouldRenderShowMore = !showAllQueries && scheduledQueryCount > DEFAULT_NUM_QUERIES;
-
-    if (shouldRenderShowMore) {
-      const { onShowAll } = this;
-      const numMoreQueries = scheduledQueryCount - DEFAULT_NUM_QUERIES;
-      const queryText = numMoreQueries === 1 ? 'Query' : 'Queries';
-
-      return (
-        <div className={`${baseClass}__more-queries-section`}>
-          <span>{numMoreQueries} More {queryText}</span>
-          <Button onClick={onShowAll} variant="unstyled">SHOW</Button>
-        </div>
-      );
-    }
-
-    return false;
-  }
-
   render () {
-    const { renderShowMoreQueries } = this;
     const { scheduledQueries } = this.props;
-    const { showAllQueries } = this.state;
-    const queriesToRender = showAllQueries ? scheduledQueries : take(scheduledQueries, DEFAULT_NUM_QUERIES);
 
     return (
       <div className={`${baseClass}__scheduled-queries`}>
         <p className={`${baseClass}__section-label`}>Queries</p>
 
         <ul className={`${baseClass}__queries-list`}>
-          {queriesToRender.map((scheduledQuery) => {
+          {scheduledQueries.map((scheduledQuery) => {
             return (
               <li key={`scheduled-query-${scheduledQuery.id}`}>
                 <Icon className={`${baseClass}__query-icon`} name="query" />
@@ -67,7 +28,6 @@ class ScheduledQueriesSection extends Component {
             );
           })}
         </ul>
-        {renderShowMoreQueries()}
       </div>
     );
   }

frontend/components/side_panels/PackDetailsSidePanel/_styles.scss

@@ -21,22 +21,6 @@
     display: block;
   }
 
-  &__more-queries-section {
-    @include display(flex);
-    @include justify-content(space-between);
-
-    color: $link;
-    font-size: 16px;
-    text-transform: uppercase;
-
-    button {
-      color: $link;
-      font-size: 16px;
-      font-weight: $normal;
-      text-transform: uppercase;
-    }
-  }
-
   &__pack-icon {
     color: $text-light;
     margin-right: 11px;

frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx

@@ -9,10 +9,7 @@ import SecondarySidePanelContainer from '../SecondarySidePanelContainer';
 
 import {
   availability,
-  columnsToRender,
   displayTypeForDataType,
-  numAdditionalColumns,
-  shouldShowAllColumns,
 } from './helpers';
 
 const baseClass = 'query-side-panel';
@@ -24,25 +21,6 @@ class QuerySidePanel extends Component {
     selectedOsqueryTable: osqueryTableInterface,
   };
 
-  componentWillMount () {
-    const { selectedOsqueryTable } = this.props;
-    const showAllColumns = shouldShowAllColumns(selectedOsqueryTable);
-
-    this.setState({ showAllColumns });
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const { selectedOsqueryTable } = nextProps;
-
-    if (this.props.selectedOsqueryTable !== selectedOsqueryTable) {
-      const showAllColumns = shouldShowAllColumns(selectedOsqueryTable);
-
-      this.setState({ showAllColumns });
-    }
-
-    return false;
-  }
-
   onSelectTable = (value) => {
     const { onOsqueryTableSelect } = this.props;
 
@@ -51,10 +29,6 @@ class QuerySidePanel extends Component {
     return false;
   }
 
-  onShowAllColumns = () => {
-    this.setState({ showAllColumns: true });
-  }
-
   onSuggestedQueryClick = (query) => {
     return (evt) => {
       evt.preventDefault();
@@ -67,8 +41,7 @@ class QuerySidePanel extends Component {
 
   renderColumns = () => {
     const { selectedOsqueryTable } = this.props;
-    const { showAllColumns } = this.state;
-    const columns = columnsToRender(selectedOsqueryTable, showAllColumns);
+    const columns = selectedOsqueryTable.columns;
     const columnBaseClass = 'query-column-list';
 
     return columns.map((column) => {
@@ -84,23 +57,6 @@ class QuerySidePanel extends Component {
     });
   }
 
-  renderMoreColumns = () => {
-    const { selectedOsqueryTable } = this.props;
-    const { showAllColumns } = this.state;
-    const { onShowAllColumns } = this;
-
-    if (showAllColumns) {
-      return false;
-    }
-
-    return (
-      <div className={`${baseClass}__column-wrapper`}>
-        <span className={`${baseClass}__more-columns`}>{numAdditionalColumns(selectedOsqueryTable)} MORE COLUMNS</span>
-        <button className={`button--unstyled ${baseClass}__show-columns`} onClick={onShowAllColumns}>SHOW</button>
-      </div>
-    );
-  }
-
   renderTableSelect = () => {
     const { onSelectTable } = this;
     const { selectedOsqueryTable } = this.props;
@@ -122,7 +78,6 @@ class QuerySidePanel extends Component {
   render () {
     const {
       renderColumns,
-      renderMoreColumns,
       renderTableSelect,
     } = this;
     const { selectedOsqueryTable: { description, platform } } = this.props;
@@ -154,7 +109,6 @@ class QuerySidePanel extends Component {
           <ul className={`${baseClass}__column-list`}>
             {renderColumns()}
           </ul>
-          {renderMoreColumns()}
         </div>
       </SecondarySidePanelContainer>
     );

frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.jsx

@@ -53,9 +53,4 @@ describe('QuerySidePanel - component', () => {
 
     expect(onOsqueryTableSelect).toHaveBeenCalledWith('groups');
   });
-
-  it('renders a CTA to show more columns', () => {
-    const component = mount(<QuerySidePanel {...props} />);
-    expect(component.text()).toContain('4 MORE COLUMNSSHOW');
-  });
 });

frontend/components/side_panels/QuerySidePanel/_styles.scss

@@ -60,22 +60,6 @@
     border-top: 1px solid $accent-light;
   }
 
-  &__more-columns {
-    @include flex-grow(1);
-    font-size: 14px;
-    font-weight: $light;
-    line-height: 1.43;
-    letter-spacing: 0.5px;
-    color: $text-medium;
-  }
-
-  &__show-columns {
-    color: $brand;
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1.43;
-  }
-
   &__suggestion {
     @include flex-grow(1);
     font-size: 14px;

frontend/components/side_panels/QuerySidePanel/helpers.js

@@ -1,14 +1,7 @@
 import { includes } from 'lodash';
 
-const DEFAULT_NUM_COLUMNS_TO_DISPLAY = 5;
 const ALL_PLATFORMS_AVAILABILITY = ['specs', 'utility'];
 
-export const columnsToRender = (table, showAllColumns) => {
-  if (showAllColumns) return table.columns;
-
-  return table.columns.slice(0, DEFAULT_NUM_COLUMNS_TO_DISPLAY);
-};
-
 export const displayTypeForDataType = (dataType) => {
   switch (dataType) {
     case 'TEXT_TYPE':
@@ -22,18 +15,6 @@ export const displayTypeForDataType = (dataType) => {
   }
 };
 
-export const shouldShowAllColumns = (table) => {
-  const { columns } = table;
-
-  return columns.length <= DEFAULT_NUM_COLUMNS_TO_DISPLAY;
-};
-
-export const numAdditionalColumns = (table) => {
-  const { columns } = table;
-
-  return columns.length - DEFAULT_NUM_COLUMNS_TO_DISPLAY;
-};
-
 export const availability = (platform) => {
   if (!platform) {
     return [];

frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss

@@ -9,9 +9,9 @@
   width: $sidepanel-width;
   margin-top: $pad-base;
   margin-left: $pad-base;
-  min-height: 100%;
   border-top-left-radius: 3px;
   padding-top: $pad-base;
+  min-height: calc(100vh - #{$pad-base} - #{$footer-height});
 
   @include breakpoint(smalldesk) {
     width: $sidepanel-tablet-width;