[MM-25264] [MM-25265] Create and apply filter component to user grids (…

…mattermost#5882) * Filter component styling * Add filter component to team members, filters not hooked up * Fix types and set proper icon for filter * Fix tests * Update redux * Use existing translations when possible * Create admin_console_base / css_variables * Fix typo * Use selector for filtered count * Update redux * Fix typo * Handle filters with no search better * Translation for Role * Update snaps * Use the right name for filter checkbox * Remove forceupdate on updatevalues * Update redux * Remove filters enabled on datagrid * Review changes * Use classnames and fix options destructuring * Add newlines * MM-26965 Hide guest option in filters when guest accounts disabled * Update redux
Revanth47 · Jul 16, 2020 · 3ea4dd2 · 3ea4dd2
1 parent c15b4a3
commit 3ea4dd2
Show file tree

Hide file tree

Showing 34 changed files with 1,274 additions and 73 deletions.
diff --git a/actions/views/search.js b/actions/views/search.js
@@ -13,6 +13,26 @@ export function setModalSearchTerm(term) {
  };
 }
 
+export function setUserGridSearch(term) {
+ return async (dispatch) => {
+ dispatch({
+ type: SearchTypes.SET_USER_GRID_SEARCH,
+ data: term,
+ });
+ return {data: true};
+ };
+}
+
+export function setUserGridFilters(filters = {}) {
+ return async (dispatch) => {
+ dispatch({
+ type: SearchTypes.SET_USER_GRID_FILTERS,
+ data: filters,
+ });
+ return {data: true};
+ };
+}
+
 export function setSystemUsersSearch(term, team = '', filter = '') {
  return async (dispatch) => {
  dispatch({

diff --git a/components/add_users_to_team_modal/index.ts b/components/add_users_to_team_modal/index.ts
@@ -28,7 +28,7 @@ type Actions = {
 function mapStateToProps(state: GlobalState, props: Props) {
  const {id: teamId} = props.team;
 
- let filterOptions: {} = {skipInactive: true};
+ let filterOptions: {} = {active: true};
  if (props.filterExcludeGuests) {
  filterOptions = {role: 'system_user', ...filterOptions};
  }

diff --git a/components/admin_console/data_grid/data_grid.scss b/components/admin_console/data_grid/data_grid.scss
@@ -88,7 +88,7 @@
 
  .DataGrid_row {
  border-left: 2px solid transparent;
- 
+
  &:nth-child(odd) {
  background-color: $bg--gray;
  }

diff --git a/components/admin_console/data_grid/data_grid.tsx b/components/admin_console/data_grid/data_grid.tsx
@@ -7,6 +7,7 @@ import {FormattedMessage} from 'react-intl';
 import NextIcon from 'components/widgets/icons/fa_next_icon';
 import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
+import {FilterOptions} from 'components/admin_console/filter/filter';
 
 import DataGridHeader from './data_grid_header';
 import DataGridRow from './data_grid_row';
@@ -54,6 +55,12 @@ type Props = {
  search: (term: string) => void;
  term: string;
  searchPlaceholder?: string;
+
+ filterProps?: {
+ options: FilterOptions;
+ keys: string[];
+ onFilter: (options: FilterOptions) => void;
+ };
 };
 
 type State = {
@@ -182,6 +189,7 @@ class DataGrid extends React.PureComponent<Props, State> {
  onSearch={this.search}
  placeholder={this.props.searchPlaceholder || ''}
  term={this.props.term}
+ filterProps={this.props.filterProps}
  />
  );
  }

diff --git a/components/admin_console/data_grid/data_grid_search.tsx b/components/admin_console/data_grid/data_grid_search.tsx
@@ -7,29 +7,62 @@ import FaSearchIcon from 'components/widgets/icons/fa_search_icon';
 
 import * as Utils from 'utils/utils.jsx';
 
+import Filter, {FilterOptions} from 'components/admin_console/filter/filter';
+
 import './data_grid.scss';
 
 type Props = {
  onSearch: (term: string) => void;
  placeholder: string;
  term: string;
+
+ filterProps?: {
+ options: FilterOptions;
+ keys: string[];
+ onFilter: (options: FilterOptions) => void;
+ };
+}
+
+type State = {
+ term: string;
 }
 
-class DataGridSearch extends React.PureComponent<Props> {
+class DataGridSearch extends React.PureComponent<Props, State> {
+ public constructor(props: Props) {
+ super(props);
+
+ this.state = {
+ term: '',
+ };
+ }
+
  handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
  const term = e.target.value;
+ this.setState({term});
  this.props.onSearch(term);
  }
 
  resetSearch = () => {
  this.props.onSearch('');
- }
+ };
+
+ onFilter = (filters: FilterOptions) => {
+ this.props.filterProps?.onFilter(filters);
+ };
 
  render() {
+ const {filterProps} = this.props;
+
  let {placeholder} = this.props;
  if (!placeholder) {
  placeholder = Utils.localizeMessage('search_bar.search', 'Search');
  }
+
+ let filter;
+ if (filterProps) {
+ filter = <Filter {...filterProps}/>;
+ }
+
  return (
  <div className='DataGrid_search'>
  <div className='DataGrid_searchBar'>
@@ -52,6 +85,8 @@ class DataGridSearch extends React.PureComponent<Props> {
  data-testid='clear-search'
  />
  </div>
+
+ {filter}
  </div>
  );
  }

diff --git a/components/admin_console/filter/filter.scss b/components/admin_console/filter/filter.scss
@@ -0,0 +1,122 @@
+.Filter {
+ padding-left: 8px;
+ position: relative;
+ display: inline-block;
+
+ .Filter_button {
+ width: auto;
+ height: 32px;
+
+ background: var(--sys-center-channel-bg);
+ border-radius: 4px;
+ border: 0px;
+ color: var(--sys-button-bg);
+ font-size: 12px;
+ padding: 0 10px;
+
+ &.Filter__active, &:hover, &:focus {
+ background: linear-gradient(0deg, rgba(var(--sys-button-bg-rgb), 0.12), rgba(var(--sys-button-bg-rgb), 0.12)), var(--sys-center-channel-bg);
+ }
+ }
+
+ .Icon {
+ margin-right: 2px;
+ font-size: 14px;
+ }
+
+ .Filter_content {
+ display: none;
+ position: absolute;
+ padding: 16px;
+ padding-top: 8px;
+ min-width: 256px;
+ margin-bottom: 24px;
+
+ background: var(--sys-center-channel-bg);
+
+ border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+ box-sizing: border-box;
+ box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
+ border-radius: 4px;
+ z-index: 1;
+
+ &.Filter__show {
+ display: block;
+ }
+
+ hr {
+ margin: 8px -16px;
+ padding: 0;
+ }
+ }
+
+ .Filter_header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .Filter_title {
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 14px;
+ padding: 8px;
+ color: var(--sys-center-channel-color);
+ }
+
+ .Filter_reset {
+ font-size: 12px;
+ line-height: 16px;
+ padding: 8px
+ }
+ }
+
+ .Filter_lists {
+ white-space: nowrap;
+ }
+
+ .Filter_apply {
+ float: right;
+ margin: 0 8px 8px 0px;
+ border-radius: 4px;
+ font-size: 12px;
+
+ &:disabled {
+ background: rgba(var(--sys-center-channel-color-rgb), 0.1);
+ color: var(--sys-center-channel-color);
+ }
+ }
+
+ .FilterList {
+ display: inline-block;
+ vertical-align: top;
+ width: 140px;
+ padding: 16px 16px 16px 8px;
+ font-size: 14px;
+
+ .FilterList__full {
+ width: 280px;
+ display: block;
+ }
+
+ .FilterList_name {
+ font-size: 12px;
+ font-weight: normal;
+ padding-bottom: 8px;
+ }
+
+ .FilterList_checkbox {
+ color: var(--sys-center-channel-color);
+
+ input {
+ vertical-align: bottom;
+ position: relative;
+ top: -4px;
+ margin-right: 8px
+ }
+
+ label {
+ font-weight: normal;
+ }
+ }
+ }
+}