From 48eedd16ec834bc90cb42abc40eb6c0698cc748b Mon Sep 17 00:00:00 2001
From: Sam M <68707128+sam-m-m@users.noreply.github.com>
Date: Tue, 2 Mar 2021 21:35:18 -0800
Subject: [PATCH] v0.9.3 -> v0.9.4 (#239)

---
 package-lock.json                            |   2 +-
 package.json                                 |   2 +-
 src/__mocks__/filter_mock_data.ts            |  46 +++
 src/__mocks__/index.ts                       |   2 +
 src/__snapshots__/storybook.test.ts.snap     |  38 ++-
 src/components/Filters/FilterPopover.tsx     | 108 ++++++
 src/components/Filters/FilterUnit.tsx        | 135 ++++++++
 src/components/Filters/Filters.tsx           | 126 +++++++
 src/components/Filters/index.ts              |   2 +
 src/components/Filters/types.ts              |  42 +++
 src/components/Filters/utils.ts              | 329 +++++++++++++++++++
 src/components/Tabs/Tab.tsx                  |  62 ++++
 src/components/Tabs/Tabs.stories.tsx         |  60 ++++
 src/components/Tabs/__tests__/index.test.tsx |  38 +++
 src/components/Tabs/index.tsx                | 109 ++++++
 src/components/Tabs/utils.ts                 |  21 ++
 src/components/index.ts                      |   2 +
 17 files changed, 1121 insertions(+), 3 deletions(-)
 create mode 100644 src/__mocks__/filter_mock_data.ts
 create mode 100644 src/__mocks__/index.ts
 create mode 100644 src/components/Filters/FilterPopover.tsx
 create mode 100644 src/components/Filters/FilterUnit.tsx
 create mode 100644 src/components/Filters/Filters.tsx
 create mode 100644 src/components/Filters/index.ts
 create mode 100644 src/components/Filters/types.ts
 create mode 100644 src/components/Filters/utils.ts
 create mode 100644 src/components/Tabs/Tab.tsx
 create mode 100644 src/components/Tabs/Tabs.stories.tsx
 create mode 100644 src/components/Tabs/__tests__/index.test.tsx
 create mode 100644 src/components/Tabs/index.tsx
 create mode 100644 src/components/Tabs/utils.ts

diff --git a/package-lock.json b/package-lock.json
index edb6f789..af764d43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.9.3",
+	"version": "0.9.4",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index f3911112..4b5a7411 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.9.3",
+	"version": "0.9.4",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
diff --git a/src/__mocks__/filter_mock_data.ts b/src/__mocks__/filter_mock_data.ts
new file mode 100644
index 00000000..639963db
--- /dev/null
+++ b/src/__mocks__/filter_mock_data.ts
@@ -0,0 +1,46 @@
+import { FilterOptions } from '../components/Filters'
+
+export const mockDynamicFilterOptions = [
+	{
+		id: '5391d028-d5fe-4c33-a4c9-8719191aaeb1',
+		name: 'Ingestion Dev Account'
+	},
+	{
+		id: '5391d028-d5fe-4c33-a4c9-8719191aaeb8',
+		name: 'Ingestion Prod Account'
+	}
+]
+
+export const mockFilterOptions: FilterOptions = [
+	{
+		filterKey: 'name',
+		options: [
+			'Dev account',
+			'Prod account 1',
+			'Prod account 2',
+			'Test account'
+		],
+		staticFilter: false
+	},
+	{
+		filterKey: 'service',
+		options: [
+			'EC2',
+			'S3',
+			'RDS',
+			'Amazon Keyspaces (for Apache Cassandra)',
+			'EKS'
+		],
+		staticFilter: true
+	},
+	{
+		filterKey: 'model',
+		options: ['instance', 'bucket', 'table'],
+		staticFilter: true
+	},
+	{
+		filterKey: 'region',
+		options: ['us-west-1', 'us-east-2', 'ap-south-1'],
+		staticFilter: true
+	}
+]
diff --git a/src/__mocks__/index.ts b/src/__mocks__/index.ts
new file mode 100644
index 00000000..37e8cf61
--- /dev/null
+++ b/src/__mocks__/index.ts
@@ -0,0 +1,2 @@
+export * from './filter_mock_data'
+export * from './table_mock_data'
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index e70abd3a..472ca7e3 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -2825,6 +2825,42 @@ exports[`Storyshots Skeleton Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Tabs Default 1`] = `
+<div
+  className="light storyWrapper-0-1-2"
+>
+  <div
+    className=""
+  >
+    <div
+      className="tabsList-0-1-138"
+    >
+      <li
+        className="tab-0-1-140 activeTab-0-1-139"
+        onClick={[Function]}
+      >
+        Foo
+      </li>
+      <li
+        className="tab-0-1-140"
+        onClick={[Function]}
+      >
+        Bar
+      </li>
+    </div>
+    <div
+      className="tabPane-0-1-137"
+    >
+      <div
+        className="tabPane-0-1-141"
+      >
+        Foo content text
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Tag Colored 1`] = `
 <div
   className="light storyWrapper-0-1-2"
@@ -2974,7 +3010,7 @@ exports[`Storyshots TimeInput Error 1`] = `
     className="decorator-0-1-115"
   >
     <div
-      className="ant-picker error-0-1-138"
+      className="ant-picker error-0-1-143"
       onMouseUp={[Function]}
     >
       <div
diff --git a/src/components/Filters/FilterPopover.tsx b/src/components/Filters/FilterPopover.tsx
new file mode 100644
index 00000000..0bb9be22
--- /dev/null
+++ b/src/components/Filters/FilterPopover.tsx
@@ -0,0 +1,108 @@
+import { Button } from 'components/Button'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+import FilterUnit from './FilterUnit'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Link } from 'components/Link'
+import { Popover } from 'components/Popover'
+import { SelectOption } from 'components/Select'
+import { usePopoverStyles } from './utils'
+import { FiltersList, OnSearchWrapper, ProcessedFilters } from './types'
+import { IconButton, IconSizes } from 'components/IconButton'
+import React, { FC } from 'react'
+
+interface FilterPopoverProps {
+	allFilters: ProcessedFilters
+	closePopover: () => void
+	dynamicOptions?: SelectOption[]
+	dynamicSearchVal: string
+	filtersList: FiltersList
+	onVisibleChange: (visible: boolean) => void
+	onClickAddFilter: () => void
+	onDelete: (selectedId: string) => void
+	onFilterChange: (selectedId: string, selection: string | string[]) => void
+	onSearchWrapper: OnSearchWrapper
+	pending: boolean
+	setFiltersList: React.Dispatch<React.SetStateAction<FiltersList>>
+	visible?: boolean
+}
+
+export const FilterPopover: FC<FilterPopoverProps> = ({
+	allFilters,
+	closePopover,
+	dynamicOptions,
+	dynamicSearchVal,
+	filtersList,
+	onVisibleChange,
+	onClickAddFilter,
+	onDelete,
+	onFilterChange,
+	onSearchWrapper,
+	pending,
+	setFiltersList,
+	visible = false
+}: FilterPopoverProps) => {
+	const classes = usePopoverStyles()
+
+	return (
+		<Popover
+			classes={[classes.popover]}
+			content={
+				<div className={classes.popoverContent}>
+					<IconButton
+						classes={[classes.closeButton]}
+						onClick={closePopover}
+						size={IconSizes.sm}
+					/>
+					<div className={classes.popoverControls}>
+						<div className={classes.popoverControlsChild}>
+							<FontAwesomeIcon icon={faFilter} />
+						</div>
+						<Button
+							classes={[classes.popoverControlsChild]}
+							disabled={
+								filtersList.length >=
+								Object.keys(allFilters).length
+							}
+							onClick={onClickAddFilter}
+						>
+							+ Add Filter
+						</Button>
+						{filtersList.length > 0 && (
+							<Link
+								classes={[classes.popoverControlsChild]}
+								onClick={() => setFiltersList([])}
+							>
+								Clear Filters
+							</Link>
+						)}
+					</div>
+					<div className={classes.filtersList}>
+						{filtersList.map((filterItem, i) => (
+							<FilterUnit
+								allFilters={allFilters}
+								dynamicOptions={dynamicOptions}
+								dynamicSearchVal={dynamicSearchVal}
+								filtersList={filtersList}
+								id={filterItem.id}
+								key={filterItem.id}
+								onDelete={onDelete}
+								onFilterChange={onFilterChange}
+								onSearchWrapper={onSearchWrapper}
+								pending={pending}
+								selectedFilterKey={filtersList[i].selectedKey}
+							/>
+						))}
+					</div>
+				</div>
+			}
+			onVisibleChange={onVisibleChange}
+			placement='bottomLeft'
+			popupContainerSelector='#filters-popup-wrapper'
+			popupTriggerClasses={[classes.popoverTrigger]}
+			trigger='click'
+			visible={visible}
+		>
+			<i />
+		</Popover>
+	)
+}
diff --git a/src/components/Filters/FilterUnit.tsx b/src/components/Filters/FilterUnit.tsx
new file mode 100644
index 00000000..e4cfd9cd
--- /dev/null
+++ b/src/components/Filters/FilterUnit.tsx
@@ -0,0 +1,135 @@
+import { faEquals } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconButton } from 'components/IconButton'
+import uniq from 'lodash/uniq'
+import {
+	FilterOption,
+	FiltersList,
+	OnSearchWrapper,
+	ProcessedFilters
+} from './types'
+import {
+	formatFilterOptions,
+	getFilterKeysOptions,
+	useFilterUnitStyles
+} from './utils'
+import { MultiSelect, Select, SelectOption } from 'components/Select'
+import React, { FC } from 'react'
+
+interface FilterUnitProps {
+	id: string
+	allFilters: ProcessedFilters
+	dynamicOptions?: SelectOption[]
+	dynamicSearchVal: string
+	onDelete: (selectedId: string) => void
+	onFilterChange: (selectedId: string, selection: string | string[]) => void
+	filtersList: FiltersList
+	onSearchWrapper: OnSearchWrapper
+	pending: boolean
+	selectedFilterKey?: string
+}
+
+const FilterUnit: FC<FilterUnitProps> = ({
+	id,
+	allFilters = {},
+	dynamicOptions,
+	dynamicSearchVal,
+	filtersList = [],
+	onDelete,
+	onFilterChange,
+	onSearchWrapper,
+	pending,
+	selectedFilterKey = ''
+}: FilterUnitProps) => {
+	const classes = useFilterUnitStyles()
+
+	const renderKey = () => (
+		<Select
+			disabled={!!selectedFilterKey}
+			matchSelectedContentWidth={125}
+			onChange={selectedValue =>
+				onFilterChange(id, (selectedValue as unknown) as string)
+			}
+			options={formatFilterOptions(
+				getFilterKeysOptions(allFilters, filtersList)
+			)}
+			placeholder='Select Value'
+			showSearch
+		/>
+	)
+
+	const renderValues = () => {
+		const filterOption: FilterOption = allFilters[selectedFilterKey]
+
+		let options: SelectOption[] = []
+		let dynamicFilterProps = {}
+
+		if (selectedFilterKey && filterOption.options) {
+			// if filter is static, options will be the opts that BE initially gave
+			if (filterOption.staticFilter) {
+				options = formatFilterOptions(filterOption.options)
+			} else {
+				// if filter is dynamic & state is pending, data is still being fetched so options will be empty []. So only get options if status isn't pending
+				if (!pending) {
+					// if dynamic opts don't exist, options will be same as for static with the opts that BE initially gave
+					if (!dynamicOptions) {
+						options = formatFilterOptions(filterOption.options)
+					} else {
+						// if you send empty string to BE (e.g. after typing something and clearing it), it'll send back an empty [] but if there's no search val, we want to display the list of options that BE initially gave so only show the dynamic opts if search val exists
+						if (dynamicSearchVal) options = dynamicOptions
+						// if there is no search val but dynamic options exist - along with options that BE initially gave, make sure to add the selected values(if they exist)
+						else {
+							const filtersListItem = filtersList.find(
+								item => item.selectedKey === selectedFilterKey
+							)
+
+							let selectedVals: string[] = []
+
+							if (
+								filtersListItem &&
+								filtersListItem.selectedValues
+							)
+								selectedVals = filtersListItem.selectedValues
+
+							options = formatFilterOptions(
+								uniq([...filterOption.options, ...selectedVals])
+							)
+						}
+					}
+				}
+
+				// these dynamic filter props should be there for all dynamic filters
+				dynamicFilterProps = {
+					onSearch: onSearchWrapper(selectedFilterKey),
+					pending,
+					searchPlaceholder: 'This one hits BE...'
+				}
+			}
+		}
+
+		return (
+			<MultiSelect
+				disabled={!options.length && !pending}
+				matchSelectedContentWidth={225}
+				maxTagCount={5}
+				onChange={(values: string[]) => onFilterChange(id, values)}
+				options={options}
+				placeholder='Select field'
+				searchPlaceholder='Search'
+				showSearch
+				{...dynamicFilterProps}
+			/>
+		)
+	}
+
+	return (
+		<div className={classes.container}>
+			<div className={classes.singleSelectContainer}>{renderKey()}</div>
+			<FontAwesomeIcon icon={faEquals} size='xs' />
+			<div className={classes.multiSelectContainer}>{renderValues()}</div>
+			<IconButton onClick={() => onDelete(id)} />
+		</div>
+	)
+}
+
+export default FilterUnit
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
new file mode 100644
index 00000000..1e1c6876
--- /dev/null
+++ b/src/components/Filters/Filters.tsx
@@ -0,0 +1,126 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+import { FilterPopover } from './FilterPopover'
+import { FiltersProps } from './types'
+import find from 'lodash/find'
+import { IconButton } from 'components/IconButton'
+import { Skeleton } from 'components/Skeleton'
+import { styleguide } from 'components/assets/styles'
+import { useShortcut } from '@dassana-io/web-utils'
+import { v4 as uuidV4 } from 'uuid'
+import {
+	filtersListToString,
+	formatSelectedFilters,
+	useFilters,
+	useFilterStyles
+} from './utils'
+import React, { FC, useState } from 'react'
+
+const { spacing } = styleguide
+
+export const Filters: FC<FiltersProps> = ({
+	api,
+	emitter,
+	endpoint,
+	onSelectedFiltersChange
+}: FiltersProps) => {
+	const {
+		allFilters,
+		dynamicOptions,
+		dynamicSearchVal,
+		filtersList,
+		loading,
+		onSearchWrapper,
+		pending,
+		setFiltersList
+	} = useFilters(endpoint, api, emitter)
+
+	const [visible, setVisible] = useState(false)
+
+	const classes = useFilterStyles()
+
+	const closePopover = () => setVisible(false)
+	const openPopover = () => setVisible(true)
+
+	useShortcut({
+		callback: closePopover,
+		key: 'Escape',
+		keyEvent: 'keydown'
+	})
+
+	const onVisibleChange = (visible: boolean) => setVisible(visible)
+
+	const onClickAddFilter = () =>
+		setFiltersList([...filtersList, { id: uuidV4() }])
+
+	const onDelete = (selectedId: string) => {
+		const items = filtersList.filter(item => item.id !== selectedId)
+
+		setFiltersList(items)
+	}
+
+	const onFilterChange = (
+		selectedId: string,
+		selection: string | string[]
+	) => {
+		const clonedFilters = cloneDeep(filtersList)
+
+		const selectedItem = find(
+			clonedFilters,
+			filter => filter.id === selectedId
+		)
+
+		if (selectedItem) {
+			if (typeof selection === 'string') {
+				selectedItem.selectedKey = selection
+			} else {
+				selectedItem.selectedValues = selection
+				onSelectedFiltersChange(formatSelectedFilters(clonedFilters))
+			}
+
+			setFiltersList(clonedFilters)
+		}
+	}
+
+	return (
+		<div className={classes.container} id='filters-popup-wrapper'>
+			{loading ? (
+				<div className={classes.filterControls}>
+					<Skeleton height={spacing.xl} width={spacing.xl} />
+				</div>
+			) : (
+				<>
+					<FilterPopover
+						allFilters={allFilters}
+						closePopover={closePopover}
+						dynamicOptions={dynamicOptions}
+						dynamicSearchVal={dynamicSearchVal}
+						filtersList={filtersList}
+						onClickAddFilter={onClickAddFilter}
+						onDelete={onDelete}
+						onFilterChange={onFilterChange}
+						onSearchWrapper={onSearchWrapper}
+						onVisibleChange={onVisibleChange}
+						pending={pending}
+						setFiltersList={setFiltersList}
+						visible={visible}
+					/>
+					<div className={classes.filterControls}>
+						<IconButton
+							classes={[classes.filterIcon]}
+							hasBorder
+							icon={faFilter}
+							onClick={openPopover}
+						/>
+						<div
+							className={classes.selectedFiltersText}
+							onClick={openPopover}
+						>
+							{filtersListToString(filtersList)}
+						</div>
+					</div>
+				</>
+			)}
+		</div>
+	)
+}
diff --git a/src/components/Filters/index.ts b/src/components/Filters/index.ts
new file mode 100644
index 00000000..9c59fb13
--- /dev/null
+++ b/src/components/Filters/index.ts
@@ -0,0 +1,2 @@
+export * from './types'
+export * from './Filters'
diff --git a/src/components/Filters/types.ts b/src/components/Filters/types.ts
new file mode 100644
index 00000000..229d7262
--- /dev/null
+++ b/src/components/Filters/types.ts
@@ -0,0 +1,42 @@
+import { MultiSelectProps } from 'components/Select'
+import { AxiosInstance, Emitter } from '@dassana-io/web-utils/lib/types'
+
+export interface Filter {
+	key?: string
+	value?: string
+}
+
+export interface FilterOption {
+	filterKey?: string
+	staticFilter?: boolean
+	options?: Array<string>
+}
+
+export type FilterOptions = FilterOption[]
+
+export interface FiltersListItem {
+	id: string
+	selectedKey?: string
+	selectedValues?: string[]
+}
+
+type SelectedValsFilter = Required<FiltersListItem>
+
+export type SelectedValsFilters = SelectedValsFilter[]
+
+export type FiltersList = FiltersListItem[]
+
+export interface ProcessedFilters {
+	[key: string]: FilterOption
+}
+
+export interface FiltersProps {
+	api: AxiosInstance
+	emitter: Emitter
+	endpoint: string
+	onSelectedFiltersChange: (selectedFilters: Filter[]) => void
+}
+
+export interface OnSearchWrapper {
+	(selectedFilterKey: string): MultiSelectProps['onSearch']
+}
diff --git a/src/components/Filters/utils.ts b/src/components/Filters/utils.ts
new file mode 100644
index 00000000..8cc586d2
--- /dev/null
+++ b/src/components/Filters/utils.ts
@@ -0,0 +1,329 @@
+import { createUseStyles } from 'react-jss'
+// import { handleAjaxErrors } from '@dassana-io/web-utils'
+import isEmpty from 'lodash/isEmpty'
+import { SelectOption } from 'components/Select'
+import startCase from 'lodash/startCase'
+import truncate from 'lodash/truncate'
+import { v4 as uuidV4 } from 'uuid'
+import xor from 'lodash/xor'
+import { AxiosInstance, Emitter } from '@dassana-io/web-utils'
+import {
+	Filter,
+	FilterOptions,
+	FiltersList,
+	OnSearchWrapper,
+	ProcessedFilters,
+	SelectedValsFilters
+} from './types'
+import { mockDynamicFilterOptions, mockFilterOptions } from '__mocks__'
+import { styleguide, ThemeType } from 'components/assets/styles'
+import { useEffect, useState } from 'react'
+
+const {
+	borderRadius,
+	colors: { blacks, grays },
+	flexAlignCenter,
+	font,
+	fontWeight,
+	spacing
+} = styleguide
+
+const { dark, light } = ThemeType
+
+const filterSelectedFilters: (
+	filtersList: FiltersList
+) => SelectedValsFilters = filtersList =>
+	filtersList.filter(
+		filterItem =>
+			filterItem.selectedValues && filterItem.selectedValues.length
+	) as SelectedValsFilters
+
+export const filtersListToString = (filtersList: FiltersList) => {
+	const filtersWithSelectedVals = filterSelectedFilters(filtersList)
+
+	const formattedFilters = filtersWithSelectedVals.map(
+		({ selectedKey, selectedValues = [] }) => {
+			const keyStr = startCase(selectedKey)
+
+			const valuesStr = selectedValues
+				.map(val => truncate(val, { length: 15 }))
+				.join(', ')
+
+			return `[ ${keyStr} = ${valuesStr} ]`
+		}
+	)
+
+	return formattedFilters.join(' + ')
+}
+
+const formatDynamicOptions = (dynamicOptions: DynamicOption[]) =>
+	dynamicOptions.map(
+		option => ({ text: option.name, value: option.name } as SelectOption)
+	)
+
+export const formatFilterOptions = (options: string[]) =>
+	options.map(option => ({ text: option, value: option } as SelectOption))
+
+export const formatSelectedFilters: (
+	filtersList: FiltersList
+) => Filter[] = filtersList => {
+	const filtersWithSelectedVals = filterSelectedFilters(filtersList)
+
+	const formattedFilters: Filter[] = []
+
+	filtersWithSelectedVals.forEach(filterItem => {
+		filterItem.selectedValues.forEach(val => {
+			formattedFilters.push({
+				key: filterItem.selectedKey,
+				value: val
+			})
+		})
+	})
+
+	return formattedFilters
+}
+
+// --------------------------------------
+
+const filterPalette = {
+	[dark]: {
+		container: {
+			background: blacks['darken-40'],
+			borderColor: blacks['darken-40']
+		}
+	},
+	[light]: {
+		container: {
+			background: grays.base,
+			borderColor: grays.base
+		}
+	}
+}
+
+const generateThemedFilterContainerStyles = (themeType: ThemeType) => {
+	const {
+		container: { background, borderColor }
+	} = filterPalette[themeType]
+
+	return { background, borderColor }
+}
+
+// --------------------------------------
+
+export const getFilterKeysOptions = (
+	allFilters: ProcessedFilters,
+	filtersList: FiltersList
+) => {
+	const unavailableKeysArr = filtersList.reduce((acc: string[], curr) => {
+		if (curr.selectedKey) {
+			return [...acc, curr.selectedKey]
+		} else return acc
+	}, [])
+
+	const allKeysArr = Object.keys(allFilters)
+
+	return xor(unavailableKeysArr, allKeysArr)
+}
+
+export const processFilters = (filterOptions: FilterOptions) => {
+	const processedFilters: ProcessedFilters = {}
+
+	filterOptions.forEach(filterOption => {
+		const { filterKey, staticFilter } = filterOption
+
+		processedFilters[(filterKey as unknown) as string] = {
+			...filterOption,
+			filterKey: (filterKey as unknown) as string,
+			staticFilter: (staticFilter as unknown) as boolean
+		}
+	})
+
+	return processedFilters
+}
+
+export interface DynamicOption {
+	id: string
+	name: string
+}
+
+export const useFilters = (
+	endpoint: string,
+	api: AxiosInstance,
+	emitter: Emitter
+) => {
+	const [allFilters, setAllFilters] = useState<ProcessedFilters>({})
+
+	const [dynamicOptions, setDynamicOptions] = useState<
+		SelectOption[] | undefined
+	>(undefined)
+
+	const [dynamicSearchVal, setDynamicSearchVal] = useState('')
+
+	const [filtersList, setFiltersList] = useState<FiltersList>([
+		{ id: uuidV4() }
+	])
+
+	const [loading, setLoading] = useState(true)
+	const [pending, setPending] = useState(false)
+
+	// TODO: Delete eslint-disable when API is working
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
+	const onSearchWrapper: OnSearchWrapper = selectedFilterKey => async (
+		searchVal: string
+	) => {
+		// Uncomment this to test if it's working.
+		/* 
+    // TODO: Delete and write tests
+    console.log({
+			filterKey: selectedFilterKey,
+			filters: formatSelectedFilters(filtersList),
+			search: searchVal
+    })
+    */
+
+		setDynamicSearchVal(searchVal)
+
+		setPending(true)
+
+		// try {
+		// 	const result = await api.post<DynamicOption[]>(endpoint, {
+		// 		filterKey: selectedFilterKey,
+		// 		filters: formatSelectedFilters(filtersList),
+		// 		search: searchVal,
+		// 	})
+
+		//   setDynamicOptions(result.data)
+		// } catch (error) {
+		// 	handleAjaxErrors(error, emitter)
+		// }
+
+		// TODO: Delete and uncomment above lines when API is working
+		const setAsyncTimeout = (cb: any, timeout = 0) =>
+			new Promise<void>(resolve => {
+				setTimeout(() => {
+					cb()
+					resolve()
+				}, timeout)
+			})
+
+		await setAsyncTimeout(() => {
+			setDynamicOptions(formatDynamicOptions(mockDynamicFilterOptions))
+			setPending(false)
+		}, 400)
+		// -----------------
+	}
+
+	useEffect(() => {
+		// const getFilters = async () => {
+		// 	try {
+		// 		const result = await api.get<FilterOption[]>(endpoint)
+
+		// 		return result.data
+		// 	} catch (error) {
+		// 		handleAjaxErrors(error, emitter)
+		// 	}
+		// }
+
+		// TODO: Delete and uncomment above lines when API is working
+		const getFilters = () =>
+			setAllFilters(processFilters(mockFilterOptions))
+
+		setTimeout(() => {
+			getFilters()
+		}, 800)
+		// -----------------
+	}, [api, emitter, endpoint])
+
+	useEffect(() => {
+		setLoading(isEmpty(allFilters))
+	}, [allFilters])
+
+	return {
+		allFilters,
+		dynamicOptions,
+		dynamicSearchVal,
+		filtersList,
+		loading,
+		onSearchWrapper,
+		pending,
+		setFiltersList
+	}
+}
+
+// --------------------------------------
+
+const filterItemPadding = 3 * spacing.xs
+
+export const useFilterUnitStyles = createUseStyles({
+	container: {
+		...flexAlignCenter,
+		...generateThemedFilterContainerStyles(light),
+		border: '1px solid',
+		borderRadius,
+		marginBottom: spacing.s,
+		marginRight: spacing.s,
+		padding: `${spacing.xs}px ${filterItemPadding}px ${spacing.xs}px ${spacing.xs}px`
+	},
+	multiSelectContainer: {
+		paddingLeft: filterItemPadding,
+		paddingRight: filterItemPadding
+	},
+	singleSelectContainer: {
+		paddingRight: filterItemPadding
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $container': generateThemedFilterContainerStyles(dark)
+		}
+	}
+})
+
+// --------------------------------------
+
+export const useFilterStyles = createUseStyles({
+	container: {
+		width: '100%'
+	},
+	filterControls: {
+		...flexAlignCenter,
+		paddingTop: spacing.s
+	},
+	filterIcon: {
+		...font.label,
+		marginRight: spacing.l
+	},
+	selectedFiltersText: {
+		cursor: 'pointer',
+		fontStyle: 'italic',
+		fontWeight: fontWeight.light
+	}
+})
+
+export const usePopoverStyles = createUseStyles({
+	closeButton: {
+		position: 'absolute',
+		right: 13,
+		top: 10
+	},
+	filtersList: {
+		display: 'flex',
+		flexWrap: 'wrap',
+		paddingTop: spacing.m
+	},
+	popover: {
+		position: 'relative',
+		width: `calc(100% - ${2 * spacing.l}px)`
+	},
+	popoverContent: {
+		padding: spacing.l,
+		paddingBottom: spacing.m,
+		position: 'relative'
+	},
+	popoverControls: flexAlignCenter,
+	popoverControlsChild: { marginRight: spacing.m },
+	popoverTrigger: {
+		position: 'absolute',
+		top: spacing.xs / 2
+	}
+})
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
new file mode 100644
index 00000000..e48b9241
--- /dev/null
+++ b/src/components/Tabs/Tab.tsx
@@ -0,0 +1,62 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { generateThemedActiveTabStyles } from './utils'
+import React, { FC } from 'react'
+import { styleguide, ThemeType } from 'components/assets/styles'
+
+const { dark, light } = ThemeType
+
+const { fontWeight, spacing } = styleguide
+
+const useStyles = createUseStyles({
+	activeTab: {
+		...generateThemedActiveTabStyles(light),
+		borderBottom: '1px solid'
+	},
+	tab: {
+		'&$activeTab': {
+			fontWeight: fontWeight.regular
+		},
+		cursor: 'pointer',
+		display: 'inline-block',
+		fontWeight: fontWeight.light,
+		listStyle: 'none',
+		marginRight: spacing.m,
+		padding: spacing.s
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $activeTab': generateThemedActiveTabStyles(dark)
+		}
+	}
+})
+
+interface TabProps {
+	isActiveTab: boolean
+	label: string
+	tabIndex: number
+	onClickTab: (tabIndex: number) => void
+}
+
+const Tab: FC<TabProps> = ({
+	isActiveTab,
+	label,
+	onClickTab,
+	tabIndex
+}: TabProps) => {
+	const classes = useStyles()
+
+	const tabClasses = cn({
+		[classes.tab]: true,
+		[classes.activeTab]: isActiveTab
+	})
+
+	return (
+		<li className={tabClasses} onClick={() => onClickTab(tabIndex)}>
+			{label}
+		</li>
+	)
+}
+
+export default Tab
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
new file mode 100644
index 00000000..9720947c
--- /dev/null
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -0,0 +1,60 @@
+import { action } from '@storybook/addon-actions'
+import { createUseStyles } from 'react-jss'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React, { FC, ReactNode } from 'react'
+import { TabConfig, Tabs, TabsProps } from './index'
+import { themedStyles, ThemeType } from 'components/assets/styles'
+
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+	tabPane: {
+		color: themedStyles[light].base.color,
+		textAlign: 'center'
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $tabPane': {
+				color: themedStyles[dark].base.color
+			}
+		}
+	}
+})
+
+export default {
+	argTypes: {
+		onTabChange: { defaultValue: action('onTabChange') },
+		tabConfig: { control: { disable: true } }
+	},
+	component: Tabs,
+	title: 'Tabs'
+} as Meta
+
+const Template: Story<TabsProps> = args => <Tabs {...args} />
+
+interface TabPaneProps {
+	children: ReactNode
+}
+
+const TabPane: FC<TabPaneProps> = ({ children }: TabPaneProps) => {
+	const classes = useStyles()
+
+	return <div className={classes.tabPane}>{children}</div>
+}
+
+const tabConfig: TabConfig[] = [
+	{
+		key: 'foo',
+		label: 'Foo',
+		render: () => <TabPane>Foo content text</TabPane>
+	},
+	{
+		key: 'bar',
+		label: 'Bar',
+		render: () => <TabPane>Bar content text</TabPane>
+	}
+]
+
+export const Default = Template.bind({})
+Default.args = { tabConfig }
diff --git a/src/components/Tabs/__tests__/index.test.tsx b/src/components/Tabs/__tests__/index.test.tsx
new file mode 100644
index 00000000..dae6e88f
--- /dev/null
+++ b/src/components/Tabs/__tests__/index.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { mount, shallow, ShallowWrapper } from 'enzyme'
+import { TabConfig, Tabs } from '../index'
+
+let wrapper: ShallowWrapper
+
+const mockTabConfig: TabConfig[] = [
+	{
+		key: 'mock1',
+		label: 'mock1',
+		render: () => <>Mock Tab Pane 1</>
+	},
+	{
+		key: 'mock2',
+		label: 'mock2',
+		render: () => <>Mock Tab Pane 2</>
+	}
+]
+
+beforeEach(() => {
+	wrapper = shallow(<Tabs tabConfig={mockTabConfig} />)
+})
+
+describe('Tabs', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	describe('defaultActiveIndex', () => {
+		it('does not throw an error if non-existent index is passed for defaultActiveIndex', () => {
+			expect(() => {
+				mount(
+					<Tabs defaultActiveIndex={-1} tabConfig={mockTabConfig} />
+				)
+			}).not.toThrow()
+		})
+	})
+})
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
new file mode 100644
index 00000000..cecc0506
--- /dev/null
+++ b/src/components/Tabs/index.tsx
@@ -0,0 +1,109 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { generateThemedTabsListStyles } from './utils'
+import Tab from './Tab'
+import React, { FC, ReactNode, useState } from 'react'
+import { styleguide, ThemeType } from 'components/assets/styles'
+
+const { font, spacing } = styleguide
+
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+	tabPane: {
+		...font.body,
+		padding: `${spacing.m}px ${spacing.l}px`
+	},
+	tabsList: {
+		...generateThemedTabsListStyles(light),
+		alignItems: 'flex-end',
+		borderBottom: '1px solid',
+		display: 'flex',
+		justifyContent: 'center',
+		margin: 0,
+		paddingLeft: 0
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $tabsList': generateThemedTabsListStyles(dark)
+		}
+	}
+})
+
+export interface TabConfig {
+	/**
+	 * Optional array of classes to customize the styles of Tab pane wrapper div
+	 */
+	classes?: string[]
+	key: string
+	label: string
+	render: () => ReactNode
+}
+
+export interface TabsProps {
+	classes?: string[]
+	defaultActiveIndex?: number
+	onTabChange?: (data: TabConfig) => void
+	tabConfig: TabConfig[]
+}
+
+export const Tabs: FC<TabsProps> = ({
+	classes = [],
+	defaultActiveIndex = 0,
+	onTabChange,
+	tabConfig
+}: TabsProps) => {
+	/* Fallback to index 0 if tabConfig[defaultActiveIndex] doesn't exist */
+	const [activeIndex, setActiveIndex] = useState(
+		tabConfig[defaultActiveIndex] ? defaultActiveIndex : 0
+	)
+	const [tabSwitching, setTabSwitching] = useState(false)
+
+	const tabsClasses = useStyles()
+
+	const tabPaneClasses = cn(
+		tabsClasses.tabPane,
+		tabConfig[activeIndex].classes
+	)
+
+	const onClickTab = (tabIndex: number) => {
+		if (onTabChange) onTabChange(tabConfig[tabIndex])
+
+		setTabSwitching(true)
+		setActiveIndex(tabIndex)
+
+		/**
+		 * Toggling the state of tabSwitching ensures a full unmount of the previously rendered component.
+		 * If two tabs render the same component but with different props, React does not unmount the component
+		 * which leads to unexpected behavior and potentially stale state for the newly rendered component.
+		 * This can be also be solved by adding a "key" property to the tab panes rendered with
+		 * tabConfig[activeIndex].render() but because there is no way to enforce this, this is a fallback.
+		 */
+		setTimeout(() => setTabSwitching(false))
+	}
+
+	const renderTabItems = () =>
+		tabConfig.map(({ key, label }: TabConfig, i) => (
+			<Tab
+				isActiveTab={i === activeIndex}
+				key={key}
+				label={label}
+				onClickTab={onClickTab}
+				tabIndex={i}
+			/>
+		))
+
+	if (!tabConfig.length) {
+		throw new Error('Tab config should have at least one item in the array')
+	}
+
+	return (
+		<div className={cn(classes)}>
+			<div className={tabsClasses.tabsList}>{renderTabItems()}</div>
+			<div className={tabPaneClasses}>
+				{!tabSwitching && tabConfig[activeIndex].render()}
+			</div>
+		</div>
+	)
+}
diff --git a/src/components/Tabs/utils.ts b/src/components/Tabs/utils.ts
new file mode 100644
index 00000000..5eea73b6
--- /dev/null
+++ b/src/components/Tabs/utils.ts
@@ -0,0 +1,21 @@
+import { themedStyles, themes, ThemeType } from 'components/assets/styles'
+
+export const generateThemedTabsListStyles = (themeType: ThemeType) => {
+	const {
+		base: { borderColor, color }
+	} = themedStyles[themeType]
+
+	return {
+		borderBottomColor: borderColor,
+		color
+	}
+}
+
+export const generateThemedActiveTabStyles = (themeType: ThemeType) => {
+	const { active } = themes[themeType].state
+
+	return {
+		borderBottomColor: active,
+		color: active
+	}
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 3e04f09a..90b9fc14 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './Button'
 export * from './Checkbox'
 export * from './ChipInput'
 export * from './ColoredDot'
+export * from './Filters'
 export * from './Form'
 export * from './Input'
 export * from './Icon'
@@ -22,6 +23,7 @@ export * from './ShortcutMicrocopy'
 export * from './Skeleton'
 export * from './SVGImage'
 export * from './Table'
+export * from './Tabs'
 export * from './Tag'
 export * from './TimeInput'
 export * from './Timezone'