From da32c0ff93678d597a842f24185050fe6062e6a4 Mon Sep 17 00:00:00 2001
From: Hossein Ahmadian-Yazdi <hahmadia@users.noreply.github.com>
Date: Wed, 20 May 2020 10:28:47 -0400
Subject: [PATCH] [MM-25165] Fix search bar disappearing (#5502)

* fix search bar disappearing

* Revert "fix search bar disappearing"

This reverts commit 114cd7071c0704f7b4433eac89fbc828c474281c.

* Fix search bar not showing

* update snapshots

* Fix searching

* Fix padding

* fix snapshots
---
 .../team_channel_settings/abstract_list.jsx   |  14 +-
 .../__snapshots__/channel_list.test.tsx.snap  | 450 +++++++++---------
 .../channel/list/channel_list.tsx             |  69 +--
 .../__snapshots__/group_list.test.tsx.snap    |   2 +
 .../__snapshots__/team_list.test.jsx.snap     | 450 +++++++++---------
 .../team/list/team_list.jsx                   |  61 +--
 sass/components/_team-channel-settings.scss   |   2 +-
 7 files changed, 540 insertions(+), 508 deletions(-)

diff --git a/components/admin_console/team_channel_settings/abstract_list.jsx b/components/admin_console/team_channel_settings/abstract_list.jsx
index 3924274d0c10..1dda1a6ae962 100644
--- a/components/admin_console/team_channel_settings/abstract_list.jsx
+++ b/components/admin_console/team_channel_settings/abstract_list.jsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
@@ -23,10 +24,12 @@ export default class AbstractList extends React.PureComponent {
             getData: PropTypes.func.isRequired,
             removeGroup: PropTypes.func,
         }).isRequired,
+        noPadding: PropTypes.bool,
     };
 
     static defaultProps = {
         data: [],
+        noPadding: false,
     };
 
     constructor(props) {
@@ -111,10 +114,19 @@ export default class AbstractList extends React.PureComponent {
 
     render = () => {
         const {startCount, endCount, total} = this.getPaging();
+        const {noPadding} = this.props;
         const lastPage = endCount === total;
         const firstPage = this.state.page === 0;
         return (
-            <div className='groups-list groups-list-no-padding'>
+            <div
+                className={classNames(
+                    'groups-list',
+                    'groups-list-no-padding',
+                    {
+                        'groups-list-less-padding': noPadding,
+                    }
+                )}
+            >
                 {this.renderHeader()}
                 <div
                     id='groups-list--body'
diff --git a/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap b/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap
index 13a94bbcb677..d51a7988e885 100644
--- a/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap
+++ b/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap
@@ -1,52 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`admin_console/team_channel_settings/channel/ChannelList should match snapshot 1`] = `
-<AbstractList
-  actions={
-    Object {
-      "getData": [MockFunction],
-      "removeGroup": [MockFunction],
-      "searchAllChannels": [MockFunction],
-    }
-  }
-  data={
-    Array [
+<div
+  className="groups-list groups-list-no-padding"
+>
+  <div
+    className="groups-list--global-actions"
+  >
+    <div
+      className="group-list-search"
+    >
+      <input
+        data-testid="search-input"
+        onChange={[Function]}
+        onKeyUp={[Function]}
+        placeholder="Search"
+        type="text"
+        value=""
+      />
+      <SearchIcon
+        aria-hidden="true"
+        className="search__icon"
+        id="searchIcon"
+      />
+      <i
+        className="fa fa-times-circle group-filter-action hidden"
+        data-testid="clear-search"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+  <AbstractList
+    actions={
       Object {
-        "display_name": "DN",
-        "id": "123",
-      },
-    ]
-  }
-  emptyListTextDefaultMessage="test"
-  emptyListTextId="test"
-  header={
-    <React.Fragment>
-      <div
-        className="groups-list--global-actions"
-      >
-        <div
-          className="group-list-search"
-        >
-          <input
-            data-testid="search-input"
-            onChange={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            type="text"
-            value=""
-          />
-          <SearchIcon
-            aria-hidden="true"
-            className="search__icon"
-            id="searchIcon"
-          />
-          <i
-            className="fa fa-times-circle group-filter-action hidden"
-            data-testid="clear-search"
-            onClick={[Function]}
-          />
-        </div>
-      </div>
+        "getData": [MockFunction],
+        "removeGroup": [MockFunction],
+        "searchAllChannels": [MockFunction],
+      }
+    }
+    data={
+      Array [
+        Object {
+          "display_name": "DN",
+          "id": "123",
+        },
+      ]
+    }
+    emptyListTextDefaultMessage="test"
+    emptyListTextId="test"
+    header={
       <div
         className="groups-list--header"
       >
@@ -85,179 +87,182 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
           />
         </div>
       </div>
-    </React.Fragment>
-  }
-  key="0"
-  onPageChangedCallback={[Function]}
-  removeGroup={[MockFunction]}
-  renderRow={[Function]}
-  total={1}
-/>
+    }
+    key="0"
+    noPadding={true}
+    onPageChangedCallback={[Function]}
+    removeGroup={[MockFunction]}
+    renderRow={[Function]}
+    total={1}
+  />
+</div>
 `;
 
 exports[`admin_console/team_channel_settings/channel/ChannelList should match snapshot with paging 1`] = `
-<AbstractList
-  actions={
-    Object {
-      "getData": [MockFunction],
-      "removeGroup": [MockFunction],
-      "searchAllChannels": [MockFunction],
-    }
-  }
-  data={
-    Array [
-      Object {
-        "display_name": "DN0",
-        "id": "id0",
-      },
-      Object {
-        "display_name": "DN1",
-        "id": "id1",
-      },
-      Object {
-        "display_name": "DN2",
-        "id": "id2",
-      },
-      Object {
-        "display_name": "DN3",
-        "id": "id3",
-      },
-      Object {
-        "display_name": "DN4",
-        "id": "id4",
-      },
-      Object {
-        "display_name": "DN5",
-        "id": "id5",
-      },
-      Object {
-        "display_name": "DN6",
-        "id": "id6",
-      },
-      Object {
-        "display_name": "DN7",
-        "id": "id7",
-      },
-      Object {
-        "display_name": "DN8",
-        "id": "id8",
-      },
-      Object {
-        "display_name": "DN9",
-        "id": "id9",
-      },
-      Object {
-        "display_name": "DN10",
-        "id": "id10",
-      },
-      Object {
-        "display_name": "DN11",
-        "id": "id11",
-      },
-      Object {
-        "display_name": "DN12",
-        "id": "id12",
-      },
-      Object {
-        "display_name": "DN13",
-        "id": "id13",
-      },
+<div
+  className="groups-list groups-list-no-padding"
+>
+  <div
+    className="groups-list--global-actions"
+  >
+    <div
+      className="group-list-search"
+    >
+      <input
+        data-testid="search-input"
+        onChange={[Function]}
+        onKeyUp={[Function]}
+        placeholder="Search"
+        type="text"
+        value=""
+      />
+      <SearchIcon
+        aria-hidden="true"
+        className="search__icon"
+        id="searchIcon"
+      />
+      <i
+        className="fa fa-times-circle group-filter-action hidden"
+        data-testid="clear-search"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+  <AbstractList
+    actions={
       Object {
-        "display_name": "DN14",
-        "id": "id14",
-      },
-      Object {
-        "display_name": "DN15",
-        "id": "id15",
-      },
-      Object {
-        "display_name": "DN16",
-        "id": "id16",
-      },
-      Object {
-        "display_name": "DN17",
-        "id": "id17",
-      },
-      Object {
-        "display_name": "DN18",
-        "id": "id18",
-      },
-      Object {
-        "display_name": "DN19",
-        "id": "id19",
-      },
-      Object {
-        "display_name": "DN20",
-        "id": "id20",
-      },
-      Object {
-        "display_name": "DN21",
-        "id": "id21",
-      },
-      Object {
-        "display_name": "DN22",
-        "id": "id22",
-      },
-      Object {
-        "display_name": "DN23",
-        "id": "id23",
-      },
-      Object {
-        "display_name": "DN24",
-        "id": "id24",
-      },
-      Object {
-        "display_name": "DN25",
-        "id": "id25",
-      },
-      Object {
-        "display_name": "DN26",
-        "id": "id26",
-      },
-      Object {
-        "display_name": "DN27",
-        "id": "id27",
-      },
-      Object {
-        "display_name": "DN28",
-        "id": "id28",
-      },
-      Object {
-        "display_name": "DN29",
-        "id": "id29",
-      },
-    ]
-  }
-  emptyListTextDefaultMessage="test"
-  emptyListTextId="test"
-  header={
-    <React.Fragment>
-      <div
-        className="groups-list--global-actions"
-      >
-        <div
-          className="group-list-search"
-        >
-          <input
-            data-testid="search-input"
-            onChange={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            type="text"
-            value=""
-          />
-          <SearchIcon
-            aria-hidden="true"
-            className="search__icon"
-            id="searchIcon"
-          />
-          <i
-            className="fa fa-times-circle group-filter-action hidden"
-            data-testid="clear-search"
-            onClick={[Function]}
-          />
-        </div>
-      </div>
+        "getData": [MockFunction],
+        "removeGroup": [MockFunction],
+        "searchAllChannels": [MockFunction],
+      }
+    }
+    data={
+      Array [
+        Object {
+          "display_name": "DN0",
+          "id": "id0",
+        },
+        Object {
+          "display_name": "DN1",
+          "id": "id1",
+        },
+        Object {
+          "display_name": "DN2",
+          "id": "id2",
+        },
+        Object {
+          "display_name": "DN3",
+          "id": "id3",
+        },
+        Object {
+          "display_name": "DN4",
+          "id": "id4",
+        },
+        Object {
+          "display_name": "DN5",
+          "id": "id5",
+        },
+        Object {
+          "display_name": "DN6",
+          "id": "id6",
+        },
+        Object {
+          "display_name": "DN7",
+          "id": "id7",
+        },
+        Object {
+          "display_name": "DN8",
+          "id": "id8",
+        },
+        Object {
+          "display_name": "DN9",
+          "id": "id9",
+        },
+        Object {
+          "display_name": "DN10",
+          "id": "id10",
+        },
+        Object {
+          "display_name": "DN11",
+          "id": "id11",
+        },
+        Object {
+          "display_name": "DN12",
+          "id": "id12",
+        },
+        Object {
+          "display_name": "DN13",
+          "id": "id13",
+        },
+        Object {
+          "display_name": "DN14",
+          "id": "id14",
+        },
+        Object {
+          "display_name": "DN15",
+          "id": "id15",
+        },
+        Object {
+          "display_name": "DN16",
+          "id": "id16",
+        },
+        Object {
+          "display_name": "DN17",
+          "id": "id17",
+        },
+        Object {
+          "display_name": "DN18",
+          "id": "id18",
+        },
+        Object {
+          "display_name": "DN19",
+          "id": "id19",
+        },
+        Object {
+          "display_name": "DN20",
+          "id": "id20",
+        },
+        Object {
+          "display_name": "DN21",
+          "id": "id21",
+        },
+        Object {
+          "display_name": "DN22",
+          "id": "id22",
+        },
+        Object {
+          "display_name": "DN23",
+          "id": "id23",
+        },
+        Object {
+          "display_name": "DN24",
+          "id": "id24",
+        },
+        Object {
+          "display_name": "DN25",
+          "id": "id25",
+        },
+        Object {
+          "display_name": "DN26",
+          "id": "id26",
+        },
+        Object {
+          "display_name": "DN27",
+          "id": "id27",
+        },
+        Object {
+          "display_name": "DN28",
+          "id": "id28",
+        },
+        Object {
+          "display_name": "DN29",
+          "id": "id29",
+        },
+      ]
+    }
+    emptyListTextDefaultMessage="test"
+    emptyListTextId="test"
+    header={
       <div
         className="groups-list--header"
       >
@@ -296,12 +301,13 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
           />
         </div>
       </div>
-    </React.Fragment>
-  }
-  key="0"
-  onPageChangedCallback={[Function]}
-  removeGroup={[MockFunction]}
-  renderRow={[Function]}
-  total={30}
-/>
+    }
+    key="0"
+    noPadding={true}
+    onPageChangedCallback={[Function]}
+    removeGroup={[MockFunction]}
+    renderRow={[Function]}
+    total={30}
+  />
+</div>
 `;
diff --git a/components/admin_console/team_channel_settings/channel/list/channel_list.tsx b/components/admin_console/team_channel_settings/channel/list/channel_list.tsx
index cc732723ad1e..da447e54f870 100644
--- a/components/admin_console/team_channel_settings/channel/list/channel_list.tsx
+++ b/components/admin_console/team_channel_settings/channel/list/channel_list.tsx
@@ -78,6 +78,11 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
     };
 
     private searchBarChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const {searchString} = this.state;
+        if (searchString.length !== 0 && e.target.value.length === 0) {
+            this.resetSearch();
+            return;
+        }
         this.setState({searchString: e.target.value});
     };
 
@@ -92,9 +97,6 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
                 }
             }
         }
-        if (searchString.length === 0) {
-            this.resetSearch();
-        }
     };
     private getDataBySearch = async (page: number, perPage: number, notAssociatedToGroup? : string, excludeDefaultChannels?: boolean): Promise<ChannelWithTeamData[]> => {
         const response = await this.props.actions.searchAllChannels(this.state.searchString, '', false, page, perPage);
@@ -111,32 +113,29 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
 
     header() {
         return (
-            <>
-                {this.searchBar()}
-                <div className='groups-list--header'>
-                    <div className='group-name adjusted'>
+            <div className='groups-list--header'>
+                <div className='group-name adjusted'>
+                    <FormattedMessage
+                        id='admin.channel_settings.channel_list.nameHeader'
+                        defaultMessage='Name'
+                    />
+                </div>
+                <div className='group-content'>
+                    <div className='group-description'>
                         <FormattedMessage
-                            id='admin.channel_settings.channel_list.nameHeader'
-                            defaultMessage='Name'
+                            id='admin.channel_settings.channel_list.teamHeader'
+                            defaultMessage='Team'
                         />
                     </div>
-                    <div className='group-content'>
-                        <div className='group-description'>
-                            <FormattedMessage
-                                id='admin.channel_settings.channel_list.teamHeader'
-                                defaultMessage='Team'
-                            />
-                        </div>
-                        <div className='group-description adjusted'>
-                            <FormattedMessage
-                                id='admin.channel_settings.channel_list.managementHeader'
-                                defaultMessage='Management'
-                            />
-                        </div>
-                        <div className='group-actions'/>
+                    <div className='group-description adjusted'>
+                        <FormattedMessage
+                            id='admin.channel_settings.channel_list.managementHeader'
+                            defaultMessage='Management'
+                        />
                     </div>
+                    <div className='group-actions'/>
                 </div>
-            </>
+            </div>
         );
     }
 
@@ -152,15 +151,19 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
             absProps.actions.getData = this.getDataBySearch;
         }
         return (
-            <AbstractList
-                header={this.header()}
-                renderRow={this.renderRow}
-                {...absProps}
-                key={this.state.pageResetKey}
-                onPageChangedCallback={this.onPageChangedCallback}
-                data={this.state.searchMode ? this.state.channels : this.props.data}
-                total={this.state.searchMode ? this.state.searchTotalCount : this.props.total}
-            />
+            <div className='groups-list groups-list-no-padding'>
+                {this.searchBar()}
+                <AbstractList
+                    header={this.header()}
+                    renderRow={this.renderRow}
+                    noPadding={true}
+                    {...absProps}
+                    key={this.state.pageResetKey}
+                    onPageChangedCallback={this.onPageChangedCallback}
+                    data={this.state.searchMode ? this.state.channels : this.props.data}
+                    total={this.state.searchMode ? this.state.searchTotalCount : this.props.total}
+                />
+            </div>
         );
     }
 
diff --git a/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap b/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap
index 952e2e5ce331..646fb45afe19 100644
--- a/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap
+++ b/components/admin_console/team_channel_settings/group/__snapshots__/group_list.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   emptyListTextDefaultMessage="test"
   emptyListTextId="test"
   header={<Header />}
+  noPadding={false}
   onPageChangedCallback={[MockFunction]}
   removeGroup={[MockFunction]}
   renderRow={[Function]}
@@ -192,6 +193,7 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   emptyListTextDefaultMessage="test"
   emptyListTextId="test"
   header={<Header />}
+  noPadding={false}
   onPageChangedCallback={[MockFunction]}
   removeGroup={[MockFunction]}
   renderRow={[Function]}
diff --git a/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.jsx.snap b/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.jsx.snap
index 0baef5391f79..bbe419765368 100644
--- a/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.jsx.snap
+++ b/components/admin_console/team_channel_settings/team/list/__snapshots__/team_list.test.jsx.snap
@@ -1,52 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`admin_console/team_channel_settings/team/TeamList should match snapshot 1`] = `
-<AbstractList
-  actions={
-    Object {
-      "getData": [MockFunction],
-      "removeGroup": [MockFunction],
-      "searchTeams": [MockFunction],
-    }
-  }
-  data={
-    Array [
+<div
+  className="groups-list groups-list-no-padding"
+>
+  <div
+    className="groups-list--global-actions"
+  >
+    <div
+      className="group-list-search"
+    >
+      <input
+        data-testid="search-input"
+        onChange={[Function]}
+        onKeyUp={[Function]}
+        placeholder="Search"
+        type="text"
+        value=""
+      />
+      <SearchIcon
+        aria-hidden="true"
+        className="search__icon"
+        id="searchIcon"
+      />
+      <i
+        className="fa fa-times-circle group-filter-action hidden"
+        data-testid="clear-search"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+  <AbstractList
+    actions={
       Object {
-        "display_name": "DN",
-        "id": "123",
-      },
-    ]
-  }
-  emptyListTextDefaultMessage="test"
-  emptyListTextId="test"
-  header={
-    <React.Fragment>
-      <div
-        className="groups-list--global-actions"
-      >
-        <div
-          className="group-list-search"
-        >
-          <input
-            data-testid="search-input"
-            onChange={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            type="text"
-            value=""
-          />
-          <SearchIcon
-            aria-hidden="true"
-            className="search__icon"
-            id="searchIcon"
-          />
-          <i
-            className="fa fa-times-circle group-filter-action hidden"
-            data-testid="clear-search"
-            onClick={[Function]}
-          />
-        </div>
-      </div>
+        "getData": [MockFunction],
+        "removeGroup": [MockFunction],
+        "searchTeams": [MockFunction],
+      }
+    }
+    data={
+      Array [
+        Object {
+          "display_name": "DN",
+          "id": "123",
+        },
+      ]
+    }
+    emptyListTextDefaultMessage="test"
+    emptyListTextId="test"
+    header={
       <div
         className="groups-list--header"
       >
@@ -76,179 +78,182 @@ exports[`admin_console/team_channel_settings/team/TeamList should match snapshot
           />
         </div>
       </div>
-    </React.Fragment>
-  }
-  key="0"
-  onPageChangedCallback={[Function]}
-  removeGroup={[MockFunction]}
-  renderRow={[Function]}
-  total={1}
-/>
+    }
+    key="0"
+    noPadding={true}
+    onPageChangedCallback={[Function]}
+    removeGroup={[MockFunction]}
+    renderRow={[Function]}
+    total={1}
+  />
+</div>
 `;
 
 exports[`admin_console/team_channel_settings/team/TeamList should match snapshot with paging 1`] = `
-<AbstractList
-  actions={
-    Object {
-      "getData": [MockFunction],
-      "removeGroup": [MockFunction],
-      "searchTeams": [MockFunction],
-    }
-  }
-  data={
-    Array [
-      Object {
-        "display_name": "DN0",
-        "id": "id0",
-      },
-      Object {
-        "display_name": "DN1",
-        "id": "id1",
-      },
-      Object {
-        "display_name": "DN2",
-        "id": "id2",
-      },
-      Object {
-        "display_name": "DN3",
-        "id": "id3",
-      },
-      Object {
-        "display_name": "DN4",
-        "id": "id4",
-      },
-      Object {
-        "display_name": "DN5",
-        "id": "id5",
-      },
-      Object {
-        "display_name": "DN6",
-        "id": "id6",
-      },
-      Object {
-        "display_name": "DN7",
-        "id": "id7",
-      },
-      Object {
-        "display_name": "DN8",
-        "id": "id8",
-      },
-      Object {
-        "display_name": "DN9",
-        "id": "id9",
-      },
-      Object {
-        "display_name": "DN10",
-        "id": "id10",
-      },
-      Object {
-        "display_name": "DN11",
-        "id": "id11",
-      },
-      Object {
-        "display_name": "DN12",
-        "id": "id12",
-      },
-      Object {
-        "display_name": "DN13",
-        "id": "id13",
-      },
+<div
+  className="groups-list groups-list-no-padding"
+>
+  <div
+    className="groups-list--global-actions"
+  >
+    <div
+      className="group-list-search"
+    >
+      <input
+        data-testid="search-input"
+        onChange={[Function]}
+        onKeyUp={[Function]}
+        placeholder="Search"
+        type="text"
+        value=""
+      />
+      <SearchIcon
+        aria-hidden="true"
+        className="search__icon"
+        id="searchIcon"
+      />
+      <i
+        className="fa fa-times-circle group-filter-action hidden"
+        data-testid="clear-search"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+  <AbstractList
+    actions={
       Object {
-        "display_name": "DN14",
-        "id": "id14",
-      },
-      Object {
-        "display_name": "DN15",
-        "id": "id15",
-      },
-      Object {
-        "display_name": "DN16",
-        "id": "id16",
-      },
-      Object {
-        "display_name": "DN17",
-        "id": "id17",
-      },
-      Object {
-        "display_name": "DN18",
-        "id": "id18",
-      },
-      Object {
-        "display_name": "DN19",
-        "id": "id19",
-      },
-      Object {
-        "display_name": "DN20",
-        "id": "id20",
-      },
-      Object {
-        "display_name": "DN21",
-        "id": "id21",
-      },
-      Object {
-        "display_name": "DN22",
-        "id": "id22",
-      },
-      Object {
-        "display_name": "DN23",
-        "id": "id23",
-      },
-      Object {
-        "display_name": "DN24",
-        "id": "id24",
-      },
-      Object {
-        "display_name": "DN25",
-        "id": "id25",
-      },
-      Object {
-        "display_name": "DN26",
-        "id": "id26",
-      },
-      Object {
-        "display_name": "DN27",
-        "id": "id27",
-      },
-      Object {
-        "display_name": "DN28",
-        "id": "id28",
-      },
-      Object {
-        "display_name": "DN29",
-        "id": "id29",
-      },
-    ]
-  }
-  emptyListTextDefaultMessage="test"
-  emptyListTextId="test"
-  header={
-    <React.Fragment>
-      <div
-        className="groups-list--global-actions"
-      >
-        <div
-          className="group-list-search"
-        >
-          <input
-            data-testid="search-input"
-            onChange={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            type="text"
-            value=""
-          />
-          <SearchIcon
-            aria-hidden="true"
-            className="search__icon"
-            id="searchIcon"
-          />
-          <i
-            className="fa fa-times-circle group-filter-action hidden"
-            data-testid="clear-search"
-            onClick={[Function]}
-          />
-        </div>
-      </div>
+        "getData": [MockFunction],
+        "removeGroup": [MockFunction],
+        "searchTeams": [MockFunction],
+      }
+    }
+    data={
+      Array [
+        Object {
+          "display_name": "DN0",
+          "id": "id0",
+        },
+        Object {
+          "display_name": "DN1",
+          "id": "id1",
+        },
+        Object {
+          "display_name": "DN2",
+          "id": "id2",
+        },
+        Object {
+          "display_name": "DN3",
+          "id": "id3",
+        },
+        Object {
+          "display_name": "DN4",
+          "id": "id4",
+        },
+        Object {
+          "display_name": "DN5",
+          "id": "id5",
+        },
+        Object {
+          "display_name": "DN6",
+          "id": "id6",
+        },
+        Object {
+          "display_name": "DN7",
+          "id": "id7",
+        },
+        Object {
+          "display_name": "DN8",
+          "id": "id8",
+        },
+        Object {
+          "display_name": "DN9",
+          "id": "id9",
+        },
+        Object {
+          "display_name": "DN10",
+          "id": "id10",
+        },
+        Object {
+          "display_name": "DN11",
+          "id": "id11",
+        },
+        Object {
+          "display_name": "DN12",
+          "id": "id12",
+        },
+        Object {
+          "display_name": "DN13",
+          "id": "id13",
+        },
+        Object {
+          "display_name": "DN14",
+          "id": "id14",
+        },
+        Object {
+          "display_name": "DN15",
+          "id": "id15",
+        },
+        Object {
+          "display_name": "DN16",
+          "id": "id16",
+        },
+        Object {
+          "display_name": "DN17",
+          "id": "id17",
+        },
+        Object {
+          "display_name": "DN18",
+          "id": "id18",
+        },
+        Object {
+          "display_name": "DN19",
+          "id": "id19",
+        },
+        Object {
+          "display_name": "DN20",
+          "id": "id20",
+        },
+        Object {
+          "display_name": "DN21",
+          "id": "id21",
+        },
+        Object {
+          "display_name": "DN22",
+          "id": "id22",
+        },
+        Object {
+          "display_name": "DN23",
+          "id": "id23",
+        },
+        Object {
+          "display_name": "DN24",
+          "id": "id24",
+        },
+        Object {
+          "display_name": "DN25",
+          "id": "id25",
+        },
+        Object {
+          "display_name": "DN26",
+          "id": "id26",
+        },
+        Object {
+          "display_name": "DN27",
+          "id": "id27",
+        },
+        Object {
+          "display_name": "DN28",
+          "id": "id28",
+        },
+        Object {
+          "display_name": "DN29",
+          "id": "id29",
+        },
+      ]
+    }
+    emptyListTextDefaultMessage="test"
+    emptyListTextId="test"
+    header={
       <div
         className="groups-list--header"
       >
@@ -278,12 +283,13 @@ exports[`admin_console/team_channel_settings/team/TeamList should match snapshot
           />
         </div>
       </div>
-    </React.Fragment>
-  }
-  key="0"
-  onPageChangedCallback={[Function]}
-  removeGroup={[MockFunction]}
-  renderRow={[Function]}
-  total={30}
-/>
+    }
+    key="0"
+    noPadding={true}
+    onPageChangedCallback={[Function]}
+    removeGroup={[MockFunction]}
+    renderRow={[Function]}
+    total={30}
+  />
+</div>
 `;
diff --git a/components/admin_console/team_channel_settings/team/list/team_list.jsx b/components/admin_console/team_channel_settings/team/list/team_list.jsx
index 8b3868c2e32e..077f83631b96 100644
--- a/components/admin_console/team_channel_settings/team/list/team_list.jsx
+++ b/components/admin_console/team_channel_settings/team/list/team_list.jsx
@@ -37,26 +37,23 @@ export default class TeamList extends React.PureComponent {
 
     header() {
         return (
-            <>
-                {this.searchBar()}
-                <div className='groups-list--header'>
-                    <div className='group-name adjusted'>
+            <div className='groups-list--header'>
+                <div className='group-name adjusted'>
+                    <FormattedMessage
+                        id='admin.team_settings.team_list.nameHeader'
+                        defaultMessage='Name'
+                    />
+                </div>
+                <div className='group-content'>
+                    <div className='group-description adjusted'>
                         <FormattedMessage
-                            id='admin.team_settings.team_list.nameHeader'
-                            defaultMessage='Name'
+                            id='admin.team_settings.team_list.mappingHeader'
+                            defaultMessage='Management'
                         />
                     </div>
-                    <div className='group-content'>
-                        <div className='group-description adjusted'>
-                            <FormattedMessage
-                                id='admin.team_settings.team_list.mappingHeader'
-                                defaultMessage='Management'
-                            />
-                        </div>
-                        <div className='group-actions'/>
-                    </div>
+                    <div className='group-actions'/>
                 </div>
-            </>
+            </div>
         );
     }
 
@@ -88,6 +85,11 @@ export default class TeamList extends React.PureComponent {
     }
 
     searchBarChangeHandler = (e) => {
+        const {searchString} = this.state;
+        if (searchString.length !== 0 && e.target.value.length === 0) {
+            this.resetSearch();
+            return;
+        }
         this.setState({searchString: e.target.value});
     }
 
@@ -101,10 +103,6 @@ export default class TeamList extends React.PureComponent {
                 this.setState({searchMode: true, teams: response.data.teams, searchTotalCount: response.data.total_count, pageResetKey: Date.now()});
             }
         }
-
-        if (searchString.length === 0) {
-            this.resetSearch();
-        }
     }
 
     getDataBySearch = async (page, perPage) => {
@@ -132,15 +130,20 @@ export default class TeamList extends React.PureComponent {
             absProps.actions.getData = this.getDataBySearch;
         }
         return (
-            <AbstractList
-                header={this.header()}
-                renderRow={this.renderRow}
-                {...absProps}
-                key={this.state.pageResetKey}
-                onPageChangedCallback={this.onPageChangedCallback}
-                data={this.state.searchMode ? this.state.teams : this.props.data}
-                total={this.state.searchMode ? this.state.searchTotalCount : this.props.total}
-            />);
+            <div className='groups-list groups-list-no-padding'>
+                {this.searchBar()}
+                <AbstractList
+                    header={this.header()}
+                    renderRow={this.renderRow}
+                    noPadding={true}
+                    {...absProps}
+                    key={this.state.pageResetKey}
+                    onPageChangedCallback={this.onPageChangedCallback}
+                    data={this.state.searchMode ? this.state.teams : this.props.data}
+                    total={this.state.searchMode ? this.state.searchTotalCount : this.props.total}
+                />
+            </div>
+        );
     }
 
     renderRow = (item) => {
diff --git a/sass/components/_team-channel-settings.scss b/sass/components/_team-channel-settings.scss
index 9f96ca08f1b5..50ae5e333d94 100644
--- a/sass/components/_team-channel-settings.scss
+++ b/sass/components/_team-channel-settings.scss
@@ -7,7 +7,7 @@ span.greyed-out {
 .row-content {
     @include opacity(.8)
 }
-.groups-list-no-padding {
+.groups-list-no-padding {    
     div.group-row {
         height: 40px;
         padding-left: 20px;